@ark-ui/react 5.34.1 → 5.35.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 (71) hide show
  1. package/dist/components/clipboard/clipboard-root.cjs +1 -0
  2. package/dist/components/clipboard/clipboard-root.js +1 -0
  3. package/dist/components/drawer/drawer-description.cjs +19 -0
  4. package/dist/components/drawer/drawer-description.d.cts +7 -0
  5. package/dist/components/drawer/drawer-description.d.ts +7 -0
  6. package/dist/components/drawer/drawer-description.js +15 -0
  7. package/dist/components/drawer/drawer-swipe-area.cjs +19 -0
  8. package/dist/components/drawer/drawer-swipe-area.d.cts +7 -0
  9. package/dist/components/drawer/drawer-swipe-area.d.ts +7 -0
  10. package/dist/components/drawer/drawer-swipe-area.js +15 -0
  11. package/dist/components/drawer/drawer.cjs +4 -0
  12. package/dist/components/drawer/drawer.d.cts +2 -0
  13. package/dist/components/drawer/drawer.d.ts +2 -0
  14. package/dist/components/drawer/drawer.js +2 -0
  15. package/dist/components/drawer/index.cjs +4 -0
  16. package/dist/components/drawer/index.d.cts +2 -0
  17. package/dist/components/drawer/index.d.ts +2 -0
  18. package/dist/components/drawer/index.js +2 -0
  19. package/dist/components/field/field-item.cjs +54 -0
  20. package/dist/components/field/field-item.d.cts +10 -0
  21. package/dist/components/field/field-item.d.ts +10 -0
  22. package/dist/components/field/field-item.js +50 -0
  23. package/dist/components/field/field-root.cjs +2 -1
  24. package/dist/components/field/field-root.js +2 -1
  25. package/dist/components/field/field.cjs +2 -0
  26. package/dist/components/field/field.d.cts +1 -0
  27. package/dist/components/field/field.d.ts +1 -0
  28. package/dist/components/field/field.js +1 -0
  29. package/dist/components/field/use-field.cjs +11 -3
  30. package/dist/components/field/use-field.d.cts +4 -0
  31. package/dist/components/field/use-field.d.ts +4 -0
  32. package/dist/components/field/use-field.js +11 -3
  33. package/dist/components/frame/frame.cjs +1 -1
  34. package/dist/components/frame/frame.js +1 -1
  35. package/dist/components/index.cjs +4 -0
  36. package/dist/components/index.js +2 -0
  37. package/dist/components/listbox/listbox-input.cjs +1 -1
  38. package/dist/components/listbox/listbox-input.js +1 -1
  39. package/dist/components/navigation-menu/navigation-menu-root.cjs +1 -0
  40. package/dist/components/navigation-menu/navigation-menu-root.js +1 -0
  41. package/dist/components/pin-input/pin-input-root.cjs +2 -0
  42. package/dist/components/pin-input/pin-input-root.js +2 -0
  43. package/dist/components/select/select-root.cjs +1 -0
  44. package/dist/components/select/select-root.js +1 -0
  45. package/dist/components/tags-input/tags-input-root.cjs +1 -0
  46. package/dist/components/tags-input/tags-input-root.js +1 -0
  47. package/dist/components/timer/timer-root.cjs +1 -0
  48. package/dist/components/timer/timer-root.js +1 -0
  49. package/dist/components/tour/tour.anatomy.d.cts +1 -1
  50. package/dist/components/tour/tour.anatomy.d.ts +1 -1
  51. package/dist/components/tree-view/tree-view-root.cjs +1 -0
  52. package/dist/components/tree-view/tree-view-root.js +1 -0
  53. package/dist/index.cjs +8 -0
  54. package/dist/index.js +4 -0
  55. package/dist/providers/index.cjs +4 -0
  56. package/dist/providers/index.d.cts +1 -0
  57. package/dist/providers/index.d.ts +1 -0
  58. package/dist/providers/index.js +2 -0
  59. package/dist/providers/interaction/index.cjs +11 -0
  60. package/dist/providers/interaction/index.d.cts +2 -0
  61. package/dist/providers/interaction/index.d.ts +2 -0
  62. package/dist/providers/interaction/index.js +2 -0
  63. package/dist/providers/interaction/use-focus-visible.cjs +26 -0
  64. package/dist/providers/interaction/use-focus-visible.d.cts +5 -0
  65. package/dist/providers/interaction/use-focus-visible.d.ts +5 -0
  66. package/dist/providers/interaction/use-focus-visible.js +22 -0
  67. package/dist/providers/interaction/use-interaction-modality.cjs +19 -0
  68. package/dist/providers/interaction/use-interaction-modality.d.cts +3 -0
  69. package/dist/providers/interaction/use-interaction-modality.d.ts +3 -0
  70. package/dist/providers/interaction/use-interaction-modality.js +15 -0
  71. package/package.json +75 -75
