@ark-ui/react 5.30.0 → 5.31.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 (101) hide show
  1. package/dist/components/accordion/accordion-item.cjs +1 -0
  2. package/dist/components/accordion/accordion-item.js +1 -0
  3. package/dist/components/accordion/index.cjs +4 -4
  4. package/dist/components/angle-slider/index.cjs +4 -4
  5. package/dist/components/avatar/index.cjs +4 -4
  6. package/dist/components/bottom-sheet/index.cjs +4 -4
  7. package/dist/components/checkbox/use-checkbox.cjs +1 -1
  8. package/dist/components/checkbox/use-checkbox.js +1 -1
  9. package/dist/components/clipboard/index.cjs +4 -4
  10. package/dist/components/collapsible/index.cjs +4 -4
  11. package/dist/components/collection/tree-collection.js +1 -1
  12. package/dist/components/color-picker/index.cjs +4 -4
  13. package/dist/components/date-picker/date-picker-root.cjs +1 -0
  14. package/dist/components/date-picker/date-picker-root.js +1 -0
  15. package/dist/components/date-picker/date-picker-value-text.cjs +30 -0
  16. package/dist/components/date-picker/date-picker-value-text.d.cts +29 -0
  17. package/dist/components/date-picker/date-picker-value-text.d.ts +29 -0
  18. package/dist/components/date-picker/date-picker-value-text.js +26 -0
  19. package/dist/components/date-picker/date-picker.anatomy.cjs +1 -1
  20. package/dist/components/date-picker/date-picker.anatomy.d.cts +1 -1
  21. package/dist/components/date-picker/date-picker.anatomy.d.ts +1 -1
  22. package/dist/components/date-picker/date-picker.anatomy.js +1 -1
  23. package/dist/components/date-picker/date-picker.cjs +2 -0
  24. package/dist/components/date-picker/date-picker.d.cts +1 -0
  25. package/dist/components/date-picker/date-picker.d.ts +1 -0
  26. package/dist/components/date-picker/date-picker.js +1 -0
  27. package/dist/components/date-picker/index.cjs +6 -4
  28. package/dist/components/date-picker/index.d.cts +1 -0
  29. package/dist/components/date-picker/index.d.ts +1 -0
  30. package/dist/components/date-picker/index.js +1 -0
  31. package/dist/components/dialog/index.cjs +4 -4
  32. package/dist/components/editable/index.cjs +4 -4
  33. package/dist/components/file-upload/file-upload-root.cjs +1 -0
  34. package/dist/components/file-upload/file-upload-root.js +1 -0
  35. package/dist/components/file-upload/index.cjs +4 -4
  36. package/dist/components/floating-panel/index.cjs +4 -4
  37. package/dist/components/hover-card/index.cjs +4 -4
  38. package/dist/components/image-cropper/index.cjs +4 -4
  39. package/dist/components/index.cjs +162 -145
  40. package/dist/components/index.js +3 -0
  41. package/dist/components/json-tree-view/json-tree-view-root-provider.cjs +4 -1
  42. package/dist/components/json-tree-view/json-tree-view-root-provider.d.cts +3 -1
  43. package/dist/components/json-tree-view/json-tree-view-root-provider.d.ts +3 -1
  44. package/dist/components/json-tree-view/json-tree-view-root-provider.js +4 -1
  45. package/dist/components/json-tree-view/use-json-tree-view.cjs +12 -2
  46. package/dist/components/json-tree-view/use-json-tree-view.d.cts +4 -2
  47. package/dist/components/json-tree-view/use-json-tree-view.d.ts +4 -2
  48. package/dist/components/json-tree-view/use-json-tree-view.js +13 -3
  49. package/dist/components/marquee/index.cjs +4 -4
  50. package/dist/components/menu/index.cjs +4 -4
  51. package/dist/components/navigation-menu/index.cjs +4 -4
  52. package/dist/components/navigation-menu/navigation-menu-viewport-positioner.cjs +4 -3
  53. package/dist/components/navigation-menu/navigation-menu-viewport-positioner.js +4 -3
  54. package/dist/components/navigation-menu/navigation-menu-viewport.cjs +8 -6
  55. package/dist/components/navigation-menu/navigation-menu-viewport.d.cts +1 -2
  56. package/dist/components/navigation-menu/navigation-menu-viewport.d.ts +1 -2
  57. package/dist/components/navigation-menu/navigation-menu-viewport.js +8 -6
  58. package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.cjs +16 -0
  59. package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.d.cts +3 -0
  60. package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.d.ts +3 -0
  61. package/dist/components/navigation-menu/use-navigation-menu-viewport-props-context.js +11 -0
  62. package/dist/components/number-input/index.cjs +4 -4
  63. package/dist/components/pagination/index.cjs +4 -4
  64. package/dist/components/password-input/index.cjs +4 -4
  65. package/dist/components/pin-input/index.cjs +4 -4
  66. package/dist/components/popover/index.cjs +4 -4
  67. package/dist/components/progress/examples/circular/with-label.d.cts +1 -0
  68. package/dist/components/progress/examples/circular/with-label.d.ts +1 -0
  69. package/dist/components/progress/index.cjs +4 -4
  70. package/dist/components/scroll-area/index.cjs +4 -4
  71. package/dist/components/select/index.cjs +4 -4
  72. package/dist/components/signature-pad/index.cjs +4 -4
  73. package/dist/components/slider/index.cjs +4 -4
  74. package/dist/components/slider/slider-root.cjs +1 -1
  75. package/dist/components/slider/slider-root.js +1 -1
  76. package/dist/components/splitter/index.cjs +5 -5
  77. package/dist/components/steps/index.cjs +4 -4
  78. package/dist/components/steps/steps-root.cjs +4 -1
  79. package/dist/components/steps/steps-root.js +4 -1
  80. package/dist/components/tabs/index.cjs +4 -4
  81. package/dist/components/tags-input/index.cjs +4 -4
  82. package/dist/components/tags-input/tags-input-root.cjs +1 -0
  83. package/dist/components/tags-input/tags-input-root.js +1 -0
  84. package/dist/components/timer/index.cjs +4 -4
  85. package/dist/components/toast/index.cjs +4 -4
  86. package/dist/components/toggle-group/index.cjs +4 -4
  87. package/dist/components/tooltip/index.cjs +4 -4
  88. package/dist/components/tour/index.cjs +15 -0
  89. package/dist/components/tour/index.d.cts +3 -1
  90. package/dist/components/tour/index.d.ts +3 -1
  91. package/dist/components/tour/index.js +2 -0
  92. package/dist/components/tour/wait-for-event.cjs +26 -0
  93. package/dist/components/tour/wait-for-event.d.cts +6 -0
  94. package/dist/components/tour/wait-for-event.d.ts +6 -0
  95. package/dist/components/tour/wait-for-event.js +22 -0
  96. package/dist/components/tree-view/index.cjs +4 -4
  97. package/dist/index.cjs +162 -145
  98. package/dist/index.js +3 -0
  99. package/package.json +75 -74
  100. package/dist/components/progress/examples/circular/value-text.d.cts +0 -1
  101. package/dist/components/progress/examples/circular/value-text.d.ts +0 -1
