@utilitywarehouse/hearth-react 0.28.6 → 0.29.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.
- package/README.md +34 -20
- package/SKILL.md +355 -0
- package/dist/{chunk-O7RBVBMN.cjs → chunk-LWHIBSW2.cjs} +2 -2
- package/dist/{chunk-O7RBVBMN.cjs.map → chunk-LWHIBSW2.cjs.map} +1 -1
- package/dist/{chunk-JRVYOIXR.js → chunk-MIVYZGEV.js} +2 -2
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/Combobox/Combobox.cjs +1 -1
- package/dist/components/Combobox/Combobox.js +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/helpers/get-classname-styles.d.ts.map +1 -1
- package/dist/helpers/logger.d.ts.map +1 -1
- package/dist/helpers/merge-ids.d.ts.map +1 -1
- package/dist/hooks/use-ids.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +18 -12
- package/public/llms/components/accordion.md +321 -0
- package/public/llms/components/alert.md +217 -0
- package/public/llms/components/avatar.md +112 -0
- package/public/llms/components/badge.md +158 -0
- package/public/llms/components/body-text.md +200 -0
- package/public/llms/components/box.md +148 -0
- package/public/llms/components/breadcrumbs.md +97 -0
- package/public/llms/components/button.md +595 -0
- package/public/llms/components/card-accordion.md +277 -0
- package/public/llms/components/card.md +985 -0
- package/public/llms/components/checkbox-group.md +193 -0
- package/public/llms/components/checkbox-tile.md +116 -0
- package/public/llms/components/checkbox.md +108 -0
- package/public/llms/components/combobox.md +360 -0
- package/public/llms/components/container.md +162 -0
- package/public/llms/components/currency-input.md +85 -0
- package/public/llms/components/date-input.md +90 -0
- package/public/llms/components/date-picker.md +159 -0
- package/public/llms/components/description-list.md +149 -0
- package/public/llms/components/detail-text.md +89 -0
- package/public/llms/components/divider.md +88 -0
- package/public/llms/components/em.md +43 -0
- package/public/llms/components/expandable-card.md +231 -0
- package/public/llms/components/flex.md +197 -0
- package/public/llms/components/grid.md +244 -0
- package/public/llms/components/heading.md +65 -0
- package/public/llms/components/helper-text.md +27 -0
- package/public/llms/components/highlight-banner.md +94 -0
- package/public/llms/components/icon-button.md +516 -0
- package/public/llms/components/icon-container.md +247 -0
- package/public/llms/components/inline-link.md +190 -0
- package/public/llms/components/label.md +28 -0
- package/public/llms/components/link.md +236 -0
- package/public/llms/components/list.md +715 -0
- package/public/llms/components/menu.md +270 -0
- package/public/llms/components/modal.md +328 -0
- package/public/llms/components/pagination.md +138 -0
- package/public/llms/components/password-input.md +93 -0
- package/public/llms/components/progress-bar.md +139 -0
- package/public/llms/components/progress-stepper.md +147 -0
- package/public/llms/components/radio-group.md +487 -0
- package/public/llms/components/search-input.md +132 -0
- package/public/llms/components/section-header.md +82 -0
- package/public/llms/components/select.md +148 -0
- package/public/llms/components/skeleton.md +282 -0
- package/public/llms/components/spinner.md +59 -0
- package/public/llms/components/strong.md +49 -0
- package/public/llms/components/switch.md +106 -0
- package/public/llms/components/table.md +230 -0
- package/public/llms/components/tabs.md +320 -0
- package/public/llms/components/text-area.md +141 -0
- package/public/llms/components/text-input.md +228 -0
- package/public/llms/components/toast.md +323 -0
- package/public/llms/components/toggle-button-card.md +513 -0
- package/public/llms/components/tooltip.md +188 -0
- package/public/llms/components/unstyled-icon-button.md +175 -0
- package/public/llms/components/validation-text.md +29 -0
- package/public/llms/components/verification-input.md +96 -0
- package/public/llms/docs/changelog.md +1430 -0
- package/public/llms/docs/common-props/align-self.md +90 -0
- package/public/llms/docs/common-props/border.md +308 -0
- package/public/llms/docs/common-props/colour.md +221 -0
- package/public/llms/docs/common-props/flex-items.md +91 -0
- package/public/llms/docs/common-props/gap.md +111 -0
- package/public/llms/docs/common-props/grid-items.md +96 -0
- package/public/llms/docs/common-props/margin.md +105 -0
- package/public/llms/docs/common-props/opacity.md +100 -0
- package/public/llms/docs/common-props/order.md +90 -0
- package/public/llms/docs/common-props/overflow.md +89 -0
- package/public/llms/docs/common-props/padding.md +102 -0
- package/public/llms/docs/common-props/position.md +92 -0
- package/public/llms/docs/common-props/size.md +93 -0
- package/public/llms/docs/common-props/spacing.md +97 -0
- package/public/llms/docs/common-props/text.md +35 -0
- package/public/llms/docs/common-props/z-index.md +88 -0
- package/public/llms/docs/design-tokens.md +72 -0
- package/public/llms/docs/getting-started.md +117 -0
- package/public/llms/docs/layout.md +135 -0
- package/public/llms/docs/migrating.md +302 -0
- package/public/llms/docs/responsive-design/breakpoints.md +119 -0
- package/public/llms/docs/responsive-design/media-queries.md +89 -0
- package/public/llms/docs/responsive-design/responsive-props.md +37 -0
- package/public/llms.txt +97 -0
- package/scripts/init-ai.js +142 -0
- package/styles.css +2 -2
- /package/dist/{chunk-JRVYOIXR.js.map → chunk-MIVYZGEV.js.map} +0 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# CurrencyInput
|
|
2
|
+
|
|
3
|
+
`CurrencyInput` is an interactive field that specifically used for entering monetary amounts. It’s commonly used across Cashback and payment areas.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<Flex direction="column" gap="400">
|
|
7
|
+
<CurrencyInput
|
|
8
|
+
{...args}
|
|
9
|
+
label="Uncontrolled"
|
|
10
|
+
onChange={(event: ChangeEvent<HTMLInputElement>) => console.log(event.target.value)}
|
|
11
|
+
/>
|
|
12
|
+
<CurrencyInput
|
|
13
|
+
{...args}
|
|
14
|
+
label="Controlled"
|
|
15
|
+
helperText={`Value: ${value}`}
|
|
16
|
+
value={value}
|
|
17
|
+
onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}
|
|
18
|
+
/>
|
|
19
|
+
<CurrencyInput
|
|
20
|
+
{...args}
|
|
21
|
+
required
|
|
22
|
+
label="Group separators"
|
|
23
|
+
value={separatorsValue}
|
|
24
|
+
onChange={(event: ChangeEvent<HTMLInputElement>) => setSeparatorsValue(event.target.value)}
|
|
25
|
+
/>
|
|
26
|
+
<CurrencyInput
|
|
27
|
+
{...args}
|
|
28
|
+
required
|
|
29
|
+
label="Group separators disabled"
|
|
30
|
+
disableGroupSeparators
|
|
31
|
+
value={separatorsValue}
|
|
32
|
+
onChange={(event: ChangeEvent<HTMLInputElement>) => setSeparatorsValue(event.target.value)}
|
|
33
|
+
/>
|
|
34
|
+
</Flex>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Alternatives
|
|
38
|
+
|
|
39
|
+
- TextInput - For text
|
|
40
|
+
- PasswordInput - For passwords
|
|
41
|
+
- SearchInput - For search
|
|
42
|
+
|
|
43
|
+
## Label
|
|
44
|
+
|
|
45
|
+
A label is required, this should be clear and descriptive to guide the user.
|
|
46
|
+
|
|
47
|
+
## Formatting
|
|
48
|
+
|
|
49
|
+
By default the value will be displayed in a readable format, with comma
|
|
50
|
+
separated groups of thousands (ie. 1000 -> 1,000). The value will still be
|
|
51
|
+
available as a usable numeric format, however you can disable this behaviour
|
|
52
|
+
with the `disableGroupSeparators` prop.
|
|
53
|
+
|
|
54
|
+
## Validation
|
|
55
|
+
|
|
56
|
+
The input `validationStatus` can be set to either `"valid"` or `"invalid"` to
|
|
57
|
+
indicate the status. This status must be accompanied by a validation text to
|
|
58
|
+
explain the reason for the status.
|
|
59
|
+
|
|
60
|
+
## API
|
|
61
|
+
|
|
62
|
+
This component is based on the `TextInput` component and supports the following common props:
|
|
63
|
+
|
|
64
|
+
- Margin
|
|
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` | — | |
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# DateInput
|
|
2
|
+
|
|
3
|
+
`DateInput` allows users to enter a date manually using separate input fields for day, month, and year. It provides flexibility to show only the date segments you need. Use `DateInput` when you need users to enter dates manually.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<DateInput label="Date" helperText="Helper text" dayValue="15" monthValue="06" yearValue="1990" />
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Alternatives
|
|
10
|
+
|
|
11
|
+
- DatePicker - For when a calendar adds
|
|
12
|
+
visual benefit to the user.
|
|
13
|
+
|
|
14
|
+
## Validation
|
|
15
|
+
|
|
16
|
+
`DateInput` provides the UI for `valid` & `invalid` states visually, however
|
|
17
|
+
there is not internal validation logic.
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
<DateInput
|
|
21
|
+
label="Date of birth"
|
|
22
|
+
helperText="Enter a valid date between 1900 and today"
|
|
23
|
+
dayValue={day}
|
|
24
|
+
monthValue={month}
|
|
25
|
+
yearValue={year}
|
|
26
|
+
onDayChange={(event: React.ChangeEvent<HTMLInputElement>) => setDay(event.target.value)}
|
|
27
|
+
onMonthChange={(event: React.ChangeEvent<HTMLInputElement>) => setMonth(event.target.value)}
|
|
28
|
+
onYearChange={(event: React.ChangeEvent<HTMLInputElement>) => setYear(event.target.value)}
|
|
29
|
+
validationStatus={validation.status}
|
|
30
|
+
validationText={validation.message}
|
|
31
|
+
required
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Optional inputs
|
|
36
|
+
|
|
37
|
+
Control which inputs are shown using `hideDay`, `hideMonth`, and `hideYear`
|
|
38
|
+
props.
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<Flex direction="column" gap="400">
|
|
42
|
+
<DateInput label="Full date" helperText="DD/MM/YYYY" />
|
|
43
|
+
<DateInput label="Month and year" helperText="MM/YYYY" hideDay required />
|
|
44
|
+
<DateInput label="Year only" helperText="YYYY" hideDay hideMonth required />
|
|
45
|
+
</Flex>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## API
|
|
49
|
+
|
|
50
|
+
This component is based on the `fieldset` element and supports the following common props:
|
|
51
|
+
|
|
52
|
+
- Margin
|
|
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. |
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# DatePicker
|
|
2
|
+
|
|
3
|
+
`DatePicker` allows a user to specify a date, month or date range through the use of an expandable calendar.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<DatePicker
|
|
7
|
+
selected={selectedDate}
|
|
8
|
+
onChange={(date: Date | null) => setSelectedDate(date)}
|
|
9
|
+
{...args}
|
|
10
|
+
/>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Alternatives
|
|
14
|
+
|
|
15
|
+
- DateInput - For faster date entry
|
|
16
|
+
|
|
17
|
+
## API
|
|
18
|
+
|
|
19
|
+
This component is built upon the [React Datepicker](https://reactdatepicker.com)
|
|
20
|
+
library. Please explore their documentation for more in-depth usage.
|
|
21
|
+
|
|
22
|
+
It supports the following common props:
|
|
23
|
+
|
|
24
|
+
- Margin
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Default | Description |
|
|
27
|
+
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| `form` | `string` | — | |
|
|
29
|
+
| `label` | `string` | — | The label for the form field, describing its purpose. |
|
|
30
|
+
| `title` | `string` | — | |
|
|
31
|
+
| `date` | `Date` | — | |
|
|
32
|
+
| `onChange` | `((date: Date \| null, event?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement> \| undefined) => void)` | — | |
|
|
33
|
+
| `minDate` | `Date` | — | |
|
|
34
|
+
| `maxDate` | `Date` | — | |
|
|
35
|
+
| `scrollableYearDropdown` | `boolean` | — | |
|
|
36
|
+
| `yearDropdownItemNumber` | `number` | — | |
|
|
37
|
+
| `adjustDateOnChange` | `boolean` | — | |
|
|
38
|
+
| `onSelect` | `(((date: Date \| null, event?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement> \| undefined) => void) & ReactEventHandler<...>)` | — | |
|
|
39
|
+
| `locale` | `Locale` | — | |
|
|
40
|
+
| `useShortMonthInDropdown` | `boolean` | — | |
|
|
41
|
+
| `scrollableMonthYearDropdown` | `boolean` | — | |
|
|
42
|
+
| `dateFormat` | `string \| string[]` | — | |
|
|
43
|
+
| `selectingDate` | `Date` | — | |
|
|
44
|
+
| `excludeDates` | `{ date: Date; message?: string \| undefined; }[] \| Date[]` | — | |
|
|
45
|
+
| `includeDates` | `Date[]` | — | |
|
|
46
|
+
| `filterDate` | `((date: Date) => boolean)` | — | |
|
|
47
|
+
| `disabled` | `boolean` | — | |
|
|
48
|
+
| `disabledKeyboardNavigation` | `boolean` | — | |
|
|
49
|
+
| `selectsMultiple` | `undefined` | — | |
|
|
50
|
+
| `selectedDates` | `Date[]` | — | |
|
|
51
|
+
| `selected` | `Date \| null` | — | |
|
|
52
|
+
| `inline` | `boolean` | — | |
|
|
53
|
+
| `usePointerEvent` | `boolean` | — | |
|
|
54
|
+
| `renderYearContent` | `((year: number) => ReactNode)` | — | |
|
|
55
|
+
| `selectsEnd` | `boolean` | — | |
|
|
56
|
+
| `selectsStart` | `boolean` | — | |
|
|
57
|
+
| `selectsRange` | `undefined` | — | |
|
|
58
|
+
| `startDate` | `Date \| null` | — | |
|
|
59
|
+
| `endDate` | `Date \| null` | — | |
|
|
60
|
+
| `yearItemNumber` | `number` | — | |
|
|
61
|
+
| `yearClassName` | `((date: Date) => string)` | — | |
|
|
62
|
+
| `chooseDayAriaLabelPrefix` | `string` | — | |
|
|
63
|
+
| `disabledDayAriaLabelPrefix` | `string` | — | |
|
|
64
|
+
| `excludeDateIntervals` | `{ start: Date; end: Date; }[]` | — | |
|
|
65
|
+
| `includeDateIntervals` | `{ start: Date; end: Date; }[]` | — | |
|
|
66
|
+
| `dayClassName` | `((date: Date) => string)` | — | |
|
|
67
|
+
| `highlightDates` | `(Date \| HighlightDate)[]` | — | |
|
|
68
|
+
| `holidays` | `Holiday[]` | — | |
|
|
69
|
+
| `showWeekPicker` | `boolean` | — | |
|
|
70
|
+
| `selectsDisabledDaysInRange` | `boolean` | — | |
|
|
71
|
+
| `renderDayContents` | `((day: number, date: Date) => ReactNode)` | — | |
|
|
72
|
+
| `containerRef` | `RefObject<HTMLDivElement \| null>` | — | |
|
|
73
|
+
| `calendarStartDay` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | — | |
|
|
74
|
+
| `swapRange` | `boolean` | — | |
|
|
75
|
+
| `isWeekDisabled` | `boolean` | — | |
|
|
76
|
+
| `shouldCloseOnSelect` | `boolean` | — | |
|
|
77
|
+
| `formatWeekNumber` | `((date: Date) => number)` | — | |
|
|
78
|
+
| `onWeekSelect` | `((day: Date, weekNumber: number, event: MouseEvent<HTMLDivElement, MouseEvent>) => void)` | — | |
|
|
79
|
+
| `weekClassName` | `((date: Date) => string)` | — | |
|
|
80
|
+
| `monthClassName` | `((date: Date) => string)` | — | |
|
|
81
|
+
| `renderMonthContent` | `((m: number, shortMonthText: string, fullMonthText: string, day: Date) => ReactNode)` | — | |
|
|
82
|
+
| `renderQuarterContent` | `((q: number, shortQuarter: string) => ReactNode)` | — | |
|
|
83
|
+
| `fixedHeight` | `boolean` | — | |
|
|
84
|
+
| `peekNextMonth` | `boolean` | — | |
|
|
85
|
+
| `showWeekNumbers` | `boolean` | — | |
|
|
86
|
+
| `showMonthYearPicker` | `boolean` | — | |
|
|
87
|
+
| `showFullMonthYearPicker` | `boolean` | — | |
|
|
88
|
+
| `showTwoColumnMonthYearPicker` | `boolean` | — | |
|
|
89
|
+
| `showFourColumnMonthYearPicker` | `boolean` | — | |
|
|
90
|
+
| `showQuarterYearPicker` | `boolean` | — | |
|
|
91
|
+
| `weekAriaLabelPrefix` | `string` | — | |
|
|
92
|
+
| `dayNamesHeader` | `ReactNode` | — | |
|
|
93
|
+
| `minTime` | `Date` | — | |
|
|
94
|
+
| `maxTime` | `Date` | — | |
|
|
95
|
+
| `excludeTimes` | `Date[]` | — | |
|
|
96
|
+
| `includeTimes` | `Date[]` | — | |
|
|
97
|
+
| `filterTime` | `((time: Date) => boolean)` | — | |
|
|
98
|
+
| `openToDate` | `Date` | — | |
|
|
99
|
+
| `timeClassName` | `((time: Date) => string)` | — | |
|
|
100
|
+
| `todayButton` | `ReactNode` | — | |
|
|
101
|
+
| `timeCaption` | `string` | — | |
|
|
102
|
+
| `injectTimes` | `Date[]` | — | |
|
|
103
|
+
| `showTimeSelectOnly` | `boolean` | — | |
|
|
104
|
+
| `showTimeCaption` | `boolean` | — | |
|
|
105
|
+
| `timeInputLabel` | `string` | — | |
|
|
106
|
+
| `customTimeInput` | `ReactElement<{ date?: Date \| undefined; value: string; onChange: (time: string) => void; }, string \| JSXElementConstructor<any>>` | — | |
|
|
107
|
+
| `className` | `string` | — | |
|
|
108
|
+
| `onMonthChange` | `((date: Date) => void)` | — | |
|
|
109
|
+
| `onYearChange` | `((date: Date) => void)` | — | |
|
|
110
|
+
| `onMonthMouseLeave` | `VoidFunction` | — | |
|
|
111
|
+
| `onClickOutside` | `ClickOutsideHandler` | — | |
|
|
112
|
+
| `icon` | `ReactNode` | — | |
|
|
113
|
+
| `portalId` | `string` | — | |
|
|
114
|
+
| `portalHost` | `ShadowRoot` | — | |
|
|
115
|
+
| `popperProps` | `Omit<UseFloatingOptions<ReferenceType>, "middleware">` | — | |
|
|
116
|
+
| `enableTabLoop` | `boolean` | — | |
|
|
117
|
+
| `wrapperClassName` | `string` | — | |
|
|
118
|
+
| `popperContainer` | `FC<{ children?: ReactNode; }>` | — | |
|
|
119
|
+
| `popperModifiers` | `{ name: string; options?: any; fn: (state: { platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<DetectOverflowOptions> \| undefined) => Promise<...>; } & Platform; ... 7 more ...; elements: Elements; }) => Promisable<...>; }[]` | — | |
|
|
120
|
+
| `popperPlacement` | `"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | — | |
|
|
121
|
+
| `onKeyDown` | `(((event: KeyboardEvent<HTMLElement>) => void) & KeyboardEventHandler<HTMLDivElement>)` | — | |
|
|
122
|
+
| `open` | `boolean` | — | |
|
|
123
|
+
| `readOnly` | `boolean` | — | |
|
|
124
|
+
| `onFocus` | `(FocusEventHandler<HTMLElement> & FocusEventHandler<HTMLDivElement>)` | — | |
|
|
125
|
+
| `onBlur` | `(FocusEventHandler<HTMLElement> & FocusEventHandler<HTMLDivElement>)` | — | |
|
|
126
|
+
| `onInputClick` | `VoidFunction` | — | |
|
|
127
|
+
| `preventOpenOnFocus` | `boolean` | — | |
|
|
128
|
+
| `closeOnScroll` | `boolean \| ((event: Event) => boolean)` | — | |
|
|
129
|
+
| `onCalendarOpen` | `VoidFunction` | — | |
|
|
130
|
+
| `onCalendarClose` | `VoidFunction` | — | |
|
|
131
|
+
| `value` | `string` | — | |
|
|
132
|
+
| `customInputRef` | `string` | — | |
|
|
133
|
+
| `id` | `string` | — | |
|
|
134
|
+
| `name` | `string` | — | |
|
|
135
|
+
| `autoFocus` | `boolean` | — | |
|
|
136
|
+
| `placeholderText` | `string` | — | |
|
|
137
|
+
| `autoComplete` | `string` | — | |
|
|
138
|
+
| `required` | `boolean` | — | |
|
|
139
|
+
| `tabIndex` | `number` | — | |
|
|
140
|
+
| `aria-describedby` | `string` | — | Identifies the element (or elements) that describes the object. @see aria-labelledby |
|
|
141
|
+
| `aria-invalid` | `"false" \| "true" \| "grammar" \| "spelling"` | — | Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage. |
|
|
142
|
+
| `aria-labelledby` | `string` | — | Identifies the element (or elements) that labels the current element. @see aria-describedby. |
|
|
143
|
+
| `aria-required` | `"false" \| "true"` | — | Indicates that user input is required on the element before a form may be submitted. |
|
|
144
|
+
| `onChangeRaw` | `((event?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement> \| undefined, selectionMeta?: { date: Date; formattedDate: string; } \| undefined) => void)` | — | |
|
|
145
|
+
| `labelId` | `string` | — | |
|
|
146
|
+
| `helperTextId` | `string` | — | |
|
|
147
|
+
| `validationTextId` | `string` | — | |
|
|
148
|
+
| `labelVariant` | `"body" \| "heading"` | — | Change the label variant |
|
|
149
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
150
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
151
|
+
| `validationStatus` | `"valid" \| "invalid"` | — | Indicates the validation status. |
|
|
152
|
+
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
153
|
+
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
154
|
+
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
155
|
+
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
156
|
+
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
157
|
+
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
158
|
+
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
159
|
+
| `disableTodayIndicator` | `boolean` | — | |
|