@ark-ui/react 5.28.0 → 5.29.1

package/dist/components/fieldset/use-fieldset.cjs

@@ -12,8 +12,7 @@ const fieldset_anatomy = require('./fieldset.anatomy.cjs');
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
   const env = useEnvironmentContext.useEnvironmentContext();
-  const hasErrorText = react.useRef(false);
-  const hasHelperText = react.useRef(false);
+  const [textElements, setTextElements] = react.useState({ hasErrorText: false, hasHelperText: false });
   const uid = react.useId();
   const id = props.id ?? uid;
   const rootRef = react.useRef(null);
@@ -25,8 +24,9 @@ const useFieldset = (props = {}) => {
     if (!rootNode) return;
     const checkTextElements = () => {
       const docOrShadowRoot = env.getRootNode();
-      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
-      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
+      const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+      const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
+      setTextElements({ hasErrorText, hasHelperText });
     };
     checkTextElements();
     const win = env.getWindow();
@@ -34,48 +34,34 @@ const useFieldset = (props = {}) => {
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [env, errorTextId, helperTextId]);
-  const labelIds = react.useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId]);
-  const getRootProps = react.useMemo(
-    () => () => ({
-      ...fieldset_anatomy.parts.root.attrs,
-      ref: rootRef,
-      disabled,
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid),
-      "aria-labelledby": legendId,
-      "aria-describedby": labelIds
-    }),
-    [disabled, invalid, legendId, labelIds]
-  );
-  const getLegendProps = react.useMemo(
-    () => () => ({
-      id: legendId,
-      ...fieldset_anatomy.parts.legend.attrs,
-      "data-disabled": domQuery.dataAttr(disabled),
-      "data-invalid": domQuery.dataAttr(invalid)
-    }),
-    [legendId, disabled, invalid]
-  );
-  const getHelperTextProps = react.useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...fieldset_anatomy.parts.helperText.attrs
-    }),
-    [helperTextId]
-  );
-  const getErrorTextProps = react.useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...fieldset_anatomy.parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
+  const ids = [];
+  if (textElements.hasErrorText && invalid) ids.push(errorTextId);
+  if (textElements.hasHelperText) ids.push(helperTextId);
+  const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
+  const getRootProps = () => ({
+    ...fieldset_anatomy.parts.root.attrs,
+    ref: rootRef,
+    disabled,
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-invalid": domQuery.dataAttr(invalid),
+    "aria-labelledby": legendId,
+    "aria-describedby": labelIds
+  });
+  const getLegendProps = () => ({
+    id: legendId,
+    ...fieldset_anatomy.parts.legend.attrs,
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-invalid": domQuery.dataAttr(invalid)
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...fieldset_anatomy.parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...fieldset_anatomy.parts.errorText.attrs,
+    "aria-live": "polite"
+  });
   return {
     refs: {
       rootRef

package/dist/components/fieldset/use-fieldset.js

@@ -1,6 +1,6 @@
 'use client';
 import { dataAttr } from '@zag-js/dom-query';
-import { useRef, useId, useMemo } from 'react';
+import { useState, useId, useRef } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { parts } from './fieldset.anatomy.js';
@@ -8,8 +8,7 @@ import { parts } from './fieldset.anatomy.js';
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
   const env = useEnvironmentContext();
-  const hasErrorText = useRef(false);
-  const hasHelperText = useRef(false);
+  const [textElements, setTextElements] = useState({ hasErrorText: false, hasHelperText: false });
   const uid = useId();
   const id = props.id ?? uid;
   const rootRef = useRef(null);
@@ -21,8 +20,9 @@ const useFieldset = (props = {}) => {
     if (!rootNode) return;
     const checkTextElements = () => {
       const docOrShadowRoot = env.getRootNode();
-      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
-      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
+      const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId);
+      const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId);
+      setTextElements({ hasErrorText, hasHelperText });
     };
     checkTextElements();
     const win = env.getWindow();
@@ -30,48 +30,34 @@ const useFieldset = (props = {}) => {
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [env, errorTextId, helperTextId]);
-  const labelIds = useMemo(() => {
-    const ids = [];
-    if (hasErrorText.current && invalid) ids.push(errorTextId);
-    if (hasHelperText.current) ids.push(helperTextId);
-    return ids.join(" ") || void 0;
-  }, [invalid, errorTextId, helperTextId]);
-  const getRootProps = useMemo(
-    () => () => ({
-      ...parts.root.attrs,
-      ref: rootRef,
-      disabled,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid),
-      "aria-labelledby": legendId,
-      "aria-describedby": labelIds
-    }),
-    [disabled, invalid, legendId, labelIds]
-  );
-  const getLegendProps = useMemo(
-    () => () => ({
-      id: legendId,
-      ...parts.legend.attrs,
-      "data-disabled": dataAttr(disabled),
-      "data-invalid": dataAttr(invalid)
-    }),
-    [legendId, disabled, invalid]
-  );
-  const getHelperTextProps = useMemo(
-    () => () => ({
-      id: helperTextId,
-      ...parts.helperText.attrs
-    }),
-    [helperTextId]
-  );
-  const getErrorTextProps = useMemo(
-    () => () => ({
-      id: errorTextId,
-      ...parts.errorText.attrs,
-      "aria-live": "polite"
-    }),
-    [errorTextId]
-  );
+  const ids = [];
+  if (textElements.hasErrorText && invalid) ids.push(errorTextId);
+  if (textElements.hasHelperText) ids.push(helperTextId);
+  const labelIds = ids.length > 0 ? ids.join(" ") : void 0;
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    ref: rootRef,
+    disabled,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "aria-labelledby": legendId,
+    "aria-describedby": labelIds
+  });
+  const getLegendProps = () => ({
+    id: legendId,
+    ...parts.legend.attrs,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid)
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    "aria-live": "polite"
+  });
   return {
     refs: {
       rootRef

package/dist/components/file-upload/file-upload-dropzone.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 
+const splitDropzoneProps = createSplitProps.createSplitProps();
 const FileUploadDropzone = react.forwardRef((props, ref) => {
-  const [dropzoneProps, localProps] = createSplitProps.createSplitProps()(props, ["disableClick"]);
+  const [dropzoneProps, localProps] = splitDropzoneProps(props, ["disableClick"]);
   const fileUpload = useFileUploadContext.useFileUploadContext();
   const mergedProps = react$1.mergeProps(fileUpload.getDropzoneProps(dropzoneProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/file-upload/file-upload-dropzone.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useFileUploadContext } from './use-file-upload-context.js';
 
+const splitDropzoneProps = createSplitProps();
 const FileUploadDropzone = forwardRef((props, ref) => {
-  const [dropzoneProps, localProps] = createSplitProps()(props, ["disableClick"]);
+  const [dropzoneProps, localProps] = splitDropzoneProps(props, ["disableClick"]);
   const fileUpload = useFileUploadContext();
   const mergedProps = mergeProps(fileUpload.getDropzoneProps(dropzoneProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/file-upload/file-upload-item-group.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 const useFileUploadItemGroupPropsContext = require('./use-file-upload-item-group-props-context.cjs');
 
+const splitItemGroupProps = createSplitProps.createSplitProps();
 const FileUploadItemGroup = react.forwardRef((props, ref) => {
-  const [itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["type"]);
+  const [itemGroupProps, localProps] = splitItemGroupProps(props, ["type"]);
   const fileUpload = useFileUploadContext.useFileUploadContext();
   const mergedProps = react$1.mergeProps(fileUpload.getItemGroupProps(itemGroupProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useFileUploadItemGroupPropsContext.FileUploadItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref }) });

package/dist/components/file-upload/file-upload-item-group.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useFileUploadContext } from './use-file-upload-context.js';
 import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context.js';
 
+const splitItemGroupProps = createSplitProps();
 const FileUploadItemGroup = forwardRef((props, ref) => {
-  const [itemGroupProps, localProps] = createSplitProps()(props, ["type"]);
+  const [itemGroupProps, localProps] = splitItemGroupProps(props, ["type"]);
   const fileUpload = useFileUploadContext();
   const mergedProps = mergeProps(fileUpload.getItemGroupProps(itemGroupProps), localProps);
   return /* @__PURE__ */ jsx(FileUploadItemGroupPropsProvider, { value: itemGroupProps, children: /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref }) });

package/dist/components/file-upload/file-upload-item.cjs

@@ -12,8 +12,9 @@ const useFileUploadContext = require('./use-file-upload-context.cjs');
 const useFileUploadItemGroupPropsContext = require('./use-file-upload-item-group-props-context.cjs');
 const useFileUploadItemPropsContext = require('./use-file-upload-item-props-context.cjs');
 
+const splitItemBaseProps = createSplitProps.createSplitProps();
 const FileUploadItem = react.forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ["file"]);
+  const [itemProps, localProps] = splitItemBaseProps(props, ["file"]);
   const fileUpload = useFileUploadContext.useFileUploadContext();
   const itemGroupProps = useFileUploadItemGroupPropsContext.useFileUploadItemGroupPropsContext();
   const itemPropsWithType = { ...itemProps, type: itemGroupProps.type };

package/dist/components/file-upload/file-upload-item.js

@@ -8,8 +8,9 @@ import { useFileUploadContext } from './use-file-upload-context.js';
 import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context.js';
 import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context.js';
 
+const splitItemBaseProps = createSplitProps();
 const FileUploadItem = forwardRef((props, ref) => {
-  const [itemProps, localProps] = createSplitProps()(props, ["file"]);
+  const [itemProps, localProps] = splitItemBaseProps(props, ["file"]);
   const fileUpload = useFileUploadContext();
   const itemGroupProps = useFileUploadItemGroupPropsContext();
   const itemPropsWithType = { ...itemProps, type: itemGroupProps.type };

package/dist/components/file-upload/file-upload-root-provider.cjs

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

package/dist/components/file-upload/file-upload-root-provider.js

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

package/dist/components/file-upload/file-upload-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useFileUpload = require('./use-file-upload.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const FileUploadRoot = react.forwardRef((props, ref) => {
-  const [useFileUploadProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useFileUploadProps, localProps] = splitRootProps(props, [
     "accept",
     "acceptedFiles",
     "allowDrop",

package/dist/components/file-upload/file-upload-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useFileUpload } from './use-file-upload.js';
 import { FileUploadProvider } from './use-file-upload-context.js';
 
+const splitRootProps = createSplitProps();
 const FileUploadRoot = forwardRef((props, ref) => {
-  const [useFileUploadProps, localProps] = createSplitProps()(props, [
+  const [useFileUploadProps, localProps] = splitRootProps(props, [
     "accept",
     "acceptedFiles",
     "allowDrop",

package/dist/components/floating-panel/floating-panel-resize-trigger.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
+const splitResizeTriggerProps = createSplitProps.createSplitProps();
 const FloatingPanelResizeTrigger = react.forwardRef((props, ref) => {
-  const [resizeProps, localProps] = createSplitProps.createSplitProps()(props, ["axis"]);
+  const [resizeProps, localProps] = splitResizeTriggerProps(props, ["axis"]);
   const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
   const mergedProps = react$1.mergeProps(floatingPanel.getResizeTriggerProps(resizeProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/floating-panel/floating-panel-resize-trigger.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
+const splitResizeTriggerProps = createSplitProps();
 const FloatingPanelResizeTrigger = forwardRef((props, ref) => {
-  const [resizeProps, localProps] = createSplitProps()(props, ["axis"]);
+  const [resizeProps, localProps] = splitResizeTriggerProps(props, ["axis"]);
   const floatingPanel = useFloatingPanelContext();
   const mergedProps = mergeProps(floatingPanel.getResizeTriggerProps(resizeProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/floating-panel/floating-panel-root-provider.cjs

@@ -11,9 +11,10 @@ const usePresence = require('../presence/use-presence.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
+const splitRootProviderProps = createSplitProps.createSplitProps();
 const FloatingPanelRootProvider = (props) => {
   const [presenceProps, baseProps] = splitPresenceProps.splitPresenceProps(props);
-  const [{ value: floatingPanel }, localProps] = createSplitProps.createSplitProps()(baseProps, ["value"]);
+  const [{ value: floatingPanel }, localProps] = splitRootProviderProps(baseProps, ["value"]);
   const presence = usePresence.usePresence(react.mergeProps({ present: floatingPanel.open }, presenceProps));
   return /* @__PURE__ */ jsxRuntime.jsx(useFloatingPanelContext.FloatingPanelProvider, { value: floatingPanel, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: localProps.children }) });
 };

package/dist/components/floating-panel/floating-panel-root-provider.js

@@ -7,9 +7,10 @@ import { usePresence } from '../presence/use-presence.js';
 import { PresenceProvider } from '../presence/use-presence-context.js';
 import { FloatingPanelProvider } from './use-floating-panel-context.js';
 
+const splitRootProviderProps = createSplitProps();
 const FloatingPanelRootProvider = (props) => {
   const [presenceProps, baseProps] = splitPresenceProps(props);
-  const [{ value: floatingPanel }, localProps] = createSplitProps()(baseProps, ["value"]);
+  const [{ value: floatingPanel }, localProps] = splitRootProviderProps(baseProps, ["value"]);
   const presence = usePresence(mergeProps({ present: floatingPanel.open }, presenceProps));
   return /* @__PURE__ */ jsx(FloatingPanelProvider, { value: floatingPanel, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: localProps.children }) });
 };

package/dist/components/floating-panel/floating-panel-root.cjs

@@ -12,9 +12,10 @@ const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useFloatingPanel = require('./use-floating-panel.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const FloatingPanelRoot = (props) => {
   const [presenceProps, otherProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useFloatingPanelProps, localProps] = createSplitProps.createSplitProps()(otherProps, [
+  const [useFloatingPanelProps, localProps] = splitRootProps(otherProps, [
     "allowOverflow",
     "closeOnEscape",
     "defaultOpen",

package/dist/components/floating-panel/floating-panel-root.js

@@ -8,9 +8,10 @@ import { PresenceProvider } from '../presence/use-presence-context.js';
 import { useFloatingPanel } from './use-floating-panel.js';
 import { FloatingPanelProvider } from './use-floating-panel-context.js';
 
+const splitRootProps = createSplitProps();
 const FloatingPanelRoot = (props) => {
   const [presenceProps, otherProps] = splitPresenceProps(props);
-  const [useFloatingPanelProps, localProps] = createSplitProps()(otherProps, [
+  const [useFloatingPanelProps, localProps] = splitRootProps(otherProps, [
     "allowOverflow",
     "closeOnEscape",
     "defaultOpen",

package/dist/components/floating-panel/floating-panel-stage-trigger.cjs

@@ -10,8 +10,9 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useFloatingPanelContext = require('./use-floating-panel-context.cjs');
 
+const splitStageTriggerProps = createSplitProps.createSplitProps();
 const FloatingPanelStageTrigger = react.forwardRef((props, ref) => {
-  const [stage, localProps] = createSplitProps.createSplitProps()(props, ["stage"]);
+  const [stage, localProps] = splitStageTriggerProps(props, ["stage"]);
   const floatingPanel = useFloatingPanelContext.useFloatingPanelContext();
   const mergedProps = react$1.mergeProps(floatingPanel.getStageTriggerProps(stage), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/dist/components/floating-panel/floating-panel-stage-trigger.js

@@ -6,8 +6,9 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useFloatingPanelContext } from './use-floating-panel-context.js';
 
+const splitStageTriggerProps = createSplitProps();
 const FloatingPanelStageTrigger = forwardRef((props, ref) => {
-  const [stage, localProps] = createSplitProps()(props, ["stage"]);
+  const [stage, localProps] = splitStageTriggerProps(props, ["stage"]);
   const floatingPanel = useFloatingPanelContext();
   const mergedProps = mergeProps(floatingPanel.getStageTriggerProps(stage), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/dist/components/focus-trap/focus-trap.cjs

@@ -11,9 +11,10 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
 const factory = require('../factory.cjs');
 
+const splitTrapProps = createSplitProps.createSplitProps();
 const FocusTrap = react.forwardRef((props, ref) => {
   const localRef = react.useRef(null);
-  const [trapProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [trapProps, localProps] = splitTrapProps(props, [
     "disabled",
     "onActivate",
     "onDeactivate",

package/dist/components/focus-trap/focus-trap.js

@@ -7,9 +7,10 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { ark } from '../factory.js';
 
+const splitTrapProps = createSplitProps();
 const FocusTrap = forwardRef((props, ref) => {
   const localRef = useRef(null);
-  const [trapProps, localProps] = createSplitProps()(props, [
+  const [trapProps, localProps] = splitTrapProps(props, [
     "disabled",
     "onActivate",
     "onDeactivate",

package/dist/components/highlight/highlight.cjs

@@ -7,11 +7,12 @@ const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const useHighlight = require('./use-highlight.cjs');
 
+const splitHighlightBaseProps = createSplitProps.createSplitProps();
 const Highlight = (props) => {
   if (typeof props.text !== "string") {
     throw new Error("[ark-ui/highlight] text must be a string");
   }
-  const [highlightProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [highlightProps, localProps] = splitHighlightBaseProps(props, [
     "query",
     "text",
     "ignoreCase",

package/dist/components/highlight/highlight.js

@@ -3,11 +3,12 @@ import { Fragment } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useHighlight } from './use-highlight.js';
 
+const splitHighlightBaseProps = createSplitProps();
 const Highlight = (props) => {
   if (typeof props.text !== "string") {
     throw new Error("[ark-ui/highlight] text must be a string");
   }
-  const [highlightProps, localProps] = createSplitProps()(props, [
+  const [highlightProps, localProps] = splitHighlightBaseProps(props, [
     "query",
     "text",
     "ignoreCase",

package/dist/components/image-cropper/image-cropper-root-provider.cjs

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

package/dist/components/image-cropper/image-cropper-root-provider.js

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

package/dist/components/image-cropper/image-cropper-root.cjs

@@ -11,8 +11,9 @@ const factory = require('../factory.cjs');
 const useImageCropper = require('./use-image-cropper.cjs');
 const useImageCropperContext = require('./use-image-cropper-context.cjs');
 
+const splitRootProps = createSplitProps.createSplitProps();
 const ImageCropperRoot = react.forwardRef((props, ref) => {
-  const [useImageCropperProps, localProps] = createSplitProps.createSplitProps()(props, [
+  const [useImageCropperProps, localProps] = splitRootProps(props, [
     "aspectRatio",
     "cropShape",
     "defaultFlip",

package/dist/components/image-cropper/image-cropper-root.js

@@ -7,8 +7,9 @@ import { ark } from '../factory.js';
 import { useImageCropper } from './use-image-cropper.js';
 import { ImageCropperProvider } from './use-image-cropper-context.js';
 
+const splitRootProps = createSplitProps();
 const ImageCropperRoot = forwardRef((props, ref) => {
-  const [useImageCropperProps, localProps] = createSplitProps()(props, [
+  const [useImageCropperProps, localProps] = splitRootProps(props, [
     "aspectRatio",
     "cropShape",
     "defaultFlip",

package/dist/components/index.cjs

@@ -562,9 +562,11 @@ const sliderValueText = require('./slider/slider-value-text.cjs');
 const useSlider = require('./slider/use-slider.cjs');
 const useSliderContext = require('./slider/use-slider-context.cjs');
 const slider$1 = require('./slider/slider.cjs');
+const splitter = require('@zag-js/splitter');
 const splitterContext = require('./splitter/splitter-context.cjs');
 const splitterPanel = require('./splitter/splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
+const splitterResizeTriggerIndicator = require('./splitter/splitter-resize-trigger-indicator.cjs');
 const splitterRoot = require('./splitter/splitter-root.cjs');
 const splitterRootProvider = require('./splitter/splitter-root-provider.cjs');
 const useSplitter = require('./splitter/use-splitter.cjs');
@@ -742,7 +744,6 @@ const scrollArea = require('@zag-js/scroll-area');
 const select = require('@zag-js/select');
 const signaturePad = require('@zag-js/signature-pad');
 const slider = require('@zag-js/slider');
-const splitter = require('@zag-js/splitter');
 const steps = require('@zag-js/steps');
 const zagSwitch = require('@zag-js/switch');
 const tabs = require('@zag-js/tabs');
@@ -1324,9 +1325,18 @@ exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSlider = useSlider.useSlider;
 exports.useSliderContext = useSliderContext.useSliderContext;
 exports.Slider = slider$1;
+Object.defineProperty(exports, "getSplitterLayout", {
+	enumerable: true,
+	get: () => splitter.layout
+});
+Object.defineProperty(exports, "splitterAnatomy", {
+	enumerable: true,
+	get: () => splitter.anatomy
+});
 exports.SplitterContext = splitterContext.SplitterContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
+exports.SplitterResizeTriggerIndicator = splitterResizeTriggerIndicator.SplitterResizeTriggerIndicator;
 exports.SplitterRoot = splitterRoot.SplitterRoot;
 exports.SplitterRootProvider = splitterRootProvider.SplitterRootProvider;
 exports.useSplitter = useSplitter.useSplitter;
@@ -1585,10 +1595,6 @@ Object.defineProperty(exports, "sliderAnatomy", {
 	enumerable: true,
 	get: () => slider.anatomy
 });
-Object.defineProperty(exports, "splitterAnatomy", {
-	enumerable: true,
-	get: () => splitter.anatomy
-});
 Object.defineProperty(exports, "stepsAnatomy", {
 	enumerable: true,
 	get: () => steps.anatomy

package/dist/components/index.js

@@ -596,9 +596,11 @@ export { useSlider } from './slider/use-slider.js';
 export { useSliderContext } from './slider/use-slider-context.js';
 import * as slider from './slider/slider.js';
 export { slider as Slider };
+export { layout as getSplitterLayout, anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { SplitterContext } from './splitter/splitter-context.js';
 export { SplitterPanel } from './splitter/splitter-panel.js';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.js';
+export { SplitterResizeTriggerIndicator } from './splitter/splitter-resize-trigger-indicator.js';
 export { SplitterRoot } from './splitter/splitter-root.js';
 export { SplitterRootProvider } from './splitter/splitter-root-provider.js';
 export { useSplitter } from './splitter/use-splitter.js';
@@ -788,7 +790,6 @@ export { anatomy as scrollAreaAnatomy } from '@zag-js/scroll-area';
 export { anatomy as selectAnatomy } from '@zag-js/select';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';
-export { anatomy as splitterAnatomy } from '@zag-js/splitter';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';

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

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