@mirohq/design-system-calendar 0.4.7 → 1.0.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 (6) hide show
  1. package/dist/main.js +482 -482
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +488 -488
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +278 -44
  6. package/package.json +16 -11
package/dist/main.js CHANGED
@@ -3,21 +3,24 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var designSystemPrimitive = require('@mirohq/design-system-primitive');
7
- var designSystemStitches = require('@mirohq/design-system-stitches');
8
6
  var React = require('react');
9
7
  var reactAria = require('react-aria');
10
- var date = require('@internationalized/date');
11
- var reactStately = require('react-stately');
12
- var designSystemFlex = require('@mirohq/design-system-flex');
13
- var designSystemButton = require('@mirohq/design-system-button');
8
+ var RadixPopover = require('@radix-ui/react-popover');
14
9
  var designSystemBaseForm = require('@mirohq/design-system-base-form');
15
10
  var designSystemIcons = require('@mirohq/design-system-icons');
16
11
  var designSystemExperiments = require('@mirohq/design-system-experiments');
12
+ var designSystemUtils = require('@mirohq/design-system-utils');
13
+ var designSystemPrimitive = require('@mirohq/design-system-primitive');
14
+ var designSystemStitches = require('@mirohq/design-system-stitches');
17
15
  var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
18
16
  var designSystemStyles = require('@mirohq/design-system-styles');
19
- var designSystemTooltip = require('@mirohq/design-system-tooltip');
20
17
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
18
+ var designSystemTooltip = require('@mirohq/design-system-tooltip');
19
+ var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
20
+ var reactStately = require('react-stately');
21
+ var date = require('@internationalized/date');
22
+ var designSystemFlex = require('@mirohq/design-system-flex');
23
+ var designSystemButton = require('@mirohq/design-system-button');
21
24
 
22
25
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
26
 
@@ -39,73 +42,205 @@ function _interopNamespace(e) {
39
42
  return Object.freeze(n);
40
43
  }
41
44
 
42
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
43
45
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
46
+ var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
44
47
 
