@ark-ui/react 5.27.1 → 5.29.0

package/dist/components/index.js

@@ -48,6 +48,8 @@ export { useBottomSheet } from './bottom-sheet/use-bottom-sheet.js';
 export { useBottomSheetContext } from './bottom-sheet/use-bottom-sheet-context.js';
 import * as bottomSheet from './bottom-sheet/bottom-sheet.js';
 export { bottomSheet as BottomSheet };
+export { CarouselAutoplayIndicator } from './carousel/carousel-autoplay-indicator.js';
+export { CarouselProgressText } from './carousel/carousel-progress-text.js';
 export { CarouselAutoplayTrigger } from './carousel/carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel/carousel-context.js';
 export { CarouselControl } from './carousel/carousel-control.js';
@@ -59,6 +61,7 @@ export { CarouselNextTrigger } from './carousel/carousel-next-trigger.js';
 export { CarouselPrevTrigger } from './carousel/carousel-prev-trigger.js';
 export { CarouselRoot } from './carousel/carousel-root.js';
 export { CarouselRootProvider } from './carousel/carousel-root-provider.js';
+export { carouselAnatomy } from './carousel/carousel.anatomy.js';
 export { useCarousel } from './carousel/use-carousel.js';
 export { useCarouselContext } from './carousel/use-carousel-context.js';
 import * as carousel from './carousel/carousel.js';
@@ -312,6 +315,18 @@ export { useHoverCard } from './hover-card/use-hover-card.js';
 export { useHoverCardContext } from './hover-card/use-hover-card-context.js';
 import * as hoverCard from './hover-card/hover-card.js';
 export { hoverCard as HoverCard };
+export { ImageCropperContext } from './image-cropper/image-cropper-context.js';
+export { ImageCropperGrid } from './image-cropper/image-cropper-grid.js';
+export { ImageCropperHandle } from './image-cropper/image-cropper-handle.js';
+export { ImageCropperImage } from './image-cropper/image-cropper-image.js';
+export { ImageCropperRoot } from './image-cropper/image-cropper-root.js';
+export { ImageCropperRootProvider } from './image-cropper/image-cropper-root-provider.js';
+export { ImageCropperSelection } from './image-cropper/image-cropper-selection.js';
+export { ImageCropperViewport } from './image-cropper/image-cropper-viewport.js';
+export { useImageCropper } from './image-cropper/use-image-cropper.js';
+export { useImageCropperContext } from './image-cropper/use-image-cropper-context.js';
+import * as imageCropper from './image-cropper/image-cropper.js';
+export { imageCropper as ImageCropper };
 export { JsonTreeViewRoot } from './json-tree-view/json-tree-view-root.js';
 export { JsonTreeViewRootProvider } from './json-tree-view/json-tree-view-root-provider.js';
 export { JsonTreeViewTree } from './json-tree-view/json-tree-view-tree.js';
@@ -581,9 +596,11 @@ export { useSlider } from './slider/use-slider.js';
 export { useSliderContext } from './slider/use-slider-context.js';
 import * as slider from './slider/slider.js';
 export { slider as Slider };