@@ -12,6 +12,7 @@ const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
12
12
  require('@zag-js/color-picker');
13
13
  require('@zag-js/date-picker');
14
14
  require('@zag-js/splitter');
15
+ require('@zag-js/tour');
15
16
  const createSplitProps = require('../../utils/create-split-props.cjs');
16
17
  const renderStrategy = require('../../utils/render-strategy.cjs');
17
18
  const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
@@ -8,6 +8,7 @@ import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
8
8
  import '@zag-js/color-picker';
9
9
  import '@zag-js/date-picker';
10
10
  import '@zag-js/splitter';
11
+ import '@zag-js/tour';
11
12
  import { createSplitProps } from '../../utils/create-split-props.js';
12
13
  import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
13
14
  import { AccordionItemPropsProvider } from './use-accordion-item-props-context.js';
@@ -13,8 +13,8 @@ const accordionRootProvider = require('./accordion-root-provider.cjs');
13
13
  const useAccordion = require('./use-accordion.cjs');
14
14
  const useAccordionContext = require('./use-accordion-context.cjs');
15
15
  const useAccordionItemContext = require('./use-accordion-item-context.cjs');
16
- const accordion$1 = require('./accordion.cjs');
17
- const accordion = require('@zag-js/accordion');
16
+ const accordion = require('./accordion.cjs');
17
+ const accordion$1 = require('@zag-js/accordion');
18
18
 
19
19
 
20
20
 
@@ -29,8 +29,8 @@ exports.AccordionRootProvider = accordionRootProvider.AccordionRootProvider;
29
29
  exports.useAccordion = useAccordion.useAccordion;
30
30
  exports.useAccordionContext = useAccordionContext.useAccordionContext;
31
31
  exports.useAccordionItemContext = useAccordionItemContext.useAccordionItemContext;
32
- exports.Accordion = accordion$1;
32
+ exports.Accordion = accordion;
33
33
  Object.defineProperty(exports, "accordionAnatomy", {
34
34
  enumerable: true,
35
- get: () => accordion.anatomy
35
+ get: () => accordion$1.anatomy
36
36
  });
@@ -14,8 +14,8 @@ const angleSliderThumb = require('./angle-slider-thumb.cjs');
14
14
  const angleSliderValueText = require('./angle-slider-value-text.cjs');
15
15
  const useAngleSlider = require('./use-angle-slider.cjs');
16
16
  const useAngleSliderContext = require('./use-angle-slider-context.cjs');
17
- const angleSlider$1 = require('./angle-slider.cjs');
18
- const angleSlider = require('@zag-js/angle-slider');
17
+ const angleSlider = require('./angle-slider.cjs');
18
+ const angleSlider$1 = require('@zag-js/angle-slider');
19
19
 
20
20
 
21
21
 
@@ -31,8 +31,8 @@ exports.AngleSliderThumb = angleSliderThumb.AngleSliderThumb;
31
31
  exports.AngleSliderValueText = angleSliderValueText.AngleSliderValueText;
32
32
  exports.useAngleSlider = useAngleSlider.useAngleSlider;
33
33
  exports.useAngleSliderContext = useAngleSliderContext.useAngleSliderContext;