45
- const Popover = (props) => {
46
- const ref = React__namespace.useRef(null);
47
- const { state, children } = props;
48
- const { dialogProps } = reactAria.useDialog(props, ref);
49
- const { popoverProps, underlayProps } = reactAria.usePopover(
48
+ const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
49
+ ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
50
+ padding: "0 $50"
51
+ });
52
+ const StyledValue$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
53
+ padding: "0 $50"
54
+ });
55
+ const StyledTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
56
+ display: "inline-flex",
57
+ gap: "$50",
58
+ justifyContent: "space-between",
59
+ alignItems: "center",
60
+ height: "$10",
61
+ padding: "0 $100",
62
+ minWidth: "230px",
63
+ ...designSystemBaseTextField.textFieldStyles.variants.idle,
64
+ "& svg": {
65
+ color: "$text-neutrals-subtle",
66
+ square: "22px"
67
+ },
68
+ _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
69
+ variants: {
70
+ v1: {
71
+ true: {
72
+ ...designSystemBaseTextField.textFieldStyles.v1.idle,
73
+ ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
74
+ },
75
+ false: {
76
+ ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
77
+ }
78
+ },
79
+ withClearButton: {
80
+ true: {
81
+ paddingRight: "calc($100 + $400)"
82
+ // initial left padding + clear button width + gap
83
+ }
84
+ }
85
+ }
86
+ });
87
+ const StyledCustomTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
88
+ width: "100%",
89
+ height: "unset",
90
+ padding: "0",
91
+ backgroundColor: "$transparent",
92
+ border: "none",
93
+ cursor: "pointer"
94
+ });
95
+
96
+ const StyledClearAction = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
97
+ position: "absolute",
98
+ top: 0,
99
+ bottom: 0,
100
+ right: "calc($100 + 1px)",
101
+ // to compensate border width
102
+ margin: "auto",
103
+ ...designSystemBaseTextField.actionButtonStyles
104
+ });
105
+
106
+ const ClearAction = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
107
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
108
+ StyledClearAction,
50
109
  {
51
- ...props,
52
- popoverRef: ref
110
+ ...restProps,
111
+ ref: forwardRef,
112
+ "aria-label": ariaLabel != null ? ariaLabel : label,
113
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
114
+ }
115
+ ) }),
116
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
117
+ ] }));
118
+
119
+ const CalendarContext = React.createContext({});
120
+ const CalendarProvider = ({
121
+ children,
122
+ visibleMonths = 1,
123
+ value: valueProp,
124
+ defaultValue: defaultValueProp,
125
+ onValueChange,
126
+ open: openProp,
127
+ defaultOpen: defaultOpenProp,
128
+ onOpen,
129
+ onClose,
130
+ ...restProps
131
+ }) => {
132
+ var _a;
133
+ const [immediateSave, setImmediateSave] = React.useState(false);
134
+ const [internalCalendarValue, setInternalCalendarValue] = React.useState(valueProp != null ? valueProp : defaultValueProp);
135
+ const visibleDuration = React.useMemo(
136
+ () => ({
137
+ months: visibleMonths
138
+ }),
139
+ [visibleMonths]
140
+ );
141
+ const [value, setValue] = reactUseControllableState.useControllableState({
142
+ prop: valueProp,
143
+ defaultProp: defaultValueProp,
144
+ onChange: onValueChange
145
+ });
146
+ const [open = false, setOpen] = reactUseControllableState.useControllableState({
147
+ prop: openProp,
148
+ defaultProp: defaultOpenProp,
149
+ onChange: (state) => {
150
+ if (state) {
151
+ onOpen == null ? void 0 : onOpen();
152
+ } else {
153
+ onClose == null ? void 0 : onClose();
154
+ }
155
+ }
156
+ });
157
+ const onCalendarDateClick = React.useCallback(
158
+ (value2) => {
159
+ if (immediateSave) {
160
+ setInternalCalendarValue(value2);
161
+ } else {
162
+ setValue(value2);
163
+ setOpen(false);
164
+ }
53
165
  },
54
- state
166
+ [setValue, setOpen, immediateSave, setInternalCalendarValue]
167
+ );
168
+ const onSaveClick = () => {
169
+ setValue(internalCalendarValue);
170
+ setOpen(false);
171
+ };
172
+ return /* @__PURE__ */ jsxRuntime.jsx(
173
+ CalendarContext.Provider,
174
+ {
175
+ value: {
176
+ ...restProps,
177
+ visibleDuration,
178
+ value,
179
+ setValue,
180
+ open,
181
+ setOpen,
182
+ onCalendarDateClick,
183
+ setImmediateSave,
184
+ onSaveClick,
185
+ // value should not be undefined otherwise react-aria calendar will complain in console
186
+ calendarValue: (_a = immediateSave ? internalCalendarValue : value) != null ? _a : null
187
+ },
188
+ children
189
+ }
55
190
  );
56
- return /* @__PURE__ */ jsxRuntime.jsxs(reactAria.Overlay, { children: [
57
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...underlayProps }),
58
- /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref, children: [
59
- /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
60
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...dialogProps, ref, children }),
61
- /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
62
- ] })
63
- ] });
64
191
  };
192
+ const useCalendarContext = () => React.useContext(CalendarContext);
65
193
 
66
- const StyledGroup = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
67
- position: "relative"
68
- });
69
- const StyledPicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
70
-
71
- const StyledPredefinedRanges = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
72
- display: "flex",
73
- flexDirection: "column",
74
- borderRight: "1px solid $border-neutrals",
75
- padding: "$300 $200 0 $200",
76
- "& button": {
77
- backgroundColor: "$transparent",
78
- border: "none",
79
- fontSize: "$200",
80
- padding: "0 0 0 $100",
81
- textAlign: "left",
82
- lineHeight: "24px",
83
- color: "$text-neutrals",
84
- marginBottom: "$150",
85
- borderRadius: "$50",
86
- minWidth: "125px",
87
- cursor: "pointer",
88
- "&:hover": {
89
- backgroundColor: "$background-primary-prominent-hover",
90
- color: "$text-primary-inverted",
91
- fontWeight: "600"
194
+ const Trigger = React__default["default"].forwardRef(
195
+ ({
196
+ id,
197
+ "aria-describedby": ariaDescribedBy,
198
+ placeholder,
199
+ asChild = false,
200
+ clearable = true,
201
+ clearLabel,
202
+ onClear,
203
+ children,
204
+ ...restProps
205
+ }, forwardRef) => {
206
+ const [v1] = designSystemExperiments.useNewDesignLanguage();
207
+ const { value, setValue } = useCalendarContext();
208
+ const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = designSystemBaseForm.useFormFieldContext();
209
+ if (asChild) {
210
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { asChild: true, ...restProps, children }) });
92
211
  }
212
+ const onClearHandler = () => {
213
+ setValue(void 0);
214
+ if (onClear !== void 0) {
215
+ onClear();
216
+ }
217
+ };
218
+ const clearButtonVisible = clearable && value != null && clearLabel !== void 0;
219
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
220
+ /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
221
+ StyledTrigger,
222
+ {
223
+ id: id != null ? id : formElementId,
224
+ "aria-describedby": designSystemUtils.stringAttrValue(
225
+ ariaDescribedBy,
226
+ formFieldContextDescribedBy
227
+ ),
228
+ v1,
229
+ withClearButton: clearButtonVisible,
230
+ ...restProps,
231
+ children: [
232
+ value != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
233
+ !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
234
+ ]
235
+ }
236
+ ) }),
237
+ clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearAction, { label: clearLabel, onPress: onClearHandler })
238
+ ] });
93
239
  }
