@ark-ui/react 2.0.1 → 2.1.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 (141) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/clipboard/clipboard-context.cjs +15 -0
  3. package/clipboard/clipboard-context.d.ts +6 -0
  4. package/clipboard/clipboard-context.mjs +10 -0
  5. package/clipboard/clipboard-control.cjs +19 -0
  6. package/clipboard/clipboard-control.d.ts +6 -0
  7. package/clipboard/clipboard-control.mjs +15 -0
  8. package/clipboard/clipboard-indicator.cjs +22 -0
  9. package/clipboard/clipboard-indicator.d.ts +6 -0
  10. package/clipboard/clipboard-indicator.mjs +18 -0
  11. package/clipboard/clipboard-input.cjs +19 -0
  12. package/clipboard/clipboard-input.d.ts +6 -0
  13. package/clipboard/clipboard-input.mjs +15 -0
  14. package/clipboard/clipboard-label.cjs +19 -0
  15. package/clipboard/clipboard-label.d.ts +6 -0
  16. package/clipboard/clipboard-label.mjs +15 -0
  17. package/clipboard/clipboard-root.cjs +27 -0
  18. package/clipboard/clipboard-root.d.ts +9 -0
  19. package/clipboard/clipboard-root.mjs +23 -0
  20. package/clipboard/clipboard-trigger.cjs +21 -0
  21. package/clipboard/clipboard-trigger.d.ts +6 -0
  22. package/clipboard/clipboard-trigger.mjs +17 -0
  23. package/clipboard/clipboard.cjs +19 -0
  24. package/clipboard/clipboard.d.ts +7 -0
  25. package/clipboard/clipboard.mjs +6 -0
  26. package/clipboard/index.d.ts +11 -0
  27. package/clipboard/use-clipboard.cjs +43 -0
  28. package/clipboard/use-clipboard.d.ts +8 -0
  29. package/clipboard/use-clipboard.mjs +20 -0
  30. package/color-picker/use-color-picker.cjs +2 -1
  31. package/color-picker/use-color-picker.d.ts +1 -1
  32. package/color-picker/use-color-picker.mjs +2 -1
  33. package/date-picker/date-picker-input.cjs +3 -1
  34. package/date-picker/date-picker-input.d.ts +3 -1
  35. package/date-picker/date-picker-input.mjs +3 -1
  36. package/date-picker/date-picker-preset-trigger.cjs +25 -0
  37. package/date-picker/date-picker-preset-trigger.d.ts +8 -0
  38. package/date-picker/date-picker-preset-trigger.mjs +21 -0
  39. package/date-picker/date-picker.cjs +2 -0
  40. package/date-picker/date-picker.d.ts +2 -1
  41. package/date-picker/date-picker.mjs +1 -0
  42. package/date-picker/index.cjs +2 -0
  43. package/date-picker/index.d.ts +3 -2
  44. package/date-picker/index.mjs +1 -0
  45. package/date-picker/use-date-picker.cjs +2 -1
  46. package/date-picker/use-date-picker.d.ts +1 -1
  47. package/date-picker/use-date-picker.mjs +2 -1
  48. package/dialog/dialog-description.cjs +1 -1
  49. package/dialog/dialog-description.d.ts +1 -1
  50. package/dialog/dialog-description.mjs +1 -1
  51. package/dialog/dialog-root.cjs +2 -2
  52. package/dialog/dialog-root.mjs +1 -1
  53. package/dialog/use-dialog.cjs +2 -1
  54. package/dialog/use-dialog.d.ts +1 -1
  55. package/dialog/use-dialog.mjs +2 -1
  56. package/factory.cjs +2 -2
  57. package/factory.mjs +1 -1
  58. package/hover-card/use-hover-card.cjs +2 -1
  59. package/hover-card/use-hover-card.d.ts +1 -1
  60. package/hover-card/use-hover-card.mjs +2 -1
  61. package/index.cjs +24 -0
  62. package/index.d.ts +2 -0
  63. package/index.mjs +13 -0
  64. package/locale/index.cjs +11 -0
  65. package/locale/index.d.ts +2 -0
  66. package/locale/index.mjs +2 -0
  67. package/locale/locale-context.cjs +18 -0
  68. package/locale/locale-context.d.ts +6 -0
  69. package/locale/locale-context.mjs +13 -0
  70. package/locale/locale.cjs +31 -0
  71. package/locale/locale.d.ts +14 -0
  72. package/locale/locale.mjs +27 -0
  73. package/menu/index.d.ts +2 -2
  74. package/menu/use-menu.cjs +2 -1
  75. package/menu/use-menu.d.ts +1 -1
  76. package/menu/use-menu.mjs +2 -1
  77. package/package.json +61 -52
  78. package/popover/popover-description.cjs +1 -1
  79. package/popover/popover-description.d.ts +1 -1
  80. package/popover/popover-description.mjs +1 -1
  81. package/popover/use-popover.cjs +2 -1
  82. package/popover/use-popover.d.ts +1 -1
  83. package/popover/use-popover.mjs +2 -1
  84. package/portal.cjs +3 -2
  85. package/portal.d.ts +3 -2
  86. package/portal.mjs +3 -2
  87. package/select/select-control.cjs +5 -1
  88. package/select/select-control.mjs +5 -1
  89. package/select/use-select.cjs +2 -1
  90. package/select/use-select.d.ts +1 -1
  91. package/select/use-select.mjs +2 -1
  92. package/tooltip/use-tooltip.cjs +2 -1
  93. package/tooltip/use-tooltip.d.ts +1 -1
  94. package/tooltip/use-tooltip.mjs +2 -1
  95. package/tree-view/index.cjs +2 -0
  96. package/tree-view/index.d.ts +3 -2
  97. package/tree-view/index.mjs +1 -0
  98. package/tree-view/tree-view-branch-content.cjs +3 -7
  99. package/tree-view/tree-view-branch-content.d.ts +1 -3
  100. package/tree-view/tree-view-branch-content.mjs +3 -7
  101. package/tree-view/tree-view-branch-context.cjs +15 -0
  102. package/tree-view/tree-view-branch-context.d.ts +8 -0
  103. package/tree-view/tree-view-branch-context.mjs +10 -0
  104. package/tree-view/tree-view-branch-control.cjs +3 -7
  105. package/tree-view/tree-view-branch-control.d.ts +1 -3
  106. package/tree-view/tree-view-branch-control.mjs +3 -7
  107. package/tree-view/tree-view-branch-indicator.cjs +4 -7
  108. package/tree-view/tree-view-branch-indicator.d.ts +1 -3
  109. package/tree-view/tree-view-branch-indicator.mjs +4 -7
  110. package/tree-view/tree-view-branch-text.cjs +3 -7
  111. package/tree-view/tree-view-branch-text.d.ts +1 -3
  112. package/tree-view/tree-view-branch-text.mjs +3 -7
  113. package/tree-view/tree-view-branch-trigger.cjs +4 -8
  114. package/tree-view/tree-view-branch-trigger.d.ts +2 -4
  115. package/tree-view/tree-view-branch-trigger.mjs +4 -8
  116. package/tree-view/tree-view-branch.cjs +8 -5
  117. package/tree-view/tree-view-branch.d.ts +3 -2
  118. package/tree-view/tree-view-branch.mjs +8 -5
  119. package/tree-view/tree-view-context.d.ts +0 -16
  120. package/tree-view/tree-view-depth-context.cjs +17 -0
  121. package/tree-view/tree-view-depth-context.d.ts +4 -0
  122. package/tree-view/tree-view-depth-context.mjs +12 -0
  123. package/tree-view/tree-view-item-context.cjs +15 -0
  124. package/tree-view/tree-view-item-context.d.ts +8 -0
  125. package/tree-view/tree-view-item-context.mjs +10 -0
  126. package/tree-view/tree-view-item-indicator.cjs +23 -0
  127. package/tree-view/tree-view-item-indicator.d.ts +6 -0
  128. package/tree-view/tree-view-item-indicator.mjs +19 -0
  129. package/tree-view/tree-view-item-text.cjs +3 -12
  130. package/tree-view/tree-view-item-text.d.ts +1 -3
  131. package/tree-view/tree-view-item-text.mjs +3 -12
  132. package/tree-view/tree-view-item.cjs +6 -3
  133. package/tree-view/tree-view-item.d.ts +2 -1
  134. package/tree-view/tree-view-item.mjs +6 -3
  135. package/tree-view/tree-view-root.cjs +2 -2
  136. package/tree-view/tree-view-root.mjs +2 -2
  137. package/tree-view/tree-view-tree.cjs +2 -1
  138. package/tree-view/tree-view-tree.mjs +2 -1
  139. package/tree-view/tree-view.cjs +2 -0
  140. package/tree-view/tree-view.d.ts +2 -1
  141. package/tree-view/tree-view.mjs +1 -0
