@utilitywarehouse/hearth-react 0.29.8 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +7 -7
  5. package/public/llms/components/accordion.md +15 -22
  6. package/public/llms/components/alert.md +6 -25
  7. package/public/llms/components/avatar.md +6 -13
  8. package/public/llms/components/badge.md +6 -14
  9. package/public/llms/components/body-text.md +8 -20
  10. package/public/llms/components/box.md +5 -78
  11. package/public/llms/components/button.md +9 -16
  12. package/public/llms/components/card-accordion.md +7 -25
  13. package/public/llms/components/card.md +4 -11
  14. package/public/llms/components/checkbox-group.md +16 -23
  15. package/public/llms/components/checkbox-tile.md +13 -20
  16. package/public/llms/components/checkbox.md +13 -20
  17. package/public/llms/components/combobox.md +49 -56
  18. package/public/llms/components/container.md +0 -61
  19. package/public/llms/components/currency-input.md +13 -20
  20. package/public/llms/components/date-input.md +30 -37
  21. package/public/llms/components/date-picker.md +0 -7
  22. package/public/llms/components/description-list.md +9 -19
  23. package/public/llms/components/detail-text.md +7 -18
  24. package/public/llms/components/divider.md +4 -11
  25. package/public/llms/components/em.md +4 -15
  26. package/public/llms/components/expandable-card.md +17 -31
  27. package/public/llms/components/grid.md +15 -97
  28. package/public/llms/components/heading.md +6 -17
  29. package/public/llms/components/helper-text.md +4 -13
  30. package/public/llms/components/highlight-banner.md +6 -13
  31. package/public/llms/components/icon-button.md +9 -16
  32. package/public/llms/components/icon-container.md +6 -18
  33. package/public/llms/components/inline-link.md +5 -13
  34. package/public/llms/components/label.md +7 -15
  35. package/public/llms/components/link.md +5 -13
  36. package/public/llms/components/list.md +16 -29
  37. package/public/llms/components/pagination.md +8 -15
  38. package/public/llms/components/password-input.md +12 -19
  39. package/public/llms/components/progress-bar.md +12 -19
  40. package/public/llms/components/progress-stepper.md +4 -11
  41. package/public/llms/components/radio-group.md +27 -45
  42. package/public/llms/components/search-input.md +13 -20
  43. package/public/llms/components/section-header.md +9 -16
  44. package/public/llms/components/select.md +20 -27
  45. package/public/llms/components/skeleton.md +7 -27
  46. package/public/llms/components/spinner.md +4 -12
  47. package/public/llms/components/strong.md +4 -15
  48. package/public/llms/components/switch.md +9 -16
  49. package/public/llms/components/table.md +4 -11
  50. package/public/llms/components/text-area.md +14 -21
  51. package/public/llms/components/text-input.md +14 -21
  52. package/public/llms/components/toggle-button-card.md +3 -88
  53. package/public/llms/components/validation-text.md +4 -13
  54. package/public/llms/components/verification-input.md +26 -33
  55. package/public/llms/docs/common-props/align-self.md +3 -78
  56. package/public/llms/docs/common-props/border.md +30 -234
  57. package/public/llms/docs/common-props/colour.md +6 -156
  58. package/public/llms/docs/common-props/flex-items.md +6 -78
  59. package/public/llms/docs/common-props/gap.md +5 -87
  60. package/public/llms/docs/common-props/grid-items.md +10 -78
  61. package/public/llms/docs/common-props/margin.md +9 -78
  62. package/public/llms/docs/common-props/opacity.md +3 -78
  63. package/public/llms/docs/common-props/order.md +0 -79
  64. package/public/llms/docs/common-props/overflow.md +5 -78
  65. package/public/llms/docs/common-props/padding.md +9 -78
  66. package/public/llms/docs/common-props/position.md +8 -78
  67. package/public/llms/docs/common-props/size.md +8 -78
  68. package/public/llms/docs/common-props/spacing.md +3 -87
  69. package/public/llms/docs/common-props/text.md +6 -20
  70. package/public/llms/docs/common-props/z-index.md +3 -78
  71. package/public/llms/docs/getting-started.md +1 -1
  72. package/public/llms/docs/responsive-design/breakpoints.md +2 -2
  73. package/styles.css +2 -2