94
- });
95
-
96
- const PredefinedRanges = React__default["default"].forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledPredefinedRanges, { ref: forwardRef, children: range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ jsxRuntime.jsx(
97
- designSystemButton.Button,
98
- {
99
- variant: "ghost",
100
- size: "medium",
101
- type: "button",
102
- onClick: () => onClick(date),
103
- children: date.label
104
- },
105
- i
106
- )) }));
240
+ );
107
241
 
108
- const StyledBody = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
242
+ const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
243
+ zIndex: "$calendar",
109
244
  display: "inline-block",
110
245
  background: "$background-neutrals"
111
246
  });
@@ -135,11 +270,23 @@ const StyledBodyContentRight = designSystemStitches.styled(designSystemPrimitive
135
270
  paddingRight: "$200"
136
271
  });
137
272
  const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
273
+ display: "flex",
274
+ gap: "$100",
138
275
  padding: "$200",
139
276
  borderTop: "1px solid $border-neutrals"
140
277
  });
141
278
 
142
- const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
279
+ const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
280
+ justifyContent: "center",
281
+ flex: "3",
282
+ color: "$text-neutrals"
283
+ });
284
+ const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
285
+ padding: "0 $200",
286
+ color: "$text-neutrals"
287
+ });
288
+
289
+ const StyledHeaderButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
143
290
  padding: "0",
144
291
  backgroundColor: "$transparent",
145
292
  border: "none",
@@ -150,21 +297,18 @@ const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive
150
297
  }
151
298
  });
152
299
 
153
- const Button = React__default["default"].forwardRef((props, forwardRef) => {
300
+ const HeaderButton = React__default["default"].forwardRef((props, forwardRef) => {
154
301
  const { buttonProps } = reactAria.useButton(props, forwardRef);
155
302
  const { focusProps } = reactAria.useFocusRing();
156
303
  const { children } = props;
157
- return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
158
- });
159
-
160
- const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
161
- justifyContent: "center",
162
- flex: "3",
163
- color: "$text-neutrals"
164
- });
165
- const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
166
- padding: "0 $200",
167
- color: "$text-neutrals"
304
+ return /* @__PURE__ */ jsxRuntime.jsx(
305
+ StyledHeaderButton,
306
+ {
307
+ ...reactAria.mergeProps(buttonProps, focusProps),
308
+ ref: forwardRef,
309
+ children
310
+ }
311
+ );
168
312
  });
169
313
 
170
314
  const Header = ({
@@ -179,14 +323,14 @@ const Header = ({
179
323
  timeZone: state.timeZone
180
324
  });
181
325
  return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
182
- /* @__PURE__ */ jsxRuntime.jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
326
+ /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
183
327
  /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
184
328
  state.visibleRange.start.toDate(state.timeZone)
185
329
  ) }) }),
186
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
330
+ visibleMonths === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
187
331
  state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
188
332
  ) }) }),
189
- /* @__PURE__ */ jsxRuntime.jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
333
+ /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
190
334
  ] });
191
335
  };
192
336
 
@@ -256,45 +400,43 @@ const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.d
256
400
  }
257
401
  });
258
402
 
