@ark-ui/react 5.19.0 → 5.21.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 (53) hide show
  1. package/dist/components/collection/examples/async-list/dependencies.d.cts +1 -0
  2. package/dist/components/collection/examples/async-list/dependencies.d.ts +1 -0
  3. package/dist/components/collection/examples/async-list/filter.d.cts +1 -0
  4. package/dist/components/collection/examples/async-list/filter.d.ts +1 -0
  5. package/dist/components/collection/examples/async-list/infinite-loading.d.cts +1 -0
  6. package/dist/components/collection/examples/async-list/infinite-loading.d.ts +1 -0
  7. package/dist/components/collection/examples/async-list/reload.d.cts +1 -0
  8. package/dist/components/collection/examples/async-list/reload.d.ts +1 -0
  9. package/dist/components/collection/examples/async-list/sort-client-side.d.cts +1 -0
  10. package/dist/components/collection/examples/async-list/sort-client-side.d.ts +1 -0
  11. package/dist/components/collection/examples/async-list/sort-server-side.d.cts +1 -0
  12. package/dist/components/collection/examples/async-list/sort-server-side.d.ts +1 -0
  13. package/dist/components/collection/examples/list-selection/basic.d.cts +1 -0
  14. package/dist/components/collection/examples/list-selection/basic.d.ts +1 -0
  15. package/dist/components/collection/examples/list-selection/multiple.d.cts +1 -0
  16. package/dist/components/collection/examples/list-selection/multiple.d.ts +1 -0
  17. package/dist/components/collection/examples/list-selection/range.d.cts +1 -0
  18. package/dist/components/collection/examples/list-selection/range.d.ts +1 -0
  19. package/dist/components/collection/index.cjs +2 -0
  20. package/dist/components/collection/index.d.cts +1 -0
  21. package/dist/components/collection/index.d.ts +1 -0
  22. package/dist/components/collection/index.js +1 -0
  23. package/dist/components/collection/use-async-list.cjs +33 -0
  24. package/dist/components/collection/use-async-list.d.cts +6 -0
  25. package/dist/components/collection/use-async-list.d.ts +6 -0
  26. package/dist/components/collection/use-async-list.js +10 -0
  27. package/dist/components/fieldset/fieldset-legend.cjs +1 -1
  28. package/dist/components/fieldset/fieldset-legend.d.cts +2 -2
  29. package/dist/components/fieldset/fieldset-legend.d.ts +2 -2
  30. package/dist/components/fieldset/fieldset-legend.js +1 -1
  31. package/dist/components/fieldset/use-fieldset.cjs +5 -2
  32. package/dist/components/fieldset/use-fieldset.js +5 -2
  33. package/dist/components/highlight/highlight.cjs +2 -1
  34. package/dist/components/highlight/highlight.js +2 -1
  35. package/dist/components/tabs/tab-content.cjs +1 -2
  36. package/dist/components/tabs/tab-content.js +1 -2
  37. package/dist/components/toast/index.d.cts +1 -0
  38. package/dist/components/toast/index.d.ts +1 -0
  39. package/dist/index.cjs +2 -0
  40. package/dist/index.js +1 -0
  41. package/dist/providers/index.cjs +2 -0
  42. package/dist/providers/index.js +1 -0
  43. package/dist/providers/locale/index.cjs +2 -0
  44. package/dist/providers/locale/index.d.cts +1 -0
  45. package/dist/providers/locale/index.d.ts +1 -0
  46. package/dist/providers/locale/index.js +1 -0
  47. package/dist/providers/locale/use-collator.cjs +19 -0
  48. package/dist/providers/locale/use-collator.d.cts +4 -0
  49. package/dist/providers/locale/use-collator.d.ts +4 -0
  50. package/dist/providers/locale/use-collator.js +15 -0
  51. package/package.json +62 -61
  52. package/dist/utils/use-debounce.cjs +0 -21
  53. package/dist/utils/use-debounce.js +0 -17
