@maxio-com/react-ui-components 9.23.0 → 9.24.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/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/skills/maxio-react/SKILL.md +2 -0
- package/dist/skills/maxio-react/references/components-calendar.md +193 -0
- package/dist/skills/maxio-react/references/components-flex.md +2 -2
- package/dist/skills/maxio-react/references/components-grid.md +2 -2
- package/dist/skills/maxio-react/references/components-rangecalendar.md +254 -0
- package/dist/temporary-typings/src/components/Calendar/Calendar.d.ts +6 -0
- package/dist/temporary-typings/src/components/Calendar/Calendar.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/Calendar/index.d.ts +3 -0
- package/dist/temporary-typings/src/components/Calendar/index.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/Calendar/types.d.ts +5 -0
- package/dist/temporary-typings/src/components/Calendar/types.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/RangeCalendar/RangeCalendar.d.ts +6 -0
- package/dist/temporary-typings/src/components/RangeCalendar/RangeCalendar.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/RangeCalendar/index.d.ts +3 -0
- package/dist/temporary-typings/src/components/RangeCalendar/index.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/RangeCalendar/types.d.ts +5 -0
- package/dist/temporary-typings/src/components/RangeCalendar/types.d.ts.map +1 -0
- package/dist/temporary-typings/src/components/index.d.ts +4 -0
- package/dist/temporary-typings/src/components/index.d.ts.map +1 -1
- package/package.json +3 -2
- package/typings/index.d.ts +15 -3
|
@@ -29,6 +29,7 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
|
|
|
29
29
|
- [Components / Breadcrumbs](references/components-breadcrumbs.md)
|
|
30
30
|
- [Components / Buttons / Button](references/components-buttons-button.md)
|
|
31
31
|
- [Components / Buttons / IconButton](references/components-buttons-iconbutton.md)
|
|
32
|
+
- [Components / Calendar](references/components-calendar.md)
|
|
32
33
|
- [Components / Card](references/components-card.md)
|
|
33
34
|
- [Components / Chip](references/components-chip.md)
|
|
34
35
|
- [Components / Copy To Clipboard](references/components-copy-to-clipboard.md)
|
|
@@ -54,6 +55,7 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
|
|
|
54
55
|
- [Components / Pagination](references/components-pagination.md)
|
|
55
56
|
- [Components / Popover](references/components-popover.md)
|
|
56
57
|
- [Components / ProgressBar](references/components-progressbar.md)
|
|
58
|
+
- [Components / RangeCalendar](references/components-rangecalendar.md)
|
|
57
59
|
- [Components / SegmentedControl](references/components-segmentedcontrol.md)
|
|
58
60
|
- [Components / Tabs](references/components-tabs.md)
|
|
59
61
|
- [Components / Tag](references/components-tag.md)
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
# Calendar
|
|
2
|
+
|
|
3
|
+
## Usage Guidelines
|
|
4
|
+
|
|
5
|
+
### Overview
|
|
6
|
+
|
|
7
|
+
Calendar displays a localized month grid for selecting a single date.
|
|
8
|
+
|
|
9
|
+
#### When to Use
|
|
10
|
+
|
|
11
|
+
- Use Calendar to select a single billing, scheduling, or reporting date.
|
|
12
|
+
- Use it when users benefit from seeing neighboring dates in a month grid.
|
|
13
|
+
|
|
14
|
+
#### When Not to Use
|
|
15
|
+
|
|
16
|
+
- Do not use Calendar for selecting a date range or multiple dates.
|
|
17
|
+
- Do not use Calendar as an event agenda or scheduling timeline.
|
|
18
|
+
|
|
19
|
+
### Variants
|
|
20
|
+
|
|
21
|
+
| Variant | Purpose | Usage notes |
|
|
22
|
+
| :---------------- | :---------------------------- | :----------------------------------------------------------------- |
|
|
23
|
+
| Default | Select one date | Displays one month at a time. |
|
|
24
|
+
| Date restrictions | Limit available dates | Use minimum and maximum dates and mark specific dates unavailable. |
|
|
25
|
+
| Disabled | Prevent interaction | Use when the calendar cannot be used in the current context. |
|
|
26
|
+
| Read only | Display an existing selection | Users can browse without changing the selected date. |
|
|
27
|
+
| Invalid | Explain a validation problem | Pair the invalid state with a specific error message. |
|
|
28
|
+
|
|
29
|
+
### Behavior
|
|
30
|
+
|
|
31
|
+
- **Mouse and touch**: select an available date or use the previous and next buttons to browse months.
|
|
32
|
+
- **Keyboard**: arrow keys move between dates; Enter or Space selects the focused date. Page Up and Page Down browse months.
|
|
33
|
+
- **Focus management**: the date grid uses one tab stop. Moving focus does not select a date until the user activates it.
|
|
34
|
+
- **Localization**: the locale determines date labels, weekday order, and reading direction.
|
|
35
|
+
|
|
36
|
+
### Accessibility
|
|
37
|
+
|
|
38
|
+
- Provide `aria-label` or `aria-labelledby` to identify the calendar's purpose.
|
|
39
|
+
- Keep unavailable dates distinguishable from the selected date and keyboard focus.
|
|
40
|
+
- Use `isInvalid` with `errorMessage` to explain how to correct the selection.
|
|
41
|
+
- React Aria supplies grid semantics, keyboard interaction, and selection announcements.
|
|
42
|
+
|
|
43
|
+
### Content
|
|
44
|
+
|
|
45
|
+
- Use a specific label such as "Billing date" or "Report date".
|
|
46
|
+
- Explain date restrictions in nearby text when users need that context before selecting.
|
|
47
|
+
- Keep validation messages actionable, such as "Choose a date within the billing period."
|
|
48
|
+
|
|
49
|
+
### Related
|
|
50
|
+
|
|
51
|
+
- **[Popover](components-popover.md)**: use a popover when the calendar should open from a trigger.
|
|
52
|
+
- **[Button](components-buttons-button.md)**: use a labelled button to trigger a calendar popover.
|
|
53
|
+
|
|
54
|
+
## React
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { Calendar } from '@maxio-com/react-ui-components';
|
|
58
|
+
import { parseDate } from '@internationalized/date';
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### State Management
|
|
62
|
+
|
|
63
|
+
Install `@internationalized/date` in the consuming application to create date values.
|
|
64
|
+
|
|
65
|
+
#### Controlled
|
|
66
|
+
|
|
67
|
+
Use `value` and `onChange` when application state owns the selected date.
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
const [value, setValue] = React.useState(parseDate('2026-09-09'));
|
|
71
|
+
|
|
72
|
+
<Calendar aria-label="Billing date" value={value} onChange={setValue} />;
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### Uncontrolled
|
|
76
|
+
|
|
77
|
+
Use `defaultValue` for a calendar that manages its own selection.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
<Calendar aria-label="Billing date" defaultValue={parseDate('2026-09-09')} />
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Date Restrictions and Validation
|
|
84
|
+
|
|
85
|
+
Use `minValue`, `maxValue`, and `isDateUnavailable` to constrain selection.
|
|
86
|
+
`isReadOnly` allows browsing without changing the value; `isDisabled` disables
|
|
87
|
+
interaction. Pair `isInvalid` with `errorMessage` for validation feedback.
|
|
88
|
+
|
|
89
|
+
### Localization
|
|
90
|
+
|
|
91
|
+
Wrap Calendar in React Aria's `I18nProvider` to set the locale, week start,
|
|
92
|
+
and reading direction. Calendar displays one month at a time.
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
import { I18nProvider } from 'react-aria-components/I18nProvider';
|
|
96
|
+
import { parseDate } from '@internationalized/date';
|
|
97
|
+
|
|
98
|
+
<I18nProvider locale="ar-EG">
|
|
99
|
+
<Calendar
|
|
100
|
+
aria-label="تاريخ الفاتورة"
|
|
101
|
+
defaultValue={parseDate('2026-09-09')}
|
|
102
|
+
/>
|
|
103
|
+
</I18nProvider>;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Imports
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { Calendar, I18nProvider } from "@maxio-com/react-ui-components";
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Prop Types
|
|
113
|
+
|
|
114
|
+
### Calendar
|
|
115
|
+
|
|
116
|
+
| Prop | Type | Required | Default | Description | Source |
|
|
117
|
+
| --- | --- | --- | --- | --- | --- |
|
|
118
|
+
| `errorMessage` | `string` | no | - | Message announced when the selected date is invalid. | CalendarProps |
|
|
119
|
+
|
|
120
|
+
## Stories
|
|
121
|
+
|
|
122
|
+
### Default
|
|
123
|
+
|
|
124
|
+
Use Default when users need to select one date from a visible month grid.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
const Default = () => <Calendar aria-label="Billing date" defaultValue={currentDate} />;
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Controlled
|
|
131
|
+
|
|
132
|
+
Use Controlled when application state owns the selected date.
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
const Controlled = function ControlledCalendar() {
|
|
136
|
+
const [value, setValue] = useState(currentDate);
|
|
137
|
+
return (
|
|
138
|
+
<Calendar aria-label="Billing date" value={value} onChange={setValue} />
|
|
139
|
+
);
|
|
140
|
+
};
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Date Restrictions
|
|
144
|
+
|
|
145
|
+
Use Date Restrictions to limit selection to a billing period and exclude specific dates.
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
const DateRestrictions = () => <Calendar
|
|
149
|
+
aria-label="Billing date"
|
|
150
|
+
defaultValue={currentDate}
|
|
151
|
+
minValue={currentDate.subtract({ days: 7 })}
|
|
152
|
+
maxValue={currentDate.add({ days: 14 })}
|
|
153
|
+
isDateUnavailable={(date) =>
|
|
154
|
+
date.compare(currentDate.add({ days: 5 })) === 0} />;
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Disabled
|
|
158
|
+
|
|
159
|
+
Use Disabled when calendar interaction is unavailable.
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
const Disabled = () => <Calendar aria-label="Billing date" defaultValue={currentDate} isDisabled />;
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Read Only
|
|
166
|
+
|
|
167
|
+
Use Read Only to allow browsing without changing the selected date.
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
const ReadOnly = () => <Calendar aria-label="Billing date" defaultValue={currentDate} isReadOnly />;
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Invalid
|
|
174
|
+
|
|
175
|
+
Use Invalid with an actionable error message when the selected date fails validation.
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
const Invalid = () => <Calendar
|
|
179
|
+
aria-label="Billing date"
|
|
180
|
+
defaultValue={currentDate}
|
|
181
|
+
isInvalid
|
|
182
|
+
errorMessage="Choose a date within the billing period." />;
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### International
|
|
186
|
+
|
|
187
|
+
Use I18nProvider to localize labels, weekday order, and navigation direction.
|
|
188
|
+
|
|
189
|
+
```tsx
|
|
190
|
+
const International = () => <I18nProvider locale="pl-PL">
|
|
191
|
+
<Calendar aria-label="Billing date" defaultValue={currentDate} />
|
|
192
|
+
</I18nProvider>;
|
|
193
|
+
```
|
|
@@ -61,7 +61,7 @@ import { Flex } from "@maxio-com/react-ui-components";
|
|
|
61
61
|
|
|
62
62
|
| Prop | Type | Required | Default | Description | Source |
|
|
63
63
|
| --- | --- | --- | --- | --- | --- |
|
|
64
|
-
| `alignItems` | `"
|
|
64
|
+
| `alignItems` | `"start" \| "center" \| "end" \| "baseline" \| "stretch"` | no | - | Controls how flex items are positioned along the main axis (defined by `FlexDirection`). Items will stretch by default if no value is set. | TypeLiteral |
|
|
65
65
|
| `basis` | `"auto" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12" \| "full"` | no | - | Defines the initial size of flex items. | TypeLiteral |
|
|
66
66
|
| `children` | `ReactNode` | no | - | The content of the flex container. Can be any valid `ReactNode`. | TypeLiteral, DOMAttributes |
|
|
67
67
|
| `className` | `string` | no | - | Additional class names for custom styling. | TypeLiteral, HTMLAttributes |
|
|
@@ -71,7 +71,7 @@ import { Flex } from "@maxio-com/react-ui-components";
|
|
|
71
71
|
| `gapX` | `0 \| 1 \| "px" \| 0.5 \| 1.5 \| 2 \| 2.5 \| 3 \| 3.5 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` | no | - | Controls the horizontal space between flex items. | TypeLiteral |
|
|
72
72
|
| `gapY` | `0 \| 1 \| "px" \| 0.5 \| 1.5 \| 2 \| 2.5 \| 3 \| 3.5 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` | no | - | Controls the vertical space between flex items. | TypeLiteral |
|
|
73
73
|
| `grow` | `boolean` | no | - | Allows or restricts growing. | TypeLiteral |
|
|
74
|
-
| `justifyContent` | `"
|
|
74
|
+
| `justifyContent` | `"start" \| "center" \| "end" \| "stretch" \| "normal" \| "between" \| "around" \| "evenly"` | no | - | Controls how flex items are positioned along the main axis (defined by `FlexDirection`). | TypeLiteral |
|
|
75
75
|
| `shrink` | `boolean` | no | - | Allows or restricts shrinking. | TypeLiteral |
|
|
76
76
|
| `wrap` | `"wrap" \| "nowrap" \| "wrap-reverse"` | no | - | Controls whether the flex items are forced onto one line or can wrap onto multiple lines. | TypeLiteral |
|
|
77
77
|
|
|
@@ -64,7 +64,7 @@ import { Grid } from "@maxio-com/react-ui-components";
|
|
|
64
64
|
|
|
65
65
|
| Prop | Type | Required | Default | Description | Source |
|
|
66
66
|
| --- | --- | --- | --- | --- | --- |
|
|
67
|
-
| `alignItems` | `"
|
|
67
|
+
| `alignItems` | `"start" \| "center" \| "end" \| "baseline" \| "stretch"` | no | - | Apply to child Grid components. Controls how item is positioned vertically. | TypeLiteral |
|
|
68
68
|
| `autoColumns` | `"auto" \| "max" \| "min" \| "fr"` | no | - | Sets the size of columns that do not have a specified size. | TypeLiteral |
|
|
69
69
|
| `autoRows` | `"auto" \| "max" \| "min" \| "fr"` | no | - | Sets the size of rows that do not have a specified size. | TypeLiteral |
|
|
70
70
|
| `column` | `"auto" \| "full" \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 13` | no | - | Apply to child Grid components. Sets the number of columns the item spans. Values can be overridden by `columnStart` and `columnEnd`. | TypeLiteral |
|
|
@@ -74,7 +74,7 @@ import { Grid } from "@maxio-com/react-ui-components";
|
|
|
74
74
|
| `gapX` | `0 \| 1 \| "px" \| 0.5 \| 1.5 \| 2 \| 2.5 \| 3 \| 3.5 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` | no | - | Controls the horizontal space between grid items. | TypeLiteral |
|
|
75
75
|
| `gapY` | `0 \| 1 \| "px" \| 0.5 \| 1.5 \| 2 \| 2.5 \| 3 \| 3.5 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` | no | - | Controls the vertical space between grid items. | TypeLiteral |
|
|
76
76
|
| `inline` | `boolean` | no | - | Changes grid from block element to inline element. | TypeLiteral |
|
|
77
|
-
| `justifyContent` | `"
|
|
77
|
+
| `justifyContent` | `"start" \| "center" \| "end" \| "stretch" \| "normal" \| "between" \| "around" \| "evenly"` | no | - | Apply to child Grid components. Controls how grid item is positioned horizontally. | TypeLiteral |
|
|
78
78
|
| `row` | `"auto" \| "full" \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 13` | no | - | Apply to child Grid components. Sets the number of rows the item spans. Values can be overridden by `rowStart` and `rowEnd`. | TypeLiteral |
|
|
79
79
|
| `rowEnd` | `"auto" \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 13` | no | - | Apply to child Grid components. Sets the item's ending row. Needs `rowStart` to span multiple columns. | TypeLiteral |
|
|
80
80
|
| `rowStart` | `"auto" \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 13` | no | - | Apply to child Grid components. Sets the item's starting row. | TypeLiteral |
|
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
# RangeCalendar
|
|
2
|
+
|
|
3
|
+
## Usage Guidelines
|
|
4
|
+
|
|
5
|
+
### Overview
|
|
6
|
+
|
|
7
|
+
RangeCalendar displays a localized month grid for selecting a date range.
|
|
8
|
+
|
|
9
|
+
#### When to Use
|
|
10
|
+
|
|
11
|
+
- Use RangeCalendar to select a billing, scheduling, or reporting date range.
|
|
12
|
+
- Use it when users benefit from seeing neighboring dates in a month grid.
|
|
13
|
+
|
|
14
|
+
#### When Not to Use
|
|
15
|
+
|
|
16
|
+
- Do not use RangeCalendar for selecting multiple separate ranges or unrelated dates.
|
|
17
|
+
- Do not use RangeCalendar as an event agenda or scheduling timeline.
|
|
18
|
+
|
|
19
|
+
### Variants
|
|
20
|
+
|
|
21
|
+
| Variant | Purpose | Usage notes |
|
|
22
|
+
| :---------------- | :---------------------------- | :----------------------------------------------------------------- |
|
|
23
|
+
| Default | Select a date range | Displays one month at a time. |
|
|
24
|
+
| Date restrictions | Limit available dates | Use minimum and maximum dates and mark specific dates unavailable. |
|
|
25
|
+
| Disabled | Prevent interaction | Use when the calendar cannot be used in the current context. |
|
|
26
|
+
| Read only | Display an existing selection | Users can browse without changing the selected range. |
|
|
27
|
+
| Invalid | Explain a validation problem | Pair the invalid state with a specific error message. |
|
|
28
|
+
|
|
29
|
+
### Behavior
|
|
30
|
+
|
|
31
|
+
- **Mouse and touch**: select a start date and an end date or use the previous and next buttons to browse months.
|
|
32
|
+
- **Keyboard**: arrow keys move between dates; Enter or Space sets a range endpoint. Page Up and Page Down browse months.
|
|
33
|
+
- **Focus management**: the date grid uses one tab stop. Activate one date to start the range, then activate another to complete it. The second endpoint may be in another month.
|
|
34
|
+
- **Localization**: the locale determines date labels, weekday order, and reading direction.
|
|
35
|
+
|
|
36
|
+
RangeCalendar selects contiguous ranges by default. Unavailable dates cannot be endpoints; use `allowsNonContiguousRanges` only when your workflow permits a range to include unavailable dates.
|
|
37
|
+
|
|
38
|
+
### Accessibility
|
|
39
|
+
|
|
40
|
+
- Provide `aria-label` or `aria-labelledby` to identify the calendar's purpose.
|
|
41
|
+
- Keep unavailable dates distinguishable from the selected range and keyboard focus.
|
|
42
|
+
- Use `isInvalid` with `errorMessage` to explain how to correct the selection.
|
|
43
|
+
- React Aria supplies grid semantics, keyboard interaction, and selection announcements.
|
|
44
|
+
|
|
45
|
+
### Content
|
|
46
|
+
|
|
47
|
+
- Use a specific label such as "Billing period" or "Report period".
|
|
48
|
+
- Explain date restrictions in nearby text when users need that context before selecting.
|
|
49
|
+
- Keep validation messages actionable, such as "Choose a range within the billing period."
|
|
50
|
+
|
|
51
|
+
### Related
|
|
52
|
+
|
|
53
|
+
- **[Popover](components-popover.md)**: use a popover when the calendar should open from a trigger.
|
|
54
|
+
- **[Button](components-buttons-button.md)**: use a labelled button to trigger a calendar popover.
|
|
55
|
+
- **[Calendar](components-calendar.md)**: use Calendar when users need to select one date.
|
|
56
|
+
|
|
57
|
+
## React
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { RangeCalendar } from '@maxio-com/react-ui-components';
|
|
61
|
+
import { parseDate } from '@internationalized/date';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### State Management
|
|
65
|
+
|
|
66
|
+
Install `@internationalized/date` in the consuming application to create date values.
|
|
67
|
+
|
|
68
|
+
#### Controlled
|
|
69
|
+
|
|
70
|
+
Use `value` and `onChange` when application state owns the selected range.
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
const [value, setValue] = React.useState({
|
|
74
|
+
start: parseDate('2026-09-09'),
|
|
75
|
+
end: parseDate('2026-09-16'),
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
<RangeCalendar aria-label="Billing period" value={value} onChange={setValue} />;
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
#### Uncontrolled
|
|
82
|
+
|
|
83
|
+
Use `defaultValue` for a calendar that manages its own selection.
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<RangeCalendar
|
|
87
|
+
aria-label="Billing period"
|
|
88
|
+
defaultValue={{
|
|
89
|
+
start: parseDate('2026-09-09'),
|
|
90
|
+
end: parseDate('2026-09-16'),
|
|
91
|
+
}}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
The value is an object with `start` and `end` date values. A completed selection calls `onChange` with ordered endpoints.
|
|
96
|
+
|
|
97
|
+
### Date Restrictions and Validation
|
|
98
|
+
|
|
99
|
+
Use `minValue`, `maxValue`, and `isDateUnavailable` to constrain selection.
|
|
100
|
+
`isReadOnly` allows browsing without changing the value; `isDisabled` disables
|
|
101
|
+
interaction. Pair `isInvalid` with `errorMessage` for validation feedback.
|
|
102
|
+
|
|
103
|
+
By default, ranges cannot cross unavailable dates. Set `allowsNonContiguousRanges` to allow unavailable dates inside the range while keeping endpoints selectable.
|
|
104
|
+
|
|
105
|
+
### Localization
|
|
106
|
+
|
|
107
|
+
Wrap RangeCalendar in React Aria's `I18nProvider` to set the locale, week start,
|
|
108
|
+
and reading direction. RangeCalendar displays one month at a time.
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { I18nProvider } from 'react-aria-components/I18nProvider';
|
|
112
|
+
import { parseDate } from '@internationalized/date';
|
|
113
|
+
|
|
114
|
+
<I18nProvider locale="ar-EG">
|
|
115
|
+
<RangeCalendar
|
|
116
|
+
aria-label="تاريخ الفاتورة"
|
|
117
|
+
defaultValue={{
|
|
118
|
+
start: parseDate('2026-09-09'),
|
|
119
|
+
end: parseDate('2026-09-16'),
|
|
120
|
+
}}
|
|
121
|
+
/>
|
|
122
|
+
</I18nProvider>;
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Imports
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import { I18nProvider, RangeCalendar } from "@maxio-com/react-ui-components";
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Prop Types
|
|
132
|
+
|
|
133
|
+
### RangeCalendar
|
|
134
|
+
|
|
135
|
+
| Prop | Type | Required | Default | Description | Source |
|
|
136
|
+
| --- | --- | --- | --- | --- | --- |
|
|
137
|
+
| `errorMessage` | `string` | no | - | Message announced when the selected range is invalid. | RangeCalendarProps |
|
|
138
|
+
|
|
139
|
+
## Stories
|
|
140
|
+
|
|
141
|
+
### Default
|
|
142
|
+
|
|
143
|
+
Use Default when users need to select a date range from a visible month grid.
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
const Default = () => <RangeCalendar
|
|
147
|
+
aria-label="Billing period"
|
|
148
|
+
defaultFocusedValue={currentDate}
|
|
149
|
+
defaultValue={{
|
|
150
|
+
start: currentDate.subtract({ days: 3 }),
|
|
151
|
+
end: currentDate.add({ days: 3 }),
|
|
152
|
+
}} />;
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Controlled
|
|
156
|
+
|
|
157
|
+
Use Controlled when application state owns the selected range.
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
const Controlled = function ControlledRangeCalendar() {
|
|
161
|
+
const [value, setValue] = useState({
|
|
162
|
+
start: currentDate.subtract({ days: 3 }),
|
|
163
|
+
end: currentDate.add({ days: 3 }),
|
|
164
|
+
});
|
|
165
|
+
return (
|
|
166
|
+
<RangeCalendar
|
|
167
|
+
aria-label="Billing period"
|
|
168
|
+
defaultFocusedValue={currentDate}
|
|
169
|
+
value={value}
|
|
170
|
+
onChange={setValue}
|
|
171
|
+
/>
|
|
172
|
+
);
|
|
173
|
+
};
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Date Restrictions
|
|
177
|
+
|
|
178
|
+
Use Date Restrictions to limit selection to a billing period and exclude specific dates.
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
const DateRestrictions = () => <RangeCalendar
|
|
182
|
+
aria-label="Billing period"
|
|
183
|
+
defaultFocusedValue={currentDate}
|
|
184
|
+
defaultValue={{
|
|
185
|
+
start: currentDate.subtract({ days: 3 }),
|
|
186
|
+
end: currentDate.add({ days: 3 }),
|
|
187
|
+
}}
|
|
188
|
+
minValue={currentDate.subtract({ days: 14 })}
|
|
189
|
+
maxValue={currentDate.add({ days: 14 })}
|
|
190
|
+
isDateUnavailable={(date) =>
|
|
191
|
+
date.compare(currentDate.add({ days: 10 })) === 0} />;
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### Disabled
|
|
195
|
+
|
|
196
|
+
Use Disabled when calendar interaction is unavailable.
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
const Disabled = () => <RangeCalendar
|
|
200
|
+
aria-label="Billing period"
|
|
201
|
+
defaultFocusedValue={currentDate}
|
|
202
|
+
defaultValue={{
|
|
203
|
+
start: currentDate.subtract({ days: 3 }),
|
|
204
|
+
end: currentDate.add({ days: 3 }),
|
|
205
|
+
}}
|
|
206
|
+
isDisabled />;
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Read Only
|
|
210
|
+
|
|
211
|
+
Use Read Only to allow browsing without changing the selected range.
|
|
212
|
+
|
|
213
|
+
```tsx
|
|
214
|
+
const ReadOnly = () => <RangeCalendar
|
|
215
|
+
aria-label="Billing period"
|
|
216
|
+
defaultFocusedValue={currentDate}
|
|
217
|
+
defaultValue={{
|
|
218
|
+
start: currentDate.subtract({ days: 3 }),
|
|
219
|
+
end: currentDate.add({ days: 3 }),
|
|
220
|
+
}}
|
|
221
|
+
isReadOnly />;
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Invalid
|
|
225
|
+
|
|
226
|
+
Use Invalid with an actionable error message when the selected range fails validation.
|
|
227
|
+
|
|
228
|
+
```tsx
|
|
229
|
+
const Invalid = () => <RangeCalendar
|
|
230
|
+
aria-label="Billing period"
|
|
231
|
+
defaultFocusedValue={currentDate}
|
|
232
|
+
defaultValue={{
|
|
233
|
+
start: currentDate.subtract({ days: 3 }),
|
|
234
|
+
end: currentDate.add({ days: 3 }),
|
|
235
|
+
}}
|
|
236
|
+
isInvalid
|
|
237
|
+
errorMessage="Choose a range within the billing period." />;
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### International
|
|
241
|
+
|
|
242
|
+
Use I18nProvider to localize labels, weekday order, and navigation direction.
|
|
243
|
+
|
|
244
|
+
```tsx
|
|
245
|
+
const International = () => <I18nProvider locale="pl-PL">
|
|
246
|
+
<RangeCalendar
|
|
247
|
+
aria-label="Billing period"
|
|
248
|
+
defaultFocusedValue={currentDate}
|
|
249
|
+
defaultValue={{
|
|
250
|
+
start: currentDate.subtract({ days: 3 }),
|
|
251
|
+
end: currentDate.add({ days: 3 }),
|
|
252
|
+
}} />
|
|
253
|
+
</I18nProvider>;
|
|
254
|
+
```
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateValue } from 'react-aria-components';
|
|
3
|
+
import type { CalendarProps } from './types';
|
|
4
|
+
declare const Calendar: <T extends DateValue>({ className, errorMessage, ...props }: CalendarProps<T>) => React.JSX.Element;
|
|
5
|
+
export default Calendar;
|
|
6
|
+
//# sourceMappingURL=Calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,SAAS,EAAE,uCAIpC,aAAa,CAAC,CAAC,CAAC,sBA6ClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { CalendarProps as AriaCalendarProps, DateValue } from 'react-aria-components';
|
|
2
|
+
export interface CalendarProps<T extends DateValue = DateValue> extends Omit<AriaCalendarProps<T>, 'children' | 'visibleDuration'> {
|
|
3
|
+
errorMessage?: string;
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Calendar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,SAAS,EACV,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC1E,iBAAiB,CAAC,CAAC,CAAC,EACpB,UAAU,GAAG,iBAAiB,CAC/B;IAEC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DateValue } from 'react-aria-components';
|
|
3
|
+
import type { RangeCalendarProps } from './types';
|
|
4
|
+
declare const RangeCalendar: <T extends DateValue>({ className, errorMessage, ...props }: RangeCalendarProps<T>) => React.JSX.Element;
|
|
5
|
+
export default RangeCalendar;
|
|
6
|
+
//# sourceMappingURL=RangeCalendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RangeCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeCalendar/RangeCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,SAAS,EAAE,uCAIzC,kBAAkB,CAAC,CAAC,CAAC,sBAkDvB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeCalendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { RangeCalendarProps as AriaRangeCalendarProps, DateValue } from 'react-aria-components';
|
|
2
|
+
export interface RangeCalendarProps<T extends DateValue = DateValue> extends Omit<AriaRangeCalendarProps<T>, 'children' | 'visibleDuration'> {
|
|
3
|
+
errorMessage?: string;
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/RangeCalendar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,SAAS,EACV,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,SAAS,GAAG,SAAS,CAC/B,SAAQ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC;IAEvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
|
|
@@ -41,4 +41,8 @@ export type { CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant,
|
|
|
41
41
|
export type { EmptyStateHeadingLevel, EmptyStateProps, } from './EmptyState';
|
|
42
42
|
export type { ComboBoxProps, TextAreaProps, TextFieldProps, TextInputProps, } from './forms';
|
|
43
43
|
export type { SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, } from './SegmentedControl';
|
|
44
|
+
export { Calendar } from './Calendar';
|
|
45
|
+
export type { CalendarProps } from './Calendar';
|
|
46
|
+
export { RangeCalendar } from './RangeCalendar';
|
|
47
|
+
export type { RangeCalendarProps } from './RangeCalendar';
|
|
44
48
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,KAAK,EACL,UAAU,EACV,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACV,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,MAAM,EACN,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,IAAI,EACJ,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,cAAc,EACd,UAAU,EACV,OAAO,EACP,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,EACV,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,GAAG,EACH,OAAO,EACP,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,GAAG,EACH,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,MAAM,EACN,OAAO,EACP,cAAc,EACd,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,GACR,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,sBAAsB,EACtB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maxio-com/react-ui-components",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.24.0",
|
|
4
4
|
"description": "React UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.1.0",
|
|
49
49
|
"@floating-ui/react-dom": "^2.1.9",
|
|
50
50
|
"@floating-ui/react-dom-interactions": "^0.13.3",
|
|
51
|
+
"@internationalized/date": "^3.12.3",
|
|
51
52
|
"@maxio-com/design-tokens": "^4.2.3",
|
|
52
53
|
"@react-aria/toast": "3.1.1",
|
|
53
54
|
"@react-aria/utils": "^3.34.1",
|
|
@@ -64,5 +65,5 @@
|
|
|
64
65
|
"publishConfig": {
|
|
65
66
|
"access": "public"
|
|
66
67
|
},
|
|
67
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "e70f1aeeb6e52345ca86e70f1e8dc74918f3f0ae"
|
|
68
69
|
}
|
package/typings/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
|
|
3
3
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
4
|
-
import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
|
|
4
|
+
import { PopoverProps as PopoverProps$1, ToggleButtonGroupProps, ToggleButtonProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1 } from 'react-aria-components';
|
|
5
5
|
export { DialogTrigger, Pressable } from 'react-aria-components';
|
|
6
6
|
import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
|
|
7
7
|
import { MotionProps } from 'framer-motion';
|
|
@@ -894,6 +894,18 @@ type GridProps = {
|
|
|
894
894
|
|
|
895
895
|
declare const Grid: ({ children, templateColumns, templateRows, autoColumns, autoRows, inline, column, columnStart, columnEnd, row, rowStart, rowEnd, gap, gapX, gapY, className, justifyContent, alignItems, ...props }: GridProps) => React$1.JSX.Element;
|
|
896
896
|
|
|
897
|
+
interface CalendarProps<T extends DateValue = DateValue> extends Omit<CalendarProps$1<T>, 'children' | 'visibleDuration'> {
|
|
898
|
+
errorMessage?: string;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
declare const Calendar: <T extends DateValue>({ className, errorMessage, ...props }: CalendarProps<T>) => React$1.JSX.Element;
|
|
902
|
+
|
|
903
|
+
interface RangeCalendarProps<T extends DateValue = DateValue> extends Omit<RangeCalendarProps$1<T>, 'children' | 'visibleDuration'> {
|
|
904
|
+
errorMessage?: string;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
declare const RangeCalendar: <T extends DateValue>({ className, errorMessage, ...props }: RangeCalendarProps<T>) => React$1.JSX.Element;
|
|
908
|
+
|
|
897
909
|
type Sentiment = 'success' | 'danger';
|
|
898
910
|
type AuthLayoutProps = {
|
|
899
911
|
children: React.ReactNode;
|
|
@@ -908,5 +920,5 @@ type AuthLayoutProps = {
|
|
|
908
920
|
|
|
909
921
|
declare const AuthLayout: ({ children, heading, description, sentiment, leadingElement, alert, topAddon, footer, }: AuthLayoutProps) => React$1.JSX.Element;
|
|
910
922
|
|
|
911
|
-
export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
|
|
912
|
-
export type { ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
|
|
923
|
+
export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
|
|
924
|
+
export type { CalendarProps, ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, RangeCalendarProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
|