@ark-ui/react 5.34.1 → 5.36.0

package/dist/components/splitter/index.js

@@ -1,3 +1,4 @@
+export { createSplitterRegistry } from './create-splitter-registry.js';
 export { layout as getSplitterLayout, anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { SplitterContext } from './splitter-context.js';
 export { SplitterPanel } from './splitter-panel.js';

package/dist/components/splitter/splitter-root.cjs

@@ -26,6 +26,7 @@ const SplitterRoot = react.forwardRef((props, ref) => {
     "onResizeStart",
     "orientation",
     "panels",
+    "registry",
     "size"
   ]);
   const splitter = useSplitter.useSplitter(useSplitterProps);

package/dist/components/splitter/splitter-root.js

@@ -22,6 +22,7 @@ const SplitterRoot = forwardRef((props, ref) => {
     "onResizeStart",
     "orientation",
     "panels",
+    "registry",
     "size"
   ]);
   const splitter = useSplitter(useSplitterProps);

package/dist/components/splitter/splitter.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const splitter = require('@zag-js/splitter');
+const createSplitterRegistry = require('./create-splitter-registry.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const splitterPanel = require('./splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
@@ -16,6 +17,7 @@ Object.defineProperty(exports, "getLayout", {
   enumerable: true,
   get: () => splitter.layout
 });
+exports.createRegistry = createSplitterRegistry.createSplitterRegistry;
 exports.Context = splitterContext.SplitterContext;
 exports.Panel = splitterPanel.SplitterPanel;
 exports.ResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;

package/dist/components/splitter/splitter.d.cts

@@ -1,5 +1,6 @@
 export { layout as getLayout } from '@zag-js/splitter';
 export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
+export { createSplitterRegistry as createRegistry } from './create-splitter-registry';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter.d.ts

@@ -1,5 +1,6 @@
 export { layout as getLayout } from '@zag-js/splitter';
 export type { ExpandCollapseDetails, PanelData, ResizeDetails, ResizeEndDetails } from '@zag-js/splitter';
+export { createSplitterRegistry as createRegistry } from './create-splitter-registry';
 export { SplitterContext as Context, type SplitterContextProps as ContextProps } from './splitter-context';
 export { SplitterPanel as Panel, type SplitterPanelBaseProps as PanelBaseProps, type SplitterPanelProps as PanelProps, } from './splitter-panel';
 export { SplitterResizeTrigger as ResizeTrigger, type SplitterResizeTriggerBaseProps as ResizeTriggerBaseProps, type SplitterResizeTriggerProps as ResizeTriggerProps, } from './splitter-resize-trigger';

package/dist/components/splitter/splitter.js

@@ -1,4 +1,5 @@
 export { layout as getLayout } from '@zag-js/splitter';
+export { createSplitterRegistry as createRegistry } from './create-splitter-registry.js';
 export { SplitterContext as Context } from './splitter-context.js';
 export { SplitterPanel as Panel } from './splitter-panel.js';
 export { SplitterResizeTrigger as ResizeTrigger } from './splitter-resize-trigger.js';

package/dist/components/tags-input/tags-input-root.cjs

@@ -15,6 +15,7 @@ const splitTagsInputProps = createSplitProps.createSplitProps();
 const TagsInputRoot = react.forwardRef((props, ref) => {
   const [useTagsInputProps, localProps] = splitTagsInputProps(props, [
     "addOnPaste",
+    "allowDuplicates",
     "allowOverflow",
     "autoFocus",
     "blurBehavior",
@@ -41,6 +42,7 @@ const TagsInputRoot = react.forwardRef((props, ref) => {
     "placeholder",
     "readOnly",
     "required",
+    "sanitizeValue",
     "translations",
     "validate",
     "value"

package/dist/components/tags-input/tags-input-root.js

@@ -11,6 +11,7 @@ const splitTagsInputProps = createSplitProps();
 const TagsInputRoot = forwardRef((props, ref) => {
   const [useTagsInputProps, localProps] = splitTagsInputProps(props, [
     "addOnPaste",
+    "allowDuplicates",
     "allowOverflow",
     "autoFocus",
     "blurBehavior",
@@ -37,6 +38,7 @@ const TagsInputRoot = forwardRef((props, ref) => {
     "placeholder",
     "readOnly",
     "required",
+    "sanitizeValue",
     "translations",
     "validate",
     "value"

package/dist/components/timer/timer-root.cjs

@@ -21,6 +21,7 @@ const TimerRoot = react.forwardRef((props, ref) => {
     "countdown",
     "startMs",
     "targetMs",
+    "translations",
     "onComplete",
     "onTick"
   ]);

package/dist/components/timer/timer-root.js

@@ -17,6 +17,7 @@ const TimerRoot = forwardRef((props, ref) => {
     "countdown",
     "startMs",
     "targetMs",
+    "translations",
     "onComplete",
     "onTick"
   ]);

package/dist/components/tooltip/index.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
+export type { OpenChangeDetails as TooltipOpenChangeDetails, TriggerValueChangeDetails as TooltipTriggerValueChangeDetails, } from '@zag-js/tooltip';
 export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps } from './tooltip-arrow';
 export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps } from './tooltip-arrow-tip';
 export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps } from './tooltip-content';

package/dist/components/tooltip/index.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
+export type { OpenChangeDetails as TooltipOpenChangeDetails, TriggerValueChangeDetails as TooltipTriggerValueChangeDetails, } from '@zag-js/tooltip';
 export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps } from './tooltip-arrow';
 export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps } from './tooltip-arrow-tip';
 export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps } from './tooltip-content';

package/dist/components/tooltip/tooltip-trigger.cjs

@@ -6,12 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useTooltipContext = require('./use-tooltip-context.cjs');
 
+const splitTriggerProps = createSplitProps.createSplitProps();
 const TooltipTrigger = react.forwardRef((props, ref) => {
+  const [triggerProps, localProps] = splitTriggerProps(props, ["value"]);
   const tooltip = useTooltipContext.useTooltipContext();
-  const mergedProps = react$1.mergeProps(tooltip.getTriggerProps(), props);
+  const mergedProps = react$1.mergeProps(tooltip.getTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 TooltipTrigger.displayName = "TooltipTrigger";

package/dist/components/tooltip/tooltip-trigger.d.cts

@@ -1,7 +1,9 @@
+import { TriggerProps } from '@zag-js/tooltip';
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TooltipTriggerBaseProps extends PolymorphicProps {
+export interface TooltipTriggerBaseProps extends TriggerProps, PolymorphicProps {
 }
-export interface TooltipTriggerProps extends HTMLProps<'button'>, TooltipTriggerBaseProps {
+export interface TooltipTriggerProps extends Assign<HTMLProps<'button'>, TooltipTriggerBaseProps> {
 }
 export declare const TooltipTrigger: ForwardRefExoticComponent<TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/tooltip/tooltip-trigger.d.ts

@@ -1,7 +1,9 @@
+import { TriggerProps } from '@zag-js/tooltip';
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface TooltipTriggerBaseProps extends PolymorphicProps {
+export interface TooltipTriggerBaseProps extends TriggerProps, PolymorphicProps {
 }
-export interface TooltipTriggerProps extends HTMLProps<'button'>, TooltipTriggerBaseProps {
+export interface TooltipTriggerProps extends Assign<HTMLProps<'button'>, TooltipTriggerBaseProps> {
 }
 export declare const TooltipTrigger: ForwardRefExoticComponent<TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/tooltip/tooltip-trigger.js

@@ -2,12 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useTooltipContext } from './use-tooltip-context.js';
 
+const splitTriggerProps = createSplitProps();
 const TooltipTrigger = forwardRef((props, ref) => {
+  const [triggerProps, localProps] = splitTriggerProps(props, ["value"]);
   const tooltip = useTooltipContext();
-  const mergedProps = mergeProps(tooltip.getTriggerProps(), props);
+  const mergedProps = mergeProps(tooltip.getTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 TooltipTrigger.displayName = "TooltipTrigger";

package/dist/components/tooltip/tooltip.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/tooltip';
+export type { OpenChangeDetails, TriggerValueChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow as Arrow, type TooltipArrowBaseProps as ArrowBaseProps, type TooltipArrowProps as ArrowProps, } from './tooltip-arrow';
 export { TooltipArrowTip as ArrowTip, type TooltipArrowTipBaseProps as ArrowTipBaseProps, type TooltipArrowTipProps as ArrowTipProps, } from './tooltip-arrow-tip';
 export { TooltipContent as Content, type TooltipContentBaseProps as ContentBaseProps, type TooltipContentProps as ContentProps, } from './tooltip-content';

package/dist/components/tooltip/tooltip.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/tooltip';
+export type { OpenChangeDetails, TriggerValueChangeDetails } from '@zag-js/tooltip';
 export { TooltipArrow as Arrow, type TooltipArrowBaseProps as ArrowBaseProps, type TooltipArrowProps as ArrowProps, } from './tooltip-arrow';
 export { TooltipArrowTip as ArrowTip, type TooltipArrowTipBaseProps as ArrowTipBaseProps, type TooltipArrowTipProps as ArrowTipProps, } from './tooltip-arrow-tip';
 export { TooltipContent as Content, type TooltipContentBaseProps as ContentBaseProps, type TooltipContentProps as ContentProps, } from './tooltip-content';

package/dist/components/tree-view/tree-view-root.cjs

@@ -40,6 +40,7 @@ const TreeViewImpl = (props, ref) => {
     "scrollToIndexFn",
     "selectedValue",
     "selectionMode",
+    "translations",
     "typeahead"
   ]);
   const treeView = useTreeView.useTreeView(useTreeViewProps);

package/dist/components/tree-view/tree-view-root.js

@@ -36,6 +36,7 @@ const TreeViewImpl = (props, ref) => {
     "scrollToIndexFn",
     "selectedValue",
     "selectionMode",
+    "translations",
     "typeahead"
   ]);
   const treeView = useTreeView(useTreeViewProps);

package/dist/index.cjs

@@ -38,6 +38,7 @@ const avatar = require('./components/avatar/avatar.cjs');
 const drawerBackdrop = require('./components/drawer/drawer-backdrop.cjs');
 const drawerCloseTrigger = require('./components/drawer/drawer-close-trigger.cjs');
 const drawerContent = require('./components/drawer/drawer-content.cjs');
+const drawerDescription = require('./components/drawer/drawer-description.cjs');
 const drawerContext = require('./components/drawer/drawer-context.cjs');
 const drawerPositioner = require('./components/drawer/drawer-positioner.cjs');
 const drawerGrabber = require('./components/drawer/drawer-grabber.cjs');
@@ -49,6 +50,7 @@ const drawerTrigger = require('./components/drawer/drawer-trigger.cjs');
 const drawerIndent = require('./components/drawer/drawer-indent.cjs');
 const drawerIndentBackground = require('./components/drawer/drawer-indent-background.cjs');
 const drawerStack = require('./components/drawer/drawer-stack.cjs');
+const drawerSwipeArea = require('./components/drawer/drawer-swipe-area.cjs');
 const useDrawer = require('./components/drawer/use-drawer.cjs');
 const useDrawerContext = require('./components/drawer/use-drawer-context.cjs');
 const useDrawerStackContext = require('./components/drawer/use-drawer-stack-context.cjs');
@@ -167,6 +169,18 @@ const useCombobox = require('./components/combobox/use-combobox.cjs');
 const useComboboxContext = require('./components/combobox/use-combobox-context.cjs');
 const useComboboxItemContext = require('./components/combobox/use-combobox-item-context.cjs');
 const combobox = require('./components/combobox/combobox.cjs');
+const useDateInput = require('./components/date-input/use-date-input.cjs');
+const useDateInputContext = require('./components/date-input/use-date-input-context.cjs');
+const dateInputContext = require('./components/date-input/date-input-context.cjs');
+const dateInputLabel = require('./components/date-input/date-input-label.cjs');
+const dateInputRoot = require('./components/date-input/date-input-root.cjs');
+const dateInputRootProvider = require('./components/date-input/date-input-root-provider.cjs');
+const dateInputSegment = require('./components/date-input/date-input-segment.cjs');
+const dateInputSegmentGroup = require('./components/date-input/date-input-segment-group.cjs');
+const dateInputHiddenInput = require('./components/date-input/date-input-hidden-input.cjs');
+const dateInputControl = require('./components/date-input/date-input-control.cjs');
+const dateInputSegmentContext = require('./components/date-input/date-input-segment-context.cjs');
+const dateInput = require('./components/date-input/date-input.cjs');
 const datePicker$1 = require('@zag-js/date-picker');
 const datePickerClearTrigger = require('./components/date-picker/date-picker-clear-trigger.cjs');
 const datePickerContent = require('./components/date-picker/date-picker-content.cjs');
@@ -589,6 +603,7 @@ const sliderValueText = require('./components/slider/slider-value-text.cjs');
 const useSlider = require('./components/slider/use-slider.cjs');
 const useSliderContext = require('./components/slider/use-slider-context.cjs');
 const slider = require('./components/slider/slider.cjs');
+const createSplitterRegistry = require('./components/splitter/create-splitter-registry.cjs');
 const splitter$1 = require('@zag-js/splitter');
 const splitterContext = require('./components/splitter/splitter-context.cjs');
 const splitterPanel = require('./components/splitter/splitter-panel.cjs');
@@ -755,6 +770,8 @@ const useTreeViewNodeContext = require('./components/tree-view/use-tree-view-nod
 const treeView = require('./components/tree-view/tree-view.cjs');
 const environmentProvider = require('./providers/environment/environment-provider.cjs');
 const useEnvironmentContext = require('./providers/environment/use-environment-context.cjs');
+const useFocusVisible = require('./providers/interaction/use-focus-visible.cjs');
+const useInteractionModality = require('./providers/interaction/use-interaction-modality.cjs');
 const localeProvider = require('./providers/locale/locale-provider.cjs');
 const useCollator = require('./providers/locale/use-collator.cjs');
 const useDateFormatter = require('./providers/locale/use-date-formatter.cjs');
@@ -767,6 +784,7 @@ const angleSlider$1 = require('@zag-js/angle-slider');
 const avatar$1 = require('@zag-js/avatar');
 const clipboard$1 = require('@zag-js/clipboard');
 const collapsible$1 = require('@zag-js/collapsible');
+const dateInput$1 = require('@zag-js/date-input');
 const dialog$1 = require('@zag-js/dialog');
 const drawer$1 = require('@zag-js/drawer');
 const editable$1 = require('@zag-js/editable');
@@ -838,6 +856,7 @@ exports.Avatar = avatar;
 exports.DrawerBackdrop = drawerBackdrop.DrawerBackdrop;
 exports.DrawerCloseTrigger = drawerCloseTrigger.DrawerCloseTrigger;
 exports.DrawerContent = drawerContent.DrawerContent;
+exports.DrawerDescription = drawerDescription.DrawerDescription;
 exports.DrawerContext = drawerContext.DrawerContext;
 exports.DrawerPositioner = drawerPositioner.DrawerPositioner;
 exports.DrawerGrabber = drawerGrabber.DrawerGrabber;
@@ -849,6 +868,7 @@ exports.DrawerTrigger = drawerTrigger.DrawerTrigger;
 exports.DrawerIndent = drawerIndent.DrawerIndent;
 exports.DrawerIndentBackground = drawerIndentBackground.DrawerIndentBackground;
 exports.DrawerStack = drawerStack.DrawerStack;
+exports.DrawerSwipeArea = drawerSwipeArea.DrawerSwipeArea;
 exports.useDrawer = useDrawer.useDrawer;
 exports.useDrawerContext = useDrawerContext.useDrawerContext;
 exports.useDrawerStackContext = useDrawerStackContext.useDrawerStackContext;
@@ -971,6 +991,18 @@ exports.useCombobox = useCombobox.useCombobox;
 exports.useComboboxContext = useComboboxContext.useComboboxContext;
 exports.useComboboxItemContext = useComboboxItemContext.useComboboxItemContext;
 exports.Combobox = combobox;
+exports.useDateInput = useDateInput.useDateInput;
+exports.useDateInputContext = useDateInputContext.useDateInputContext;
+exports.DateInputContext = dateInputContext.DateInputContext;
+exports.DateInputLabel = dateInputLabel.DateInputLabel;
+exports.DateInputRoot = dateInputRoot.DateInputRoot;
+exports.DateInputRootProvider = dateInputRootProvider.DateInputRootProvider;
+exports.DateInputSegment = dateInputSegment.DateInputSegment;
+exports.DateInputSegmentGroup = dateInputSegmentGroup.DateInputSegmentGroup;
+exports.DateInputHiddenInput = dateInputHiddenInput.DateInputHiddenInput;
+exports.DateInputControl = dateInputControl.DateInputControl;
+exports.DateInputSegmentContext = dateInputSegmentContext.DateInputSegmentContext;
+exports.DateInput = dateInput;
 Object.defineProperty(exports, "parseDate", {
 	enumerable: true,
 	get: () => datePicker$1.parse
@@ -1398,6 +1430,7 @@ exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSlider = useSlider.useSlider;
 exports.useSliderContext = useSliderContext.useSliderContext;
 exports.Slider = slider;
+exports.createSplitterRegistry = createSplitterRegistry.createSplitterRegistry;
 Object.defineProperty(exports, "getSplitterLayout", {
 	enumerable: true,
 	get: () => splitter$1.layout
@@ -1582,6 +1615,8 @@ exports.useTreeViewNodeContext = useTreeViewNodeContext.useTreeViewNodeContext;
 exports.TreeView = treeView;
 exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
+exports.useFocusVisible = useFocusVisible.useFocusVisible;
+exports.useInteractionModality = useInteractionModality.useInteractionModality;
 exports.LocaleProvider = localeProvider.LocaleProvider;
 exports.useCollator = useCollator.useCollator;
 exports.useDateFormatter = useDateFormatter.useDateFormatter;
@@ -1612,6 +1647,10 @@ Object.defineProperty(exports, "collapsibleAnatomy", {
 	enumerable: true,
 	get: () => collapsible$1.anatomy
 });
+Object.defineProperty(exports, "dateInputAnatomy", {
+	enumerable: true,
+	get: () => dateInput$1.anatomy
+});
 Object.defineProperty(exports, "dialogAnatomy", {
 	enumerable: true,
 	get: () => dialog$1.anatomy

package/dist/index.js

@@ -37,6 +37,7 @@ export { avatar as Avatar };
 export { DrawerBackdrop } from './components/drawer/drawer-backdrop.js';
 export { DrawerCloseTrigger } from './components/drawer/drawer-close-trigger.js';
 export { DrawerContent } from './components/drawer/drawer-content.js';
+export { DrawerDescription } from './components/drawer/drawer-description.js';
 export { DrawerContext } from './components/drawer/drawer-context.js';
 export { DrawerPositioner } from './components/drawer/drawer-positioner.js';
 export { DrawerGrabber } from './components/drawer/drawer-grabber.js';
@@ -48,6 +49,7 @@ export { DrawerTrigger } from './components/drawer/drawer-trigger.js';
 export { DrawerIndent } from './components/drawer/drawer-indent.js';
 export { DrawerIndentBackground } from './components/drawer/drawer-indent-background.js';
 export { DrawerStack } from './components/drawer/drawer-stack.js';
+export { DrawerSwipeArea } from './components/drawer/drawer-swipe-area.js';
 export { useDrawer } from './components/drawer/use-drawer.js';
 export { useDrawerContext } from './components/drawer/use-drawer-context.js';
 export { useDrawerStackContext } from './components/drawer/use-drawer-stack-context.js';
@@ -173,6 +175,19 @@ export { useComboboxContext } from './components/combobox/use-combobox-context.j
 export { useComboboxItemContext } from './components/combobox/use-combobox-item-context.js';
 import * as combobox from './components/combobox/combobox.js';
 export { combobox as Combobox };
+export { useDateInput } from './components/date-input/use-date-input.js';
+export { useDateInputContext } from './components/date-input/use-date-input-context.js';
+export { DateInputContext } from './components/date-input/date-input-context.js';
+export { DateInputLabel } from './components/date-input/date-input-label.js';
+export { DateInputRoot } from './components/date-input/date-input-root.js';
+export { DateInputRootProvider } from './components/date-input/date-input-root-provider.js';
+export { DateInputSegment } from './components/date-input/date-input-segment.js';
+export { DateInputSegmentGroup } from './components/date-input/date-input-segment-group.js';
+export { DateInputHiddenInput } from './components/date-input/date-input-hidden-input.js';
+export { DateInputControl } from './components/date-input/date-input-control.js';
+export { DateInputSegmentContext } from './components/date-input/date-input-segment-context.js';
+import * as dateInput from './components/date-input/date-input.js';
+export { dateInput as DateInput };
 export { parse as parseDate } from '@zag-js/date-picker';
 export { DatePickerClearTrigger } from './components/date-picker/date-picker-clear-trigger.js';
 export { DatePickerContent } from './components/date-picker/date-picker-content.js';
@@ -624,6 +639,7 @@ export { useSlider } from './components/slider/use-slider.js';
 export { useSliderContext } from './components/slider/use-slider-context.js';
 import * as slider from './components/slider/slider.js';
 export { slider as Slider };
+export { createSplitterRegistry } from './components/splitter/create-splitter-registry.js';
 export { layout as getSplitterLayout, anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { SplitterContext } from './components/splitter/splitter-context.js';
 export { SplitterPanel } from './components/splitter/splitter-panel.js';
@@ -803,6 +819,8 @@ import * as treeView from './components/tree-view/tree-view.js';
 export { treeView as TreeView };
 export { EnvironmentProvider } from './providers/environment/environment-provider.js';
 export { useEnvironmentContext } from './providers/environment/use-environment-context.js';
+export { useFocusVisible } from './providers/interaction/use-focus-visible.js';
+export { useInteractionModality } from './providers/interaction/use-interaction-modality.js';
 export { LocaleProvider } from './providers/locale/locale-provider.js';
 export { useCollator } from './providers/locale/use-collator.js';
 export { useDateFormatter } from './providers/locale/use-date-formatter.js';
@@ -815,6 +833,7 @@ export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
+export { anatomy as dateInputAnatomy } from '@zag-js/date-input';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 export { anatomy as drawerAnatomy } from '@zag-js/drawer';
 export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/providers/index.cjs

@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const environmentProvider = require('./environment/environment-provider.cjs');
 const useEnvironmentContext = require('./environment/use-environment-context.cjs');
+const useFocusVisible = require('./interaction/use-focus-visible.cjs');
+const useInteractionModality = require('./interaction/use-interaction-modality.cjs');
 const localeProvider = require('./locale/locale-provider.cjs');
 const useCollator = require('./locale/use-collator.cjs');
 const useDateFormatter = require('./locale/use-date-formatter.cjs');
@@ -14,6 +16,8 @@ const useLocaleContext = require('./locale/use-locale-context.cjs');
 
 exports.EnvironmentProvider = environmentProvider.EnvironmentProvider;
 exports.useEnvironmentContext = useEnvironmentContext.useEnvironmentContext;
+exports.useFocusVisible = useFocusVisible.useFocusVisible;
+exports.useInteractionModality = useInteractionModality.useInteractionModality;
 exports.LocaleProvider = localeProvider.LocaleProvider;
 exports.useCollator = useCollator.useCollator;
 exports.useDateFormatter = useDateFormatter.useDateFormatter;

package/dist/providers/index.d.cts

@@ -1,2 +1,3 @@
 export * from './environment';
+export * from './interaction';
 export * from './locale';

package/dist/providers/index.d.ts

@@ -1,2 +1,3 @@
 export * from './environment';
+export * from './interaction';
 export * from './locale';

package/dist/providers/index.js

@@ -1,5 +1,7 @@
 export { EnvironmentProvider } from './environment/environment-provider.js';
 export { useEnvironmentContext } from './environment/use-environment-context.js';
+export { useFocusVisible } from './interaction/use-focus-visible.js';
+export { useInteractionModality } from './interaction/use-interaction-modality.js';
 export { LocaleProvider } from './locale/locale-provider.js';
 export { useCollator } from './locale/use-collator.js';
 export { useDateFormatter } from './locale/use-date-formatter.js';

package/dist/providers/interaction/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useFocusVisible = require('./use-focus-visible.cjs');
+const useInteractionModality = require('./use-interaction-modality.cjs');
+
+
+
+exports.useFocusVisible = useFocusVisible.useFocusVisible;
+exports.useInteractionModality = useInteractionModality.useInteractionModality;

package/dist/providers/interaction/index.d.cts

@@ -0,0 +1,2 @@
+export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible';
+export { useInteractionModality, type Modality } from './use-interaction-modality';

package/dist/providers/interaction/index.d.ts

@@ -0,0 +1,2 @@
+export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible';
+export { useInteractionModality, type Modality } from './use-interaction-modality';

package/dist/providers/interaction/index.js

@@ -0,0 +1,2 @@
+export { useFocusVisible } from './use-focus-visible.js';
+export { useInteractionModality } from './use-interaction-modality.js';

package/dist/providers/interaction/use-focus-visible.cjs

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const focusVisible = require('@zag-js/focus-visible');
+const react = require('react');
+const useEnvironmentContext = require('../environment/use-environment-context.cjs');
+
+function useFocusVisible(props = {}) {
+  const { isTextInput, autoFocus } = props;
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const subscribe = react.useCallback(
+    (onStoreChange) => focusVisible.trackFocusVisible({
+      root: getRootNode(),
+      isTextInput,
+      autoFocus,
+      onChange: onStoreChange
+    }),
+    [getRootNode, isTextInput, autoFocus]
+  );
+  const getSnapshot = react.useCallback(() => autoFocus || focusVisible.isFocusVisible(), [autoFocus]);
+  return react.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+exports.useFocusVisible = useFocusVisible;

package/dist/providers/interaction/use-focus-visible.d.cts

@@ -0,0 +1,5 @@
+export interface UseFocusVisibleProps {
+    isTextInput?: boolean;
+    autoFocus?: boolean;
+}
+export declare function useFocusVisible(props?: UseFocusVisibleProps): boolean;

package/dist/providers/interaction/use-focus-visible.d.ts

@@ -0,0 +1,5 @@
+export interface UseFocusVisibleProps {
+    isTextInput?: boolean;
+    autoFocus?: boolean;
+}
+export declare function useFocusVisible(props?: UseFocusVisibleProps): boolean;

package/dist/providers/interaction/use-focus-visible.js

@@ -0,0 +1,22 @@
+'use client';
+import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
+import { useCallback, useSyncExternalStore } from 'react';
+import { useEnvironmentContext } from '../environment/use-environment-context.js';
+
+function useFocusVisible(props = {}) {
+  const { isTextInput, autoFocus } = props;
+  const { getRootNode } = useEnvironmentContext();
+  const subscribe = useCallback(
+    (onStoreChange) => trackFocusVisible({
+      root: getRootNode(),
+      isTextInput,
+      autoFocus,
+      onChange: onStoreChange
+    }),
+    [getRootNode, isTextInput, autoFocus]
+  );
+  const getSnapshot = useCallback(() => autoFocus || isFocusVisible(), [autoFocus]);
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+export { useFocusVisible };

package/dist/providers/interaction/use-interaction-modality.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const focusVisible = require('@zag-js/focus-visible');
+const react = require('react');
+const useEnvironmentContext = require('../environment/use-environment-context.cjs');
+
+function useInteractionModality() {
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  return react.useSyncExternalStore(
+    react.useCallback((onChange) => focusVisible.trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]),
+    focusVisible.getInteractionModality,
+    () => null
+  );
+}
+
+exports.useInteractionModality = useInteractionModality;

package/dist/providers/interaction/use-interaction-modality.d.cts

@@ -0,0 +1,3 @@
+import { Modality } from '@zag-js/focus-visible';
+export type { Modality };
+export declare function useInteractionModality(): Modality | null;

package/dist/providers/interaction/use-interaction-modality.d.ts

@@ -0,0 +1,3 @@
+import { Modality } from '@zag-js/focus-visible';
+export type { Modality };
+export declare function useInteractionModality(): Modality | null;

package/dist/providers/interaction/use-interaction-modality.js

@@ -0,0 +1,15 @@
+'use client';
+import { trackInteractionModality, getInteractionModality } from '@zag-js/focus-visible';
+import { useSyncExternalStore, useCallback } from 'react';
+import { useEnvironmentContext } from '../environment/use-environment-context.js';
+
+function useInteractionModality() {
+  const { getRootNode } = useEnvironmentContext();
+  return useSyncExternalStore(
+    useCallback((onChange) => trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]),
+    getInteractionModality,
+    () => null
+  );
+}
+
+export { useInteractionModality };