@ark-ui/react 5.28.0 → 5.29.0

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

@@ -11,12 +11,14 @@ const useAccordionItemContext = require('./use-accordion-item-context.cjs');
 const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
 require('@zag-js/color-picker');
 require('@zag-js/date-picker');
+require('@zag-js/splitter');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const renderStrategy = require('../../utils/render-strategy.cjs');
 const useAccordionItemPropsContext = require('./use-accordion-item-props-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled"]);
   const accordion = useAccordionContext.useAccordionContext();
   const renderStrategy$1 = renderStrategy.useRenderStrategyPropsContext();
   const mergedProps = react$1.mergeProps(accordion.getItemProps(itemProps), localProps);

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

@@ -7,12 +7,14 @@ import { AccordionItemProvider } from './use-accordion-item-context.js';
 import { CollapsibleRoot } from '../collapsible/collapsible-root.js';
 import '@zag-js/color-picker';
 import '@zag-js/date-picker';
+import '@zag-js/splitter';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useRenderStrategyPropsContext } from '../../utils/render-strategy.js';
 import { AccordionItemPropsProvider } from './use-accordion-item-props-context.js';
 
+const splitItemProps = createSplitProps();
 const AccordionItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled"]);
   const accordion = useAccordionContext();
   const renderStrategy = useRenderStrategyPropsContext();
   const mergedProps = mergeProps(accordion.getItemProps(itemProps), localProps);

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

@@ -11,9 +11,10 @@ const renderStrategy = require('../../utils/render-strategy.cjs');
 const factory = require('../factory.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const AccordionRootProvider = react.forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
-  const [{ value: accordion }, localProps] = createSplitProps.createSplitProps()(accordionProps, ["value"]);
+  const [{ value: accordion }, localProps] = splitRootProviderProps(accordionProps, ["value"]);
   const mergedProps = react$1.mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAccordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });

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

@@ -7,9 +7,10 @@ import { splitRenderStrategyProps, RenderStrategyPropsProvider } from '../../uti
 import { ark } from '../factory.js';
 import { AccordionProvider } from './use-accordion-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const AccordionRootProvider = forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [{ value: accordion }, localProps] = createSplitProps()(accordionProps, ["value"]);
+  const [{ value: accordion }, localProps] = splitRootProviderProps(accordionProps, ["value"]);
   const mergedProps = mergeProps(accordion.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });

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