@@ -0,0 +1 @@
1
+ export declare const Dependencies: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Dependencies: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Filter: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Filter: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const InfiniteLoading: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const InfiniteLoading: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Reload: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Reload: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const SortClientSide: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const SortClientSide: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const SortServerSide: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const SortServerSide: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Multiple: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Multiple: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Range: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const Range: () => import("react/jsx-runtime").JSX.Element;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
  const gridCollection = require('./grid-collection.cjs');
6
6
  const listCollection = require('./list-collection.cjs');
7
7
  const treeCollection = require('./tree-collection.cjs');
8
+ const useAsyncList = require('./use-async-list.cjs');
8
9
  const useListCollection = require('./use-list-collection.cjs');
9
10
  const useListSelection = require('./use-list-selection.cjs');
10
11
 
@@ -14,5 +15,6 @@ exports.createGridCollection = gridCollection.createGridCollection;
14
15
  exports.createListCollection = listCollection.createListCollection;
15
16
  exports.createFileTreeCollection = treeCollection.createFileTreeCollection;
16
17
  exports.createTreeCollection = treeCollection.createTreeCollection;
18
+ exports.useAsyncList = useAsyncList.useAsyncList;
17
19
  exports.useListCollection = useListCollection.useListCollection;
18
20
  exports.useListSelection = useListSelection.useListSelection;
@@ -1,5 +1,6 @@
1
1
  export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
2
2
  export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
3
3
  export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
4
+ export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn } from './use-async-list';
4
5
  export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn } from './use-list-collection';
5
6
  export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection';
@@ -1,5 +1,6 @@
1
1
  export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
2
2
  export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
3
3
  export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
4
+ export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn } from './use-async-list';
4
5
  export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn } from './use-list-collection';
5
6
  export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection';
@@ -1,5 +1,6 @@
1
1
  export { createGridCollection } from './grid-collection.js';
2
2
  export { createListCollection } from './list-collection.js';
3
3
  export { createFileTreeCollection, createTreeCollection } from './tree-collection.js';
4
+ export { useAsyncList } from './use-async-list.js';
4
5
  export { useListCollection } from './use-list-collection.js';
5
6
  export { useListSelection } from './use-list-selection.js';
@@ -0,0 +1,33 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const asyncList = require('@zag-js/async-list');
7
+ const react = require('@zag-js/react');
8
+
9
+ function _interopNamespaceDefault(e) {
10
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
11
+ if (e) {
12
+ for (const k in e) {
13
+ if (k !== 'default') {
14
+ const d = Object.getOwnPropertyDescriptor(e, k);
15
+ Object.defineProperty(n, k, d.get ? d : {
16
+ enumerable: true,
17
+ get: () => e[k]
18
+ });
19
+ }
20
+ }
21
+ }
22
+ n.default = e;
23
+ return Object.freeze(n);
24
+ }
25
+
26
+ const asyncList__namespace = /*#__PURE__*/_interopNamespaceDefault(asyncList);
27
+
28
+ function useAsyncList(props) {
29
+ const service = react.useMachine(asyncList__namespace.machine, props);
30
+ return asyncList__namespace.connect(service);
31
+ }
32
+
33
+ exports.useAsyncList = useAsyncList;
@@ -0,0 +1,6 @@
1
+ import * as asyncList from '@zag-js/async-list';
2
+ export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
3
+ }
4
+ export interface UseAsyncListReturn<T, C = string> extends asyncList.Api<T, C> {
5
+ }
6
+ export declare function useAsyncList<T, C = string>(props: UseAsyncListProps<T, C>): UseAsyncListReturn<T, C>;
@@ -0,0 +1,6 @@
1
+ import * as asyncList from '@zag-js/async-list';
2
+ export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
3
+ }
4
+ export interface UseAsyncListReturn<T, C = string> extends asyncList.Api<T, C> {
5
+ }
6
+ export declare function useAsyncList<T, C = string>(props: UseAsyncListProps<T, C>): UseAsyncListReturn<T, C>;
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+ import * as asyncList from '@zag-js/async-list';
3
+ import { useMachine } from '@zag-js/react';
4
+
5
+ function useAsyncList(props) {
6
+ const service = useMachine(asyncList.machine, props);
7
+ return asyncList.connect(service);
8
+ }
9
+
10
+ export { useAsyncList };
@@ -12,7 +12,7 @@ const useFieldsetContext = require('./use-fieldset-context.cjs');
12
12
  const FieldsetLegend = react.forwardRef((props, ref) => {
13
13
  const fieldset = useFieldsetContext.useFieldsetContext();
14
14
  const mergedProps = react$1.mergeProps(fieldset.getLegendProps(), props);
15
- return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.legend, { ...mergedProps, ref });
15
+ return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
16
16
  });
