@utilitywarehouse/hearth-react 0.29.7 → 0.29.9

package/public/llms/components/combobox.md

@@ -304,59 +304,52 @@ This component is based on the [Base UI Combobox](https://base-ui.com/react/comp
 
 - Margin
 
-| Prop                   | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `triggerOnlyOnType`    | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `noOptionsFoundText`   | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `statusText`           | `string`                                                                                                                                                                                                   | —       | Displays a status message whose content changes are announced politely to screen readers. Useful for conveying the status of an asynchronously loaded list.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `loading`              | `boolean`                                                                                                                                                                                                  | —       | Displays a loading indicator in the input field to show that options are being fetched or updated asynchronously.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `autoComplete`         | `string`                                                                                                                                                                                                   | —       | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `autoHighlight`        | `boolean`                                                                                                                                                                                                  | `false` | Whether the first matching item is highlighted automatically while filtering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `itemToStringLabel`    | `((itemValue: Value) => string)`                                                                                                                                                                           | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                            |
-| `itemToStringValue`    | `((itemValue: Value) => string)`                                                                                                                                                                           | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                                 |
-| `isItemEqualToValue`   | `((itemValue: Value, value: Value) => boolean)`                                                                                                                                                            | —       | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.                                                                                                                                                                                                                                                                                                                                                                                            |
-| `onOpenChange`         | `((open: boolean, eventDetails: ChangeEventDetails) => void)`                                                                                                                                              | —       | Event handler called when the popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `onInputValueChange`   | `((inputValue: string, eventDetails: ChangeEventDetails) => void)`                                                                                                                                         | —       | Event handler called when the input value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `onItemHighlighted`    | `((highlightedValue: Value \| undefined, eventDetails: HighlightEventDetails) => void)`                                                                                                                    | —       | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed. The `reason` can be: - `'keyboard'`: the highlight changed due to keyboard navigation. - `'pointer'`: the highlight changed due to pointer hovering. - `'none'`: the highlight changed programmatically.                                                                                                                                                                     |
-| `name`                 | `string`                                                                                                                                                                                                   | —       | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `form`                 | `string`                                                                                                                                                                                                   | —       | Identifies the form that owns the internal input. Useful when the combobox is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `id`                   | `string`                                                                                                                                                                                                   | —       | The id of the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `required`             | `boolean`                                                                                                                                                                                                  | `false` | Whether the user must choose a value before submitting a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `readOnly`             | `boolean`                                                                                                                                                                                                  | `false` | Whether the user should be unable to choose a different option from the popup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `disabled`             | `boolean`                                                                                                                                                                                                  | `false` | Whether the component should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `defaultOpen`          | `boolean`                                                                                                                                                                                                  | `false` | Whether the popup is initially open. To render a controlled popup, use the `open` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `open`                 | `boolean`                                                                                                                                                                                                  | —       | Whether the popup is currently open. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `onOpenChangeComplete` | `((open: boolean) => void)`                                                                                                                                                                                | —       | Event handler called after any animations complete when the popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `loopFocus`            | `boolean`                                                                                                                                                                                                  | `true`  | Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input. The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>. |
-| `inputValue`           | `string \| number \| readonly string[]`                                                                                                                                                                    | —       | The input value of the combobox. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `defaultInputValue`    | `string \| number \| readonly string[]`                                                                                                                                                                    | —       | The uncontrolled input value when initially rendered. To render a controlled input, use the `inputValue` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `inputRef`             | `Ref<HTMLInputElement>`                                                                                                                                                                                    | —       | A ref to the hidden input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `grid`                 | `boolean`                                                                                                                                                                                                  | `false` | Whether list items are presented in a grid layout. When enabled, arrow keys navigate across rows and columns inferred from DOM rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `items`                | `readonly any[] \| readonly Group<any>[]`                                                                                                                                                                  | —       | The items to be displayed in the list. Can be either a flat array of items or an array of groups with items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `filteredItems`        | `readonly any[] \| readonly Group<any>[]`                                                                                                                                                                  | —       | Filtered items to display in the list. When provided, the list will use these items instead of filtering the `items` prop internally. Use when you want to control filtering logic externally with the `useFilter()` hook.                                                                                                                                                                                                                                                                                                                                                                                |
-| `filter`               | `((itemValue: Value, query: string, itemToString?: ((itemValue: Value) => string) \| undefined) => boolean) \| null`                                                                                       | —       | Filter function used to match items vs input query.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `virtualized`          | `boolean`                                                                                                                                                                                                  | `false` | Whether the items are being externally virtualized.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `inline`               | `boolean`                                                                                                                                                                                                  | `false` | Whether the list is rendered inline without using the popup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `modal`                | `boolean`                                                                                                                                                                                                  | `false` | Determines if the popup enters a modal state when open. - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed.                                                                                                                                                                                                                                                                                                                               |
-| `limit`                | `number`                                                                                                                                                                                                   | `-1`    | The maximum number of items to display in the list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `locale`               | `LocalesArgument`                                                                                                                                                                                          | —       | The locale to use for string comparison. Defaults to the user's runtime locale.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `multiple`             | `boolean`                                                                                                                                                                                                  | `false` | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `defaultValue`         | `ComboboxValueType<Value, Multiple> \| null`                                                                                                                                                               | —       | The uncontrolled selected value of the combobox when it's initially rendered. To render a controlled combobox, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `value`                | `ComboboxValueType<Value, Multiple> \| null`                                                                                                                                                               | —       | The selected value of the combobox. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `onValueChange`        | `((value: ComboboxValueType<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void)`                                                                        | —       | Event handler called when the selected value of the combobox changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `labelId`              | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `helperTextId`         | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `validationTextId`     | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `label`                | `string`                                                                                                                                                                                                   | —       | The label for the form field, describing its purpose.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `hideLabel`            | `boolean`                                                                                                                                                                                                  | —       | Visually hide the label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `labelVariant`         | `"body" \| "heading"`                                                                                                                                                                                      | —       | Change the label variant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `helperText`           | `string`                                                                                                                                                                                                   | —       | Optional helper text to provide additional context or instructions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `validationText`       | `string`                                                                                                                                                                                                   | —       | Text to display when the `validationStatus` is set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `validationStatus`     | `"valid" \| "invalid"`                                                                                                                                                                                     | —       | Indicates the validation status.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `margin`               | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginTop`            | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginRight`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginBottom`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginLeft`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginX`              | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `marginY`              | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Prop                   | Type                                                                                                                                | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `triggerOnlyOnType`    | `boolean`                                                                                                                           | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `noOptionsFoundText`   | `string`                                                                                                                            | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `statusText`           | `string`                                                                                                                            | —       | Displays a status message whose content changes are announced politely to screen readers. Useful for conveying the status of an asynchronously loaded list.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `loading`              | `boolean`                                                                                                                           | —       | Displays a loading indicator in the input field to show that options are being fetched or updated asynchronously.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `autoComplete`         | `string`                                                                                                                            | —       | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `autoHighlight`        | `boolean`                                                                                                                           | `false` | Whether the first matching item is highlighted automatically while filtering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `itemToStringLabel`    | `((itemValue: Value) => string)`                                                                                                    | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                            |
+| `itemToStringValue`    | `((itemValue: Value) => string)`                                                                                                    | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                                 |
+| `isItemEqualToValue`   | `((itemValue: Value, value: Value) => boolean)`                                                                                     | —       | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.                                                                                                                                                                                                                                                                                                                                                                                            |
+| `onOpenChange`         | `((open: boolean, eventDetails: ChangeEventDetails) => void)`                                                                       | —       | Event handler called when the popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `onInputValueChange`   | `((inputValue: string, eventDetails: ChangeEventDetails) => void)`                                                                  | —       | Event handler called when the input value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `onItemHighlighted`    | `((highlightedValue: Value \| undefined, eventDetails: HighlightEventDetails) => void)`                                             | —       | Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed. The `reason` can be: - `'keyboard'`: the highlight changed due to keyboard navigation. - `'pointer'`: the highlight changed due to pointer hovering. - `'none'`: the highlight changed programmatically.                                                                                                                                                                     |
+| `name`                 | `string`                                                                                                                            | —       | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `form`                 | `string`                                                                                                                            | —       | Identifies the form that owns the internal input. Useful when the combobox is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `id`                   | `string`                                                                                                                            | —       | The id of the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `required`             | `boolean`                                                                                                                           | `false` | Whether the user must choose a value before submitting a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `readOnly`             | `boolean`                                                                                                                           | `false` | Whether the user should be unable to choose a different option from the popup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `disabled`             | `boolean`                                                                                                                           | `false` | Whether the component should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `defaultOpen`          | `boolean`                                                                                                                           | `false` | Whether the popup is initially open. To render a controlled popup, use the `open` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `open`                 | `boolean`                                                                                                                           | —       | Whether the popup is currently open. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `onOpenChangeComplete` | `((open: boolean) => void)`                                                                                                         | —       | Event handler called after any animations complete when the popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `loopFocus`            | `boolean`                                                                                                                           | `true`  | Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input. The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>. |
+| `inputValue`           | `string \| number \| readonly string[]`                                                                                             | —       | The input value of the combobox. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `defaultInputValue`    | `string \| number \| readonly string[]`                                                                                             | —       | The uncontrolled input value when initially rendered. To render a controlled input, use the `inputValue` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `inputRef`             | `Ref<HTMLInputElement>`                                                                                                             | —       | A ref to the hidden input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `grid`                 | `boolean`                                                                                                                           | `false` | Whether list items are presented in a grid layout. When enabled, arrow keys navigate across rows and columns inferred from DOM rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `items`                | `readonly any[] \| readonly Group<any>[]`                                                                                           | —       | The items to be displayed in the list. Can be either a flat array of items or an array of groups with items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `filteredItems`        | `readonly any[] \| readonly Group<any>[]`                                                                                           | —       | Filtered items to display in the list. When provided, the list will use these items instead of filtering the `items` prop internally. Use when you want to control filtering logic externally with the `useFilter()` hook.                                                                                                                                                                                                                                                                                                                                                                                |
+| `filter`               | `((itemValue: Value, query: string, itemToString?: ((itemValue: Value) => string) \| undefined) => boolean) \| null`                | —       | Filter function used to match items vs input query.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `virtualized`          | `boolean`                                                                                                                           | `false` | Whether the items are being externally virtualized.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `inline`               | `boolean`                                                                                                                           | `false` | Whether the list is rendered inline without using the popup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `modal`                | `boolean`                                                                                                                           | `false` | Determines if the popup enters a modal state when open. - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed.                                                                                                                                                                                                                                                                                                                               |
+| `limit`                | `number`                                                                                                                            | `-1`    | The maximum number of items to display in the list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `locale`               | `LocalesArgument`                                                                                                                   | —       | The locale to use for string comparison. Defaults to the user's runtime locale.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `multiple`             | `boolean`                                                                                                                           | `false` | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `defaultValue`         | `ComboboxValueType<Value, Multiple> \| null`                                                                                        | —       | The uncontrolled selected value of the combobox when it's initially rendered. To render a controlled combobox, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `value`                | `ComboboxValueType<Value, Multiple> \| null`                                                                                        | —       | The selected value of the combobox. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `onValueChange`        | `((value: ComboboxValueType<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void)` | —       | Event handler called when the selected value of the combobox changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `labelId`              | `string`                                                                                                                            | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `helperTextId`         | `string`                                                                                                                            | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `validationTextId`     | `string`                                                                                                                            | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `label`                | `string`                                                                                                                            | —       | The label for the form field, describing its purpose.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `hideLabel`            | `boolean`                                                                                                                           | —       | Visually hide the label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `labelVariant`         | `"body" \| "heading"`                                                                                                               | —       | Change the label variant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `helperText`           | `string`                                                                                                                            | —       | Optional helper text to provide additional context or instructions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `validationText`       | `string`                                                                                                                            | —       | Text to display when the `validationStatus` is set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `validationStatus`     | `"valid" \| "invalid"`                                                                                                              | —       | Indicates the validation status.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

package/public/llms/components/container.md

@@ -99,64 +99,3 @@ This component is based on the `div` element and supports the following common p
 - Z-Index
 - Overflow
 - Order
-
-| Prop                          | Type                                                                                                                                                                                                       | Default  | Description                                                                                                                                            |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`                     | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                         | —        | Set responsive spacing between child elements.                                                                                                         |
-| `asChild`                     | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `display`                     | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —        |                                                                                                                                                        |
-| `direction`                   | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`                                                                                                                                       | —        |                                                                                                                                                        |
-| `wrap`                        | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | —        |                                                                                                                                                        |
-| `alignContent`                | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —        |                                                                                                                                                        |
-| `alignItems`                  | `Responsive<"center" \| "start" \| "end" \| "baseline" \| "stretch">`                                                                                                                                      | —        |                                                                                                                                                        |
-| `alignSelf`                   | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —        |                                                                                                                                                        |
-| `backgroundColor`             | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})``                                                                                                                                              | —        |                                                                                                                                                        |
-| `borderRadius`                | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">`                                                                                                                        | —        |                                                                                                                                                        |
-| `borderRadiusTopLeftNone`     | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusTopRightNone`    | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusBottomLeftNone`  | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusBottomRightNone` | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusTopNone`         | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusRightNone`       | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusBottomNone`      | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `borderRadiusLeftNone`        | `boolean`                                                                                                                                                                                                  | —        |                                                                                                                                                        |
-| `flex`                        | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `flexBasis`                   | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `flexShrink`                  | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `flexGrow`                    | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `gap`                         | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `rowGap`                      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `columnGap`                   | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `justifyContent`              | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —        | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
-| `margin`                      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginTop`                   | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginRight`                 | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginBottom`                | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginLeft`                  | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginX`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `marginY`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —        |                                                                                                                                                        |
-| `order`                       | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `overflow`                    | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —        |                                                                                                                                                        |
-| `overflowX`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —        |                                                                                                                                                        |
-| `overflowY`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —        |                                                                                                                                                        |
-| `padding`                     | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingTop`                  | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingRight`                | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingBottom`               | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingLeft`                 | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingX`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `paddingY`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —        |                                                                                                                                                        |
-| `position`                    | `Responsive<"static" \| "relative" \| "absolute" \| "fixed" \| "sticky">`                                                                                                                                  | —        |                                                                                                                                                        |
-| `inset`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —        |                                                                                                                                                        |
-| `top`                         | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —        |                                                                                                                                                        |
-| `right`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —        |                                                                                                                                                        |
-| `bottom`                      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —        |                                                                                                                                                        |
-| `left`                        | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —        |                                                                                                                                                        |
-| `width`                       | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `maxWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `minWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `height`                      | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `maxHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `minHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `zIndex`                      | `Responsive<string>`                                                                                                                                                                                       | —        |                                                                                                                                                        |
-| `align`                       | `Responsive<"center" \| "start" \| "end">`                                                                                                                                                                 | `center` |                                                                                                                                                        |

package/public/llms/components/currency-input.md

@@ -63,23 +63,16 @@ This component is based on the `TextInput` component and supports the following
 
 - Margin
 
-| Prop                     | Type                                                                                                                                                                                                       | Default | Description                                                                 |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `label`                  | `string`                                                                                                                                                                                                   | —       | The label for the form field, describing its purpose.                       |
-| `defaultValue`           | `string \| number`                                                                                                                                                                                         | —       | The initial value of the input when rendered.                               |
-| `value`                  | `string \| number`                                                                                                                                                                                         | —       | The controlled value of the input. Must be used with an `onChange` handler. |
-| `labelId`                | `string`                                                                                                                                                                                                   | —       |                                                                             |
-| `helperTextId`           | `string`                                                                                                                                                                                                   | —       |                                                                             |
-| `validationTextId`       | `string`                                                                                                                                                                                                   | —       |                                                                             |
-| `labelVariant`           | `"body" \| "heading"`                                                                                                                                                                                      | —       | Change the label variant                                                    |
-| `helperText`             | `string`                                                                                                                                                                                                   | —       | Optional helper text to provide additional context or instructions.         |
-| `validationText`         | `string`                                                                                                                                                                                                   | —       | Text to display when the `validationStatus` is set.                         |
-| `validationStatus`       | `"valid" \| "invalid"`                                                                                                                                                                                     | —       | Indicates the validation status.                                            |
-| `margin`                 | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginTop`              | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginRight`            | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginBottom`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginLeft`             | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginX`                | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `marginY`                | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
-| `disableGroupSeparators` | `boolean`                                                                                                                                                                                                  | —       |                                                                             |
+| Prop                     | Type                   | Default | Description                                                                 |
+| ------------------------ | ---------------------- | ------- | --------------------------------------------------------------------------- |
+| `label`                  | `string`               | —       | The label for the form field, describing its purpose.                       |
+| `defaultValue`           | `string \| number`     | —       | The initial value of the input when rendered.                               |
+| `value`                  | `string \| number`     | —       | The controlled value of the input. Must be used with an `onChange` handler. |
+| `labelId`                | `string`               | —       |                                                                             |
+| `helperTextId`           | `string`               | —       |                                                                             |
+| `validationTextId`       | `string`               | —       |                                                                             |
+| `labelVariant`           | `"body" \| "heading"`  | —       | Change the label variant                                                    |
+| `helperText`             | `string`               | —       | Optional helper text to provide additional context or instructions.         |
+| `validationText`         | `string`               | —       | Text to display when the `validationStatus` is set.                         |
+| `validationStatus`       | `"valid" \| "invalid"` | —       | Indicates the validation status.                                            |
+| `disableGroupSeparators` | `boolean`              | —       |                                                                             |

package/public/llms/components/date-input.md

@@ -51,40 +51,33 @@ This component is based on the `fieldset` element and supports the following com
 
 - Margin
 
-| Prop                | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                                                                                                                                           |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `hideDay`           | `boolean`                                                                                                                                                                                                  | `false` | Whether the day segment is visible.                                                                                                                                                                                                                                   |
-| `hideMonth`         | `boolean`                                                                                                                                                                                                  | `false` | Whether the month segment is visible.                                                                                                                                                                                                                                 |
-| `hideYear`          | `boolean`                                                                                                                                                                                                  | `false` | Whether the year segment is visible.                                                                                                                                                                                                                                  |
-| `dayPlaceholder`    | `string`                                                                                                                                                                                                   | —       | Placeholder text for the day segment.                                                                                                                                                                                                                                 |
-| `monthPlaceholder`  | `string`                                                                                                                                                                                                   | —       | Placeholder text for the month segment.                                                                                                                                                                                                                               |
-| `yearPlaceholder`   | `string`                                                                                                                                                                                                   | —       | Placeholder text for the year segment.                                                                                                                                                                                                                                |
-| `dayValue`          | `string`                                                                                                                                                                                                   | —       | The controlled value for the day segment. Must be used with an `onDayChange` handler.                                                                                                                                                                                 |
-| `monthValue`        | `string`                                                                                                                                                                                                   | —       | The controlled value for the month segment. Must be used with an `onMonthChange` handler.                                                                                                                                                                             |
-| `yearValue`         | `string`                                                                                                                                                                                                   | —       | The controlled value for the year segment. Must be used with an `onYearChange` handler.                                                                                                                                                                               |
-| `defaultDayValue`   | `string`                                                                                                                                                                                                   | —       | The initial value for the day segment when rendered (uncontrolled).                                                                                                                                                                                                   |
-| `defaultMonthValue` | `string`                                                                                                                                                                                                   | —       | The initial value for the month segment when rendered (uncontrolled).                                                                                                                                                                                                 |
-| `defaultYearValue`  | `string`                                                                                                                                                                                                   | —       | The initial value for the year segment when rendered (uncontrolled).                                                                                                                                                                                                  |
-| `onDayChange`       | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                                                     | —       | Callback fired when the day value changes.                                                                                                                                                                                                                            |
-| `onMonthChange`     | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                                                     | —       | Callback fired when the month value changes.                                                                                                                                                                                                                          |
-| `onYearChange`      | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                                                     | —       | Callback fired when the year value changes.                                                                                                                                                                                                                           |
-| `onDayFocus`        | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `onMonthFocus`      | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `onYearFocus`       | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `onDayBlur`         | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `onMonthBlur`       | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `onYearBlur`        | `FocusEventHandler<HTMLInputElement>`                                                                                                                                                                      | —       |                                                                                                                                                                                                                                                                       |
-| `label`             | `ReactNode`                                                                                                                                                                                                | —       | The label for the formfield group. This should contain the question being answered by the formfield group. If you don't include a label you need to ensure you use the `aria-label` or `aria-labelledby` prop to properly associate a label with the formfield group. |
-| `labelVariant`      | `"body" \| "heading"`                                                                                                                                                                                      | —       | Set the label variant                                                                                                                                                                                                                                                 |
-| `helperText`        | `ReactNode`                                                                                                                                                                                                | —       | Helper text for the formfield group. Provides a hint such as specific requirements for what to choose. When displayed, child components should not display their own `helperText`.                                                                                    |
-| `validationText`    | `ReactNode`                                                                                                                                                                                                | —       |                                                                                                                                                                                                                                                                       |
-| `validationStatus`  | `"valid" \| "invalid"`                                                                                                                                                                                     | —       |                                                                                                                                                                                                                                                                       |
-| `margin`            | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginTop`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginRight`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginBottom`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginLeft`        | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginX`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `marginY`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                                                                                                                                                                                       |
-| `type`              | `"number" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "password"`                                                                                                                                | —       |                                                                                                                                                                                                                                                                       |
-| `value`             | `string \| number`                                                                                                                                                                                         | —       | The controlled value of the input. Must be used with an `onChange` handler.                                                                                                                                                                                           |
+| Prop                | Type                                                                        | Default | Description                                                                                                                                                                                                                                                           |
+| ------------------- | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hideDay`           | `boolean`                                                                   | `false` | Whether the day segment is visible.                                                                                                                                                                                                                                   |
+| `hideMonth`         | `boolean`                                                                   | `false` | Whether the month segment is visible.                                                                                                                                                                                                                                 |
+| `hideYear`          | `boolean`                                                                   | `false` | Whether the year segment is visible.                                                                                                                                                                                                                                  |
+| `dayPlaceholder`    | `string`                                                                    | —       | Placeholder text for the day segment.                                                                                                                                                                                                                                 |
+| `monthPlaceholder`  | `string`                                                                    | —       | Placeholder text for the month segment.                                                                                                                                                                                                                               |
+| `yearPlaceholder`   | `string`                                                                    | —       | Placeholder text for the year segment.                                                                                                                                                                                                                                |
+| `dayValue`          | `string`                                                                    | —       | The controlled value for the day segment. Must be used with an `onDayChange` handler.                                                                                                                                                                                 |
+| `monthValue`        | `string`                                                                    | —       | The controlled value for the month segment. Must be used with an `onMonthChange` handler.                                                                                                                                                                             |
+| `yearValue`         | `string`                                                                    | —       | The controlled value for the year segment. Must be used with an `onYearChange` handler.                                                                                                                                                                               |
+| `defaultDayValue`   | `string`                                                                    | —       | The initial value for the day segment when rendered (uncontrolled).                                                                                                                                                                                                   |
+| `defaultMonthValue` | `string`                                                                    | —       | The initial value for the month segment when rendered (uncontrolled).                                                                                                                                                                                                 |
+| `defaultYearValue`  | `string`                                                                    | —       | The initial value for the year segment when rendered (uncontrolled).                                                                                                                                                                                                  |
+| `onDayChange`       | `ChangeEventHandler<HTMLInputElement>`                                      | —       | Callback fired when the day value changes.                                                                                                                                                                                                                            |
+| `onMonthChange`     | `ChangeEventHandler<HTMLInputElement>`                                      | —       | Callback fired when the month value changes.                                                                                                                                                                                                                          |
+| `onYearChange`      | `ChangeEventHandler<HTMLInputElement>`                                      | —       | Callback fired when the year value changes.                                                                                                                                                                                                                           |
+| `onDayFocus`        | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `onMonthFocus`      | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `onYearFocus`       | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `onDayBlur`         | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `onMonthBlur`       | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `onYearBlur`        | `FocusEventHandler<HTMLInputElement>`                                       | —       |                                                                                                                                                                                                                                                                       |
+| `label`             | `ReactNode`                                                                 | —       | The label for the formfield group. This should contain the question being answered by the formfield group. If you don't include a label you need to ensure you use the `aria-label` or `aria-labelledby` prop to properly associate a label with the formfield group. |
+| `labelVariant`      | `"body" \| "heading"`                                                       | —       | Set the label variant                                                                                                                                                                                                                                                 |
+| `helperText`        | `ReactNode`                                                                 | —       | Helper text for the formfield group. Provides a hint such as specific requirements for what to choose. When displayed, child components should not display their own `helperText`.                                                                                    |
+| `validationText`    | `ReactNode`                                                                 | —       |                                                                                                                                                                                                                                                                       |
+| `validationStatus`  | `"valid" \| "invalid"`                                                      | —       |                                                                                                                                                                                                                                                                       |
+| `type`              | `"number" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "password"` | —       |                                                                                                                                                                                                                                                                       |
+| `value`             | `string \| number`                                                          | —       | The controlled value of the input. Must be used with an `onChange` handler.                                                                                                                                                                                           |