34
- exports.AngleSlider = angleSlider$1;
34
+ exports.AngleSlider = angleSlider;
35
35
  Object.defineProperty(exports, "angleSliderAnatomy", {
36
36
  enumerable: true,
37
- get: () => angleSlider.anatomy
37
+ get: () => angleSlider$1.anatomy
38
38
  });
@@ -9,8 +9,8 @@ const avatarRoot = require('./avatar-root.cjs');
9
9
  const avatarRootProvider = require('./avatar-root-provider.cjs');
10
10
  const useAvatar = require('./use-avatar.cjs');
11
11
  const useAvatarContext = require('./use-avatar-context.cjs');
12
- const avatar$1 = require('./avatar.cjs');
13
- const avatar = require('@zag-js/avatar');
12
+ const avatar = require('./avatar.cjs');
13
+ const avatar$1 = require('@zag-js/avatar');
14
14
 
15
15
 
16
16
 
@@ -21,8 +21,8 @@ exports.AvatarRoot = avatarRoot.AvatarRoot;
21
21
  exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
22
22
  exports.useAvatar = useAvatar.useAvatar;
23
23
  exports.useAvatarContext = useAvatarContext.useAvatarContext;
24
- exports.Avatar = avatar$1;
24
+ exports.Avatar = avatar;
25
25
  Object.defineProperty(exports, "avatarAnatomy", {
26
26
  enumerable: true,
27
- get: () => avatar.anatomy
27
+ get: () => avatar$1.anatomy
28
28
  });
@@ -14,8 +14,8 @@ const bottomSheetTitle = require('./bottom-sheet-title.cjs');
14
14
  const bottomSheetTrigger = require('./bottom-sheet-trigger.cjs');
15
15
  const useBottomSheet = require('./use-bottom-sheet.cjs');
16
16
  const useBottomSheetContext = require('./use-bottom-sheet-context.cjs');
17
- const bottomSheet$1 = require('./bottom-sheet.cjs');
18
- const bottomSheet = require('@zag-js/bottom-sheet');
17
+ const bottomSheet = require('./bottom-sheet.cjs');
18
+ const bottomSheet$1 = require('@zag-js/bottom-sheet');
19
19
 
20
20
 
21
21
 
@@ -31,8 +31,8 @@ exports.BottomSheetTitle = bottomSheetTitle.BottomSheetTitle;
31
31
  exports.BottomSheetTrigger = bottomSheetTrigger.BottomSheetTrigger;
32
32
  exports.useBottomSheet = useBottomSheet.useBottomSheet;
33
33
  exports.useBottomSheetContext = useBottomSheetContext.useBottomSheetContext;
34
- exports.BottomSheet = bottomSheet$1;
34
+ exports.BottomSheet = bottomSheet;
35
35
  Object.defineProperty(exports, "bottomSheetAnatomy", {
36
36
  enumerable: true,
37
- get: () => bottomSheet.anatomy
37
+ get: () => bottomSheet$1.anatomy
38
38
  });
