@ark-ui/react 5.27.1 → 5.29.0

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

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

package/dist/components/pin-input/pin-input-root-provider.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 splitRootProviderProps = createSplitProps.createSplitProps();
 const PinInputRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: pinInput }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: pinInput }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(pinInput.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(usePinInputContext.PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

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

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

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const PinInputRoot = react.forwardRef((props, ref) => {
-  const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [usePinInputProps, localProps] = splitRootProps(props, [
     "autoFocus",
     "blurOnComplete",
     "count",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { usePinInput } from './use-pin-input.js';
 import { PinInputProvider } from './use-pin-input-context.js';
 
+const splitRootProps = createSplitProps();
 const PinInputRoot = forwardRef((props, ref) => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, [
+  const [usePinInputProps, localProps] = splitRootProps(props, [
     "autoFocus",
     "blurOnComplete",
     "count",

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

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
+export type { FocusOutsideEvent as PopoverFocusOutsideEvent, InteractOutsideEvent as PopoverInteractOutsideEvent, OpenChangeDetails as PopoverOpenChangeDetails, PointerDownOutsideEvent as PopoverPointerDownOutsideEvent, } from '@zag-js/popover';
 export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
 export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';

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

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
+export type { FocusOutsideEvent as PopoverFocusOutsideEvent, InteractOutsideEvent as PopoverInteractOutsideEvent, OpenChangeDetails as PopoverOpenChangeDetails, PointerDownOutsideEvent as PopoverPointerDownOutsideEvent, } from '@zag-js/popover';
 export { PopoverAnchor, type PopoverAnchorBaseProps, type PopoverAnchorProps } from './popover-anchor';
 export { PopoverArrow, type PopoverArrowBaseProps, type PopoverArrowProps } from './popover-arrow';
 export { PopoverArrowTip, type PopoverArrowTipBaseProps, type PopoverArrowTipProps } from './popover-arrow-tip';

package/dist/components/popover/popover.d.cts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/popover';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/popover';
 export { PopoverAnchor as Anchor, type PopoverAnchorBaseProps as AnchorBaseProps, type PopoverAnchorProps as AnchorProps, } from './popover-anchor';
 export { PopoverArrow as Arrow, type PopoverArrowBaseProps as ArrowBaseProps, type PopoverArrowProps as ArrowProps, } from './popover-arrow';
 export { PopoverArrowTip as ArrowTip, type PopoverArrowTipBaseProps as ArrowTipBaseProps, type PopoverArrowTipProps as ArrowTipProps, } from './popover-arrow-tip';

package/dist/components/popover/popover.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/popover';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/popover';
 export { PopoverAnchor as Anchor, type PopoverAnchorBaseProps as AnchorBaseProps, type PopoverAnchorProps as AnchorProps, } from './popover-anchor';
 export { PopoverArrow as Arrow, type PopoverArrowBaseProps as ArrowBaseProps, type PopoverArrowProps as ArrowProps, } from './popover-arrow';
 export { PopoverArrowTip as ArrowTip, type PopoverArrowTipBaseProps as ArrowTipBaseProps, type PopoverArrowTipProps as ArrowTipProps, } from './popover-arrow-tip';

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

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

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

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

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useProgress = require('./use-progress.cjs');
 const useProgressContext = require('./use-progress-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const ProgressRoot = react.forwardRef((props, ref) => {
-  const [progressProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [progressProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "formatOptions",
     "id",

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useProgress } from './use-progress.js';
 import { ProgressProvider } from './use-progress-context.js';
 
+const splitRootProps = createSplitProps();
 const ProgressRoot = forwardRef((props, ref) => {
-  const [progressProps, localProps] = createSplitProps()(props, [
+  const [progressProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "formatOptions",
     "id",

package/dist/components/progress/progress-view.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useProgressContext = require('./use-progress-context.cjs');
 
+const splitViewProps = createSplitProps.createSplitProps();
 const ProgressView = react.forwardRef((props, ref) => {
-  const [viewProps, localProps] = createSplitProps.createSplitProps()(props, ["state"]);
+  const [viewProps, localProps] = splitViewProps(props, ["state"]);
   const progress = useProgressContext.useProgressContext();
   const mergedProps = react$1.mergeProps(progress.getViewProps(viewProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });

package/dist/components/progress/progress-view.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useProgressContext } from './use-progress-context.js';
 
+const splitViewProps = createSplitProps();
 const ProgressView = forwardRef((props, ref) => {
-  const [viewProps, localProps] = createSplitProps()(props, ["state"]);
+  const [viewProps, localProps] = splitViewProps(props, ["state"]);
   const progress = useProgressContext();
   const mergedProps = mergeProps(progress.getViewProps(viewProps), localProps);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });

package/dist/components/qr-code/qr-code-download-trigger.cjs

@@ -10,12 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useQrCodeContext = require('./use-qr-code-context.cjs');
 
+const splitDownloadTriggerProps = createSplitProps.createSplitProps();
 const QrCodeDownloadTrigger = react.forwardRef((props, ref) => {
-  const [downloadTriggerProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "fileName",
-    "mimeType",
-    "quality"
-  ]);
+  const [downloadTriggerProps, localProps] = splitDownloadTriggerProps(props, ["fileName", "mimeType", "quality"]);
   const qrCode = useQrCodeContext.useQrCodeContext();
   const mergedProps = react$1.mergeProps(qrCode.getDownloadTriggerProps(downloadTriggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/dist/components/qr-code/qr-code-download-trigger.js

@@ -6,12 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useQrCodeContext } from './use-qr-code-context.js';
 
+const splitDownloadTriggerProps = createSplitProps();
 const QrCodeDownloadTrigger = forwardRef((props, ref) => {
-  const [downloadTriggerProps, localProps] = createSplitProps()(props, [
-    "fileName",
-    "mimeType",
-    "quality"
-  ]);
+  const [downloadTriggerProps, localProps] = splitDownloadTriggerProps(props, ["fileName", "mimeType", "quality"]);
   const qrCode = useQrCodeContext();
   const mergedProps = mergeProps(qrCode.getDownloadTriggerProps(downloadTriggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/dist/components/qr-code/qr-code-root-provider.cjs

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

package/dist/components/qr-code/qr-code-root-provider.js

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

package/dist/components/qr-code/qr-code-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useQrCode = require('./use-qr-code.cjs');
 const useQrCodeContext = require('./use-qr-code-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const QrCodeRoot = react.forwardRef((props, ref) => {
-  const [qrcodeProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [qrcodeProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "encoding",
     "id",

package/dist/components/qr-code/qr-code-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useQrCode } from './use-qr-code.js';
 import { QrCodeProvider } from './use-qr-code-context.js';
 
+const splitRootProps = createSplitProps();
 const QrCodeRoot = forwardRef((props, ref) => {
-  const [qrcodeProps, localProps] = createSplitProps()(props, [
+  const [qrcodeProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "encoding",
     "id",

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

@@ -12,8 +12,9 @@ const useRadioGroupContext = require('./use-radio-group-context.cjs');
 const useRadioGroupItemContext = require('./use-radio-group-item-context.cjs');
 const useRadioGroupItemPropsContext = require('./use-radio-group-item-props-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const RadioGroupItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled", "invalid"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled", "invalid"]);
   const radioGroup = useRadioGroupContext.useRadioGroupContext();
   const mergedProps = react$1.mergeProps(radioGroup.getItemProps(itemProps), localProps);
   const itemState = radioGroup.getItemState(itemProps);

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

@@ -8,8 +8,9 @@ import { useRadioGroupContext } from './use-radio-group-context.js';
 import { RadioGroupItemProvider } from './use-radio-group-item-context.js';
 import { RadioGroupItemPropsProvider } from './use-radio-group-item-props-context.js';
 
+const splitItemProps = createSplitProps();
 const RadioGroupItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled", "invalid"]);
   const radioGroup = useRadioGroupContext();
   const mergedProps = mergeProps(radioGroup.getItemProps(itemProps), localProps);
   const itemState = radioGroup.getItemState(itemProps);

package/dist/components/radio-group/radio-group-root-provider.cjs

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

package/dist/components/radio-group/radio-group-root-provider.js

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

package/dist/components/radio-group/radio-group-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useRadioGroup = require('./use-radio-group.cjs');
 const useRadioGroupContext = require('./use-radio-group-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const RadioGroupRoot = react.forwardRef((props, ref) => {
-  const [useRadioGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "disabled",
     "form",

package/dist/components/radio-group/radio-group-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useRadioGroup } from './use-radio-group.js';
 import { RadioGroupProvider } from './use-radio-group-context.js';
 
+const splitRootProps = createSplitProps();
 const RadioGroupRoot = forwardRef((props, ref) => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "disabled",
     "form",

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

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 const useRatingGroupItemContext = require('./use-rating-group-item-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const RatingGroupItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["index"]);
+  const [itemProps, localProps] = splitItemProps(props, ["index"]);
   const ratingGroup = useRatingGroupContext.useRatingGroupContext();
   const mergedProps = react$1.mergeProps(ratingGroup.getItemProps(itemProps), localProps);
   const itemState = ratingGroup.getItemState(itemProps);

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

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useRatingGroupContext } from './use-rating-group-context.js';
 import { RatingGroupItemProvider } from './use-rating-group-item-context.js';
 
+const splitItemProps = createSplitProps();
 const RatingGroupItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["index"]);
+  const [itemProps, localProps] = splitItemProps(props, ["index"]);
   const ratingGroup = useRatingGroupContext();
   const mergedProps = mergeProps(ratingGroup.getItemProps(itemProps), localProps);
   const itemState = ratingGroup.getItemState(itemProps);

package/dist/components/rating-group/rating-group-root-provider.cjs

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

package/dist/components/rating-group/rating-group-root-provider.js

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

package/dist/components/rating-group/rating-group-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const RatingGroupRoot = react.forwardRef((props, ref) => {
-  const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useRatingProps, localProps] = splitRootProps(props, [
     "allowHalf",
     "autoFocus",
     "count",

package/dist/components/rating-group/rating-group-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useRatingGroup } from './use-rating-group.js';
 import { RatingGroupProvider } from './use-rating-group-context.js';
 
+const splitRootProps = createSplitProps();
 const RatingGroupRoot = forwardRef((props, ref) => {
-  const [useRatingProps, localProps] = createSplitProps()(props, [
+  const [useRatingProps, localProps] = splitRootProps(props, [
     "allowHalf",
     "autoFocus",
     "count",

package/dist/components/scroll-area/scroll-area-root-provider.cjs

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

package/dist/components/scroll-area/scroll-area-root-provider.js

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

package/dist/components/scroll-area/scroll-area-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useScrollArea = require('./use-scroll-area.cjs');
 const useScrollAreaContext = require('./use-scroll-area-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const ScrollAreaRoot = react.forwardRef((props, ref) => {
-  const [useScrollAreaProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "ids"]);
+  const [useScrollAreaProps, localProps] = splitRootProps(props, ["id", "ids"]);
   const scrollArea = useScrollArea.useScrollArea(useScrollAreaProps);
   const mergedProps = react$1.mergeProps(scrollArea.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useScrollAreaContext.ScrollAreaProvider, { value: scrollArea, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/scroll-area/scroll-area-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useScrollArea } from './use-scroll-area.js';
 import { ScrollAreaProvider } from './use-scroll-area-context.js';
 
+const splitRootProps = createSplitProps();
 const ScrollAreaRoot = forwardRef((props, ref) => {
-  const [useScrollAreaProps, localProps] = createSplitProps()(props, ["id", "ids"]);
+  const [useScrollAreaProps, localProps] = splitRootProps(props, ["id", "ids"]);
   const scrollArea = useScrollArea(useScrollAreaProps);
   const mergedProps = mergeProps(scrollArea.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(ScrollAreaProvider, { value: scrollArea, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/scroll-area/scroll-area-scrollbar.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useScrollAreaContext = require('./use-scroll-area-context.cjs');
 const useScrollAreaScrollbarContext = require('./use-scroll-area-scrollbar-context.cjs');
 
+const splitScrollbarProps = createSplitProps.createSplitProps();
 const ScrollAreaScrollbar = react.forwardRef((props, ref) => {
-  const [scrollbarProps, localProps] = createSplitProps.createSplitProps()(props, ["orientation"]);
+  const [scrollbarProps, localProps] = splitScrollbarProps(props, ["orientation"]);
   const scrollAreaApi = useScrollAreaContext.useScrollAreaContext();
   const mergedProps = react$1.mergeProps(scrollAreaApi.getScrollbarProps(scrollbarProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useScrollAreaScrollbarContext.ScrollAreaScrollbarProvider, { value: scrollbarProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/scroll-area/scroll-area-scrollbar.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useScrollAreaContext } from './use-scroll-area-context.js';
 import { ScrollAreaScrollbarProvider } from './use-scroll-area-scrollbar-context.js';
 
+const splitScrollbarProps = createSplitProps();
 const ScrollAreaScrollbar = forwardRef((props, ref) => {
-  const [scrollbarProps, localProps] = createSplitProps()(props, ["orientation"]);
+  const [scrollbarProps, localProps] = splitScrollbarProps(props, ["orientation"]);
   const scrollAreaApi = useScrollAreaContext();
   const mergedProps = mergeProps(scrollAreaApi.getScrollbarProps(scrollbarProps), localProps);
   return /* @__PURE__ */ jsx(ScrollAreaScrollbarProvider, { value: scrollbarProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

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

@@ -13,8 +13,9 @@ const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemContext = require('./use-segment-group-item-context.cjs');
 const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
 
+const splitItemProps = createSplitProps.createSplitProps();
 const SegmentGroupItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled", "invalid"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled", "invalid"]);
   const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
   const mergedProps = react$1.mergeProps(
     segmentGroup.getItemProps(itemProps),

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

@@ -9,8 +9,9 @@ import { useSegmentGroupContext } from './use-segment-group-context.js';
 import { SegmentGroupItemProvider } from './use-segment-group-item-context.js';
 import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context.js';
 
+const splitItemProps = createSplitProps();
 const SegmentGroupItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]);
+  const [itemProps, localProps] = splitItemProps(props, ["value", "disabled", "invalid"]);
   const segmentGroup = useSegmentGroupContext();
   const mergedProps = mergeProps(
     segmentGroup.getItemProps(itemProps),

package/dist/components/segment-group/segment-group-root-provider.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const SegmentGroupRootProvider = react.forwardRef((props, ref) => {
-  const [{ value: segmentGroup }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [{ value: segmentGroup }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = react$1.mergeProps(segmentGroup.getRootProps(), segmentGroup_anatomy.parts.root.attrs, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/segment-group/segment-group-root-provider.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { parts } from './segment-group.anatomy.js';
 import { SegmentGroupProvider } from './use-segment-group-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const SegmentGroupRootProvider = forwardRef((props, ref) => {
-  const [{ value: segmentGroup }, localProps] = createSplitProps()(props, ["value"]);
+  const [{ value: segmentGroup }, localProps] = splitRootProviderProps(props, ["value"]);
   const mergedProps = mergeProps(segmentGroup.getRootProps(), parts.root.attrs, localProps);
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

package/dist/components/segment-group/segment-group-root.cjs

@@ -12,8 +12,9 @@ const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const SegmentGroupRoot = react.forwardRef((props, ref) => {
-  const [useSegmentGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useSegmentGroupProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "disabled",
     "form",

package/dist/components/segment-group/segment-group-root.js

@@ -8,8 +8,9 @@ import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroup } from './use-segment-group.js';
 import { SegmentGroupProvider } from './use-segment-group-context.js';
 
+const splitRootProps = createSplitProps();
 const SegmentGroupRoot = forwardRef((props, ref) => {
-  const [useSegmentGroupProps, localProps] = createSplitProps()(props, [
+  const [useSegmentGroupProps, localProps] = splitRootProps(props, [
     "defaultValue",
     "disabled",
     "form",

package/dist/components/segment-group/segment-group.anatomy.d.cts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl">;
-export declare const parts: Record<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"root" | "item" | "indicator" | "label" | "itemText" | "itemControl">;
+export declare const parts: Record<"root" | "item" | "indicator" | "label" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl">;
-export declare const parts: Record<"root" | "label" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"root" | "item" | "indicator" | "label" | "itemText" | "itemControl">;
+export declare const parts: Record<"root" | "item" | "indicator" | "label" | "itemText" | "itemControl", AnatomyPart>;

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

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
+export type { FocusOutsideEvent as SelectFocusOutsideEvent, HighlightChangeDetails as SelectHighlightChangeDetails, InteractOutsideEvent as SelectInteractOutsideEvent, OpenChangeDetails as SelectOpenChangeDetails, PointerDownOutsideEvent as SelectPointerDownOutsideEvent, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
 export { createListCollection, type CollectionItem, type ListCollection, useListCollection, type UseListCollectionProps, } from '../collection';
 export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
 export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';

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

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
+export type { FocusOutsideEvent as SelectFocusOutsideEvent, HighlightChangeDetails as SelectHighlightChangeDetails, InteractOutsideEvent as SelectInteractOutsideEvent, OpenChangeDetails as SelectOpenChangeDetails, PointerDownOutsideEvent as SelectPointerDownOutsideEvent, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
 export { createListCollection, type CollectionItem, type ListCollection, useListCollection, type UseListCollectionProps, } from '../collection';
 export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
 export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';

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

@@ -11,9 +11,10 @@ const factory = require('../factory.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 const useSelectItemGroupProps = require('./use-select-item-group-props.cjs');
 
+const splitItemGroupProps = createSplitProps.createSplitProps();
 const SelectItemGroup = 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 select = useSelectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(select.getItemGroupProps(itemGroupProps), localProps);

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

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