259
- const Cell = React__default["default"].forwardRef(
260
- (props, forwardRef) => {
261
- const { state, date: date$1, currentMonth } = props;
262
- const ref = React.useRef(null);
263
- const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
264
- const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
265
- const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
266
- const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
267
- const { locale } = reactAria.useLocale();
268
- const dayOfWeek = date.getDayOfWeek(date$1, locale);
269
- const isWeekendDay = date.isWeekend(date$1, locale);
270
- const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
271
- const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
272
- const { focusProps } = reactAria.useFocusRing();
273
- return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
274
- StyledCell,
275
- {
276
- ...reactAria.mergeProps(buttonProps, focusProps),
277
- ref: forwardRef,
278
- "data-selected": isSelected ? "" : void 0,
279
- "data-selection-start": isRoundedLeft ? "" : void 0,
280
- "data-selection-end": isRoundedRight ? "" : void 0,
281
- "data-disabled": isDisabled ? "" : void 0,
282
- "data-hidden": isOutsideMonth ? "" : void 0,
283
- children: /* @__PURE__ */ jsxRuntime.jsx(
284
- StyledCellContent,
285
- {
286
- "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
287
- "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
288
- "data-disabled": isDisabled ? "" : void 0,
289
- "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
290
- "data-weekend": isWeekendDay ? "" : void 0,
291
- children: formattedDate
292
- }
293
- )
294
- }
295
- ) });
296
- }
297
- );
403
+ const Cell = (props) => {
404
+ const { state, date: date$1, currentMonth } = props;
405
+ const ref = React.useRef(null);
406
+ const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
407
+ const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
408
+ const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
409
+ const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
410
+ const { locale } = reactAria.useLocale();
411
+ const dayOfWeek = date.getDayOfWeek(date$1, locale);
412
+ const isWeekendDay = date.isWeekend(date$1, locale);
413
+ const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
414
+ const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
415
+ const { focusProps } = reactAria.useFocusRing();
416
+ return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
417
+ StyledCell,
418
+ {
419
+ ...reactAria.mergeProps(buttonProps, focusProps),
420
+ ref,
421
+ "data-selected": isSelected ? "" : void 0,
422
+ "data-selection-start": isRoundedLeft ? "" : void 0,
423
+ "data-selection-end": isRoundedRight ? "" : void 0,
424
+ "data-disabled": isDisabled ? "" : void 0,
425
+ "data-hidden": isOutsideMonth ? "" : void 0,
426
+ children: /* @__PURE__ */ jsxRuntime.jsx(
427
+ StyledCellContent,
428
+ {
429
+ "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
430
+ "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
431
+ "data-disabled": isDisabled ? "" : void 0,
432
+ "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
433
+ "data-weekend": isWeekendDay ? "" : void 0,
434
+ children: formattedDate
435
+ }
436
+ )
437
+ }
438
+ ) });
439
+ };
298
440
 
299
441
  const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.table, {
300
442
  borderCollapse: "separate",
@@ -332,411 +474,269 @@ const Grid = React__default["default"].forwardRef(
332
474
  }
333
475
  );
334
476
 
