@ark-ui/react 5.27.1 → 5.29.0

package/dist/components/carousel/carousel.d.cts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator as AutoplayIndicator, type CarouselAutoplayIndicatorBaseProps as AutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps as AutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText as ProgressText, type CarouselProgressTextBaseProps as ProgressTextBaseProps, type CarouselProgressTextProps as ProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';

package/dist/components/carousel/carousel.d.ts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator as AutoplayIndicator, type CarouselAutoplayIndicatorBaseProps as AutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps as AutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText as ProgressText, type CarouselProgressTextBaseProps as ProgressTextBaseProps, type CarouselProgressTextProps as ProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext as Context, type CarouselContextProps as ContextProps } from './carousel-context';
 export { CarouselControl as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control';

package/dist/components/carousel/carousel.js

@@ -1,3 +1,5 @@
+export { CarouselAutoplayIndicator as AutoplayIndicator } from './carousel-autoplay-indicator.js';
+export { CarouselProgressText as ProgressText } from './carousel-progress-text.js';
 export { CarouselAutoplayTrigger as AutoplayTrigger } from './carousel-autoplay-trigger.js';
 export { CarouselContext as Context } from './carousel-context.js';
 export { CarouselControl as Control } from './carousel-control.js';

package/dist/components/carousel/index.cjs

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const carouselAutoplayIndicator = require('./carousel-autoplay-indicator.cjs');
+const carouselProgressText = require('./carousel-progress-text.cjs');
 const carouselAutoplayTrigger = require('./carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
@@ -13,13 +15,15 @@ const carouselNextTrigger = require('./carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
 const carouselRoot = require('./carousel-root.cjs');
 const carouselRootProvider = require('./carousel-root-provider.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
-const carousel$1 = require('./carousel.cjs');
-const carousel = require('@zag-js/carousel');
+const carousel = require('./carousel.cjs');
 
 
 
+exports.CarouselAutoplayIndicator = carouselAutoplayIndicator.CarouselAutoplayIndicator;
+exports.CarouselProgressText = carouselProgressText.CarouselProgressText;
 exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
@@ -31,10 +35,7 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel$1;
-Object.defineProperty(exports, "carouselAnatomy", {
-  enumerable: true,
-  get: () => carousel.anatomy
-});
+exports.Carousel = carousel;

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

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator, type CarouselAutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText, type CarouselProgressTextBaseProps, type CarouselProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext, type CarouselContextProps } from './carousel-context';
 export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';

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

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { CarouselAutoplayIndicator, type CarouselAutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps, } from './carousel-autoplay-indicator';
+export { CarouselProgressText, type CarouselProgressTextBaseProps, type CarouselProgressTextProps, } from './carousel-progress-text';
 export { CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger';
 export { CarouselContext, type CarouselContextProps } from './carousel-context';
 export { CarouselControl, type CarouselControlBaseProps, type CarouselControlProps } from './carousel-control';

package/dist/components/carousel/index.js

@@ -1,3 +1,5 @@
+export { CarouselAutoplayIndicator } from './carousel-autoplay-indicator.js';
+export { CarouselProgressText } from './carousel-progress-text.js';
 export { CarouselAutoplayTrigger } from './carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel-context.js';
 export { CarouselControl } from './carousel-control.js';
@@ -9,8 +11,8 @@ export { CarouselNextTrigger } from './carousel-next-trigger.js';
 export { CarouselPrevTrigger } from './carousel-prev-trigger.js';
 export { CarouselRoot } from './carousel-root.js';
 export { CarouselRootProvider } from './carousel-root-provider.js';
+export { carouselAnatomy } from './carousel.anatomy.js';
 export { useCarousel } from './use-carousel.js';
 export { useCarouselContext } from './use-carousel-context.js';
 import * as carousel from './carousel.js';
 export { carousel as Carousel };
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';

package/dist/components/checkbox/checkbox-group-provider.cjs

@@ -10,8 +10,9 @@ const factory = require('../factory.cjs');
 const checkbox_anatomy = require('./checkbox.anatomy.cjs');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
+const splitProviderProps = createSplitProps.createSplitProps();
 const CheckboxGroupProvider = react.forwardRef((props, ref) => {
-  const [localProps, restProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [localProps, restProps] = splitProviderProps(props, ["value"]);
   return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxGroupContext.CheckboxGroupContextProvider, { value: localProps.value, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, role: "group", ...restProps, ...checkbox_anatomy.checkboxAnatomy.build().group.attrs }) });
 });
 CheckboxGroupProvider.displayName = "CheckboxGroupProvider";

package/dist/components/checkbox/checkbox-group-provider.js

@@ -6,8 +6,9 @@ import { ark } from '../factory.js';
 import { checkboxAnatomy } from './checkbox.anatomy.js';
 import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
 
+const splitProviderProps = createSplitProps();
 const CheckboxGroupProvider = forwardRef((props, ref) => {
-  const [localProps, restProps] = createSplitProps()(props, ["value"]);
+  const [localProps, restProps] = splitProviderProps(props, ["value"]);
   return /* @__PURE__ */ jsx(CheckboxGroupContextProvider, { value: localProps.value, children: /* @__PURE__ */ jsx(ark.div, { ref, role: "group", ...restProps, ...checkboxAnatomy.build().group.attrs }) });
 });
 CheckboxGroupProvider.displayName = "CheckboxGroupProvider";

package/dist/components/checkbox/checkbox-group.cjs

@@ -11,8 +11,9 @@ const checkbox_anatomy = require('./checkbox.anatomy.cjs');
 const useCheckboxGroup = require('./use-checkbox-group.cjs');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
+const splitGroupProps = createSplitProps.createSplitProps();
 const CheckboxGroup = react.forwardRef((props, ref) => {
-  const [checkboxGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [checkboxGroupProps, localProps] = splitGroupProps(props, [
     "defaultValue",
     "value",
     "onValueChange",

package/dist/components/checkbox/checkbox-group.js

@@ -7,8 +7,9 @@ import { checkboxAnatomy } from './checkbox.anatomy.js';
 import { useCheckboxGroup } from './use-checkbox-group.js';
 import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
 
+const splitGroupProps = createSplitProps();
 const CheckboxGroup = forwardRef((props, ref) => {
-  const [checkboxGroupProps, localProps] = createSplitProps()(props, [
+  const [checkboxGroupProps, localProps] = splitGroupProps(props, [
     "defaultValue",
     "value",
     "onValueChange",

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

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

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

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

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const CheckboxRoot = react.forwardRef((props, ref) => {
-  const [useCheckboxProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useCheckboxProps, localProps] = splitRootProps(props, [
     "checked",
     "defaultChecked",
     "disabled",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useCheckbox } from './use-checkbox.js';
 import { CheckboxProvider } from './use-checkbox-context.js';
 
+const splitRootProps = createSplitProps();
 const CheckboxRoot = forwardRef((props, ref) => {
-  const [useCheckboxProps, localProps] = createSplitProps()(props, [
+  const [useCheckboxProps, localProps] = splitRootProps(props, [
     "checked",
     "defaultChecked",
     "disabled",

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

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "group">;
+export declare const checkboxAnatomy: AnatomyInstance<"root" | "control" | "indicator" | "label" | "group">;

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

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"root" | "label" | "control" | "indicator" | "group">;
+export declare const checkboxAnatomy: AnatomyInstance<"root" | "control" | "indicator" | "label" | "group">;

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

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

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

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

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useClipboard = require('./use-clipboard.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const ClipboardRoot = react.forwardRef((props, ref) => {
-  const [useClipboardProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useClipboardProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "id",
     "ids",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useClipboard } from './use-clipboard.js';
 import { ClipboardProvider } from './use-clipboard-context.js';
 
+const splitRootProps = createSplitProps();
 const ClipboardRoot = forwardRef((props, ref) => {
-  const [useClipboardProps, localProps] = createSplitProps()(props, [
+  const [useClipboardProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "id",
     "ids",

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

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

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

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

package/dist/components/collection/use-list-collection.d.cts

@@ -3,7 +3,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The initial items to display in the collection.
      */
-    initialItems: T[];
+    initialItems: T[] | readonly T[];
     /**
      * The filter function to use to filter the items.
      */

package/dist/components/collection/use-list-collection.d.ts

@@ -3,7 +3,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The initial items to display in the collection.
      */
-    initialItems: T[];
+    initialItems: T[] | readonly T[];
     /**
      * The filter function to use to filter the items.
      */

package/dist/components/color-picker/color-picker-area.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useColorPickerAreaPropsContext = require('./use-color-picker-area-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitAreaProps = createSplitProps.createSplitProps();
 const ColorPickerArea = react.forwardRef((props, ref) => {
-  const [areaProps, localProps] = createSplitProps.createSplitProps()(props, ["xChannel", "yChannel"]);
+  const [areaProps, localProps] = splitAreaProps(props, ["xChannel", "yChannel"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getAreaProps(areaProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerAreaPropsContext.ColorPickerAreaPropsProvider, { value: areaProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/color-picker/color-picker-area.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { ColorPickerAreaPropsProvider } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
+const splitAreaProps = createSplitProps();
 const ColorPickerArea = forwardRef((props, ref) => {
-  const [areaProps, localProps] = createSplitProps()(props, ["xChannel", "yChannel"]);
+  const [areaProps, localProps] = splitAreaProps(props, ["xChannel", "yChannel"]);
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getAreaProps(areaProps), localProps);
   return /* @__PURE__ */ jsx(ColorPickerAreaPropsProvider, { value: areaProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/color-picker/color-picker-channel-input.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitChannelInputProps = createSplitProps.createSplitProps();
 const ColorPickerChannelInput = react.forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps.createSplitProps()(props, ["channel", "orientation"]);
+  const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getChannelInputProps(channelProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-channel-input.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
+const splitChannelInputProps = createSplitProps();
 const ColorPickerChannelInput = forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps()(props, ["channel", "orientation"]);
+  const [channelProps, localProps] = splitChannelInputProps(props, ["channel", "orientation"]);
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getChannelInputProps(channelProps), localProps);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-channel-slider.cjs

@@ -12,8 +12,9 @@ const useColorPickerChannelPropsContext = require('./use-color-picker-channel-pr
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
+const splitChannelProps = createSplitProps.createSplitProps();
 const ColorPickerChannelSlider = react.forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps.createSplitProps()(props, ["channel", "orientation"]);
+  const [channelProps, localProps] = splitChannelProps(props, ["channel", "orientation"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
   const channelSliderProps = { ...channelProps, ...formatProps };

package/dist/components/color-picker/color-picker-channel-slider.js

@@ -8,8 +8,9 @@ import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-prop
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useColorPickerFormatPropsContext } from './use-color-picker-format-context.js';
 
+const splitChannelProps = createSplitProps();
 const ColorPickerChannelSlider = forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps()(props, ["channel", "orientation"]);
+  const [channelProps, localProps] = splitChannelProps(props, ["channel", "orientation"]);
   const colorPicker = useColorPickerContext();
   const formatProps = useColorPickerFormatPropsContext();
   const channelSliderProps = { ...channelProps, ...formatProps };

package/dist/components/color-picker/color-picker-root-provider.cjs

@@ -13,9 +13,10 @@ const usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const ColorPickerRootProvider = react.forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
-  const [{ value: colorPicker }, localProps] = createSplitProps.createSplitProps()(colorPickerProps, ["value"]);
+  const [{ value: colorPicker }, localProps] = splitRootProviderProps(colorPickerProps, ["value"]);
   const presence = usePresence.usePresence(react$1.mergeProps({ present: colorPicker.open }, presenceProps));
   const mergedProps = react$1.mergeProps(colorPicker.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerContext.ColorPickerProvider, { value: colorPicker, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });

package/dist/components/color-picker/color-picker-root-provider.js

@@ -9,9 +9,10 @@ import { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
 import { ColorPickerProvider } from './use-color-picker-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const ColorPickerRootProvider = forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [{ value: colorPicker }, localProps] = createSplitProps()(colorPickerProps, ["value"]);
+  const [{ value: colorPicker }, localProps] = splitRootProviderProps(colorPickerProps, ["value"]);
   const presence = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
   const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(ColorPickerProvider, { value: colorPicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });

package/dist/components/color-picker/color-picker-root.cjs

@@ -14,9 +14,10 @@ const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const ColorPickerRoot = react.forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps.createSplitProps()(colorPickerProps, [
+  const [useColorPickerProps, localProps] = splitRootProps(colorPickerProps, [
     "closeOnSelect",
     "defaultOpen",
     "defaultValue",

package/dist/components/color-picker/color-picker-root.js

@@ -10,9 +10,10 @@ import { PresenceProvider } from '../presence/use-presence-context.js';
 import { useColorPicker } from './use-color-picker.js';
 import { ColorPickerProvider } from './use-color-picker-context.js';
 
+const splitRootProps = createSplitProps();
 const ColorPickerRoot = forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
+  const [useColorPickerProps, localProps] = splitRootProps(colorPickerProps, [
     "closeOnSelect",
     "defaultOpen",
     "defaultValue",

package/dist/components/color-picker/color-picker-swatch-trigger.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitSwatchTriggerProps = createSplitProps.createSplitProps();
 const ColorPickerSwatchTrigger = react.forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
+  const [triggerProps, localProps] = splitSwatchTriggerProps(props, ["value", "disabled"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-swatch-trigger.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
+const splitSwatchTriggerProps = createSplitProps();
 const ColorPickerSwatchTrigger = forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
+  const [triggerProps, localProps] = splitSwatchTriggerProps(props, ["value", "disabled"]);
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-swatch.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerSwatchPropsContext = require('./use-color-picker-swatch-props-context.cjs');
 
+const splitSwatchProps = createSplitProps.createSplitProps();
 const ColorPickerSwatch = react.forwardRef((props, ref) => {
-  const [swatwchProps, localProps] = createSplitProps.createSplitProps()(props, ["respectAlpha", "value"]);
+  const [swatwchProps, localProps] = splitSwatchProps(props, ["respectAlpha", "value"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/color-picker/color-picker-swatch.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context.js';
 
+const splitSwatchProps = createSplitProps();
 const ColorPickerSwatch = forwardRef((props, ref) => {
-  const [swatwchProps, localProps] = createSplitProps()(props, ["respectAlpha", "value"]);
+  const [swatwchProps, localProps] = splitSwatchProps(props, ["respectAlpha", "value"]);
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
   return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/color-picker/color-picker-transparency-grid.cjs

@@ -10,9 +10,10 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
+const splitTransparencyGridProps = createSplitProps.createSplitProps();
 const ColorPickerTransparencyGrid = react.forwardRef(
   (props, ref) => {
-    const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ["size"]);
+    const [gridProps, localProps] = splitTransparencyGridProps(props, ["size"]);
     const colorPicker = useColorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-transparency-grid.js

@@ -6,9 +6,10 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
+const splitTransparencyGridProps = createSplitProps();
 const ColorPickerTransparencyGrid = forwardRef(
   (props, ref) => {
-    const [gridProps, localProps] = createSplitProps()(props, ["size"]);
+    const [gridProps, localProps] = splitTransparencyGridProps(props, ["size"]);
     const colorPicker = useColorPickerContext();
     const mergedProps = mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/color-picker/color-picker-value-swatch.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerSwatchPropsContext = require('./use-color-picker-swatch-props-context.cjs');
 
+const splitValueSwatchProps = createSplitProps.createSplitProps();
 const ColorPickerValueSwatch = react.forwardRef((props, ref) => {
-  const [{ respectAlpha }, localProps] = createSplitProps.createSplitProps()(props, ["respectAlpha"]);
+  const [{ respectAlpha }, localProps] = splitValueSwatchProps(props, ["respectAlpha"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const swatchProps = {
     respectAlpha,

package/dist/components/color-picker/color-picker-value-swatch.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context.js';
 
+const splitValueSwatchProps = createSplitProps();
 const ColorPickerValueSwatch = forwardRef((props, ref) => {
-  const [{ respectAlpha }, localProps] = createSplitProps()(props, ["respectAlpha"]);
+  const [{ respectAlpha }, localProps] = splitValueSwatchProps(props, ["respectAlpha"]);
   const colorPicker = useColorPickerContext();
   const swatchProps = {
     respectAlpha,

package/dist/components/color-picker/color-picker-view.cjs

@@ -11,9 +11,10 @@ const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
+const splitFormatOptions = createSplitProps.createSplitProps();
 const ColorPickerView = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
-  const [formatProps, restProps] = createSplitProps.createSplitProps()(props, ["format"]);
+  const [formatProps, restProps] = splitFormatOptions(props, ["format"]);
   if (colorPicker.format !== formatProps.format) {
     return null;
   }

package/dist/components/color-picker/color-picker-view.js

@@ -7,9 +7,10 @@ import { colorPickerAnatomy } from './color-picker.anatomy.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context.js';
 
+const splitFormatOptions = createSplitProps();
 const ColorPickerView = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
-  const [formatProps, restProps] = createSplitProps()(props, ["format"]);
+  const [formatProps, restProps] = splitFormatOptions(props, ["format"]);
   if (colorPicker.format !== formatProps.format) {
     return null;
   }

package/dist/components/color-picker/color-picker.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
+export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;

package/dist/components/color-picker/color-picker.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;
+export declare const colorPickerAnatomy: AnatomyInstance<"root" | "control" | "label" | "content" | "area" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect" | "view">;

package/dist/components/color-picker/color-picker.d.cts

@@ -1,4 +1,4 @@
-export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area';
 export { ColorPickerAreaBackground as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb';

package/dist/components/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area';
 export { ColorPickerAreaBackground as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb';

package/dist/components/color-picker/index.d.cts

@@ -1,5 +1,5 @@
 export { parse as parseColor } from '@zag-js/color-picker';
-export type { Color, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat as ColorPickerColorFormat, FocusOutsideEvent as ColorPickerFocusOutsideEvent, FormatChangeDetails as ColorPickerFormatChangeDetails, InteractOutsideEvent as ColorPickerInteractOutsideEvent, OpenChangeDetails as ColorPickerOpenChangeDetails, PointerDownOutsideEvent as ColorPickerPointerDownOutsideEvent, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
 export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps } from './color-picker-area';
 export { ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb';