diff --git a/packages/design-system/ui/src/components/calendar/calendar.tsx b/packages/design-system/ui/src/components/calendar/calendar.tsx index bd5ccd7200..57c78ecafc 100644 --- a/packages/design-system/ui/src/components/calendar/calendar.tsx +++ b/packages/design-system/ui/src/components/calendar/calendar.tsx @@ -21,11 +21,29 @@ import { CalendarButton } from "./calendar-button" import { CalendarGrid } from "./calendar-grid" interface CalendarValueProps { + /** + * The currently selected date. + */ value?: Date | null + /** + * The date that is selected when the calendar first mounts (uncontrolled). + */ defaultValue?: Date | null + /** + * A function that is triggered when the selected date changes. + */ onChange?: (value: Date | null) => void + /** + * A function that determines whether a date is unavailable for selection. + */ isDateUnavailable?: (date: Date) => boolean + /** + * The minimum date that can be selected. + */ minValue?: Date + /** + * The maximum date that can be selected. + */ maxValue?: Date } @@ -36,6 +54,8 @@ interface CalendarProps /** * Calendar component used to select a date. * Its props are based on [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#calendar-1). + * + * @excludeExternal */ const Calendar = (props: CalendarProps) => { const [value, setValue] = React.useState( diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.tsx index 64dfe14f4a..50b5667d3f 100644 --- a/packages/design-system/ui/src/components/currency-input/currency-input.tsx +++ b/packages/design-system/ui/src/components/currency-input/currency-input.tsx @@ -54,7 +54,18 @@ const CurrencyInput = React.forwardRef( * The currency code to show in the input. */ code, + /** + * Whether the input is disabled. + * + * @keep + * @defaultValue false + */ disabled, + /** + * A function that is triggered when the input is invalid. + * + * @keep + */ onInvalid, className, ...props diff --git a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx index f451d88294..f4c377ffd6 100644 --- a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx @@ -93,8 +93,19 @@ const Content = React.forwardRef< ( { className, + /** + * The space in pixels between the dropdown menu and its trigger element. + */ sideOffset = 8, + /** + * The distance in pixels from the boundary edges where collision detection should occur. + */ collisionPadding = 8, + /** + * The alignment of the dropdown menu relative to its trigger element. + * + * @defaultValue center + */ align = "center", ...props }, diff --git a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx index dc68970d10..2eb22da60e 100644 --- a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx +++ b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx @@ -14,7 +14,6 @@ import { clx } from "@/utils/clx" /** * This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves. * - * @excludeExternal */ const ProgressTabsRoot = (props: RadixTabs.TabsProps) => { return diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.tsx index e6c48ae40c..b8fa215fe9 100644 --- a/packages/design-system/ui/src/components/radio-group/radio-group.tsx +++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx @@ -79,10 +79,29 @@ interface ChoiceBoxProps description: string } +/** + * This component is based on the [Radix UI Radio Group Item](https://www.radix-ui.com/primitives/docs/components/radio-group#item) primitives. + */ const ChoiceBox = React.forwardRef< React.ElementRef, ChoiceBoxProps ->(({ className, id, label, description, ...props }, ref) => { +>(({ + className, + id, + /** + * The label for the radio button. + */ + label, + /** + * The description for the radio button. + */ + description, + /** + * The value of the radio button. + */ + value, + ...props +}: ChoiceBoxProps, ref) => { const generatedId = React.useId() if (!id) { @@ -102,6 +121,7 @@ const ChoiceBox = React.forwardRef< className )} {...props} + value={value} id={id} aria-describedby={descriptionId} > diff --git a/packages/design-system/ui/src/components/tooltip/tooltip.tsx b/packages/design-system/ui/src/components/tooltip/tooltip.tsx index 4a95d4e9a4..3411a9e696 100644 --- a/packages/design-system/ui/src/components/tooltip/tooltip.tsx +++ b/packages/design-system/ui/src/components/tooltip/tooltip.tsx @@ -23,19 +23,60 @@ interface TooltipProps * @excludeExternal */ const Tooltip = ({ + /** + * The element to trigger the tooltip. + * + * @keep + */ children, + /** + * The content to display in the tooltip. + */ content, + /** + * Whether the tooltip is currently open. + * + * @keep + */ open, + /** + * Whether the tooltip is open by default. + * + * @keep + */ defaultOpen, + /** + * A function that is called when the tooltip's open state changes. + * + * @keep + */ onOpenChange, + /** + * The time in milliseconds to delay the tooltip's appearance. + * + * @keep + */ delayDuration, /** * The maximum width of the tooltip. */ maxWidth = 220, className, + /** + * The side to position the tooltip. + * + * @defaultValue top + */ side, + /** + * The distance in pixels between the tooltip and its trigger. + * + * @keep + */ sideOffset = 8, + /** + * A function that is triggered when the tooltip is clicked. + */ onClick, ...props }: TooltipProps) => {