package/public/llms/components/combobox.md CHANGED
@@ -304,59 +304,52 @@ This component is based on the [Base UI Combobox](https://base-ui.com/react/comp
304
304
 
305
305
  - Margin
306
306
 
307
- | Prop | Type | Default | Description |
308
- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
309
- | `triggerOnlyOnType` | `boolean` | — | |
310
- | `noOptionsFoundText` | `string` | — | |
311
- | `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. |
312
- | `loading` | `boolean` | — | Displays a loading indicator in the input field to show that options are being fetched or updated asynchronously. |
313
- | `autoComplete` | `string` | — | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete |
314
- | `autoHighlight` | `boolean` | `false` | Whether the first matching item is highlighted automatically while filtering. |
315
- | `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. |
316
- | `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. |
317
- | `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. |
318
- | `onOpenChange` | `((open: boolean, eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the popup is opened or closed. |
319
- | `onInputValueChange` | `((inputValue: string, eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the input value changes. |
320
- | `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. |
321
- | `name` | `string` | — | Identifies the field when a form is submitted. |
322
- | `form` | `string` | — | Identifies the form that owns the internal input. Useful when the combobox is rendered outside the form. |
323
- | `id` | `string` | — | The id of the component. |
324
- | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. |
325
- | `readOnly` | `boolean` | `false` | Whether the user should be unable to choose a different option from the popup. |
326
- | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. |
327
- | `defaultOpen` | `boolean` | `false` | Whether the popup is initially open. To render a controlled popup, use the `open` prop instead. |
328
- | `open` | `boolean` | — | Whether the popup is currently open. Use when controlled. |
329
- | `onOpenChangeComplete` | `((open: boolean) => void)` | — | Event handler called after any animations complete when the popup is opened or closed. |
330
- | `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>. |
331
- | `inputValue` | `string \| number \| readonly string[]` | — | The input value of the combobox. Use when controlled. |
332
- | `defaultInputValue` | `string \| number \| readonly string[]` | — | The uncontrolled input value when initially rendered. To render a controlled input, use the `inputValue` prop instead. |
333
- | `inputRef` | `Ref<HTMLInputElement>` | — | A ref to the hidden input element. |
334
- | `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. |
335
- | `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. |
336
- | `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. |
337
- | `filter` | `((itemValue: Value, query: string, itemToString?: ((itemValue: Value) => string) \| undefined) => boolean) \| null` | — | Filter function used to match items vs input query. |
338
- | `virtualized` | `boolean` | `false` | Whether the items are being externally virtualized. |
339
- | `inline` | `boolean` | `false` | Whether the list is rendered inline without using the popup. |
340
- | `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. |
341
- | `limit` | `number` | `-1` | The maximum number of items to display in the list. |
342
- | `locale` | `LocalesArgument` | — | The locale to use for string comparison. Defaults to the user's runtime locale. |
343
- | `multiple` | `boolean` | `false` | Whether multiple items can be selected. |
344
- | `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. |
345
- | `value` | `ComboboxValueType<Value, Multiple> \| null` | — | The selected value of the combobox. Use when controlled. |
346
- | `onValueChange` | `((value: ComboboxValueType<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the selected value of the combobox changes. |
347
- | `labelId` | `string` | — | |
348
- | `helperTextId` | `string` | — | |
349
- | `validationTextId` | `string` | — | |
350
- | `label` | `string` | — | The label for the form field, describing its purpose. |
351
- | `hideLabel` | `boolean` | — | Visually hide the label. |
352
- | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
353
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
354
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
355
- | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
356
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
357
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
358
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
359
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
360
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
361
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
362
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
307
+ | Prop | Type | Default | Description |
308
+ | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
309
+ | `triggerOnlyOnType` | `boolean` | — | |
310
+ | `noOptionsFoundText` | `string` | — | |
311
+ | `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. |
312
+ | `loading` | `boolean` | — | Displays a loading indicator in the input field to show that options are being fetched or updated asynchronously. |
313
+ | `autoComplete` | `string` | — | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete |
314
+ | `autoHighlight` | `boolean` | `false` | Whether the first matching item is highlighted automatically while filtering. |
315
+ | `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. |
316
+ | `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. |
317
+ | `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. |
318
+ | `onOpenChange` | `((open: boolean, eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the popup is opened or closed. |
319
+ | `onInputValueChange` | `((inputValue: string, eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the input value changes. |
320
+ | `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. |
321
+ | `name` | `string` | — | Identifies the field when a form is submitted. |
322
+ | `form` | `string` | — | Identifies the form that owns the internal input. Useful when the combobox is rendered outside the form. |
323
+ | `id` | `string` | — | The id of the component. |
324
+ | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. |
325
+ | `readOnly` | `boolean` | `false` | Whether the user should be unable to choose a different option from the popup. |
326
+ | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. |
327
+ | `defaultOpen` | `boolean` | `false` | Whether the popup is initially open. To render a controlled popup, use the `open` prop instead. |
328
+ | `open` | `boolean` | — | Whether the popup is currently open. Use when controlled. |
329
+ | `onOpenChangeComplete` | `((open: boolean) => void)` | — | Event handler called after any animations complete when the popup is opened or closed. |
330
+ | `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>. |
331
+ | `inputValue` | `string \| number \| readonly string[]` | — | The input value of the combobox. Use when controlled. |
332
+ | `defaultInputValue` | `string \| number \| readonly string[]` | — | The uncontrolled input value when initially rendered. To render a controlled input, use the `inputValue` prop instead. |
333
+ | `inputRef` | `Ref<HTMLInputElement>` | — | A ref to the hidden input element. |
334
+ | `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. |
335
+ | `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. |
336
+ | `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. |
337
+ | `filter` | `((itemValue: Value, query: string, itemToString?: ((itemValue: Value) => string) \| undefined) => boolean) \| null` | — | Filter function used to match items vs input query. |
338
+ | `virtualized` | `boolean` | `false` | Whether the items are being externally virtualized. |
339
+ | `inline` | `boolean` | `false` | Whether the list is rendered inline without using the popup. |
340
+ | `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. |
341
+ | `limit` | `number` | `-1` | The maximum number of items to display in the list. |
342
+ | `locale` | `LocalesArgument` | — | The locale to use for string comparison. Defaults to the user's runtime locale. |
343
+ | `multiple` | `boolean` | `false` | Whether multiple items can be selected. |
344
+ | `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. |
345
+ | `value` | `ComboboxValueType<Value, Multiple> \| null` | — | The selected value of the combobox. Use when controlled. |
346
+ | `onValueChange` | `((value: ComboboxValueType<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: ChangeEventDetails) => void)` | — | Event handler called when the selected value of the combobox changes. |
347
+ | `labelId` | `string` | — | |
348
+ | `helperTextId` | `string` | — | |
349
+ | `validationTextId` | `string` | — | |
350
+ | `label` | `string` | — | The label for the form field, describing its purpose. |
351
+ | `hideLabel` | `boolean` | — | Visually hide the label. |
352
+ | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
353
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
354
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
355
+ | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
package/public/llms/components/container.md CHANGED
@@ -99,64 +99,3 @@ This component is based on the `div` element and supports the following common p
99
99
  - Z-Index
100
100
  - Overflow
101
101
  - Order
102
-
103
- | Prop | Type | Default | Description |
104
- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
105
- | `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
106
- | `asChild` | `boolean` | — | |
107
- | `display` | `Responsive<"flex" \| "none" \| "inline-flex">` | — | |
108
- | `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
109
- | `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
110
- | `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
111
- | `alignItems` | `Responsive<"center" \| "start" \| "end" \| "baseline" \| "stretch">` | — | |
112
- | `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
113
- | `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
114
- | `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
115
- | `borderRadiusTopLeftNone` | `boolean` | — | |
116
- | `borderRadiusTopRightNone` | `boolean` | — | |
117
- | `borderRadiusBottomLeftNone` | `boolean` | — | |
118
- | `borderRadiusBottomRightNone` | `boolean` | — | |
119
- | `borderRadiusTopNone` | `boolean` | — | |
120
- | `borderRadiusRightNone` | `boolean` | — | |
121
- | `borderRadiusBottomNone` | `boolean` | — | |
122
- | `borderRadiusLeftNone` | `boolean` | — | |
123
- | `flex` | `Responsive<string>` | — | |
124
- | `flexBasis` | `Responsive<string>` | — | |
125
- | `flexShrink` | `Responsive<string>` | — | |
126
- | `flexGrow` | `Responsive<string>` | — | |
127
- | `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
128
- | `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
129
- | `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
130
- | `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. |
131
- | `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
132
- | `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
133
- | `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
134
- | `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
135
- | `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
136
- | `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
137
- | `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
138
- | `order` | `Responsive<string>` | — | |
139
- | `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
140
- | `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
141
- | `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
142
- | `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
143
- | `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
144
- | `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
145
- | `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
146
- | `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
147
- | `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
148
- | `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
149
- | `position` | `Responsive<"static" \| "relative" \| "absolute" \| "fixed" \| "sticky">` | — | |
150
- | `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
151
- | `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
152
- | `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
153
- | `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
154
- | `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
155
- | `width` | `Responsive<string>` | — | |
156
- | `maxWidth` | `Responsive<string>` | — | |
157
- | `minWidth` | `Responsive<string>` | — | |
158
- | `height` | `Responsive<string>` | — | |
159
- | `maxHeight` | `Responsive<string>` | — | |
160
- | `minHeight` | `Responsive<string>` | — | |
161
- | `zIndex` | `Responsive<string>` | — | |
162
- | `align` | `Responsive<"center" \| "start" \| "end">` | `center` | |
package/public/llms/components/currency-input.md CHANGED
@@ -63,23 +63,16 @@ This component is based on the `TextInput` component and supports the following
63
63
 
64
64
  - Margin
65
65
 
66
- | Prop | Type | Default | Description |
67
- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
68
- | `label` | `string` | — | The label for the form field, describing its purpose. |
69
- | `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
70
- | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
71
- | `labelId` | `string` | — | |
72
- | `helperTextId` | `string` | — | |
73
- | `validationTextId` | `string` | — | |
74
- | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
75
- | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
76
- | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
77
- | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
78
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
79
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
80
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
81
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
82
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
83
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
84
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
85
- | `disableGroupSeparators` | `boolean` | — | |
66
+ | Prop | Type | Default | Description |
67
+ | ------------------------ | ---------------------- | ------- | --------------------------------------------------------------------------- |
68
+ | `label` | `string` | — | The label for the form field, describing its purpose. |
69
+ | `defaultValue` | `string \| number` | — | The initial value of the input when rendered. |
70
+ | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
71
+ | `labelId` | `string` | — | |
72
+ | `helperTextId` | `string` | — | |
73
+ | `validationTextId` | `string` | — | |
74
+ | `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
75
+ | `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
76
+ | `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
77
+ | `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
78
+ | `disableGroupSeparators` | `boolean` | — | |
package/public/llms/components/date-input.md CHANGED
@@ -51,40 +51,33 @@ This component is based on the `fieldset` element and supports the following com
51
51
 
52
52
  - Margin
53
53
 
54
- | Prop | Type | Default | Description |
55
- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56
- | `hideDay` | `boolean` | `false` | Whether the day segment is visible. |
57
- | `hideMonth` | `boolean` | `false` | Whether the month segment is visible. |
58
- | `hideYear` | `boolean` | `false` | Whether the year segment is visible. |
59
- | `dayPlaceholder` | `string` | — | Placeholder text for the day segment. |
60
- | `monthPlaceholder` | `string` | — | Placeholder text for the month segment. |
61
- | `yearPlaceholder` | `string` | — | Placeholder text for the year segment. |
62
- | `dayValue` | `string` | — | The controlled value for the day segment. Must be used with an `onDayChange` handler. |
63
- | `monthValue` | `string` | — | The controlled value for the month segment. Must be used with an `onMonthChange` handler. |
64
- | `yearValue` | `string` | — | The controlled value for the year segment. Must be used with an `onYearChange` handler. |
65
- | `defaultDayValue` | `string` | — | The initial value for the day segment when rendered (uncontrolled). |
66
- | `defaultMonthValue` | `string` | — | The initial value for the month segment when rendered (uncontrolled). |
67
- | `defaultYearValue` | `string` | — | The initial value for the year segment when rendered (uncontrolled). |
68
- | `onDayChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the day value changes. |
69
- | `onMonthChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the month value changes. |
70
- | `onYearChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the year value changes. |
71
- | `onDayFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
72
- | `onMonthFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
73
- | `onYearFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
74
- | `onDayBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
75
- | `onMonthBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
76
- | `onYearBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
77
- | `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. |
78
- | `labelVariant` | `"body" \| "heading"` | — | Set the label variant |
79
- | `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`. |
80
- | `validationText` | `ReactNode` | — | |
81
- | `validationStatus` | `"valid" \| "invalid"` | — | |
82
- | `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
83
- | `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
84
- | `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
85
- | `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
86
- | `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
87
- | `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
88
- | `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
89
- | `type` | `"number" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "password"` | — | |
90
- | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |
54
+ | Prop | Type | Default | Description |
55
+ | ------------------- | --------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56
+ | `hideDay` | `boolean` | `false` | Whether the day segment is visible. |
57
+ | `hideMonth` | `boolean` | `false` | Whether the month segment is visible. |
58
+ | `hideYear` | `boolean` | `false` | Whether the year segment is visible. |
59
+ | `dayPlaceholder` | `string` | — | Placeholder text for the day segment. |
60
+ | `monthPlaceholder` | `string` | — | Placeholder text for the month segment. |
61
+ | `yearPlaceholder` | `string` | — | Placeholder text for the year segment. |
62
+ | `dayValue` | `string` | — | The controlled value for the day segment. Must be used with an `onDayChange` handler. |
63
+ | `monthValue` | `string` | — | The controlled value for the month segment. Must be used with an `onMonthChange` handler. |
64
+ | `yearValue` | `string` | — | The controlled value for the year segment. Must be used with an `onYearChange` handler. |
65
+ | `defaultDayValue` | `string` | — | The initial value for the day segment when rendered (uncontrolled). |
66
+ | `defaultMonthValue` | `string` | — | The initial value for the month segment when rendered (uncontrolled). |
67
+ | `defaultYearValue` | `string` | — | The initial value for the year segment when rendered (uncontrolled). |
68
+ | `onDayChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the day value changes. |
69
+ | `onMonthChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the month value changes. |
70
+ | `onYearChange` | `ChangeEventHandler<HTMLInputElement>` | — | Callback fired when the year value changes. |
71
+ | `onDayFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
72
+ | `onMonthFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
73
+ | `onYearFocus` | `FocusEventHandler<HTMLInputElement>` | — | |
74
+ | `onDayBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
75
+ | `onMonthBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
76
+ | `onYearBlur` | `FocusEventHandler<HTMLInputElement>` | — | |
77
+ | `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. |
78
+ | `labelVariant` | `"body" \| "heading"` | — | Set the label variant |
79
+ | `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`. |
80
+ | `validationText` | `ReactNode` | — | |
81
+ | `validationStatus` | `"valid" \| "invalid"` | — | |
82
+ | `type` | `"number" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "password"` | — | |
83
+ | `value` | `string \| number` | — | The controlled value of the input. Must be used with an `onChange` handler. |