17
17
  FieldsetLegend.displayName = "FieldsetLegend";
18
18
 
@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
2
2
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
3
  export interface FieldsetLegendBaseProps extends PolymorphicProps {
4
4
  }
5
- export interface FieldsetLegendProps extends HTMLProps<'legend'>, FieldsetLegendBaseProps {
5
+ export interface FieldsetLegendProps extends HTMLProps<'div'>, FieldsetLegendBaseProps {
6
6
  }
7
- export declare const FieldsetLegend: ForwardRefExoticComponent<FieldsetLegendProps & RefAttributes<HTMLLegendElement>>;
7
+ export declare const FieldsetLegend: ForwardRefExoticComponent<FieldsetLegendProps & RefAttributes<HTMLDivElement>>;
@@ -2,6 +2,6 @@ import { HTMLProps, PolymorphicProps } from '../factory';
2
2
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
3
  export interface FieldsetLegendBaseProps extends PolymorphicProps {
4
4
  }
5
- export interface FieldsetLegendProps extends HTMLProps<'legend'>, FieldsetLegendBaseProps {
5
+ export interface FieldsetLegendProps extends HTMLProps<'div'>, FieldsetLegendBaseProps {
6
6
  }
7
- export declare const FieldsetLegend: ForwardRefExoticComponent<FieldsetLegendProps & RefAttributes<HTMLLegendElement>>;
7
+ export declare const FieldsetLegend: ForwardRefExoticComponent<FieldsetLegendProps & RefAttributes<HTMLDivElement>>;
@@ -8,7 +8,7 @@ import { useFieldsetContext } from './use-fieldset-context.js';
8
8
  const FieldsetLegend = forwardRef((props, ref) => {
9
9
  const fieldset = useFieldsetContext();
10
10
  const mergedProps = mergeProps(fieldset.getLegendProps(), props);
11
- return /* @__PURE__ */ jsx(ark.legend, { ...mergedProps, ref });
11
+ return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
12
12
  });
13
13
  FieldsetLegend.displayName = "FieldsetLegend";
14
14
 
@@ -17,6 +17,7 @@ const useFieldset = (props = {}) => {
17
17
  const uid = react.useId();
18
18
  const id = props.id ?? uid;
19
19
  const rootRef = react.useRef(null);
20
+ const legendId = `fieldset::${id}::legend`;
20
21
  const errorTextId = `fieldset::${id}::error-text`;
21
22
  const helperTextId = `fieldset::${id}::helper-text`;
22
23
  useSafeLayoutEffect.useSafeLayoutEffect(() => {
@@ -46,17 +47,19 @@ const useFieldset = (props = {}) => {
46
47
  disabled,
47
48
  "data-disabled": domQuery.dataAttr(disabled),
48
49
  "data-invalid": domQuery.dataAttr(invalid),
50
+ "aria-labelledby": legendId,
49
51
  "aria-describedby": labelIds
50
52
  }),
51
- [disabled, invalid, labelIds]
53
+ [disabled, invalid, legendId, labelIds]
52
54
  );
53
55
  const getLegendProps = react.useMemo(
54
56
  () => () => ({
57
+ id: legendId,
55
58
  ...fieldset_anatomy.parts.legend.attrs,
56
59
  "data-disabled": domQuery.dataAttr(disabled),
57
60
  "data-invalid": domQuery.dataAttr(invalid)
58
61
  }),
59
- [disabled, invalid]
62
+ [legendId, disabled, invalid]
60
63
  );
61
64
  const getHelperTextProps = react.useMemo(
62
65
  () => () => ({
@@ -13,6 +13,7 @@ const useFieldset = (props = {}) => {
13
13
  const uid = useId();
14
14
  const id = props.id ?? uid;
15
15
  const rootRef = useRef(null);
16
+ const legendId = `fieldset::${id}::legend`;
16
17
  const errorTextId = `fieldset::${id}::error-text`;
17
18
  const helperTextId = `fieldset::${id}::helper-text`;
18
19
  useSafeLayoutEffect(() => {
@@ -42,17 +43,19 @@ const useFieldset = (props = {}) => {
42
43
  disabled,
43
44
  "data-disabled": dataAttr(disabled),
44
45
  "data-invalid": dataAttr(invalid),
46
+ "aria-labelledby": legendId,
45
47
  "aria-describedby": labelIds
46
48
  }),
47
- [disabled, invalid, labelIds]
49
+ [disabled, invalid, legendId, labelIds]
48
50
  );
49
51
  const getLegendProps = useMemo(
50
52
  () => () => ({
53
+ id: legendId,
51
54
  ...parts.legend.attrs,
52
55
  "data-disabled": dataAttr(disabled),
53
56
  "data-invalid": dataAttr(invalid)
54
57
  }),
55
- [disabled, invalid]
58
+ [legendId, disabled, invalid]
56
59
  );
57
60
  const getHelperTextProps = useMemo(
58
61
  () => () => ({
@@ -15,7 +15,8 @@ const Highlight = (props) => {
15
15
  "query",
16
16
  "text",
17
17
  "ignoreCase",
18
- "matchAll"
18
+ "matchAll",
19
+ "exactMatch"
19
20
  ]);
20
21
  const chunks = useHighlight.useHighlight(highlightProps);
21
22
  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: chunks.map(
@@ -11,7 +11,8 @@ const Highlight = (props) => {
11
11
  "query",
12
12
  "text",
13
13
  "ignoreCase",
14
- "matchAll"
14
+ "matchAll",
15
+ "exactMatch"
15
16
  ]);
16
17
  const chunks = useHighlight(highlightProps);
17
18
  return /* @__PURE__ */ jsx(Fragment, { children: chunks.map(
@@ -9,7 +9,6 @@ const react = require('react');
9
9
  const composeRefs = require('../../utils/compose-refs.cjs');
10
10
  const createSplitProps = require('../../utils/create-split-props.cjs');
11
11
  const renderStrategy = require('../../utils/render-strategy.cjs');
12
- const useDebounce = require('../../utils/use-debounce.cjs');
13
12
  const factory = require('../factory.cjs');
14
13
  const usePresence = require('../presence/use-presence.cjs');
15
14
  const usePresenceContext = require('../presence/use-presence-context.cjs');
@@ -21,7 +20,7 @@ const TabContent = react.forwardRef((props, ref) => {
21
20
  const renderStrategyProps = renderStrategy.useRenderStrategyPropsContext();
22
21
  const presence = usePresence.usePresence({
23
22
  ...renderStrategyProps,
24
- present: useDebounce.useDebounce(tabs.value === props.value, 0),
23
+ present: tabs.value === props.value,
25
24
  immediate: true
26
25
  });
27
26
  const mergedProps = react$1.mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
@@ -5,7 +5,6 @@ import { forwardRef } from 'react';
5
5
  import { composeRefs } from '../../utils/compose-refs.js';
6
6
  import { createSplitProps } from '../../utils/create-split-props.js';
7
7
  import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
8
- import { useDebounce } from '../../utils/use-debounce.js';
9
8
  import { ark } from '../factory.js';
10
9
  import { usePresence } from '../presence/use-presence.js';
11
10
  import { PresenceProvider } from '../presence/use-presence-context.js';
@@ -17,7 +16,7 @@ const TabContent = forwardRef((props, ref) => {
17
16
  const renderStrategyProps = useRenderStrategyPropsContext();
18
17
  const presence = usePresence({
19
18
  ...renderStrategyProps,
20
- present: useDebounce(tabs.value === props.value, 0),
19
+ present: tabs.value === props.value,
21
20
  immediate: true
22
21
  });
23
22
  const mergedProps = mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
@@ -1,3 +1,4 @@
1
+ export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
1
2
  export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
2
3
  export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
3
4
  export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';
@@ -1,3 +1,4 @@
1
+ export type { ActionOptions as ToastActionOptions, Placement as ToastPlacement, PromiseOptions as ToastPromiseOptions, Status as ToastStatus, StatusChangeDetails as ToastStatusChangeDetails, Type as ToastType, } from '@zag-js/toast';
1
2
  export { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
2
3
  export { ToastActionTrigger, type ToastActionTriggerBaseProps, type ToastActionTriggerProps, } from './toast-action-trigger';
3
4
  export { ToastCloseTrigger, type ToastCloseTriggerBaseProps, type ToastCloseTriggerProps } from './toast-close-trigger';
package/dist/index.cjs CHANGED
@@ -693,6 +693,7 @@ const treeView$1 = require('./components/tree-view/tree-view.cjs');
693
693
  const environmentProvider = require('./providers/environment/environment-provider.cjs');
694
694
  const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
695
695
  const localeProvider = require('./providers/locale/locale-provider.cjs');
696
+ const useCollator = require('./providers/locale/use-collator.cjs');
696
697
  const useFilter = require('./providers/locale/use-filter.cjs');
697
698
  const useLocaleContext = require('./providers/locale/use-locale-context.cjs');
698
699
  const accordion = require('@zag-js/accordion');
@@ -1439,6 +1440,7 @@ exports.TreeView = treeView$1;
1439
1440
  exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
1440
1441
  exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
1441
1442
  exports.LocaleProvider = localeProvider.LocaleProvider;
1443
+ exports.useCollator = useCollator.useCollator;
1442
1444
  exports.useFilter = useFilter.useFilter;
1443
1445
  exports.useLocaleContext = useLocaleContext.useLocaleContext;
1444
1446
  Object.defineProperty(exports, "accordionAnatomy", {
package/dist/index.js CHANGED
@@ -737,6 +737,7 @@ export { treeView as TreeView };
737
737
  export { EnvironmentProvider } from './providers/environment/environment-provider.js';
738
738
  export { useEnvironmentContext } from './providers/environment/use-environment-context.js';
739
739
  export { LocaleProvider } from './providers/locale/locale-provider.js';
740
+ export { useCollator } from './providers/locale/use-collator.js';
740
741
  export { useFilter } from './providers/locale/use-filter.js';
741
742
  export { useLocaleContext } from './providers/locale/use-locale-context.js';
742
743
  export { anatomy as accordionAnatomy } from '@zag-js/accordion';
@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
  const environmentProvider = require('./environment/environment-provider.cjs');
6
6
  const useEnvironmentContext = require('./environment/use-environment-context.cjs');
7
7
  const localeProvider = require('./locale/locale-provider.cjs');
8
+ const useCollator = require('./locale/use-collator.cjs');
8
9
  const useFilter = require('./locale/use-filter.cjs');
9
10
  const useLocaleContext = require('./locale/use-locale-context.cjs');
10
11
 
@@ -13,5 +14,6 @@ const useLocaleContext = require('./locale/use-locale-context.cjs');
13
14
  exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
14
15
  exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
15
16
  exports.LocaleProvider = localeProvider.LocaleProvider;
17
+ exports.useCollator = useCollator.useCollator;
16
18
  exports.useFilter = useFilter.useFilter;
17
19
  exports.useLocaleContext = useLocaleContext.useLocaleContext;
@@ -1,5 +1,6 @@
1
1
  export { EnvironmentProvider } from './environment/environment-provider.js';
2
2
  export { useEnvironmentContext } from './environment/use-environment-context.js';
3
3
  export { LocaleProvider } from './locale/locale-provider.js';
4
+ export { useCollator } from './locale/use-collator.js';
4
5
  export { useFilter } from './locale/use-filter.js';
5
6
  export { useLocaleContext } from './locale/use-locale-context.js';
@@ -3,11 +3,13 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const localeProvider = require('./locale-provider.cjs');
6
+ const useCollator = require('./use-collator.cjs');
6
7
  const useFilter = require('./use-filter.cjs');
7
8
  const useLocaleContext = require('./use-locale-context.cjs');
8
9
 
9
10
 
10
11
 
11
12
  exports.LocaleProvider = localeProvider.LocaleProvider;
13
+ exports.useCollator = useCollator.useCollator;
12
14
  exports.useFilter = useFilter.useFilter;
13
15
  exports.useLocaleContext = useLocaleContext.useLocaleContext;
@@ -1,3 +1,4 @@
1
1
  export { LocaleProvider, type LocaleProviderProps } from './locale-provider';
2
+ export { useCollator, type UseCollatorProps } from './use-collator';
2
3
  export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
3
4
  export { useLocaleContext, type UseLocaleContext } from './use-locale-context';
@@ -1,3 +1,4 @@
1
1
  export { LocaleProvider, type LocaleProviderProps } from './locale-provider';
2
+ export { useCollator, type UseCollatorProps } from './use-collator';
2
3
  export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter';
3
4
  export { useLocaleContext, type UseLocaleContext } from './use-locale-context';
@@ -1,3 +1,4 @@
1
1
  export { LocaleProvider } from './locale-provider.js';
2
+ export { useCollator } from './use-collator.js';
2
3
  export { useFilter } from './use-filter.js';
3
4
  export { useLocaleContext } from './use-locale-context.js';
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const i18nUtils = require('@zag-js/i18n-utils');
7
+ const useLocaleContext = require('./use-locale-context.cjs');
8
+ const react = require('react');
9
+
10
+ function useCollator(props = {}) {
11
+ const env = useLocaleContext.useLocaleContext();
12
+ const locale = props.locale ?? env.locale;
13
+ return react.useMemo(() => {
14
+ const { locale: _, ...options } = props;
15
+ return i18nUtils.createCollator(locale, options);
16
+ }, [locale, props]);
17
+ }
18
+
19
+ exports.useCollator = useCollator;
@@ -0,0 +1,4 @@
1
+ export interface UseCollatorProps extends Intl.CollatorOptions {
2
+ locale?: string;
3
+ }
4
+ export declare function useCollator(props?: UseCollatorProps): Intl.Collator;
@@ -0,0 +1,4 @@
1
+ export interface UseCollatorProps extends Intl.CollatorOptions {
2
+ locale?: string;
3
+ }
4
+ export declare function useCollator(props?: UseCollatorProps): Intl.Collator;
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ import { createCollator } from '@zag-js/i18n-utils';
3
+ import { useLocaleContext } from './use-locale-context.js';
4
+ import { useMemo } from 'react';
5
+
6
+ function useCollator(props = {}) {
7
+ const env = useLocaleContext();
8
+ const locale = props.locale ?? env.locale;
9
+ return useMemo(() => {
10
+ const { locale: _, ...options } = props;
11
+ return createCollator(locale, options);
12
+ }, [locale, props]);
13
+ }
14
+
15
+ export { useCollator };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
3
  "type": "module",
4
- "version": "5.19.0",
4
+ "version": "5.21.0",
5
5
  "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
6
6
  "keywords": [
7
7
  "accordion",
@@ -141,65 +141,66 @@
141
141
  "sideEffects": false,
142
142
  "dependencies": {
143
143
  "@internationalized/date": "3.8.2",
144
- "@zag-js/accordion": "1.21.6",
145
- "@zag-js/anatomy": "1.21.6",
146
- "@zag-js/angle-slider": "1.21.6",
147
- "@zag-js/auto-resize": "1.21.6",
148
- "@zag-js/avatar": "1.21.6",
149
- "@zag-js/carousel": "1.21.6",
150
- "@zag-js/checkbox": "1.21.6",
151
- "@zag-js/clipboard": "1.21.6",
152
- "@zag-js/collapsible": "1.21.6",
153
- "@zag-js/collection": "1.21.6",
154
- "@zag-js/color-picker": "1.21.6",
155
- "@zag-js/color-utils": "1.21.6",
156
- "@zag-js/combobox": "1.21.6",
157
- "@zag-js/core": "1.21.6",
158
- "@zag-js/date-picker": "1.21.6",
159
- "@zag-js/date-utils": "1.21.6",
160
- "@zag-js/dialog": "1.21.6",
161
- "@zag-js/dom-query": "1.21.6",
162
- "@zag-js/editable": "1.21.6",
163
- "@zag-js/file-upload": "1.21.6",
164
- "@zag-js/file-utils": "1.21.6",
165
- "@zag-js/floating-panel": "1.21.6",
166
- "@zag-js/focus-trap": "1.21.6",
167
- "@zag-js/highlight-word": "1.21.6",
168
- "@zag-js/hover-card": "1.21.6",
169
- "@zag-js/i18n-utils": "1.21.6",
170
- "@zag-js/json-tree-utils": "1.21.6",
171
- "@zag-js/listbox": "1.21.6",
172
- "@zag-js/menu": "1.21.6",
173
- "@zag-js/number-input": "1.21.6",
174
- "@zag-js/pagination": "1.21.6",
175
- "@zag-js/password-input": "1.21.6",
176
- "@zag-js/pin-input": "1.21.6",
177
- "@zag-js/popover": "1.21.6",
178
- "@zag-js/presence": "1.21.6",
179
- "@zag-js/progress": "1.21.6",
180
- "@zag-js/qr-code": "1.21.6",
181
- "@zag-js/radio-group": "1.21.6",
182
- "@zag-js/rating-group": "1.21.6",
183
- "@zag-js/react": "1.21.6",
184
- "@zag-js/scroll-area": "1.21.6",
185
- "@zag-js/select": "1.21.6",
186
- "@zag-js/signature-pad": "1.21.6",
187
- "@zag-js/slider": "1.21.6",
188
- "@zag-js/splitter": "1.21.6",
189
- "@zag-js/steps": "1.21.6",
190
- "@zag-js/switch": "1.21.6",
191
- "@zag-js/tabs": "1.21.6",
192
- "@zag-js/tags-input": "1.21.6",
193
- "@zag-js/time-picker": "1.21.6",
194
- "@zag-js/timer": "1.21.6",
195
- "@zag-js/toast": "1.21.6",
196
- "@zag-js/toggle": "1.21.6",
197
- "@zag-js/toggle-group": "1.21.6",
198
- "@zag-js/tooltip": "1.21.6",
199
- "@zag-js/tour": "1.21.6",
200
- "@zag-js/tree-view": "1.21.6",
201
- "@zag-js/types": "1.21.6",
202
- "@zag-js/utils": "1.21.6"
144
+ "@zag-js/accordion": "1.21.9",
145
+ "@zag-js/anatomy": "1.21.9",
146
+ "@zag-js/angle-slider": "1.21.9",
147
+ "@zag-js/async-list": "1.21.9",
148
+ "@zag-js/auto-resize": "1.21.9",
149
+ "@zag-js/avatar": "1.21.9",
150
+ "@zag-js/carousel": "1.21.9",
151
+ "@zag-js/checkbox": "1.21.9",
152
+ "@zag-js/clipboard": "1.21.9",
153
+ "@zag-js/collapsible": "1.21.9",
154
+ "@zag-js/collection": "1.21.9",
155
+ "@zag-js/color-picker": "1.21.9",
156
+ "@zag-js/color-utils": "1.21.9",
157
+ "@zag-js/combobox": "1.21.9",
158
+ "@zag-js/core": "1.21.9",
159
+ "@zag-js/date-picker": "1.21.9",
160
+ "@zag-js/date-utils": "1.21.9",
161
+ "@zag-js/dialog": "1.21.9",
162
+ "@zag-js/dom-query": "1.21.9",
163
+ "@zag-js/editable": "1.21.9",
164
+ "@zag-js/file-upload": "1.21.9",
165
+ "@zag-js/file-utils": "1.21.9",
166
+ "@zag-js/floating-panel": "1.21.9",
167
+ "@zag-js/focus-trap": "1.21.9",
168
+ "@zag-js/highlight-word": "1.21.9",
169
+ "@zag-js/hover-card": "1.21.9",
170
+ "@zag-js/i18n-utils": "1.21.9",
171
+ "@zag-js/json-tree-utils": "1.21.9",
172
+ "@zag-js/listbox": "1.21.9",
173
+ "@zag-js/menu": "1.21.9",
174
+ "@zag-js/number-input": "1.21.9",
175
+ "@zag-js/pagination": "1.21.9",
176
+ "@zag-js/password-input": "1.21.9",
177
+ "@zag-js/pin-input": "1.21.9",
178
+ "@zag-js/popover": "1.21.9",
179
+ "@zag-js/presence": "1.21.9",
180
+ "@zag-js/progress": "1.21.9",
181
+ "@zag-js/qr-code": "1.21.9",
182
+ "@zag-js/radio-group": "1.21.9",
183
+ "@zag-js/rating-group": "1.21.9",
184
+ "@zag-js/react": "1.21.9",
185
+ "@zag-js/scroll-area": "1.21.9",
186
+ "@zag-js/select": "1.21.9",
187
+ "@zag-js/signature-pad": "1.21.9",
188
+ "@zag-js/slider": "1.21.9",
189
+ "@zag-js/splitter": "1.21.9",
190
+ "@zag-js/steps": "1.21.9",
191
+ "@zag-js/switch": "1.21.9",
192
+ "@zag-js/tabs": "1.21.9",
193
+ "@zag-js/tags-input": "1.21.9",
194
+ "@zag-js/time-picker": "1.21.9",
195
+ "@zag-js/timer": "1.21.9",
196
+ "@zag-js/toast": "1.21.9",
197
+ "@zag-js/toggle": "1.21.9",
198
+ "@zag-js/toggle-group": "1.21.9",
199
+ "@zag-js/tooltip": "1.21.9",
200
+ "@zag-js/tour": "1.21.9",
201
+ "@zag-js/tree-view": "1.21.9",
202
+ "@zag-js/types": "1.21.9",
203
+ "@zag-js/utils": "1.21.9"
203
204
  },
204
205
  "devDependencies": {
205
206
  "@biomejs/biome": "2.2.0",
@@ -217,7 +218,7 @@
217
218
  "image-conversion": "2.1.1",
218
219
  "globby": "14.1.0",
219
220
  "happy-dom": "18.0.1",
220
- "lucide-react": "0.539.0",
221
+ "lucide-react": "0.540.0",
221
222
  "react": "19.1.1",
222
223
  "react-dom": "19.1.1",
223
224
  "react-shadow": "20.6.0",
@@ -1,21 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
-
6
- const react = require('react');
7
-
8
- function useDebounce(value, delay) {
9
- const [debouncedValue, setDebouncedValue] = react.useState(value);
10
- react.useEffect(() => {
11
- const timer = setTimeout(() => {
12
- setDebouncedValue(value);
13
- }, delay);
14
- return () => {
15
- clearTimeout(timer);
16
- };
17
- }, [value, delay]);
18
- return debouncedValue;
19
- }
20
-
21
- exports.useDebounce = useDebounce;
@@ -1,17 +0,0 @@
1
- 'use client';
2
- import { useState, useEffect } from 'react';
3
-
4
- function useDebounce(value, delay) {
5
- const [debouncedValue, setDebouncedValue] = useState(value);
6
- useEffect(() => {
7
- const timer = setTimeout(() => {
8
- setDebouncedValue(value);
9
- }, delay);
10
- return () => {
11
- clearTimeout(timer);
12
- };
13
- }, [value, delay]);
14
- return debouncedValue;
15
- }
16
-
17
- export { useDebounce };