335
- const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
336
- ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
337
- padding: "0 $50"
338
- });
339
- const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
340
- padding: "0 $50"
341
- });
342
- const StyledTriggerContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
343
- position: "relative"
344
- });
345
- const StyledTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
346
- all: "unset",
347
- display: "inline-flex",
348
- gap: "$50",
349
- justifyContent: "space-between",
350
- alignItems: "center",
351
- height: "$10",
352
- padding: "0 $100",
353
- minWidth: "230px",
354
- ...designSystemBaseTextField.textFieldStyles.variants.idle,
355
- "& svg": {
356
- color: "$text-neutrals-subtle",
357
- square: "22px"
358
- },
359
- _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
360
- variants: {
361
- v1: {
362
- true: {
363
- ...designSystemBaseTextField.textFieldStyles.v1.idle,
364
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
365
- },
366
- false: {
367
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
368
- }
369
- },
370
- withClearButton: {
371
- true: {
372
- paddingRight: "calc($100 + $400)"
373
- // initial left padding + clear button width + gap
374
- }
375
- }
376
- }
377
- });
378
- const StyledCustomTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
379
- width: "100%",
380
- height: "unset",
381
- padding: "0",
382
- backgroundColor: "$transparent",
383
- border: "none",
384
- cursor: "pointer"
385
- });
386
-
387
- const StyledClearButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
388
- position: "absolute",
389
- top: 0,
390
- bottom: 0,
391
- right: "calc($100 + 1px)",
392
- // to compensate border width
393
- margin: "auto",
394
- ...designSystemBaseTextField.actionButtonStyles
395
- });
396
-
397
- const ClearButton = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
398
- /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
399
- StyledClearButton,
400
- {
401
- ...restProps,
402
- ref: forwardRef,
403
- "aria-label": ariaLabel != null ? ariaLabel : label,
404
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
405
- }
406
- ) }),
407
- /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
408
- ] }));
409
-
410
- function dateToString(value) {
411
- if (value == null) {
412
- return void 0;
413
- }
414
- if ("start" in value) {
415
- if (value.start == null || value.end == null) {
416
- return void 0;
417
- }
418
- return "".concat(value.start, " - ").concat(value.end);
419
- }
420
- return value.toString();
421
- }
422
- const Trigger = React__default["default"].forwardRef(
423
- ({
424
- placeholder,
425
- displayValue,
426
- stateValue,
427
- asChild = false,
428
- clearable = true,
429
- clearActionLabel,
430
- onClear,
431
- ...restProps
432
- }, forwardRef) => {
433
- const [v1] = designSystemExperiments.useNewDesignLanguage();
434
- const { buttonProps } = reactAria.useButton(
435
- restProps,
436
- forwardRef
437
- );
438
- const { children } = restProps;
439
- if (asChild) {
440
- return /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { ...buttonProps, children });
441
- }
442
- const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
443
- const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
444
- return /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerContainer, { children: [
445
- /* @__PURE__ */ jsxRuntime.jsxs(
446
- StyledTrigger,
477
+ const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
478
+ const SharedContent = React__default["default"].forwardRef(
479
+ ({ calendarProps, prevButtonProps, nextButtonProps, children, state }, forwardRef) => {
480
+ const { visibleDuration } = useCalendarContext();
481
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContent, { ...calendarProps, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
482
+ /* @__PURE__ */ jsxRuntime.jsx(
483
+ Header,
447
484
  {
448
- "data-custom": "",
449
- ...buttonProps,
450
- v1,
451
- ref: forwardRef,
452
- withClearButton: clearButtonVisible,
453
- children: [
454
- valueToDisplay != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
455
- !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
456
- ]
485
+ state,
486
+ prevButtonProps,
487
+ nextButtonProps,
488
+ visibleMonths: visibleDuration.months
457
489
  }
458
490
  ),
459
- clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
460
- ] });
491
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
492
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
493
+ visibleDuration.months === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
494
+ ] }),
495
+ children != null && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children })
496
+ ] }) });
461
497
  }
462
498
  );