+export { layout as getSplitterLayout, anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { SplitterContext } from './splitter/splitter-context.js';
 export { SplitterPanel } from './splitter/splitter-panel.js';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.js';
+export { SplitterResizeTriggerIndicator } from './splitter/splitter-resize-trigger-indicator.js';
 export { SplitterRoot } from './splitter/splitter-root.js';
 export { SplitterRootProvider } from './splitter/splitter-root-provider.js';
 export { useSplitter } from './splitter/use-splitter.js';
@@ -750,7 +767,6 @@ export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
@@ -758,6 +774,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
 export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
 export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
+export { anatomy as imageCropperAnatomy } from '@zag-js/image-cropper';
 export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -773,7 +790,6 @@ export { anatomy as scrollAreaAnatomy } from '@zag-js/scroll-area';
 export { anatomy as selectAnatomy } from '@zag-js/select';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
-export { anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';

package/dist/components/listbox/listbox-input.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useListboxContext = require('./use-listbox-context.cjs');
 
+const splitInputProps = createSplitProps.createSplitProps();
 const ListboxInput = react.forwardRef((props, ref) => {
-  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, ["autoHighlight"]);
+  const [inputProps, localProps] = splitInputProps(props, ["autoHighlight"]);
   const listbox = useListboxContext.useListboxContext();
   const mergedProps = react$1.mergeProps(listbox.getInputProps(inputProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });

package/dist/components/listbox/listbox-input.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useListboxContext } from './use-listbox-context.js';
 
+const splitInputProps = createSplitProps();
 const ListboxInput = forwardRef((props, ref) => {
-  const [inputProps, localProps] = createSplitProps()(props, ["autoHighlight"]);
+  const [inputProps, localProps] = splitInputProps(props, ["autoHighlight"]);
   const listbox = useListboxContext();
   const mergedProps = mergeProps(listbox.getInputProps(inputProps), localProps);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });

package/dist/components/listbox/listbox-item-group.cjs

@@ -11,9 +11,10 @@ const factory = require('../factory.cjs');
 const useListboxContext = require('./use-listbox-context.cjs');
 const useListboxItemGroupProps = require('./use-listbox-item-group-props.cjs');
 
+const splitItemGroupProps = createSplitProps.createSplitProps();
 const ListboxItemGroup = react.forwardRef((props, ref) => {
   const id = react.useId();
-  const [_itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const [_itemGroupProps, localProps] = splitItemGroupProps(props, ["id"]);
   const itemGroupProps = { id, ..._itemGroupProps };
   const listbox = useListboxContext.useListboxContext();
   const mergedProps = react$1.mergeProps(listbox.getItemGroupProps(itemGroupProps), localProps);

package/dist/components/listbox/listbox-item-group.js

@@ -7,9 +7,10 @@ import { ark } from '../factory.js';
 import { useListboxContext } from './use-listbox-context.js';
 import { ListboxItemGroupPropsProvider } from './use-listbox-item-group-props.js';
 
+const splitItemGroupProps = createSplitProps();
 const ListboxItemGroup = forwardRef((props, ref) => {
   const id = useId();
-  const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+  const [_itemGroupProps, localProps] = splitItemGroupProps(props, ["id"]);
   const itemGroupProps = { id, ..._itemGroupProps };
   const listbox = useListboxContext();
   const mergedProps = mergeProps(listbox.getItemGroupProps(itemGroupProps), localProps);

package/dist/components/listbox/listbox-item.cjs

@@ -12,8 +12,9 @@ const useListboxContext = require('./use-listbox-context.cjs');
 const useListboxItemContext = require('./use-listbox-item-context.cjs');
 const useListboxItemPropsContext = require('./use-listbox-item-props-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const ListboxItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["item", "highlightOnHover"]);
+  const [itemProps, localProps] = splitItemProps(props, ["item", "highlightOnHover"]);
   const listbox = useListboxContext.useListboxContext();
   const mergedProps = react$1.mergeProps(listbox.getItemProps(itemProps), localProps);
   const itemState = listbox.getItemState(itemProps);

package/dist/components/listbox/listbox-item.js

@@ -8,8 +8,9 @@ import { useListboxContext } from './use-listbox-context.js';
 import { ListboxItemProvider } from './use-listbox-item-context.js';
 import { ListboxItemPropsProvider } from './use-listbox-item-props-context.js';
 
+const splitItemProps = createSplitProps();
 const ListboxItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["item", "highlightOnHover"]);
+  const [itemProps, localProps] = splitItemProps(props, ["item", "highlightOnHover"]);
   const listbox = useListboxContext();
   const mergedProps = mergeProps(listbox.getItemProps(itemProps), localProps);
   const itemState = listbox.getItemState(itemProps);

package/dist/components/listbox/listbox.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const listboxAnatomy: AnatomyInstance<"root" | "label" | "content" | "valueText" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const listboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "label" | "content" | "valueText" | "input" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/listbox/listbox.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const listboxAnatomy: AnatomyInstance<"root" | "label" | "content" | "valueText" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;
+export declare const listboxAnatomy: AnatomyInstance<"root" | "itemGroup" | "item" | "label" | "content" | "valueText" | "input" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/marquee/marquee-edge.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useMarqueeContext = require('./use-marquee-context.cjs');
 
+const splitEdgeProps = createSplitProps.createSplitProps();
 const MarqueeEdge = react.forwardRef((props, ref) => {
-  const [edgeProps, localProps] = createSplitProps.createSplitProps()(props, ["side"]);
+  const [edgeProps, localProps] = splitEdgeProps(props, ["side"]);
   const marquee = useMarqueeContext.useMarqueeContext();
   const mergedProps = react$1.mergeProps(marquee.getEdgeProps(edgeProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/marquee/marquee-edge.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useMarqueeContext } from './use-marquee-context.js';
 
+const splitEdgeProps = createSplitProps();
 const MarqueeEdge = forwardRef((props, ref) => {
-  const [edgeProps, localProps] = createSplitProps()(props, ["side"]);
+  const [edgeProps, localProps] = splitEdgeProps(props, ["side"]);
   const marquee = useMarqueeContext();
   const mergedProps = mergeProps(marquee.getEdgeProps(edgeProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/marquee/marquee-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useMarqueeContext = require('./use-marquee-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const MarqueeRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: marquee }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: marquee }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(marquee.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useMarqueeContext.MarqueeProvider, { value: marquee, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/marquee/marquee-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { MarqueeProvider } from './use-marquee-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const MarqueeRootProvider = forwardRef((props, ref) => {
-  const [{ value: marquee }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: marquee }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(marquee.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(MarqueeProvider, { value: marquee, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useMarquee = require('./use-marquee.cjs');
 const useMarqueeContext = require('./use-marquee-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const MarqueeRoot = react.forwardRef((props, ref) => {
-  const [useMarqueeProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useMarqueeProps, localProps] = splitRootProps(props, [
     "autoFill",
     "defaultPaused",
     "delay",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useMarquee } from './use-marquee.js';
 import { MarqueeProvider } from './use-marquee-context.js';
 
+const splitRootProps = createSplitProps();
 const MarqueeRoot = forwardRef((props, ref) => {
-  const [useMarqueeProps, localProps] = createSplitProps()(props, [
+  const [useMarqueeProps, localProps] = splitRootProps(props, [
     "autoFill",
     "defaultPaused",
     "delay",

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

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as MenuHighlightChangeDetails, OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
+export type { FocusOutsideEvent as MenuFocusOutsideEvent, HighlightChangeDetails as MenuHighlightChangeDetails, InteractOutsideEvent as MenuInteractOutsideEvent, OpenChangeDetails as MenuOpenChangeDetails, PointerDownOutsideEvent as MenuPointerDownOutsideEvent, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
 export { MenuArrow, type MenuArrowBaseProps, type MenuArrowProps } from './menu-arrow';
 export { MenuArrowTip, type MenuArrowTipBaseProps, type MenuArrowTipProps } from './menu-arrow-tip';
 export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps } from './menu-checkbox-item';

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

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as MenuHighlightChangeDetails, OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
+export type { FocusOutsideEvent as MenuFocusOutsideEvent, HighlightChangeDetails as MenuHighlightChangeDetails, InteractOutsideEvent as MenuInteractOutsideEvent, OpenChangeDetails as MenuOpenChangeDetails, PointerDownOutsideEvent as MenuPointerDownOutsideEvent, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
 export { MenuArrow, type MenuArrowBaseProps, type MenuArrowProps } from './menu-arrow';
 export { MenuArrowTip, type MenuArrowTipBaseProps, type MenuArrowTipProps } from './menu-arrow-tip';
 export { MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps } from './menu-checkbox-item';

package/dist/components/menu/menu-checkbox-item.cjs

@@ -12,8 +12,9 @@ const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemContext = require('./use-menu-item-context.cjs');
 const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
+const splitOptionItemProps = createSplitProps.createSplitProps();
 const MenuCheckboxItem = react.forwardRef((props, ref) => {
-  const [partialOptionItemProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [partialOptionItemProps, localProps] = splitOptionItemProps(props, [
     "checked",
     "closeOnSelect",
     "disabled",

package/dist/components/menu/menu-checkbox-item.js

@@ -8,8 +8,9 @@ import { useMenuContext } from './use-menu-context.js';
 import { MenuItemProvider } from './use-menu-item-context.js';
 import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
+const splitOptionItemProps = createSplitProps();
 const MenuCheckboxItem = forwardRef((props, ref) => {
-  const [partialOptionItemProps, localProps] = createSplitProps()(props, [
+  const [partialOptionItemProps, localProps] = splitOptionItemProps(props, [
     "checked",
     "closeOnSelect",
     "disabled",

package/dist/components/menu/menu-item-group.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 
+const splitItemGroupProps = createSplitProps.createSplitProps();
 const MenuItemGroup = react.forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const [optionalItemGroupProps, localProps] = splitItemGroupProps(props, ["id"]);
   const menu = useMenuContext.useMenuContext();
   const id = react.useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-item-group.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemGroupProvider } from './use-menu-item-group-context.js';
 
+const splitItemGroupProps = createSplitProps();
 const MenuItemGroup = forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+  const [optionalItemGroupProps, localProps] = splitItemGroupProps(props, ["id"]);
   const menu = useMenuContext();
   const id = useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-item.cjs

@@ -12,8 +12,9 @@ const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemContext = require('./use-menu-item-context.cjs');
 const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
+const splitItemBaseProps = createSplitProps.createSplitProps();
 const MenuItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [itemProps, localProps] = splitItemBaseProps(props, [
     "closeOnSelect",
     "disabled",
     "value",

package/dist/components/menu/menu-item.js

@@ -8,8 +8,9 @@ import { useMenuContext } from './use-menu-context.js';
 import { MenuItemProvider } from './use-menu-item-context.js';
 import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
+const splitItemBaseProps = createSplitProps();
 const MenuItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, [
+  const [itemProps, localProps] = splitItemBaseProps(props, [
     "closeOnSelect",
     "disabled",
     "value",

package/dist/components/menu/menu-radio-item-group.cjs

@@ -11,12 +11,9 @@ const factory = require('../factory.cjs');
 const useMenuContext = require('./use-menu-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 
+const splitItemGroupProps = createSplitProps.createSplitProps();
 const MenuRadioItemGroup = react.forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "id",
-    "onValueChange",
-    "value"
-  ]);
+  const [optionalItemGroupProps, localProps] = splitItemGroupProps(props, ["id", "onValueChange", "value"]);
   const menu = useMenuContext.useMenuContext();
   const id = react.useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-radio-item-group.js

@@ -7,12 +7,9 @@ import { ark } from '../factory.js';
 import { useMenuContext } from './use-menu-context.js';
 import { MenuItemGroupProvider } from './use-menu-item-group-context.js';
 
+const splitItemGroupProps = createSplitProps();
 const MenuRadioItemGroup = forwardRef((props, ref) => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
-    "id",
-    "onValueChange",
-    "value"
-  ]);
+  const [optionalItemGroupProps, localProps] = splitItemGroupProps(props, ["id", "onValueChange", "value"]);
   const menu = useMenuContext();
   const id = useId();
   const itemGroupProps = { id, ...optionalItemGroupProps };

package/dist/components/menu/menu-radio-item.cjs

@@ -13,8 +13,9 @@ const useMenuItemContext = require('./use-menu-item-context.cjs');
 const useMenuItemGroupContext = require('./use-menu-item-group-context.cjs');
 const useMenuOptionItemPropsContext = require('./use-menu-option-item-props-context.cjs');
 
+const splitOptionItemProps = createSplitProps.createSplitProps();
 const MenuRadioItem = react.forwardRef((props, ref) => {
-  const [partialItemProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [partialItemProps, localProps] = splitOptionItemProps(props, [
     "closeOnSelect",
     "disabled",
     "value",

package/dist/components/menu/menu-radio-item.js

@@ -9,8 +9,9 @@ import { MenuItemProvider } from './use-menu-item-context.js';
 import { useMenuItemGroupContext } from './use-menu-item-group-context.js';
 import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js';
 
+const splitOptionItemProps = createSplitProps();
 const MenuRadioItem = forwardRef((props, ref) => {
-  const [partialItemProps, localProps] = createSplitProps()(props, [
+  const [partialItemProps, localProps] = splitOptionItemProps(props, [
     "closeOnSelect",
     "disabled",
     "value",

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

@@ -16,9 +16,10 @@ const useMenuContext = require('./use-menu-context.cjs');
 const useMenuMachineContext = require('./use-menu-machine-context.cjs');
 const useMenuTriggerItemContext = require('./use-menu-trigger-item-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const MenuRoot = (props) => {
   const [presenceProps, menuProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps.createSplitProps()(menuProps, [
+  const [useMenuProps, localProps] = splitRootProps(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",

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

@@ -12,9 +12,10 @@ import { useMenuContext, MenuProvider } from './use-menu-context.js';
 import { useMenuMachineContext, MenuMachineProvider } from './use-menu-machine-context.js';
 import { MenuTriggerItemProvider } from './use-menu-trigger-item-context.js';
 
+const splitRootProps = createSplitProps();
 const MenuRoot = (props) => {
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
+  const [useMenuProps, localProps] = splitRootProps(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",

package/dist/components/menu/menu.d.cts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails, OpenChangeDetails, SelectionDetails } from '@zag-js/menu';
+export type { FocusOutsideEvent, HighlightChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, SelectionDetails, } from '@zag-js/menu';
 export { MenuArrow as Arrow, type MenuArrowBaseProps as ArrowBaseProps, type MenuArrowProps as ArrowProps, } from './menu-arrow';
 export { MenuArrowTip as ArrowTip, type MenuArrowTipBaseProps as ArrowTipBaseProps, type MenuArrowTipProps as ArrowTipProps, } from './menu-arrow-tip';
 export { MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemBaseProps as CheckboxItemBaseProps, type MenuCheckboxItemProps as CheckboxItemProps, } from './menu-checkbox-item';

package/dist/components/menu/menu.d.ts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails, OpenChangeDetails, SelectionDetails } from '@zag-js/menu';
+export type { FocusOutsideEvent, HighlightChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, SelectionDetails, } from '@zag-js/menu';
 export { MenuArrow as Arrow, type MenuArrowBaseProps as ArrowBaseProps, type MenuArrowProps as ArrowProps, } from './menu-arrow';
 export { MenuArrowTip as ArrowTip, type MenuArrowTipBaseProps as ArrowTipBaseProps, type MenuArrowTipProps as ArrowTipProps, } from './menu-arrow-tip';
 export { MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemBaseProps as CheckboxItemBaseProps, type MenuCheckboxItemProps as CheckboxItemProps, } from './menu-checkbox-item';

package/dist/components/number-input/number-input-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const NumberInputRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: numberInput }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: numberInput }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(numberInput.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useNumberInputContext.NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/number-input/number-input-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { NumberInputProvider } from './use-number-input-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const NumberInputRootProvider = forwardRef((props, ref) => {
-  const [{ value: numberInput }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: numberInput }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(numberInput.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(NumberInputProvider, { value: numberInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 const useNumberInputContext = require('./use-number-input-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const NumberInputRoot = react.forwardRef((props, ref) => {
-  const [useNumberInputProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useNumberInputProps, localProps] = splitRootProps(props, [
     "allowMouseWheel",
     "allowOverflow",
     "clampValueOnBlur",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useNumberInput } from './use-number-input.js';
 import { NumberInputProvider } from './use-number-input-context.js';
 
+const splitRootProps = createSplitProps();
 const NumberInputRoot = forwardRef((props, ref) => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, [
+  const [useNumberInputProps, localProps] = splitRootProps(props, [
     "allowMouseWheel",
     "allowOverflow",
     "clampValueOnBlur",

package/dist/components/pagination/pagination-ellipsis.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
+const splitEllipsisProps = createSplitProps.createSplitProps();
 const PaginationEllipsis = react.forwardRef((props, ref) => {
-  const [ellipsisProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const [ellipsisProps, localProps] = splitEllipsisProps(props, ["index"]);
   const pagination = usePaginationContext.usePaginationContext();
   const mergedProps = react$1.mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/pagination/pagination-ellipsis.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { usePaginationContext } from './use-pagination-context.js';
 
+const splitEllipsisProps = createSplitProps();
 const PaginationEllipsis = forwardRef((props, ref) => {
-  const [ellipsisProps, localProps] = createSplitProps()(props, ["index"]);
+  const [ellipsisProps, localProps] = splitEllipsisProps(props, ["index"]);
   const pagination = usePaginationContext();
   const mergedProps = mergeProps(pagination.getEllipsisProps(ellipsisProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/pagination/pagination-item.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const PaginationItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "type"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "type"]);
   const pagination = usePaginationContext.usePaginationContext();
   const mergedProps = react$1.mergeProps(pagination.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/dist/components/pagination/pagination-item.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { usePaginationContext } from './use-pagination-context.js';
 
+const splitItemProps = createSplitProps();
 const PaginationItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value", "type"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "type"]);
   const pagination = usePaginationContext();
   const mergedProps = mergeProps(pagination.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/dist/components/pagination/pagination-root-provider.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const PaginationRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: pagination }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: pagination }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(pagination.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(usePaginationContext.PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.nav, { ...mergedProps, ref }) });
 });

package/dist/components/pagination/pagination-root-provider.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { PaginationProvider } from './use-pagination-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const PaginationRootProvider = forwardRef((props, ref) => {
-  const [{ value: pagination }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: pagination }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(pagination.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(PaginationProvider, { value: pagination, children: /* @__PURE__ */ jsx(ark.nav, { ...mergedProps, ref }) });
 });

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const usePagination = require('./use-pagination.cjs');
 const usePaginationContext = require('./use-pagination-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const PaginationRoot = react.forwardRef((props, ref) => {
-  const [paginationProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [paginationProps, localProps] = splitRootProps(props, [
     "count",
     "defaultPage",
     "defaultPageSize",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { usePagination } from './use-pagination.js';
 import { PaginationProvider } from './use-pagination-context.js';
 
+const splitRootProps = createSplitProps();
 const PaginationRoot = forwardRef((props, ref) => {
-  const [paginationProps, localProps] = createSplitProps()(props, [
+  const [paginationProps, localProps] = splitRootProps(props, [
     "count",
     "defaultPage",
     "defaultPageSize",

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const usePasswordInput = require('./use-password-input.cjs');
 const usePasswordInputContext = require('./use-password-input-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const PasswordInputRoot = react.forwardRef((props, ref) => {
-  const [usePasswordInputProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [usePasswordInputProps, localProps] = splitRootProps(props, [
     "autoComplete",
     "defaultVisible",
     "disabled",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { usePasswordInput } from './use-password-input.js';
 import { PasswordInputProvider } from './use-password-input-context.js';
 
+const splitRootProps = createSplitProps();
 const PasswordInputRoot = forwardRef((props, ref) => {
-  const [usePasswordInputProps, localProps] = createSplitProps()(props, [
+  const [usePasswordInputProps, localProps] = splitRootProps(props, [
     "autoComplete",
     "defaultVisible",
     "disabled",

package/dist/components/pin-input/pin-input-input.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
+const splitInputProps = createSplitProps.createSplitProps();
 const PinInputInput = react.forwardRef((props, ref) => {
-  const [inputProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const [inputProps, localProps] = splitInputProps(props, ["index"]);
   const pinInput = usePinInputContext.usePinInputContext();
   const mergedProps = react$1.mergeProps(pinInput.getInputProps(inputProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });