chore(ui): TSDoc updates to UI package (#13246)

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<CalendarDate  | null | undefined>(

packages/design-system/ui/src/components/currency-input/currency-input.tsx

@@ -54,7 +54,18 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
        * 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

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
     },

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 <RadixTabs.Root {...props} />

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<typeof RadixRadioGroup.Item>,
   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}
     >

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) => {