463
-
464
- const RangePicker = React__default["default"].forwardRef((props, forwardRef) => {
499
+ const DatePickerContent = ({ children }) => {
500
+ const { locale } = reactAria.useLocale();
465
501
  const {
466
- predefinedRanges,
502
+ calendarValue,
503
+ visibleDuration,
467
504
  minDate,
468
505
  maxDate,
469
- visibleMonths,
470
- clearButtonText,
471
- children,
472
- defaultOpen,
473
- onClear,
474
- label,
475
- placeholder,
476
- displayValue
477
- } = props;
478
- const state = reactStately.useDateRangePickerState(
479
- props
506
+ onCalendarDateClick
507
+ } = useCalendarContext();
508
+ const state = reactStately.useCalendarState({
509
+ value: calendarValue,
510
+ visibleDuration,
511
+ minValue: minDate,
512
+ maxValue: maxDate,
513
+ autoFocus: true,
514
+ onChange: onCalendarDateClick,
515
+ locale,
516
+ createCalendar: date.createCalendar
517
+ });
518
+ const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
519
+ {},
520
+ state
480
521
  );
481
- const ref = React.useRef(null);
482
- const { locale } = reactAria.useLocale();
483
- const { groupProps, labelProps, buttonProps } = reactAria.useDateRangePicker(
522
+ return /* @__PURE__ */ jsxRuntime.jsx(
523
+ SharedContent,
484
524
  {
485
- ...props,
486
- isOpen: defaultOpen,
487
- label
488
- },
489
- state,
490
- ref
525
+ calendarProps,
526
+ prevButtonProps,
527
+ nextButtonProps,
528
+ state,
529
+ children
530
+ }
491
531
  );
492
- const change = (value) => {
493
- state.setValue(value);
494
- state.close();
495
- };
496
- const rangeState = reactStately.useRangeCalendarState({
497
- ...props,
498
- visibleDuration: visibleMonths,
532
+ };
533
+ const RangePickerContent = ({ children }) => {
534
+ const { locale } = reactAria.useLocale();
535
+ const {
536
+ calendarValue,
537
+ visibleDuration,
538
+ minDate,
539
+ maxDate,
540
+ onCalendarDateClick
541
+ } = useCalendarContext();
542
+ const ref = React.useRef(null);
543
+ const state = reactStately.useRangeCalendarState({
544
+ value: calendarValue,
545
+ visibleDuration,
499
546
  minValue: minDate,
500
547
  maxValue: maxDate,
501
548
  autoFocus: true,
502
- onFocusChange: focus,
503
- onChange: change,
549
+ onChange: onCalendarDateClick,
504
550
  locale,
505
551
  createCalendar: date.createCalendar
506
552
  });
507
553
  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useRangeCalendar(
508
- props,
509
- rangeState,
554
+ {},
555
+ state,
510
556
  ref
511
557
  );
512
- const rangeClick = React.useCallback(
513
- (selectedRange) => {
514
- if (selectedRange.range !== void 0) {
515
- state.setValue(selectedRange.range);
516
- rangeState.setValue(selectedRange.range);
558
+ return /* @__PURE__ */ jsxRuntime.jsx(
559
+ SharedContent,
560
+ {
561
+ ref,
562
+ calendarProps,
563
+ prevButtonProps,
564
+ nextButtonProps,
565
+ state,
566
+ children
567
+ }
568
+ );
569
+ };
570
+ const Content = React__default["default"].forwardRef(
571
+ ({
572
+ side = "bottom",
573
+ sideOffset = CONTENT_OFFSET,
574
+ align = "start",
575
+ alignOffset = 0,
576
+ collisionPadding = 0,
577
+ avoidCollisions = true,
578
+ sticky = "partial",
579
+ hideWhenDetached = true,
580
+ children,
581
+ ...restProps
582
+ }, forwardRef) => {
583
+ const { picker, open } = useCalendarContext();
584
+ if (!open) {
585
+ return null;
586
+ }
587
+ return /* @__PURE__ */ jsxRuntime.jsx(
588
+ StyledContent,
589
+ {
590
+ ...restProps,
591
+ ref: forwardRef,
592
+ side,
593
+ sideOffset,
594
+ align,
595
+ alignOffset,
596
+ collisionPadding,
597
+ avoidCollisions,
598
+ sticky,
599
+ hideWhenDetached,
600
+ children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DatePickerContent, { children }) : /* @__PURE__ */ jsxRuntime.jsx(RangePickerContent, { children })
517
601
  }
518
- },
519
- [rangeState, state]
602
+ );
603
+ }
604
+ );
605
+
606
+ const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
607
+
608
+ const DEFAULT_FORMAT = {
609
+ day: "2-digit",
610
+ month: "short",
611
+ year: "numeric"
612
+ };
613
+ const DEFAULT_TIMEZONE = "UTC";
614
+ function formatDate(date, formatter) {
615
+ return formatter.format(date.toDate(DEFAULT_TIMEZONE));
616
+ }
617
+ function formatValue(value, formatter) {
618
+ if (value == null) {
619
+ return void 0;
620
+ }
621
+ if ("start" in value) {
622
+ if (value.start == null || value.end == null) {
623
+ return void 0;
624
+ }
625
+ return "".concat(formatDate(value.start, formatter), " - ").concat(formatDate(
626
+ value.end,
627
+ formatter
628
+ ));
629
+ }
630
+ return formatDate(value, formatter);
631
+ }
632
+ const Value = React__default["default"].forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
633
+ const { value } = useCalendarContext();
634
+ const formatWithTimeZone = React.useMemo(
635
+ () => ({ ...format, DEFAULT_TIMEZONE }),
636
+ [format]
520
637
  );
638
+ const dateFormatter = reactAria.useDateFormatter(formatWithTimeZone);
639
+ const valueToDisplay = formatValue(value, dateFormatter);
640
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
641
+ });
642
+
643
+ const ClearButton = React__default["default"].forwardRef(({ onClear, children, ...restProps }, forwardRef) => {
644
+ const { value, setValue } = useCalendarContext();
521
645
  const onClearHandler = () => {
522
- state.setValue({ start: null, end: null });
646
+ setValue(void 0);
523
647
  if (onClear !== void 0) {
524
648
  onClear();
525
- state.close();
526
649
  }
527
650
  };
528
- const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
529
- return /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
530
- children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
531
- label !== void 0 && // todo refactoring: use Form Field context
532
- /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
533
- /* @__PURE__ */ jsxRuntime.jsx(
534
- Trigger,
535
- {
536
- ...buttonProps,
537
- placeholder,
538
- displayValue,
539
- stateValue: state.value,
540
- clearable: clearableTrigger,
541
- clearActionLabel: clearableTrigger ? clearButtonText : void 0,
542
- onClear: clearableTrigger ? onClearHandler : void 0
543
- }
544
- )
545
- ] }),
546
- children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
547
- state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { children: [
548
- predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
549
- PredefinedRanges,
550
- {
551
- range: predefinedRanges,
552
- onClick: rangeClick
553
- }
554
- ),
555
- /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", ...calendarProps, children: [
556
- /* @__PURE__ */ jsxRuntime.jsx(
557
- Header,
558
- {
559
- state: rangeState,
560
- prevButtonProps,
561
- nextButtonProps,
562
- visibleMonths
563
- }
564
- ),
565
- /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
566
- /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state: rangeState }) }),
567
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(
568
- Grid,
569
- {
570
- onChange: change,
571
- state: rangeState,
572
- offset: { months: 1 }
573
- }
574
- ) })
575
- ] }),
576
- onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
577
- designSystemButton.Button,
578
- {
579
- size: "medium",
580
- type: "button",
581
- onClick: onClearHandler,
582
- disabled: rangeState.value === null,
583
- children: clearButtonText
584
- }
585
- ) })
586
- ] })
587
- ] }) }) })
588
- ] });
651
+ return /* @__PURE__ */ jsxRuntime.jsx(
652
+ designSystemButton.Button,
653
+ {
654
+ ...restProps,
655
+ ref: forwardRef,
656
+ variant: "ghost",
657
+ size: "medium",
658
+ onClick: onClearHandler,
659
+ disabled: value === null,
660
+ children
661
+ }
662
+ );
589
663
  });