@@ -0,0 +1,21 @@
1
+ 'use client';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { mergeProps } from '@zag-js/react';
4
+ import { forwardRef } from 'react';
5
+ import { createSplitProps } from '../create-split-props.mjs';
6
+ import { ark } from '../factory.mjs';
7
+ import { useDatePickerContext } from './date-picker-context.mjs';
8
+
9
+ const DatePickerPresetTrigger = forwardRef(
10
+ (props, ref) => {
11
+ const [presetTriggerProps, localProps] = createSplitProps()(props, [
12
+ "value"
13
+ ]);
14
+ const api = useDatePickerContext();
15
+ const mergedProps = mergeProps(api.getPresetTriggerProps(presetTriggerProps), localProps);
16
+ return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
17
+ }
18
+ );
19
+ DatePickerPresetTrigger.displayName = "DatePickerPresetTrigger";
20
+
21
+ export { DatePickerPresetTrigger };
@@ -10,6 +10,7 @@ const datePickerLabel = require('./date-picker-label.cjs');
10
10
  const datePickerMonthSelect = require('./date-picker-month-select.cjs');
11
11
  const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
12
12
  const datePickerPositioner = require('./date-picker-positioner.cjs');
13
+ const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
13
14
  const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
14
15
  const datePickerRangeText = require('./date-picker-range-text.cjs');