@@ -34,7 +34,7 @@ const useCheckbox = (ownProps = {}) => {
34
34
  const checkboxGroup = useCheckboxGroupContext.useCheckboxGroupContext();
35
35
  const field = useFieldContext.useFieldContext();
36
36
  const props = react.useMemo(() => {
37
- return react$1.mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
37
+ return react$1.mergeProps(checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {}, ownProps);
38
38
  }, [ownProps, checkboxGroup]);
39
39
  const id = react.useId();
40
40
  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
@@ -11,7 +11,7 @@ const useCheckbox = (ownProps = {}) => {
11
11
  const checkboxGroup = useCheckboxGroupContext();
12
12
  const field = useFieldContext();
13
13
  const props = useMemo(() => {
14
- return mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
14
+ return mergeProps(checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {}, ownProps);
15
15
  }, [ownProps, checkboxGroup]);
16
16
  const id = useId();
17
17
  const { getRootNode } = useEnvironmentContext();
@@ -13,8 +13,8 @@ const clipboardTrigger = require('./clipboard-trigger.cjs');
13
13
  const clipboardValueText = require('./clipboard-value-text.cjs');
14
14
  const useClipboard = require('./use-clipboard.cjs');
15
15
  const useClipboardContext = require('./use-clipboard-context.cjs');
16
- const clipboard$1 = require('./clipboard.cjs');
17
- const clipboard = require('@zag-js/clipboard');
16
+ const clipboard = require('./clipboard.cjs');
17
+ const clipboard$1 = require('@zag-js/clipboard');
18
18
 
19
19
 
20
20
 
@@ -29,8 +29,8 @@ exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
29
29
  exports.ClipboardValueText = clipboardValueText.ClipboardValueText;
30
30
  exports.useClipboard = useClipboard.useClipboard;
31
31
  exports.useClipboardContext = useClipboardContext.useClipboardContext;
32
- exports.Clipboard = clipboard$1;
32
+ exports.Clipboard = clipboard;
33
33
  Object.defineProperty(exports, "clipboardAnatomy", {
34
34
  enumerable: true,
35
- get: () => clipboard.anatomy
35
+ get: () => clipboard$1.anatomy
36
36
  });
@@ -10,8 +10,8 @@ const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
10
10
  const collapsibleTrigger = require('./collapsible-trigger.cjs');
11
11
  const useCollapsible = require('./use-collapsible.cjs');
12
12
  const useCollapsibleContext = require('./use-collapsible-context.cjs');
13
- const collapsible$1 = require('./collapsible.cjs');
14
- const collapsible = require('@zag-js/collapsible');
13
+ const collapsible = require('./collapsible.cjs');
14
+ const collapsible$1 = require('@zag-js/collapsible');
15
15
 
16
16
 
17
17
 
@@ -23,8 +23,8 @@ exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvide
23
23
  exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
24
24
  exports.useCollapsible = useCollapsible.useCollapsible;
25
25
  exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
26
- exports.Collapsible = collapsible$1;
26
+ exports.Collapsible = collapsible;
27
27
  Object.defineProperty(exports, "collapsibleAnatomy", {
28
28
  enumerable: true,
29
- get: () => collapsible.anatomy
29
+ get: () => collapsible$1.anatomy
30
30
  });
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { filePathToTree, TreeCollection } from '@zag-js/collection';
2
+ import { TreeCollection, filePathToTree } from '@zag-js/collection';
3
3
 
4
4
  const createTreeCollection = (options) => new TreeCollection(options);
5
5
  const createFileTreeCollection = (paths) => filePathToTree(paths);
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const colorPicker = require('@zag-js/color-picker');
5
+ const colorPicker$1 = require('@zag-js/color-picker');
6
6
  const colorPickerArea = require('./color-picker-area.cjs');
7
7
  const colorPickerAreaBackground = require('./color-picker-area-background.cjs');
8
8
  const colorPickerAreaThumb = require('./color-picker-area-thumb.cjs');
@@ -35,13 +35,13 @@ const colorPickerView = require('./color-picker-view.cjs');
35
35
  const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
36
36
  const useColorPicker = require('./use-color-picker.cjs');
37
37
  const useColorPickerContext = require('./use-color-picker-context.cjs');
38
- const colorPicker$1 = require('./color-picker.cjs');
38
+ const colorPicker = require('./color-picker.cjs');
39
39
 
40
40
 
41
41
 
42
42
  Object.defineProperty(exports, "parseColor", {
43
43
  enumerable: true,
44
- get: () => colorPicker.parse
44
+ get: () => colorPicker$1.parse
45
45
  });
46
46
  exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
47
47
  exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
@@ -75,4 +75,4 @@ exports.ColorPickerView = colorPickerView.ColorPickerView;
75
75
  exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
76
76
  exports.useColorPicker = useColorPicker.useColorPicker;
77
77
  exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
78
- exports.ColorPicker = colorPicker$1;
78
+ exports.ColorPicker = colorPicker;
@@ -43,6 +43,7 @@ const DatePickerRoot = react.forwardRef((props, ref) => {
43
43
  "onOpenChange",
44
44
  "onValueChange",
45
45
  "onViewChange",
46
+ "onVisibleRangeChange",
46
47
  "open",
47
48
  "outsideDaySelectable",
48
49
  "parse",
@@ -39,6 +39,7 @@ const DatePickerRoot = forwardRef((props, ref) => {
39
39
  "onOpenChange",
40
40
  "onValueChange",
41
41
  "onViewChange",
42
+ "onVisibleRangeChange",
42
43
  "open",
43
44
  "outsideDaySelectable",
44
45
  "parse",
@@ -0,0 +1,30 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const jsxRuntime = require('react/jsx-runtime');
7
+ const react = require('react');
8
+ const factory = require('../factory.cjs');
9
+ const datePicker_anatomy = require('./date-picker.anatomy.cjs');
10
+ const useDatePickerContext = require('./use-date-picker-context.cjs');
11
+
12
+ const DatePickerValueText = react.forwardRef((props, ref) => {
13
+ const { children, placeholder, separator = ", ", ...localProps } = props;
14
+ const datePicker = useDatePickerContext.useDatePickerContext();
15
+ const hasValue = datePicker.value.length > 0;
16
+ if (typeof children === "function") {
17
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: hasValue ? datePicker.value.map((value, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: children({
18
+ value,
19
+ index,
20
+ valueAsString: datePicker.valueAsString[index],
21
+ remove: () => {
22
+ datePicker.setValue(datePicker.value.filter((_, i) => i !== index));
23
+ }
24
+ }) }, index)) : placeholder });
25
+ }
26
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...datePicker_anatomy.datePickerAnatomy.build().valueText.attrs, ...localProps, ref, children: hasValue ? datePicker.valueAsString.join(separator) : placeholder });
27
+ });
28
+ DatePickerValueText.displayName = "DatePickerValueText";
29
+
30
+ exports.DatePickerValueText = DatePickerValueText;
@@ -0,0 +1,29 @@
1
+ import { DateValue } from '@zag-js/date-picker';
2
+ import { Assign } from '../../types';
3
+ import { HTMLProps, PolymorphicProps } from '../factory';
4
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
5
+ export interface DatePickerValueTextRenderProps {
6
+ value: DateValue;
7
+ index: number;
8
+ valueAsString: string;
9
+ remove: () => void;
10
+ }
11
+ export interface DatePickerValueTextBaseProps extends PolymorphicProps {
12
+ /**
13
+ * Text to display when no date is selected.
14
+ */
15
+ placeholder?: string | undefined;
16
+ /**
17
+ * A function to render each selected date value.
18
+ * When provided, each date in the selection will be rendered using this function.
19
+ */
20
+ children?: ((props: DatePickerValueTextRenderProps) => React.ReactNode) | undefined;
21
+ /**
22
+ * The separator to use between multiple date values when using default rendering.
23
+ * @default ", "
24
+ */
25
+ separator?: string | undefined;
26
+ }
27
+ export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {
28
+ }
29
+ export declare const DatePickerValueText: ForwardRefExoticComponent<DatePickerValueTextProps & RefAttributes<HTMLSpanElement>>;
@@ -0,0 +1,29 @@
1
+ import { DateValue } from '@zag-js/date-picker';
2
+ import { Assign } from '../../types';
3
+ import { HTMLProps, PolymorphicProps } from '../factory';
4
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
5
+ export interface DatePickerValueTextRenderProps {
6
+ value: DateValue;
7
+ index: number;
8
+ valueAsString: string;
9
+ remove: () => void;
10
+ }
11
+ export interface DatePickerValueTextBaseProps extends PolymorphicProps {
12
+ /**
13
+ * Text to display when no date is selected.
14
+ */
15
+ placeholder?: string | undefined;
16
+ /**
17
+ * A function to render each selected date value.
18
+ * When provided, each date in the selection will be rendered using this function.
19
+ */
20
+ children?: ((props: DatePickerValueTextRenderProps) => React.ReactNode) | undefined;
21
+ /**
22
+ * The separator to use between multiple date values when using default rendering.
23
+ * @default ", "
24
+ */
25
+ separator?: string | undefined;
26
+ }
27
+ export interface DatePickerValueTextProps extends Assign<HTMLProps<'span'>, DatePickerValueTextBaseProps> {
28
+ }
29
+ export declare const DatePickerValueText: ForwardRefExoticComponent<DatePickerValueTextProps & RefAttributes<HTMLSpanElement>>;
@@ -0,0 +1,26 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { forwardRef, Fragment } from 'react';
4
+ import { ark } from '../factory.js';
5
+ import { datePickerAnatomy } from './date-picker.anatomy.js';
6
+ import { useDatePickerContext } from './use-date-picker-context.js';
7
+
8
+ const DatePickerValueText = forwardRef((props, ref) => {
9
+ const { children, placeholder, separator = ", ", ...localProps } = props;
10
+ const datePicker = useDatePickerContext();
11
+ const hasValue = datePicker.value.length > 0;
12
+ if (typeof children === "function") {
13
+ return /* @__PURE__ */ jsx(Fragment, { children: hasValue ? datePicker.value.map((value, index) => /* @__PURE__ */ jsx(Fragment, { children: children({
14
+ value,
15
+ index,
16
+ valueAsString: datePicker.valueAsString[index],
17
+ remove: () => {
18
+ datePicker.setValue(datePicker.value.filter((_, i) => i !== index));
19
+ }
20
+ }) }, index)) : placeholder });
21
+ }
22
+ return /* @__PURE__ */ jsx(ark.span, { ...datePickerAnatomy.build().valueText.attrs, ...localProps, ref, children: hasValue ? datePicker.valueAsString.join(separator) : placeholder });
23
+ });
24
+ DatePickerValueText.displayName = "DatePickerValueText";
25
+
26
+ export { DatePickerValueText };
@@ -5,6 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const datePicker = require('@zag-js/date-picker');
7
7
 
8
- const datePickerAnatomy = datePicker.anatomy.extendWith("view");
8
+ const datePickerAnatomy = datePicker.anatomy.extendWith("view", "valueText");
9
9
 
10
10
  exports.datePickerAnatomy = datePickerAnatomy;
@@ -1,2 +1,2 @@
1
1
  import { AnatomyInstance } from '@zag-js/anatomy';
2
- export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
2
+ export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "valueText" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
@@ -1,2 +1,2 @@
1
1
  import { AnatomyInstance } from '@zag-js/anatomy';
2
- export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
2
+ export declare const datePickerAnatomy: AnatomyInstance<"root" | "control" | "nextTrigger" | "prevTrigger" | "label" | "content" | "trigger" | "positioner" | "valueText" | "view" | "input" | "clearTrigger" | "table" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { anatomy } from '@zag-js/date-picker';
3
3
 
4
- const datePickerAnatomy = anatomy.extendWith("view");
4
+ const datePickerAnatomy = anatomy.extendWith("view", "valueText");
5
5
 
6
6
  export { datePickerAnatomy };
@@ -14,6 +14,7 @@ const datePickerPositioner = require('./date-picker-positioner.cjs');
14
14
  const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
15
15
  const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
16
16
  const datePickerRangeText = require('./date-picker-range-text.cjs');
17
+ const datePickerValueText = require('./date-picker-value-text.cjs');
17
18
  const datePickerRoot = require('./date-picker-root.cjs');
18
19
  const datePickerRootProvider = require('./date-picker-root-provider.cjs');
19
20
  const datePickerTable = require('./date-picker-table.cjs');
@@ -43,6 +44,7 @@ exports.Positioner = datePickerPositioner.DatePickerPositioner;
43
44
  exports.PresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
44
45
  exports.PrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
45
46
  exports.RangeText = datePickerRangeText.DatePickerRangeText;
47
+ exports.ValueText = datePickerValueText.DatePickerValueText;
46
48
  exports.Root = datePickerRoot.DatePickerRoot;
47
49
  exports.RootProvider = datePickerRootProvider.DatePickerRootProvider;
48
50
  exports.Table = datePickerTable.DatePickerTable;
@@ -11,6 +11,7 @@ export { DatePickerPositioner as Positioner, type DatePickerPositionerBaseProps
11
11
  export { DatePickerPresetTrigger as PresetTrigger, type DatePickerPresetTriggerBaseProps as PresetTriggerBaseProps, type DatePickerPresetTriggerProps as PresetTriggerProps, } from './date-picker-preset-trigger';
12
12
  export { DatePickerPrevTrigger as PrevTrigger, type DatePickerPrevTriggerBaseProps as PrevTriggerBaseProps, type DatePickerPrevTriggerProps as PrevTriggerProps, } from './date-picker-prev-trigger';
13
13
  export { DatePickerRangeText as RangeText, type DatePickerRangeTextBaseProps as RangeTextBaseProps, type DatePickerRangeTextProps as RangeTextProps, } from './date-picker-range-text';
14
+ export { DatePickerValueText as ValueText, type DatePickerValueTextBaseProps as ValueTextBaseProps, type DatePickerValueTextProps as ValueTextProps, type DatePickerValueTextRenderProps as ValueTextRenderProps, } from './date-picker-value-text';
14
15
  export { DatePickerRoot as Root, type DatePickerRootBaseProps as RootBaseProps, type DatePickerRootProps as RootProps, } from './date-picker-root';
15
16
  export { DatePickerRootProvider as RootProvider, type DatePickerRootProviderBaseProps as RootProviderBaseProps, type DatePickerRootProviderProps as RootProviderProps, } from './date-picker-root-provider';
16
17
  export { DatePickerTable as Table, type DatePickerTableBaseProps as TableBaseProps, type DatePickerTableProps as TableProps, } from './date-picker-table';
@@ -11,6 +11,7 @@ export { DatePickerPositioner as Positioner, type DatePickerPositionerBaseProps
11
11
  export { DatePickerPresetTrigger as PresetTrigger, type DatePickerPresetTriggerBaseProps as PresetTriggerBaseProps, type DatePickerPresetTriggerProps as PresetTriggerProps, } from './date-picker-preset-trigger';
12
12
  export { DatePickerPrevTrigger as PrevTrigger, type DatePickerPrevTriggerBaseProps as PrevTriggerBaseProps, type DatePickerPrevTriggerProps as PrevTriggerProps, } from './date-picker-prev-trigger';
13
13
  export { DatePickerRangeText as RangeText, type DatePickerRangeTextBaseProps as RangeTextBaseProps, type DatePickerRangeTextProps as RangeTextProps, } from './date-picker-range-text';
14
+ export { DatePickerValueText as ValueText, type DatePickerValueTextBaseProps as ValueTextBaseProps, type DatePickerValueTextProps as ValueTextProps, type DatePickerValueTextRenderProps as ValueTextRenderProps, } from './date-picker-value-text';
14
15
  export { DatePickerRoot as Root, type DatePickerRootBaseProps as RootBaseProps, type DatePickerRootProps as RootProps, } from './date-picker-root';
15
16
  export { DatePickerRootProvider as RootProvider, type DatePickerRootProviderBaseProps as RootProviderBaseProps, type DatePickerRootProviderProps as RootProviderProps, } from './date-picker-root-provider';
16
17
  export { DatePickerTable as Table, type DatePickerTableBaseProps as TableBaseProps, type DatePickerTableProps as TableProps, } from './date-picker-table';
@@ -10,6 +10,7 @@ export { DatePickerPositioner as Positioner } from './date-picker-positioner.js'
10
10
  export { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger.js';
11
11
  export { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger.js';
12
12
  export { DatePickerRangeText as RangeText } from './date-picker-range-text.js';
13
+ export { DatePickerValueText as ValueText } from './date-picker-value-text.js';
13
14
  export { DatePickerRoot as Root } from './date-picker-root.js';
14
15
  export { DatePickerRootProvider as RootProvider } from './date-picker-root-provider.js';
15
16
  export { DatePickerTable as Table } from './date-picker-table.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const datePicker = require('@zag-js/date-picker');
5
+ const datePicker$1 = require('@zag-js/date-picker');
6
6
  const datePickerClearTrigger = require('./date-picker-clear-trigger.cjs');
7
7
  const datePickerContent = require('./date-picker-content.cjs');
8
8
  const datePickerContext = require('./date-picker-context.cjs');
@@ -15,6 +15,7 @@ const datePickerPositioner = require('./date-picker-positioner.cjs');
15
15
  const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
16
16
  const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
17
17
  const datePickerRangeText = require('./date-picker-range-text.cjs');
18
+ const datePickerValueText = require('./date-picker-value-text.cjs');
18
19
  const datePickerRoot = require('./date-picker-root.cjs');
19
20
  const datePickerRootProvider = require('./date-picker-root-provider.cjs');
20
21
  const datePickerTable = require('./date-picker-table.cjs');
@@ -32,13 +33,13 @@ const datePickerYearSelect = require('./date-picker-year-select.cjs');
32
33
  const datePicker_anatomy = require('./date-picker.anatomy.cjs');
33
34
  const useDatePicker = require('./use-date-picker.cjs');
34
35
  const useDatePickerContext = require('./use-date-picker-context.cjs');
35
- const datePicker$1 = require('./date-picker.cjs');
36
+ const datePicker = require('./date-picker.cjs');
36
37
 
37
38
 
38
39
 
39
40
  Object.defineProperty(exports, "parseDate", {
40
41
  enumerable: true,
41
- get: () => datePicker.parse
42
+ get: () => datePicker$1.parse
42
43
  });
43
44
  exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
44
45
  exports.DatePickerContent = datePickerContent.DatePickerContent;
@@ -52,6 +53,7 @@ exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
52
53
  exports.DatePickerPresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
53
54
  exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
54
55
  exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
56
+ exports.DatePickerValueText = datePickerValueText.DatePickerValueText;
55
57
  exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
56
58
  exports.DatePickerRootProvider = datePickerRootProvider.DatePickerRootProvider;
57
59
  exports.DatePickerTable = datePickerTable.DatePickerTable;
@@ -69,4 +71,4 @@ exports.DatePickerYearSelect = datePickerYearSelect.DatePickerYearSelect;
69
71
  exports.datePickerAnatomy = datePicker_anatomy.datePickerAnatomy;
70
72
  exports.useDatePicker = useDatePicker.useDatePicker;
71
73
  exports.useDatePickerContext = useDatePickerContext.useDatePickerContext;
72
- exports.DatePicker = datePicker$1;
74
+ exports.DatePicker = datePicker;
@@ -12,6 +12,7 @@ export { DatePickerPositioner, type DatePickerPositionerBaseProps, type DatePick
12
12
  export { DatePickerPresetTrigger, type DatePickerPresetTriggerBaseProps, type DatePickerPresetTriggerProps, } from './date-picker-preset-trigger';
13
13
  export { DatePickerPrevTrigger, type DatePickerPrevTriggerBaseProps, type DatePickerPrevTriggerProps, } from './date-picker-prev-trigger';
14
14
  export { DatePickerRangeText, type DatePickerRangeTextBaseProps, type DatePickerRangeTextProps, } from './date-picker-range-text';
15
+ export { DatePickerValueText, type DatePickerValueTextBaseProps, type DatePickerValueTextProps, type DatePickerValueTextRenderProps, } from './date-picker-value-text';
15
16
  export { DatePickerRoot, type DatePickerRootBaseProps, type DatePickerRootProps } from './date-picker-root';
16
17
  export { DatePickerRootProvider, type DatePickerRootProviderBaseProps, type DatePickerRootProviderProps, } from './date-picker-root-provider';
17
18
  export { DatePickerTable, type DatePickerTableBaseProps, type DatePickerTableProps } from './date-picker-table';
@@ -12,6 +12,7 @@ export { DatePickerPositioner, type DatePickerPositionerBaseProps, type DatePick
12
12
  export { DatePickerPresetTrigger, type DatePickerPresetTriggerBaseProps, type DatePickerPresetTriggerProps, } from './date-picker-preset-trigger';
13
13
  export { DatePickerPrevTrigger, type DatePickerPrevTriggerBaseProps, type DatePickerPrevTriggerProps, } from './date-picker-prev-trigger';
14
14
  export { DatePickerRangeText, type DatePickerRangeTextBaseProps, type DatePickerRangeTextProps, } from './date-picker-range-text';
15
+ export { DatePickerValueText, type DatePickerValueTextBaseProps, type DatePickerValueTextProps, type DatePickerValueTextRenderProps, } from './date-picker-value-text';
15
16
  export { DatePickerRoot, type DatePickerRootBaseProps, type DatePickerRootProps } from './date-picker-root';
16
17
  export { DatePickerRootProvider, type DatePickerRootProviderBaseProps, type DatePickerRootProviderProps, } from './date-picker-root-provider';
17
18
  export { DatePickerTable, type DatePickerTableBaseProps, type DatePickerTableProps } from './date-picker-table';
@@ -11,6 +11,7 @@ export { DatePickerPositioner } from './date-picker-positioner.js';
11
11
  export { DatePickerPresetTrigger } from './date-picker-preset-trigger.js';
12
12
  export { DatePickerPrevTrigger } from './date-picker-prev-trigger.js';
13
13
  export { DatePickerRangeText } from './date-picker-range-text.js';
14
+ export { DatePickerValueText } from './date-picker-value-text.js';
14
15
  export { DatePickerRoot } from './date-picker-root.js';
15
16
  export { DatePickerRootProvider } from './date-picker-root-provider.js';
16
17
  export { DatePickerTable } from './date-picker-table.js';
@@ -14,8 +14,8 @@ const dialogTitle = require('./dialog-title.cjs');
14
14
  const dialogTrigger = require('./dialog-trigger.cjs');
15
15
  const useDialog = require('./use-dialog.cjs');
16
16
  const useDialogContext = require('./use-dialog-context.cjs');
17
- const dialog$1 = require('./dialog.cjs');
18
- const dialog = require('@zag-js/dialog');
17
+ const dialog = require('./dialog.cjs');
18
+ const dialog$1 = require('@zag-js/dialog');
19
19
 
20
20
 
21
21
 
@@ -31,8 +31,8 @@ exports.DialogTitle = dialogTitle.DialogTitle;
31
31
  exports.DialogTrigger = dialogTrigger.DialogTrigger;
32
32
  exports.useDialog = useDialog.useDialog;
33
33
  exports.useDialogContext = useDialogContext.useDialogContext;
34
- exports.Dialog = dialog$1;
34
+ exports.Dialog = dialog;
35
35
  Object.defineProperty(exports, "dialogAnatomy", {
36
36
  enumerable: true,
37
- get: () => dialog.anatomy
37
+ get: () => dialog$1.anatomy
38
38
  });
@@ -15,8 +15,8 @@ const editableRootProvider = require('./editable-root-provider.cjs');
15
15
  const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
16
16
  const useEditable = require('./use-editable.cjs');
17
17
  const useEditableContext = require('./use-editable-context.cjs');
18
- const editable$1 = require('./editable.cjs');
19
- const editable = require('@zag-js/editable');
18
+ const editable = require('./editable.cjs');
19
+ const editable$1 = require('@zag-js/editable');
20
20
 
21
21
 
22
22
 
@@ -33,8 +33,8 @@ exports.EditableRootProvider = editableRootProvider.EditableRootProvider;
33
33
  exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
34
34
  exports.useEditable = useEditable.useEditable;
35
35
  exports.useEditableContext = useEditableContext.useEditableContext;
36
- exports.Editable = editable$1;
36
+ exports.Editable = editable;
37
37
  Object.defineProperty(exports, "editableAnatomy", {
38
38
  enumerable: true,
39
- get: () => editable.anatomy
39
+ get: () => editable$1.anatomy
40
40
  });
@@ -33,6 +33,7 @@ const FileUploadRoot = react.forwardRef((props, ref) => {
33
33
  "onFileChange",
34
34
  "onFileReject",
35
35
  "preventDocumentDrop",
36
+ "readOnly",
36
37
  "required",
37
38
  "translations",
38
39
  "transformFiles",
@@ -29,6 +29,7 @@ const FileUploadRoot = forwardRef((props, ref) => {
29
29
  "onFileChange",
30
30
  "onFileReject",
31
31
  "preventDocumentDrop",
32
+ "readOnly",
32
33
  "required",
33
34
  "translations",
34
35
  "transformFiles",
@@ -19,8 +19,8 @@ const fileUploadRootProvider = require('./file-upload-root-provider.cjs');
19
19
  const fileUploadTrigger = require('./file-upload-trigger.cjs');
20
20
  const useFileUpload = require('./use-file-upload.cjs');
21
21
  const useFileUploadContext = require('./use-file-upload-context.cjs');
22
- const fileUpload$1 = require('./file-upload.cjs');
23
- const fileUpload = require('@zag-js/file-upload');
22
+ const fileUpload = require('./file-upload.cjs');
23
+ const fileUpload$1 = require('@zag-js/file-upload');
24
24
 
25
25
 
26
26
 
@@ -41,8 +41,8 @@ exports.FileUploadRootProvider = fileUploadRootProvider.FileUploadRootProvider;
41
41
  exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
42
42
  exports.useFileUpload = useFileUpload.useFileUpload;
43
43
  exports.useFileUploadContext = useFileUploadContext.useFileUploadContext;
44
- exports.FileUpload = fileUpload$1;
44
+ exports.FileUpload = fileUpload;
45
45
  Object.defineProperty(exports, "fileUploadAnatomy", {
46
46
  enumerable: true,
47
- get: () => fileUpload.anatomy
47
+ get: () => fileUpload$1.anatomy
48
48
  });
@@ -18,8 +18,8 @@ const floatingPanelTrigger = require('./floating-panel-trigger.cjs');
18
18
  const floatingPanelControl = require('./floating-panel-control.cjs');
19
19
  const useFloatingPanel = require('./use-floating-panel.cjs');
20
20
  const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
21
- const floatingPanel$1 = require('./floating-panel.cjs');
22
- const floatingPanel = require('@zag-js/floating-panel');
21
+ const floatingPanel = require('./floating-panel.cjs');
22
+ const floatingPanel$1 = require('@zag-js/floating-panel');
23
23
 
24
24
 
25
25
 
@@ -39,8 +39,8 @@ exports.FloatingPanelTrigger = floatingPanelTrigger.FloatingPanelTrigger;
39
39
  exports.FloatingPanelControl = floatingPanelControl.FloatingPanelControl;
40
40
  exports.useFloatingPanel = useFloatingPanel.useFloatingPanel;
41
41
  exports.useFloatingPanelContext = useFloatingPanelContext.useFloatingPanelContext;
42
- exports.FloatingPanel = floatingPanel$1;
42
+ exports.FloatingPanel = floatingPanel;
43
43
  Object.defineProperty(exports, "floatingPanelAnatomy", {
44
44
  enumerable: true,
45
- get: () => floatingPanel.anatomy
45
+ get: () => floatingPanel$1.anatomy
46
46
  });