590
664
 
591
- const DatePickerBody = React__default["default"].forwardRef((props, forwardRef) => {
592
- const {
593
- predefinedRanges,
594
- visibleMonths,
595
- onClear,
596
- minDate,
597
- maxDate,
598
- clearButtonText
599
- } = props;
600
- const { locale } = reactAria.useLocale();
601
- const state = reactStately.useCalendarState({
602
- ...props,
603
- visibleDuration: visibleMonths,
604
- minValue: minDate,
605
- maxValue: maxDate,
606
- locale,
607
- createCalendar: date.createCalendar
608
- });
609
- const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
610
- props,
611
- state
612
- );
613
- const dateClick = React.useCallback(
614
- (selectedRange) => {
615
- if (selectedRange.date !== void 0)
616
- state.setValue(selectedRange.date);
617
- },
618
- [state]
665
+ const SaveButton = React__default["default"].forwardRef(({ onSave, children, ...restProps }, forwardRef) => {
666
+ const { setImmediateSave, onSaveClick } = useCalendarContext();
667
+ React.useEffect(() => {
668
+ setImmediateSave(true);
669
+ return () => setImmediateSave(false);
670
+ }, [setImmediateSave]);
671
+ const onSaveHandler = () => {
672
+ onSaveClick();
673
+ if (onSave !== void 0) {
674
+ onSave();
675
+ }
676
+ };
677
+ return /* @__PURE__ */ jsxRuntime.jsx(
678
+ designSystemButton.Button,
679
+ {
680
+ ref: forwardRef,
681
+ ...restProps,
682
+ variant: "primary",
683
+ size: "medium",
684
+ onClick: onSaveHandler,
685
+ children
686
+ }
619
687
  );
620
- return /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { ...calendarProps, children: [
621
- predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
622
- /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
623
- /* @__PURE__ */ jsxRuntime.jsx(
624
- Header,
625
- {
626
- state,
627
- prevButtonProps,
628
- nextButtonProps,
629
- visibleMonths
630
- }
631
- ),
632
- /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
633
- /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
634
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
635
- ] }),
636
- onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
637
- designSystemButton.Button,
638
- {
639
- size: "medium",
640
- onClick: onClear,
641
- disabled: state.value === null,
642
- children: clearButtonText
643
- }
644
- ) })
645
- ] })
646
- ] }) });
647
688
  });