@@ -37,6 +37,7 @@ export { avatar as Avatar };
37
37
  export { DrawerBackdrop } from './drawer/drawer-backdrop.js';
38
38
  export { DrawerCloseTrigger } from './drawer/drawer-close-trigger.js';
39
39
  export { DrawerContent } from './drawer/drawer-content.js';
40
+ export { DrawerDescription } from './drawer/drawer-description.js';
40
41
  export { DrawerContext } from './drawer/drawer-context.js';
41
42
  export { DrawerPositioner } from './drawer/drawer-positioner.js';
42
43
  export { DrawerGrabber } from './drawer/drawer-grabber.js';
@@ -48,6 +49,7 @@ export { DrawerTrigger } from './drawer/drawer-trigger.js';
48
49
  export { DrawerIndent } from './drawer/drawer-indent.js';
49
50
  export { DrawerIndentBackground } from './drawer/drawer-indent-background.js';
50
51
  export { DrawerStack } from './drawer/drawer-stack.js';
52
+ export { DrawerSwipeArea } from './drawer/drawer-swipe-area.js';
51
53
  export { useDrawer } from './drawer/use-drawer.js';
52
54
  export { useDrawerContext } from './drawer/use-drawer-context.js';
53
55
  export { useDrawerStackContext } from './drawer/use-drawer-stack-context.js';
@@ -12,7 +12,7 @@ const useListboxContext = require('./use-listbox-context.cjs');
12
12
 
13
13
  const splitInputProps = createSplitProps.createSplitProps();