@@ -12,9 +12,10 @@ const factory = require('../factory.cjs');
 const useAccordion = require('./use-accordion.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AccordionRoot = react.forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
+  const [useAccordionProps, localProps] = splitRootProps(accordionProps, [
     "collapsible",
     "defaultValue",
     "disabled",

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

@@ -8,9 +8,10 @@ import { ark } from '../factory.js';
 import { useAccordion } from './use-accordion.js';
 import { AccordionProvider } from './use-accordion-context.js';
 
+const splitRootProps = createSplitProps();
 const AccordionRoot = forwardRef((props, ref) => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
+  const [useAccordionProps, localProps] = splitRootProps(accordionProps, [
     "collapsible",
     "defaultValue",
     "disabled",

package/dist/components/angle-slider/angle-slider-marker.cjs

@@ -10,10 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useAngleSliderContext = require('./use-angle-slider-context.cjs');
 
+const splitMarkerProps = createSplitProps.createSplitProps();
 const AngleSliderMarker = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
   const angleSlider = useAngleSliderContext.useAngleSliderContext();
-  const mergedProps = react$1.mergeProps(angleSlider.getMarkerProps(itemProps), localProps);
+  const mergedProps = react$1.mergeProps(angleSlider.getMarkerProps(markerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 AngleSliderMarker.displayName = "AngleSliderMarker";

package/dist/components/angle-slider/angle-slider-marker.js

@@ -6,10 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useAngleSliderContext } from './use-angle-slider-context.js';
 
+const splitMarkerProps = createSplitProps();
 const AngleSliderMarker = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value"]);
+  const [markerProps, localProps] = splitMarkerProps(props, ["value"]);
   const angleSlider = useAngleSliderContext();
-  const mergedProps = mergeProps(angleSlider.getMarkerProps(itemProps), localProps);
+  const mergedProps = mergeProps(angleSlider.getMarkerProps(markerProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 AngleSliderMarker.displayName = "AngleSliderMarker";

package/dist/components/angle-slider/angle-slider-root-provider.cjs

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

package/dist/components/angle-slider/angle-slider-root-provider.js

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

package/dist/components/angle-slider/angle-slider-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useAngleSlider = require('./use-angle-slider.cjs');
 const useAngleSliderContext = require('./use-angle-slider-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AngleSliderRoot = react.forwardRef((props, ref) => {
-  const [useAngleSliderProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useAngleSliderProps, localProps] = splitRootProps(props, [
     "id",
     "ids",
     "name",

package/dist/components/angle-slider/angle-slider-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useAngleSlider } from './use-angle-slider.js';
 import { AngleSliderProvider } from './use-angle-slider-context.js';
 
+const splitRootProps = createSplitProps();
 const AngleSliderRoot = forwardRef((props, ref) => {
-  const [useAngleSliderProps, localProps] = createSplitProps()(props, [
+  const [useAngleSliderProps, localProps] = splitRootProps(props, [
     "id",
     "ids",
     "name",

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

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

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

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

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useAvatar = require('./use-avatar.cjs');
 const useAvatarContext = require('./use-avatar-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const AvatarRoot = react.forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "ids", "onStatusChange"]);
+  const [useAvatarProps, localProps] = splitRootProps(props, ["id", "ids", "onStatusChange"]);
   const avatar = useAvatar.useAvatar(useAvatarProps);
   const mergedProps = react$1.mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useAvatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useAvatar } from './use-avatar.js';
 import { AvatarProvider } from './use-avatar-context.js';
 
+const splitRootProps = createSplitProps();
 const AvatarRoot = forwardRef((props, ref) => {
-  const [useAvatarProps, localProps] = createSplitProps()(props, ["id", "ids", "onStatusChange"]);
+  const [useAvatarProps, localProps] = splitRootProps(props, ["id", "ids", "onStatusChange"]);
   const avatar = useAvatar(useAvatarProps);
   const mergedProps = mergeProps(avatar.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/bottom-sheet/bottom-sheet-content.cjs

@@ -12,8 +12,9 @@ const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useBottomSheetContext = require('./use-bottom-sheet-context.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 
+const splitContentProps = createSplitProps.createSplitProps();
 const BottomSheetContent = react.forwardRef((props, ref) => {
-  const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["draggable"]);
+  const [contentProps, localProps] = splitContentProps(props, ["draggable"]);
   const bottomSheet = useBottomSheetContext.useBottomSheetContext();
   const presence = usePresenceContext.usePresenceContext();
   const mergedProps = react$1.mergeProps(

package/dist/components/bottom-sheet/bottom-sheet-content.js

@@ -8,8 +8,9 @@ import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useBottomSheetContext } from './use-bottom-sheet-context.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 
+const splitContentProps = createSplitProps();
 const BottomSheetContent = forwardRef((props, ref) => {
-  const [contentProps, localProps] = createSplitProps()(props, ["draggable"]);
+  const [contentProps, localProps] = splitContentProps(props, ["draggable"]);
   const bottomSheet = useBottomSheetContext();
   const presence = usePresenceContext();
   const mergedProps = mergeProps(

package/dist/components/carousel/carousel-indicator.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitIndicatorProps = createSplitProps.createSplitProps();
 const CarouselIndicator = react.forwardRef((props, ref) => {
-  const [indicatorProps, localProps] = createSplitProps.createSplitProps()(props, ["readOnly", "index"]);
+  const [indicatorProps, localProps] = splitIndicatorProps(props, ["readOnly", "index"]);
   const carousel = useCarouselContext.useCarouselContext();
   const mergedProps = react$1.mergeProps(carousel.getIndicatorProps(indicatorProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/dist/components/carousel/carousel-indicator.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
+const splitIndicatorProps = createSplitProps();
 const CarouselIndicator = forwardRef((props, ref) => {
-  const [indicatorProps, localProps] = createSplitProps()(props, ["readOnly", "index"]);
+  const [indicatorProps, localProps] = splitIndicatorProps(props, ["readOnly", "index"]);
   const carousel = useCarouselContext();
   const mergedProps = mergeProps(carousel.getIndicatorProps(indicatorProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

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

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

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

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useCarouselContext } from './use-carousel-context.js';
 
+const splitItemProps = createSplitProps();
 const CarouselItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["index", "snapAlign"]);
+  const [itemProps, localProps] = splitItemProps(props, ["index", "snapAlign"]);
   const carousel = useCarouselContext();
   const mergedProps = mergeProps(carousel.getItemProps(itemProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

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

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

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

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

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

@@ -11,10 +11,12 @@ const factory = require('../factory.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const CarouselRoot = react.forwardRef((props, ref) => {
-  const [useCarouselProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useCarouselProps, localProps] = splitRootProps(props, [
     "allowMouseDrag",
     "autoplay",
+    "autoSize",
     "defaultPage",
     "id",
     "ids",

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

@@ -7,10 +7,12 @@ import { ark } from '../factory.js';
 import { useCarousel } from './use-carousel.js';
 import { CarouselProvider } from './use-carousel-context.js';
 
+const splitRootProps = createSplitProps();
 const CarouselRoot = forwardRef((props, ref) => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, [
+  const [useCarouselProps, localProps] = splitRootProps(props, [
     "allowMouseDrag",
     "autoplay",
+    "autoSize",
     "defaultPage",
     "id",
     "ids",

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/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/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 }) }) });