648
689
 
649
- const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
650
- const {
690
+ const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
691
+ position: "relative"
692
+ });
693
+
694
+ const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
695
+ const { open, setOpen } = useCalendarContext();
696
+ const { label, isFloatingLabel } = designSystemBaseForm.useFormFieldContext();
697
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCalendar, { ref: forwardRef, ...restProps, children: [
698
+ label !== null && isFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, size: "medium", children: label }),
699
+ children
700
+ ] }) });
701
+ });
702
+ const Calendar = React__default["default"].forwardRef(
703
+ ({
651
704
  picker,
652
- predefinedRanges,
653
- visibleMonths,
654
705
  defaultValue,
706
+ value,
707
+ onValueChange,
708
+ defaultOpen,
709
+ open,
710
+ onClose,
711
+ onOpen,
712
+ locale,
713
+ visibleMonths,
655
714
  minDate,
656
715
  maxDate,
657
716
  children,
658
- clearButtonText,
659
- defaultOpen,
660
- onClear,
661
- label,
662
- placeholder,
663
- displayValue
664
- } = props;
665
- const ref = React.useRef(null);
666
- const state = reactStately.useDatePickerState(props);
667
- const { groupProps, buttonProps, calendarProps, labelProps } = reactAria.useDatePicker(
668
- {
669
- ...props,
670
- isOpen: defaultOpen,
671
- label
672
- },
673
- state,
674
- ref
675
- );
676
- const onClearHandler = () => {
677
- state.setValue(null);
678
- if (onClear !== void 0) {
679
- onClear();
680
- }
681
- };
682
- const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
683
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
684
- children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
685
- label !== void 0 && // todo refactoring: use Form Field context
686
- /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
687
- /* @__PURE__ */ jsxRuntime.jsx(
688
- Trigger,
689
- {
690
- ...buttonProps,
691
- placeholder,
692
- displayValue,
693
- stateValue: state.value,
694
- clearable: clearableTrigger,
695
- clearActionLabel: clearableTrigger ? clearButtonText : void 0,
696
- onClear: clearableTrigger ? onClearHandler : void 0
697
- }
698
- )
699
- ] }),
700
- children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
701
- state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(
702
- DatePickerBody,
703
- {
704
- ...calendarProps,
705
- defaultValue,
706
- predefinedRanges,
707
- visibleMonths,
708
- onClear: onClear !== void 0 ? onClearHandler : void 0,
709
- minDate,
710
- maxDate,
711
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
712
- ref: forwardRef
713
- }
714
- ) })
715
- ] }) : /* @__PURE__ */ jsxRuntime.jsx(
716
- DatePickerBody,
717
- {
718
- ...calendarProps,
719
- ref: forwardRef,
717
+ ...props
718
+ }, forwardRef) => {
719
+ const providerProps = {
720
+ picker,
720
721
  defaultValue,
721
- predefinedRanges,
722
+ value,
723
+ onValueChange,
722
724
  visibleMonths,
723
- onClear: onClear !== void 0 ? onClearHandler : void 0,
724
725
  minDate,
725
726
  maxDate,
726
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0
727
- }
728
- ) });
729
- });
730
-
731
- const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
732
- const Calendar = React__default["default"].forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCalendar, { ref: forwardRef, children: picker === "range" ? /* @__PURE__ */ jsxRuntime.jsx(RangePicker, { defaultValue, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
733
- DatePicker,
734
- {
735
- defaultValue,
736
- ...props,
737
- picker
727
+ defaultOpen,
728
+ open,
729
+ onClose,
730
+ onOpen
731
+ };
732
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, ref: forwardRef, children }) }) });
738
733
  }
739
- ) }));
734
+ );
735
+ Calendar.Trigger = Trigger;
736
+ Calendar.Content = Content;
737
+ Calendar.Value = Value;
738
+ Calendar.ClearButton = ClearButton;
739
+ Calendar.SaveButton = SaveButton;
740
740
 
741
741
  exports.Calendar = Calendar;
742
742
  //# sourceMappingURL=main.js.map