15
16
  const datePickerRoot = require('./date-picker-root.cjs');
@@ -36,6 +37,7 @@ exports.Label = datePickerLabel.DatePickerLabel;
36
37
  exports.MonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
37
38
  exports.NextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
38
39
  exports.Positioner = datePickerPositioner.DatePickerPositioner;
40
+ exports.PresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
39
41
  exports.PrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
40
42
  exports.RangeText = datePickerRangeText.DatePickerRangeText;
41
43
  exports.Root = datePickerRoot.DatePickerRoot;
@@ -6,6 +6,7 @@ import { DatePickerLabel as Label } from './date-picker-label';
6
6
  import { DatePickerMonthSelect as MonthSelect } from './date-picker-month-select';
7
7
  import { DatePickerNextTrigger as NextTrigger } from './date-picker-next-trigger';
8
8
  import { DatePickerPositioner as Positioner } from './date-picker-positioner';
9
+ import { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger';
9
10
  import { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger';
10
11
  import { DatePickerRangeText as RangeText } from './date-picker-range-text';
11
12
  import { DatePickerRoot as Root } from './date-picker-root';
@@ -21,4 +22,4 @@ import { DatePickerView as View } from './date-picker-view';
21
22
  import { DatePickerViewControl as ViewControl } from './date-picker-view-control';
22
23
  import { DatePickerViewTrigger as ViewTrigger } from './date-picker-view-trigger';
23
24
  import { DatePickerYearSelect as YearSelect } from './date-picker-year-select';
24
- export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };
25
+ export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PresetTrigger, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };
@@ -6,6 +6,7 @@ export { DatePickerLabel as Label } from './date-picker-label.mjs';
6
6
  export { DatePickerMonthSelect as MonthSelect } from './date-picker-month-select.mjs';
7
7
  export { DatePickerNextTrigger as NextTrigger } from './date-picker-next-trigger.mjs';
8
8
  export { DatePickerPositioner as Positioner } from './date-picker-positioner.mjs';