14
14
  const ListboxInput = react.forwardRef((props, ref) => {
15
- const [inputProps, localProps] = splitInputProps(props, ["autoHighlight"]);
15
+ const [inputProps, localProps] = splitInputProps(props, ["autoHighlight", "keyboardPriority"]);
16
16
  const listbox = useListboxContext.useListboxContext();
17
17
  const mergedProps = react$1.mergeProps(listbox.getInputProps(inputProps), localProps);
18
18
  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
@@ -8,7 +8,7 @@ import { useListboxContext } from './use-listbox-context.js';
8
8
 
9
9
  const splitInputProps = createSplitProps();
10
10
  const ListboxInput = forwardRef((props, ref) => {
11
- const [inputProps, localProps] = splitInputProps(props, ["autoHighlight"]);
11
+ const [inputProps, localProps] = splitInputProps(props, ["autoHighlight", "keyboardPriority"]);
12
12
  const listbox = useListboxContext();
13
13
  const mergedProps = mergeProps(listbox.getInputProps(inputProps), localProps);
14
14
  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
@@ -26,6 +26,7 @@ const NavigationMenuRoot = react.forwardRef((props, ref) => {
26
26
  "onValueChange",
27
27
  "openDelay",
28
28
  "orientation",
29
+ "translations",
29
30
  "value"
30
31
  ]);
31
32
  const navigationMenu = useNavigationMenu.useNavigationMenu(useNavigationMenuProps);
@@ -22,6 +22,7 @@ const NavigationMenuRoot = forwardRef((props, ref) => {
22
22
  "onValueChange",
23
23
  "openDelay",
24
24
  "orientation",
25
+ "translations",
25
26
  "value"
26
27
  ]);
27
28
  const navigationMenu = useNavigationMenu(useNavigationMenuProps);
@@ -15,6 +15,7 @@ const splitRootProps = createSplitProps.createSplitProps();
15
15
  const PinInputRoot = react.forwardRef((props, ref) => {
16
16
  const [usePinInputProps, localProps] = splitRootProps(props, [
17
17
  "autoFocus",
18
+ "autoSubmit",
18
19
  "blurOnComplete",
19
20
  "count",
20
21
  "defaultValue",
@@ -33,6 +34,7 @@ const PinInputRoot = react.forwardRef((props, ref) => {
33
34
  "placeholder",
34
35
  "readOnly",
35
36
  "required",
37
+ "sanitizeValue",
36
38
  "selectOnFocus",
37
39
  "translations",
38
40
  "type",
@@ -11,6 +11,7 @@ const splitRootProps = createSplitProps();
11
11
  const PinInputRoot = forwardRef((props, ref) => {
12
12
  const [usePinInputProps, localProps] = splitRootProps(props, [
13
13
  "autoFocus",
14
+ "autoSubmit",
14
15
  "blurOnComplete",
15
16
  "count",
16
17
  "defaultValue",
@@ -29,6 +30,7 @@ const PinInputRoot = forwardRef((props, ref) => {
29
30
  "placeholder",
30
31
  "readOnly",
31
32
  "required",
33
+ "sanitizeValue",
32
34
  "selectOnFocus",
33
35
  "translations",
34
36
  "type",
@@ -45,6 +45,7 @@ const SelectImpl = (props, ref) => {
45
45
  "readOnly",
46
46
  "required",
47
47
  "scrollToIndexFn",
48
+ "translations",
48
49
  "autoComplete",
49
50
  "value"
50
51
  ]);
@@ -41,6 +41,7 @@ const SelectImpl = (props, ref) => {
41
41
  "readOnly",
42
42
  "required",
43
43
  "scrollToIndexFn",
44
+ "translations",
44
45
  "autoComplete",
45
46
  "value"
46
47
  ]);
@@ -15,6 +15,7 @@ const splitTagsInputProps = createSplitProps.createSplitProps();
15
15
  const TagsInputRoot = react.forwardRef((props, ref) => {
16
16
  const [useTagsInputProps, localProps] = splitTagsInputProps(props, [
17
17
  "addOnPaste",
18
+ "allowDuplicates",
18
19
  "allowOverflow",
19
20
  "autoFocus",
20
21
  "blurBehavior",
@@ -11,6 +11,7 @@ const splitTagsInputProps = createSplitProps();
11
11
  const TagsInputRoot = forwardRef((props, ref) => {
12
12
  const [useTagsInputProps, localProps] = splitTagsInputProps(props, [
13
13
  "addOnPaste",
14
+ "allowDuplicates",
14
15
  "allowOverflow",
15
16
  "autoFocus",
16
17
  "blurBehavior",
@@ -21,6 +21,7 @@ const TimerRoot = react.forwardRef((props, ref) => {
21
21
  "countdown",
22
22
  "startMs",
23
23
  "targetMs",
24
+ "translations",
24
25
  "onComplete",
25
26
  "onTick"
26
27
  ]);
@@ -17,6 +17,7 @@ const TimerRoot = forwardRef((props, ref) => {
17
17
  "countdown",
18
18
  "startMs",
19
19
  "targetMs",
20
+ "translations",
20
21
  "onComplete",
21
22
  "onTick"
22
23
  ]);
@@ -1,2 +1,2 @@
1
1
  import { AnatomyInstance } from '@zag-js/anatomy';
2
- export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
2
+ export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "actionTrigger" | "closeTrigger" | "title" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
@@ -1,2 +1,2 @@
1
1
  import { AnatomyInstance } from '@zag-js/anatomy';
2
- export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
2
+ export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "actionTrigger" | "closeTrigger" | "title" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
@@ -40,6 +40,7 @@ const TreeViewImpl = (props, ref) => {
40
40
  "scrollToIndexFn",
41
41
  "selectedValue",
42
42
  "selectionMode",
43
+ "translations",
43
44
  "typeahead"
44
45
  ]);
45
46
  const treeView = useTreeView.useTreeView(useTreeViewProps);
@@ -36,6 +36,7 @@ const TreeViewImpl = (props, ref) => {
36
36
  "scrollToIndexFn",
37
37
  "selectedValue",
38
38
  "selectionMode",
39
+ "translations",
39
40
  "typeahead"
40
41
  ]);
41
42
  const treeView = useTreeView(useTreeViewProps);
package/dist/index.cjs CHANGED
@@ -38,6 +38,7 @@ const avatar = require('./components/avatar/avatar.cjs');
38
38
  const drawerBackdrop = require('./components/drawer/drawer-backdrop.cjs');
39
39
  const drawerCloseTrigger = require('./components/drawer/drawer-close-trigger.cjs');
40
40
  const drawerContent = require('./components/drawer/drawer-content.cjs');
41
+ const drawerDescription = require('./components/drawer/drawer-description.cjs');
41
42
  const drawerContext = require('./components/drawer/drawer-context.cjs');
42
43
  const drawerPositioner = require('./components/drawer/drawer-positioner.cjs');
43
44
  const drawerGrabber = require('./components/drawer/drawer-grabber.cjs');
@@ -49,6 +50,7 @@ const drawerTrigger = require('./components/drawer/drawer-trigger.cjs');
49
50
  const drawerIndent = require('./components/drawer/drawer-indent.cjs');
50
51
  const drawerIndentBackground = require('./components/drawer/drawer-indent-background.cjs');
51
52
  const drawerStack = require('./components/drawer/drawer-stack.cjs');
53
+ const drawerSwipeArea = require('./components/drawer/drawer-swipe-area.cjs');
52
54
  const useDrawer = require('./components/drawer/use-drawer.cjs');
53
55
  const useDrawerContext = require('./components/drawer/use-drawer-context.cjs');
54
56
  const useDrawerStackContext = require('./components/drawer/use-drawer-stack-context.cjs');
@@ -755,6 +757,8 @@ const useTreeViewNodeContext = require('./components/tree-view/use-tree-view-nod
755
757
  const treeView = require('./components/tree-view/tree-view.cjs');
756
758
  const environmentProvider = require('./providers/environment/environment-provider.cjs');
757
759
  const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
760
+ const useFocusVisible = require('./providers/interaction/use-focus-visible.cjs');
761
+ const useInteractionModality = require('./providers/interaction/use-interaction-modality.cjs');
758
762
  const localeProvider = require('./providers/locale/locale-provider.cjs');
759
763
  const useCollator = require('./providers/locale/use-collator.cjs');
760
764
  const useDateFormatter = require('./providers/locale/use-date-formatter.cjs');
@@ -838,6 +842,7 @@ exports.Avatar = avatar;
838
842
  exports.DrawerBackdrop = drawerBackdrop.DrawerBackdrop;
839
843
  exports.DrawerCloseTrigger = drawerCloseTrigger.DrawerCloseTrigger;
840
844
  exports.DrawerContent = drawerContent.DrawerContent;
845
+ exports.DrawerDescription = drawerDescription.DrawerDescription;
841
846
  exports.DrawerContext = drawerContext.DrawerContext;
842
847
  exports.DrawerPositioner = drawerPositioner.DrawerPositioner;
843
848
  exports.DrawerGrabber = drawerGrabber.DrawerGrabber;
@@ -849,6 +854,7 @@ exports.DrawerTrigger = drawerTrigger.DrawerTrigger;
849
854
  exports.DrawerIndent = drawerIndent.DrawerIndent;
850
855
  exports.DrawerIndentBackground = drawerIndentBackground.DrawerIndentBackground;
851
856
  exports.DrawerStack = drawerStack.DrawerStack;
857
+ exports.DrawerSwipeArea = drawerSwipeArea.DrawerSwipeArea;
852
858
  exports.useDrawer = useDrawer.useDrawer;
853
859
  exports.useDrawerContext = useDrawerContext.useDrawerContext;
854
860
  exports.useDrawerStackContext = useDrawerStackContext.useDrawerStackContext;
@@ -1582,6 +1588,8 @@ exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
1582
1588
  exports.TreeView = treeView;
1583
1589
  exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
1584
1590
  exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
1591
+ exports.useFocusVisible = useFocusVisible.useFocusVisible;
1592
+ exports.useInteractionModality = useInteractionModality.useInteractionModality;
1585
1593
  exports.LocaleProvider = localeProvider.LocaleProvider;
1586
1594
  exports.useCollator = useCollator.useCollator;
1587
1595
  exports.useDateFormatter = useDateFormatter.useDateFormatter;
package/dist/index.js CHANGED
@@ -37,6 +37,7 @@ export { avatar as Avatar };
37
37
  export { DrawerBackdrop } from './components/drawer/drawer-backdrop.js';
38
38
  export { DrawerCloseTrigger } from './components/drawer/drawer-close-trigger.js';
39
39
  export { DrawerContent } from './components/drawer/drawer-content.js';
40
+ export { DrawerDescription } from './components/drawer/drawer-description.js';
40
41
  export { DrawerContext } from './components/drawer/drawer-context.js';
41
42
  export { DrawerPositioner } from './components/drawer/drawer-positioner.js';
42
43
  export { DrawerGrabber } from './components/drawer/drawer-grabber.js';
@@ -48,6 +49,7 @@ export { DrawerTrigger } from './components/drawer/drawer-trigger.js';
48
49
  export { DrawerIndent } from './components/drawer/drawer-indent.js';
49
50
  export { DrawerIndentBackground } from './components/drawer/drawer-indent-background.js';
50
51
  export { DrawerStack } from './components/drawer/drawer-stack.js';
52
+ export { DrawerSwipeArea } from './components/drawer/drawer-swipe-area.js';
51
53
  export { useDrawer } from './components/drawer/use-drawer.js';
52
54
  export { useDrawerContext } from './components/drawer/use-drawer-context.js';
53
55
  export { useDrawerStackContext } from './components/drawer/use-drawer-stack-context.js';
@@ -803,6 +805,8 @@ import * as treeView from './components/tree-view/tree-view.js';
803
805
  export { treeView as TreeView };
804
806
  export { EnvironmentProvider } from './providers/environment/environment-provider.js';
805
807
  export { useEnvironmentContext } from './providers/environment/use-environment-context.js';
808
+ export { useFocusVisible } from './providers/interaction/use-focus-visible.js';
809
+ export { useInteractionModality } from './providers/interaction/use-interaction-modality.js';
806
810
  export { LocaleProvider } from './providers/locale/locale-provider.js';
807
811
  export { useCollator } from './providers/locale/use-collator.js';
808
812
  export { useDateFormatter } from './providers/locale/use-date-formatter.js';
@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const environmentProvider = require('./environment/environment-provider.cjs');
6
6
  const useEnvironmentContext = require('./environment/use-environment-context.cjs');
7
+ const useFocusVisible = require('./interaction/use-focus-visible.cjs');
8
+ const useInteractionModality = require('./interaction/use-interaction-modality.cjs');
7
9
  const localeProvider = require('./locale/locale-provider.cjs');
8
10
  const useCollator = require('./locale/use-collator.cjs');
9
11
  const useDateFormatter = require('./locale/use-date-formatter.cjs');
@@ -14,6 +16,8 @@ const useLocaleContext = require('./locale/use-locale-context.cjs');
14
16
 
15
17
  exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
16
18
  exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
19
+ exports.useFocusVisible = useFocusVisible.useFocusVisible;
20
+ exports.useInteractionModality = useInteractionModality.useInteractionModality;
17
21
  exports.LocaleProvider = localeProvider.LocaleProvider;
18
22
  exports.useCollator = useCollator.useCollator;
19
23
  exports.useDateFormatter = useDateFormatter.useDateFormatter;
@@ -1,2 +1,3 @@
1
1
  export * from './environment';
2
+ export * from './interaction';
2
3
  export * from './locale';
@@ -1,2 +1,3 @@
1
1
  export * from './environment';
2
+ export * from './interaction';
2
3
  export * from './locale';
@@ -1,5 +1,7 @@
1
1
  export { EnvironmentProvider } from './environment/environment-provider.js';
2
2
  export { useEnvironmentContext } from './environment/use-environment-context.js';
3
+ export { useFocusVisible } from './interaction/use-focus-visible.js';
4
+ export { useInteractionModality } from './interaction/use-interaction-modality.js';
3
5
  export { LocaleProvider } from './locale/locale-provider.js';
4
6
  export { useCollator } from './locale/use-collator.js';
5
7
  export { useDateFormatter } from './locale/use-date-formatter.js';
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const useFocusVisible = require('./use-focus-visible.cjs');
6
+ const useInteractionModality = require('./use-interaction-modality.cjs');
7
+
8
+
9
+
10
+ exports.useFocusVisible = useFocusVisible.useFocusVisible;
11
+ exports.useInteractionModality = useInteractionModality.useInteractionModality;
@@ -0,0 +1,2 @@
1
+ export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible';
2
+ export { useInteractionModality, type Modality } from './use-interaction-modality';
@@ -0,0 +1,2 @@
1
+ export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible';
2
+ export { useInteractionModality, type Modality } from './use-interaction-modality';
@@ -0,0 +1,2 @@
1
+ export { useFocusVisible } from './use-focus-visible.js';
2
+ export { useInteractionModality } from './use-interaction-modality.js';
@@ -0,0 +1,26 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const focusVisible = require('@zag-js/focus-visible');
7
+ const react = require('react');
8
+ const useEnvironmentContext = require('../environment/use-environment-context.cjs');
9
+
10
+ function useFocusVisible(props = {}) {
11
+ const { isTextInput, autoFocus } = props;
12
+ const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
13
+ const subscribe = react.useCallback(
14
+ (onStoreChange) => focusVisible.trackFocusVisible({
15
+ root: getRootNode(),
16
+ isTextInput,
17
+ autoFocus,
18
+ onChange: onStoreChange
19
+ }),
20
+ [getRootNode, isTextInput, autoFocus]
21
+ );
22
+ const getSnapshot = react.useCallback(() => autoFocus || focusVisible.isFocusVisible(), [autoFocus]);
23
+ return react.useSyncExternalStore(subscribe, getSnapshot, () => false);
24
+ }
25
+
26
+ exports.useFocusVisible = useFocusVisible;
@@ -0,0 +1,5 @@
1
+ export interface UseFocusVisibleProps {
2
+ isTextInput?: boolean;
3
+ autoFocus?: boolean;
4
+ }
5
+ export declare function useFocusVisible(props?: UseFocusVisibleProps): boolean;
@@ -0,0 +1,5 @@
1
+ export interface UseFocusVisibleProps {
2
+ isTextInput?: boolean;
3
+ autoFocus?: boolean;
4
+ }
5
+ export declare function useFocusVisible(props?: UseFocusVisibleProps): boolean;
@@ -0,0 +1,22 @@
1
+ 'use client';
2
+ import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
3
+ import { useCallback, useSyncExternalStore } from 'react';
4
+ import { useEnvironmentContext } from '../environment/use-environment-context.js';
5
+
6
+ function useFocusVisible(props = {}) {
7
+ const { isTextInput, autoFocus } = props;
8
+ const { getRootNode } = useEnvironmentContext();
9
+ const subscribe = useCallback(
10
+ (onStoreChange) => trackFocusVisible({
11
+ root: getRootNode(),
12
+ isTextInput,
13
+ autoFocus,
14
+ onChange: onStoreChange
15
+ }),
16
+ [getRootNode, isTextInput, autoFocus]
17
+ );
18
+ const getSnapshot = useCallback(() => autoFocus || isFocusVisible(), [autoFocus]);
19
+ return useSyncExternalStore(subscribe, getSnapshot, () => false);
20
+ }
21
+
22
+ export { useFocusVisible };
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
+
6
+ const focusVisible = require('@zag-js/focus-visible');
7
+ const react = require('react');
8
+ const useEnvironmentContext = require('../environment/use-environment-context.cjs');
9
+
10
+ function useInteractionModality() {
11
+ const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
12
+ return react.useSyncExternalStore(
13
+ react.useCallback((onChange) => focusVisible.trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]),
14
+ focusVisible.getInteractionModality,
15
+ () => null
16
+ );
17
+ }
18
+
19
+ exports.useInteractionModality = useInteractionModality;
@@ -0,0 +1,3 @@
1
+ import { Modality } from '@zag-js/focus-visible';
2
+ export type { Modality };
3
+ export declare function useInteractionModality(): Modality | null;
@@ -0,0 +1,3 @@
1
+ import { Modality } from '@zag-js/focus-visible';
2
+ export type { Modality };
3
+ export declare function useInteractionModality(): Modality | null;
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ import { trackInteractionModality, getInteractionModality } from '@zag-js/focus-visible';
3
+ import { useSyncExternalStore, useCallback } from 'react';
4
+ import { useEnvironmentContext } from '../environment/use-environment-context.js';
5
+
6
+ function useInteractionModality() {
7
+ const { getRootNode } = useEnvironmentContext();
8
+ return useSyncExternalStore(
9
+ useCallback((onChange) => trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]),
10
+ getInteractionModality,
11
+ () => null
12
+ );
13
+ }
14
+
15
+ export { useInteractionModality };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
3
  "type": "module",
4
- "version": "5.34.1",
4
+ "version": "5.35.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,85 +141,85 @@
141
141
  "typecheck": "tsc",
142
142
  "storybook": "storybook dev -p 6006",
143
143
  "prepack": "clean-package",
144
- "postpack": "clean-package restore",
145
- "release-it": "release-it --config ../../release-it.json"
144
+ "postpack": "clean-package restore"
146
145
  },
147
146
  "publishConfig": {
148
147
  "access": "public"
149
148
  },
150
149
  "sideEffects": false,
151
150
  "dependencies": {
152
- "@internationalized/date": "3.11.0",
153
- "@zag-js/accordion": "1.35.3",
154
- "@zag-js/anatomy": "1.35.3",
155
- "@zag-js/angle-slider": "1.35.3",
156
- "@zag-js/async-list": "1.35.3",
157
- "@zag-js/auto-resize": "1.35.3",
158
- "@zag-js/avatar": "1.35.3",
159
- "@zag-js/carousel": "1.35.3",
160
- "@zag-js/cascade-select": "1.35.3",
161
- "@zag-js/checkbox": "1.35.3",
162
- "@zag-js/clipboard": "1.35.3",
163
- "@zag-js/collapsible": "1.35.3",
164
- "@zag-js/collection": "1.35.3",
165
- "@zag-js/color-picker": "1.35.3",
166
- "@zag-js/color-utils": "1.35.3",
167
- "@zag-js/combobox": "1.35.3",
168
- "@zag-js/core": "1.35.3",
169
- "@zag-js/date-picker": "1.35.3",
170
- "@zag-js/date-utils": "1.35.3",
171
- "@zag-js/dialog": "1.35.3",
172
- "@zag-js/dom-query": "1.35.3",
173
- "@zag-js/drawer": "1.35.3",
174
- "@zag-js/editable": "1.35.3",
175
- "@zag-js/file-upload": "1.35.3",
176
- "@zag-js/file-utils": "1.35.3",
177
- "@zag-js/floating-panel": "1.35.3",
178
- "@zag-js/focus-trap": "1.35.3",
179
- "@zag-js/highlight-word": "1.35.3",
180
- "@zag-js/hover-card": "1.35.3",
181
- "@zag-js/i18n-utils": "1.35.3",
182
- "@zag-js/image-cropper": "1.35.3",
183
- "@zag-js/json-tree-utils": "1.35.3",
184
- "@zag-js/listbox": "1.35.3",
185
- "@zag-js/marquee": "1.35.3",
186
- "@zag-js/menu": "1.35.3",
187
- "@zag-js/navigation-menu": "1.35.3",
188
- "@zag-js/number-input": "1.35.3",
189
- "@zag-js/pagination": "1.35.3",
190
- "@zag-js/password-input": "1.35.3",
191
- "@zag-js/pin-input": "1.35.3",
192
- "@zag-js/popover": "1.35.3",
193
- "@zag-js/presence": "1.35.3",
194
- "@zag-js/progress": "1.35.3",
195
- "@zag-js/qr-code": "1.35.3",
196
- "@zag-js/radio-group": "1.35.3",
197
- "@zag-js/rating-group": "1.35.3",
198
- "@zag-js/react": "1.35.3",
199
- "@zag-js/scroll-area": "1.35.3",
200
- "@zag-js/select": "1.35.3",
201
- "@zag-js/signature-pad": "1.35.3",
202
- "@zag-js/slider": "1.35.3",
203
- "@zag-js/splitter": "1.35.3",
204
- "@zag-js/steps": "1.35.3",
205
- "@zag-js/switch": "1.35.3",
206
- "@zag-js/tabs": "1.35.3",
207
- "@zag-js/tags-input": "1.35.3",
208
- "@zag-js/timer": "1.35.3",
209
- "@zag-js/toast": "1.35.3",
210
- "@zag-js/toggle": "1.35.3",
211
- "@zag-js/toggle-group": "1.35.3",
212
- "@zag-js/tooltip": "1.35.3",
213
- "@zag-js/tour": "1.35.3",
214
- "@zag-js/tree-view": "1.35.3",
215
- "@zag-js/types": "1.35.3",
216
- "@zag-js/utils": "1.35.3"
151
+ "@internationalized/date": "3.12.0",
152
+ "@zag-js/accordion": "1.38.2",
153
+ "@zag-js/anatomy": "1.38.2",
154
+ "@zag-js/angle-slider": "1.38.2",
155
+ "@zag-js/async-list": "1.38.2",
156
+ "@zag-js/auto-resize": "1.38.2",
157
+ "@zag-js/avatar": "1.38.2",
158
+ "@zag-js/carousel": "1.38.2",
159
+ "@zag-js/cascade-select": "1.38.2",
160
+ "@zag-js/checkbox": "1.38.2",
161
+ "@zag-js/clipboard": "1.38.2",
162
+ "@zag-js/collapsible": "1.38.2",
163
+ "@zag-js/collection": "1.38.2",
164
+ "@zag-js/color-picker": "1.38.2",
165
+ "@zag-js/color-utils": "1.38.2",
166
+ "@zag-js/combobox": "1.38.2",
167
+ "@zag-js/core": "1.38.2",
168
+ "@zag-js/date-picker": "1.38.2",
169
+ "@zag-js/date-utils": "1.38.2",
170
+ "@zag-js/dialog": "1.38.2",
171
+ "@zag-js/dom-query": "1.38.2",
172
+ "@zag-js/drawer": "1.38.2",
173
+ "@zag-js/editable": "1.38.2",
174
+ "@zag-js/file-upload": "1.38.2",
175
+ "@zag-js/focus-visible": "1.38.2",
176
+ "@zag-js/file-utils": "1.38.2",
177
+ "@zag-js/floating-panel": "1.38.2",
178
+ "@zag-js/focus-trap": "1.38.2",
179
+ "@zag-js/highlight-word": "1.38.2",
180
+ "@zag-js/hover-card": "1.38.2",
181
+ "@zag-js/i18n-utils": "1.38.2",
182
+ "@zag-js/image-cropper": "1.38.2",
183
+ "@zag-js/json-tree-utils": "1.38.2",
184
+ "@zag-js/listbox": "1.38.2",
185
+ "@zag-js/marquee": "1.38.2",
186
+ "@zag-js/menu": "1.38.2",
187
+ "@zag-js/navigation-menu": "1.38.2",
188
+ "@zag-js/number-input": "1.38.2",
189
+ "@zag-js/pagination": "1.38.2",
190
+ "@zag-js/password-input": "1.38.2",
191
+ "@zag-js/pin-input": "1.38.2",
192
+ "@zag-js/popover": "1.38.2",
193
+ "@zag-js/presence": "1.38.2",
194
+ "@zag-js/progress": "1.38.2",
195
+ "@zag-js/qr-code": "1.38.2",
196
+ "@zag-js/radio-group": "1.38.2",
197
+ "@zag-js/rating-group": "1.38.2",
198
+ "@zag-js/react": "1.38.2",
199
+ "@zag-js/scroll-area": "1.38.2",
200
+ "@zag-js/select": "1.38.2",
201
+ "@zag-js/signature-pad": "1.38.2",
202
+ "@zag-js/slider": "1.38.2",
203
+ "@zag-js/splitter": "1.38.2",
204
+ "@zag-js/steps": "1.38.2",
205
+ "@zag-js/switch": "1.38.2",
206
+ "@zag-js/tabs": "1.38.2",
207
+ "@zag-js/tags-input": "1.38.2",
208
+ "@zag-js/timer": "1.38.2",
209
+ "@zag-js/toast": "1.38.2",
210
+ "@zag-js/toggle": "1.38.2",
211
+ "@zag-js/toggle-group": "1.38.2",
212
+ "@zag-js/tooltip": "1.38.2",
213
+ "@zag-js/tour": "1.38.2",
214
+ "@zag-js/tree-view": "1.38.2",
215
+ "@zag-js/types": "1.38.2",
216
+ "@zag-js/utils": "1.38.2"
217
217
  },
218
218
  "devDependencies": {
219
- "@biomejs/biome": "2.4.4",
220
- "@storybook/addon-a11y": "10.2.10",
221
- "@storybook/react-vite": "10.2.10",
222
- "@tanstack/react-virtual": "3.13.18",
219
+ "@biomejs/biome": "2.4.9",
220
+ "@storybook/addon-a11y": "10.3.3",
221
+ "@storybook/react-vite": "10.3.3",
222
+ "@tanstack/react-virtual": "3.13.23",
223
223
  "@testing-library/dom": "10.4.1",
224
224
  "@testing-library/jest-dom": "6.9.1",
225
225
  "@testing-library/react": "16.3.2",
@@ -234,15 +234,15 @@
234
234
  "globby": "16.1.1",
235
235
  "happy-dom": "20.7.0",
236
236
  "image-conversion": "2.1.1",
237
- "lucide-react": "0.575.0",
237
+ "lucide-react": "1.7.0",
238
238
  "react": "19.2.4",
239
239
  "react-dom": "19.2.4",
240
240
  "react-frame-component": "5.2.7",
241
- "react-hook-form": "7.71.2",
241
+ "react-hook-form": "7.72.0",
242
242
  "react-shadow": "20.6.0",
243
243
  "react-use": "17.6.0",
244
244
  "resize-observer-polyfill": "1.5.1",
245
- "storybook": "10.2.10",
245
+ "storybook": "10.3.3",
246
246
  "typescript": "5.9.3",
247
247
  "vite": "7.3.1",
248
248
  "vite-plugin-dts": "4.5.4",