9
+ export { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger.mjs';
9
10
  export { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger.mjs';
10
11
  export { DatePickerRangeText as RangeText } from './date-picker-range-text.mjs';
11
12
  export { DatePickerRoot as Root } from './date-picker-root.mjs';
@@ -11,6 +11,7 @@ const datePickerLabel = require('./date-picker-label.cjs');
11
11
  const datePickerMonthSelect = require('./date-picker-month-select.cjs');
12
12
  const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
13
13
  const datePickerPositioner = require('./date-picker-positioner.cjs');
14
+ const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
14
15
  const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
15
16
  const datePickerRangeText = require('./date-picker-range-text.cjs');
16
17
  const datePickerRoot = require('./date-picker-root.cjs');
@@ -42,6 +43,7 @@ exports.DatePickerLabel = datePickerLabel.DatePickerLabel;
42
43
  exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
43
44
  exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
44
45
  exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
46
+ exports.DatePickerPresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
45
47
  exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
46
48
  exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
47
49
  exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
@@ -8,6 +8,7 @@ import { DatePickerLabel, type DatePickerLabelProps } from './date-picker-label'
8
8
  import { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
9
9
  import { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
10
10
  import { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
11
+ import { DatePickerPresetTrigger, type DatePickerPresetTriggerProps } from './date-picker-preset-trigger';
11
12
  import { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
12
13
  import { DatePickerRangeText, type DatePickerRangeTextProps } from './date-picker-range-text';
13
14
  import { DatePickerRoot, type DatePickerRootProps } from './date-picker-root';
@@ -27,5 +28,5 @@ import { DatePickerViewControl, type DatePickerViewControlProps } from './date-p
27
28
  import { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
28
29
  import { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
29
30
  export * as DatePicker from './date-picker';
30
- export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
31
- export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerRangeTextProps, DatePickerRootProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
31
+ export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
32
+ export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPresetTriggerProps, DatePickerPrevTriggerProps, DatePickerRangeTextProps, DatePickerRootProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
@@ -7,6 +7,7 @@ export { DatePickerLabel } from './date-picker-label.mjs';
7
7
  export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
8
8
  export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
9
9
  export { DatePickerPositioner } from './date-picker-positioner.mjs';
10
+ export { DatePickerPresetTrigger } from './date-picker-preset-trigger.mjs';
10
11
  export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
11
12
  export { DatePickerRangeText } from './date-picker-range-text.mjs';
12
13
  export { DatePickerRoot } from './date-picker-root.mjs';
@@ -34,7 +34,8 @@ const useDatePicker = (props = {}) => {
34
34
  getRootNode: environmentContext.useEnvironmentContext(),
35
35
  ...props,
36
36
  focusedValue: props.focusedValue ? datePicker__namespace.parse(props.focusedValue) : void 0,
37
- value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0
37
+ value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0,
38
+ "open.controlled": props.open !== void 0
38
39
  };
39
40
  const context = {
40
41
  ...initialContext,
@@ -1,7 +1,7 @@
1
1
  import * as datePicker from '@zag-js/date-picker';
2
2
  import { type PropTypes } from '@zag-js/react';
3
3
  import type { Optional } from '../types';
4
- export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value' | 'focusedValue'>, 'id'> {
4
+ export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value' | 'focusedValue' | 'open.controlled'>, 'id'> {
5
5
  /**
6
6
  * The initial value of the date picker
7
7
  */
@@ -11,7 +11,8 @@ const useDatePicker = (props = {}) => {
11
11
  getRootNode: useEnvironmentContext(),
12
12
  ...props,
13
13
  focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : void 0,
14
- value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0
14
+ value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0,
15
+ "open.controlled": props.open !== void 0
15
16
  };
16
17
  const context = {
17
18
  ...initialContext,
@@ -13,7 +13,7 @@ const DialogDescription = react.forwardRef(
13
13
  (props, ref) => {
14
14
  const api = dialogContext.useDialogContext();
15
15
  const mergedProps = react$1.mergeProps(api.descriptionProps, props);
16
- return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
16
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
17
17
  }
18
18
  );
19
19
  DialogDescription.displayName = "DialogDescription";
@@ -1,6 +1,6 @@
1
1
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
2
2
  /// <reference types="react" />
3
3
  import { type HTMLArkProps } from '../factory';
4
- export interface DialogDescriptionProps extends HTMLArkProps<'p'> {
4
+ export interface DialogDescriptionProps extends HTMLArkProps<'div'> {
5
5
  }
6
6
  export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
@@ -9,7 +9,7 @@ const DialogDescription = forwardRef(
9
9
  (props, ref) => {
10
10
  const api = useDialogContext();
11
11
  const mergedProps = mergeProps(api.descriptionProps, props);
12
- return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
12
+ return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
13
13
  }
14
14
  );
15
15
  DialogDescription.displayName = "DialogDescription";
@@ -4,7 +4,7 @@
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const jsxRuntime = require('react/jsx-runtime');
7
- const core = require('@zag-js/core');
7
+ const react = require('@zag-js/react');
8
8
  require('react');
9
9
  const presenceContext = require('../presence/presence-context.cjs');
10
10
  const presencePropsContext = require('../presence/presence-props-context.cjs');
@@ -17,7 +17,7 @@ const useDialog = require('./use-dialog.cjs');
17
17
  const DialogRoot = (props) => {
18
18
  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
19
19
  const api = useDialog.useDialog(localProps);
20
- const presenceApi = usePresence.usePresence(core.mergeProps({ present: api.isOpen }, presenceProps));
20
+ const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
21
21
  const view = runIfFn.runIfFn(children, api);
22
22
  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
23
23
  };
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { mergeProps } from '@zag-js/core';
3
+ import { mergeProps } from '@zag-js/react';
4
4
  import 'react';
5
5
  import { PresenceProvider } from '../presence/presence-context.mjs';
6
6
  import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
@@ -33,7 +33,8 @@ const useDialog = (props = {}) => {
33
33
  id: react.useId(),
34
34
  getRootNode: environmentContext.useEnvironmentContext(),
35
35
  ...props,
36
- open: props.defaultOpen ?? props.open
36
+ open: props.defaultOpen ?? props.open,
37
+ "open.controlled": props.open !== void 0
37
38
  };
38
39
  const context = {
39
40
  ...initialContext,
@@ -1,7 +1,7 @@
1
1
  import * as dialog from '@zag-js/dialog';
2
2
  import { type PropTypes } from '@zag-js/react';
3
3
  import { type Optional } from '../types';
4
- export interface UseDialogProps extends Optional<dialog.Context, 'id'> {
4
+ export interface UseDialogProps extends Omit<Optional<dialog.Context, 'id'>, 'open.controlled'> {
5
5
  /**
6
6
  * The initial open state of the dialog.
7
7
  */
@@ -10,7 +10,8 @@ const useDialog = (props = {}) => {
10
10
  id: useId(),
11
11
  getRootNode: useEnvironmentContext(),
12
12
  ...props,
13
- open: props.defaultOpen ?? props.open
13
+ open: props.defaultOpen ?? props.open,
14
+ "open.controlled": props.open !== void 0
14
15
  };
15
16
  const context = {
16
17
  ...initialContext,
package/factory.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const core = require('@zag-js/core');
5
+ const react$1 = require('@zag-js/react');
6
6
  const react = require('react');
7
7
  const composeRefs = require('./compose-refs.cjs');
8
8
 
@@ -14,7 +14,7 @@ const withAsChild = (Component) => {
14
14
  }
15
15
  const onlyChild = react.Children.only(children);
16
16
  return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
17
- ...core.mergeProps(restProps, onlyChild.props),
17
+ ...react$1.mergeProps(restProps, onlyChild.props),
18
18
  ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
19
19
  }) : null;
20
20
  });
package/factory.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { mergeProps } from '@zag-js/core';
1
+ import { mergeProps } from '@zag-js/react';
2
2
  import { forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
3
3
  import { composeRefs } from './compose-refs.mjs';
4
4
 
@@ -33,7 +33,8 @@ const useHoverCard = (props = {}) => {
33
33
  id: react.useId(),
34
34
  getRootNode: environmentContext.useEnvironmentContext(),
35
35
  ...props,
36
- open: props.defaultOpen ?? props.open
36
+ open: props.defaultOpen ?? props.open,
37
+ "open.controlled": props.open !== void 0
37
38
  };
38
39
  const context = {
39
40
  ...initialContext,
@@ -1,7 +1,7 @@
1
1
  import * as hoverCard from '@zag-js/hover-card';
2
2
  import { type PropTypes } from '@zag-js/react';
3
3
  import { type Optional } from '../types';
4
- export interface UseHoverCardProps extends Optional<hoverCard.Context, 'id'> {
4
+ export interface UseHoverCardProps extends Omit<Optional<hoverCard.Context, 'id'>, 'open.controlled'> {
5
5
  /**
6
6
  * The initial open state of the hover card.
7
7
  */
@@ -10,7 +10,8 @@ const useHoverCard = (props = {}) => {
10
10
  id: useId(),
11
11
  getRootNode: useEnvironmentContext(),
12
12
  ...props,
13
- open: props.defaultOpen ?? props.open
13
+ open: props.defaultOpen ?? props.open,
14
+ "open.controlled": props.open !== void 0
14
15
  };
15
16
  const context = {
16
17
  ...initialContext,
package/index.cjs CHANGED
@@ -83,6 +83,7 @@ const datePickerLabel = require('./date-picker/date-picker-label.cjs');
83
83
  const datePickerMonthSelect = require('./date-picker/date-picker-month-select.cjs');
84
84
  const datePickerNextTrigger = require('./date-picker/date-picker-next-trigger.cjs');
85
85
  const datePickerPositioner = require('./date-picker/date-picker-positioner.cjs');
86
+ const datePickerPresetTrigger = require('./date-picker/date-picker-preset-trigger.cjs');
86
87
  const datePickerPrevTrigger = require('./date-picker/date-picker-prev-trigger.cjs');
87
88
  const datePickerRangeText = require('./date-picker/date-picker-range-text.cjs');
88
89
  const datePickerRoot = require('./date-picker/date-picker-root.cjs');
@@ -147,6 +148,8 @@ const hoverCardPositioner = require('./hover-card/hover-card-positioner.cjs');
147
148
  const hoverCardRoot = require('./hover-card/hover-card-root.cjs');
148
149
  const hoverCardTrigger = require('./hover-card/hover-card-trigger.cjs');
149
150
  const hoverCard = require('./hover-card/hover-card.cjs');
151
+ const locale = require('./locale/locale.cjs');
152
+ const localeContext = require('./locale/locale-context.cjs');
150
153
  const menuArrow = require('./menu/menu-arrow.cjs');
151
154
  const menuArrowTip = require('./menu/menu-arrow-tip.cjs');
152
155
  const menuContent = require('./menu/menu-content.cjs');
@@ -325,11 +328,20 @@ const treeViewBranchText = require('./tree-view/tree-view-branch-text.cjs');
325
328
  const treeViewBranchTrigger = require('./tree-view/tree-view-branch-trigger.cjs');
326
329
  const treeViewContext = require('./tree-view/tree-view-context.cjs');
327
330
  const treeViewItem = require('./tree-view/tree-view-item.cjs');
331
+ const treeViewItemIndicator = require('./tree-view/tree-view-item-indicator.cjs');
328
332
  const treeViewItemText = require('./tree-view/tree-view-item-text.cjs');
329
333
  const treeViewLabel = require('./tree-view/tree-view-label.cjs');
330
334
  const treeViewRoot = require('./tree-view/tree-view-root.cjs');
331
335
  const treeViewTree = require('./tree-view/tree-view-tree.cjs');
332
336
  const treeView = require('./tree-view/tree-view.cjs');
337
+ const clipboard = require('./clipboard/clipboard.cjs');
338
+ const clipboardControl = require('./clipboard/clipboard-control.cjs');
339
+ const clipboardIndicator = require('./clipboard/clipboard-indicator.cjs');
340
+ const clipboardInput = require('./clipboard/clipboard-input.cjs');
341
+ const clipboardLabel = require('./clipboard/clipboard-label.cjs');
342
+ const clipboardRoot = require('./clipboard/clipboard-root.cjs');
343
+ const clipboardTrigger = require('./clipboard/clipboard-trigger.cjs');
344
+ const clipboardContext = require('./clipboard/clipboard-context.cjs');
333
345
 
334
346
 
335
347
 
@@ -414,6 +426,7 @@ exports.DatePickerLabel = datePickerLabel.DatePickerLabel;
414
426
  exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
415
427
  exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
416
428
  exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
429
+ exports.DatePickerPresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
417
430
  exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
418
431
  exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
419
432
  exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
@@ -479,6 +492,8 @@ exports.HoverCardPositioner = hoverCardPositioner.HoverCardPositioner;
479
492
  exports.HoverCardRoot = hoverCardRoot.HoverCardRoot;
480
493
  exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
481
494
  exports.HoverCard = hoverCard;
495
+ exports.LocaleProvider = locale.LocaleProvider;
496
+ exports.useLocaleContext = localeContext.useLocaleContext;
482
497
  exports.MenuArrow = menuArrow.MenuArrow;
483
498
  exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
484
499
  exports.MenuContent = menuContent.MenuContent;
@@ -659,8 +674,17 @@ exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
659
674
  exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
660
675
  exports.useTreeViewContext = treeViewContext.useTreeViewContext;
661
676
  exports.TreeViewItem = treeViewItem.TreeViewItem;
677
+ exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
662
678
  exports.TreeViewItemText = treeViewItemText.TreeViewItemText;
663
679
  exports.TreeViewLabel = treeViewLabel.TreeViewLabel;
664
680
  exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
665
681
  exports.TreeViewTree = treeViewTree.TreeViewTree;
666
682
  exports.TreeView = treeView;
683
+ exports.Clipboard = clipboard;
684
+ exports.ClipboardControl = clipboardControl.ClipboardControl;
685
+ exports.ClipboardIndicator = clipboardIndicator.ClipboardIndicator;
686
+ exports.ClipboardInput = clipboardInput.ClipboardInput;
687
+ exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
688
+ exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
689
+ exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
690
+ exports.useClipboardContext = clipboardContext.useClipboardContext;
package/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export * from './accordion';
2
2
  export * from './avatar';
3
3
  export * from './carousel';
4
4
  export * from './checkbox';
5
+ export * from './clipboard';
5
6
  export * from './color-picker';
6
7
  export * from './combobox';
7
8
  export * from './date-picker';
@@ -11,6 +12,7 @@ export * from './environment';
11
12
  export * from './factory';
12
13
  export * from './file-upload';
13
14
  export * from './hover-card';
15
+ export * from './locale';
14
16
  export * from './menu';
15
17
  export * from './number-input';
16
18
  export * from './pagination';
package/index.mjs CHANGED
@@ -85,6 +85,7 @@ export { DatePickerLabel } from './date-picker/date-picker-label.mjs';
85
85
  export { DatePickerMonthSelect } from './date-picker/date-picker-month-select.mjs';
86
86
  export { DatePickerNextTrigger } from './date-picker/date-picker-next-trigger.mjs';
87
87
  export { DatePickerPositioner } from './date-picker/date-picker-positioner.mjs';
88
+ export { DatePickerPresetTrigger } from './date-picker/date-picker-preset-trigger.mjs';
88
89
  export { DatePickerPrevTrigger } from './date-picker/date-picker-prev-trigger.mjs';
89
90
  export { DatePickerRangeText } from './date-picker/date-picker-range-text.mjs';
90
91
  export { DatePickerRoot } from './date-picker/date-picker-root.mjs';
@@ -154,6 +155,8 @@ export { HoverCardRoot } from './hover-card/hover-card-root.mjs';
154
155
  export { HoverCardTrigger } from './hover-card/hover-card-trigger.mjs';
155
156
  import * as hoverCard from './hover-card/hover-card.mjs';
156
157
  export { hoverCard as HoverCard };
158
+ export { LocaleProvider } from './locale/locale.mjs';
159
+ export { useLocaleContext } from './locale/locale-context.mjs';
157
160
  export { MenuArrow } from './menu/menu-arrow.mjs';
158
161
  export { MenuArrowTip } from './menu/menu-arrow-tip.mjs';
159
162
  export { MenuContent } from './menu/menu-content.mjs';
@@ -350,9 +353,19 @@ export { TreeViewBranchText } from './tree-view/tree-view-branch-text.mjs';
350
353
  export { TreeViewBranchTrigger } from './tree-view/tree-view-branch-trigger.mjs';
351
354
  export { useTreeViewContext } from './tree-view/tree-view-context.mjs';
352
355
  export { TreeViewItem } from './tree-view/tree-view-item.mjs';
356
+ export { TreeViewItemIndicator } from './tree-view/tree-view-item-indicator.mjs';
353
357
  export { TreeViewItemText } from './tree-view/tree-view-item-text.mjs';
354
358
  export { TreeViewLabel } from './tree-view/tree-view-label.mjs';
355
359
  export { TreeViewRoot } from './tree-view/tree-view-root.mjs';
356
360
  export { TreeViewTree } from './tree-view/tree-view-tree.mjs';
357
361
  import * as treeView from './tree-view/tree-view.mjs';
358
362
  export { treeView as TreeView };
363
+ import * as clipboard from './clipboard/clipboard.mjs';
364
+ export { clipboard as Clipboard };
365
+ export { ClipboardControl } from './clipboard/clipboard-control.mjs';
366
+ export { ClipboardIndicator } from './clipboard/clipboard-indicator.mjs';
367
+ export { ClipboardInput } from './clipboard/clipboard-input.mjs';
368
+ export { ClipboardLabel } from './clipboard/clipboard-label.mjs';
369
+ export { ClipboardRoot } from './clipboard/clipboard-root.mjs';
370
+ export { ClipboardTrigger } from './clipboard/clipboard-trigger.mjs';
371
+ export { useClipboardContext } from './clipboard/clipboard-context.mjs';
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const locale = require('./locale.cjs');
6
+ const localeContext = require('./locale-context.cjs');
7
+
8
+
9
+
10
+ exports.LocaleProvider = locale.LocaleProvider;
11
+ exports.useLocaleContext = localeContext.useLocaleContext;
@@ -0,0 +1,2 @@
1
+ export { LocaleProvider, type LocaleProviderProps } from './locale';
2
+ export { useLocaleContext, type LocaleContext } from './locale-context';
@@ -0,0 +1,2 @@
1
+ export { LocaleProvider } from './locale.mjs';
2
+ export { useLocaleContext } from './locale-context.mjs';
@@ -0,0 +1,18 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ require('@zag-js/i18n-utils');
7
+ const createContext = require('../create-context.cjs');
8
+
9
+ const [LocaleContextProvider, useLocaleContext] = createContext.createContext({
10
+ name: "EnvironmentContext",
11
+ hookName: "useEnvironmentContext",
12
+ providerName: "<EnvironmentProvider />",
13
+ strict: false,
14
+ defaultValue: { dir: "ltr", locale: "en-US" }
15
+ });
16
+
17
+ exports.LocaleContextProvider = LocaleContextProvider;
18
+ exports.useLocaleContext = useLocaleContext;
@@ -0,0 +1,6 @@
1
+ import { Provider } from 'react';
2
+ /// <reference types="react" />
3
+ import { type Locale } from '@zag-js/i18n-utils';
4
+ export interface LocaleContext extends Locale {
5
+ }
6
+ export declare const LocaleContextProvider: Provider<LocaleContext>, useLocaleContext: () => LocaleContext;
@@ -0,0 +1,13 @@
1
+ 'use client';
2
+ import '@zag-js/i18n-utils';
3
+ import { createContext } from '../create-context.mjs';
4
+
5
+ const [LocaleContextProvider, useLocaleContext] = createContext({
6
+ name: "EnvironmentContext",
7
+ hookName: "useEnvironmentContext",
8
+ providerName: "<EnvironmentProvider />",
9
+ strict: false,
10
+ defaultValue: { dir: "ltr", locale: "en-US" }
11
+ });
12
+
13
+ export { LocaleContextProvider, useLocaleContext };
@@ -0,0 +1,31 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const jsxRuntime = require('react/jsx-runtime');
6
+ const i18nUtils = require('@zag-js/i18n-utils');
7
+ const react = require('react');
8
+ const environmentContext = require('../environment/environment-context.cjs');
9
+ const localeContext = require('./locale-context.cjs');
10
+
11
+ const LocaleProvider = (props) => {
12
+ const { children, locale: localeProps, defaultLocale = "en-US" } = props;
13
+ const [locale, setLocale] = react.useState(localeProps || defaultLocale);
14
+ const getRootNode = environmentContext.useEnvironmentContext();
15
+ react.useEffect(
16
+ () => i18nUtils.trackLocale({
17
+ locale: localeProps,
18
+ getRootNode,
19
+ onLocaleChange(locale2) {
20
+ setLocale(locale2.locale);
21
+ }
22
+ })
23
+ );
24
+ const context = {
25
+ locale,
26
+ dir: i18nUtils.isRTL(locale) ? "rtl" : "ltr"
27
+ };
28
+ return /* @__PURE__ */ jsxRuntime.jsx(localeContext.LocaleContextProvider, { value: context, children });
29
+ };
30
+
31
+ exports.LocaleProvider = LocaleProvider;
@@ -0,0 +1,14 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+ /// <reference types="react" />
3
+ import { type LocaleOptions } from '@zag-js/i18n-utils';
4
+ export interface LocaleProviderProps extends LocaleOptions {
5
+ /**
6
+ * The default locale to use if no locale is provided via props.
7
+ */
8
+ defaultLocale?: string;
9
+ /**
10
+ * The children to render.
11
+ */
12
+ children: React.ReactNode;
13
+ }
14
+ export declare const LocaleProvider: (props: LocaleProviderProps) => JSX.Element;
@@ -0,0 +1,27 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { trackLocale, isRTL } from '@zag-js/i18n-utils';
3
+ import { useState, useEffect } from 'react';
4
+ import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
+ import { LocaleContextProvider } from './locale-context.mjs';
6
+
7
+ const LocaleProvider = (props) => {
8
+ const { children, locale: localeProps, defaultLocale = "en-US" } = props;
9
+ const [locale, setLocale] = useState(localeProps || defaultLocale);
10
+ const getRootNode = useEnvironmentContext();
11
+ useEffect(
12
+ () => trackLocale({
13
+ locale: localeProps,
14
+ getRootNode,
15
+ onLocaleChange(locale2) {
16
+ setLocale(locale2.locale);
17
+ }
18
+ })
19
+ );
20
+ const context = {
21
+ locale,
22
+ dir: isRTL(locale) ? "rtl" : "ltr"
23
+ };
24
+ return /* @__PURE__ */ jsx(LocaleContextProvider, { value: context, children });
25
+ };
26
+
27
+ export { LocaleProvider };
package/menu/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { OpenChangeDetails as MenuOpenChangeDetails, ValueChangeDetails as MenuValueChangeDetails } from '@zag-js/menu';
1
+ import type { OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, ValueChangeDetails as MenuValueChangeDetails } from '@zag-js/menu';
2
2
  import { MenuArrow, type MenuArrowProps } from './menu-arrow';
3
3
  import { MenuArrowTip, type MenuArrowTipProps } from './menu-arrow-tip';
4
4
  import { MenuContent, type MenuContentProps } from './menu-content';
@@ -15,4 +15,4 @@ import { MenuTrigger, type MenuTriggerProps } from './menu-trigger';
15
15
  import { MenuTriggerItem, type MenuTriggerItemProps } from './menu-trigger-item';
16
16
  export * as Menu from './menu';
17
17
  export { MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };
18
- export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOpenChangeDetails, MenuOptionItemProps, MenuPositionerProps, MenuRootProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, MenuValueChangeDetails, };
18
+ export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOpenChangeDetails, MenuOptionItemProps, MenuPositionerProps, MenuRootProps, MenuSelectionDetails, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, MenuValueChangeDetails, };
package/menu/use-menu.cjs CHANGED
@@ -35,7 +35,8 @@ const useMenu = (props = {}) => {
35
35
  ...props,
36
36
  onOpenChange: useEvent.useEvent(props.onOpenChange),
37
37
  onSelect: useEvent.useEvent(props.onSelect),
38
- onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
38
+ onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
39
+ "open.controlled": props.open !== void 0
39
40
  };
40
41
  const [state, send, machine] = react$1.useMachine(menu__namespace.machine(context), { context });
41
42
  const api = menu__namespace.connect(state, send, react$1.normalizeProps);
@@ -1,6 +1,6 @@
1
1
  import * as menu from '@zag-js/menu';
2
2
  import { type Optional } from '../types';
3
- export interface UseMenuProps extends Optional<menu.Context, 'id'> {
3
+ export interface UseMenuProps extends Omit<Optional<menu.Context, 'id'>, 'open.controlled'> {
4
4
  }
5
5
  export interface UseMenuReturn {
6
6
  machine: ReturnType<typeof menu.machine>;
package/menu/use-menu.mjs CHANGED
@@ -12,7 +12,8 @@ const useMenu = (props = {}) => {
12
12
  ...props,
13
13
  onOpenChange: useEvent(props.onOpenChange),
14
14
  onSelect: useEvent(props.onSelect),
15
- onValueChange: useEvent(props.onValueChange, { sync: true })
15
+ onValueChange: useEvent(props.onValueChange, { sync: true }),
16
+ "open.controlled": props.open !== void 0
16
17
  };
17
18
  const [state, send, machine] = useMachine(menu.machine(context), { context });
18
19
  const api = menu.connect(state, send, normalizeProps);