@ark-ui/react 3.1.0 → 3.2.0

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useCollapsibleContext = require('./use-collapsible-context.cjs');
+
+const CollapsibleRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [{ value: collapsible }, localProps] = createSplitProps.createSplitProps()(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 }) });
+  }
+);
+CollapsibleRootProvider.displayName = "CollapsibleRootProvider";
+
+exports.CollapsibleRootProvider = CollapsibleRootProvider;

package/dist/components/collapsible/collapsible-root-provider.d.cts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseCollapsibleReturn } from './use-collapsible';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseCollapsibleReturn;
+}
+export interface CollapsibleRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const CollapsibleRootProvider: ForwardRefExoticComponent<CollapsibleRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/collapsible/collapsible-root-provider.d.ts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { UseCollapsibleReturn } from './use-collapsible';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseCollapsibleReturn;
+}
+export interface CollapsibleRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps {
+}
+export declare const CollapsibleRootProvider: ForwardRefExoticComponent<CollapsibleRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { CollapsibleProvider } from './use-collapsible-context.js';
+
+const CollapsibleRootProvider = forwardRef(
+  (props, ref) => {
+    const [{ value: collapsible }, localProps] = createSplitProps()(props, [
+      "value"
+    ]);
+    const mergedProps = mergeProps(collapsible.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+CollapsibleRootProvider.displayName = "CollapsibleRootProvider";
+
+export { CollapsibleRootProvider };

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

@@ -14,7 +14,7 @@ const useCollapsibleContext = require('./use-collapsible-context.cjs');
 const CollapsibleRoot = react.forwardRef((props, ref) => {
   const [useCollapsibleProps, localProps] = splitCollapsibleProps.splitCollapsibleProps(props);
   const collapsible = useCollapsible.useCollapsible(useCollapsibleProps);
-  const mergedProps = react$1.mergeProps(collapsible.rootProps, localProps);
+  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 }) });
 });
 CollapsibleRoot.displayName = "CollapsibleRoot";

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

@@ -10,7 +10,7 @@ import { CollapsibleProvider } from './use-collapsible-context.js';
 const CollapsibleRoot = forwardRef((props, ref) => {
   const [useCollapsibleProps, localProps] = splitCollapsibleProps(props);
   const collapsible = useCollapsible(useCollapsibleProps);
-  const mergedProps = mergeProps(collapsible.rootProps, localProps);
+  const mergedProps = mergeProps(collapsible.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 CollapsibleRoot.displayName = "CollapsibleRoot";

package/dist/components/collapsible/collapsible-trigger.cjs

@@ -12,7 +12,7 @@ const useCollapsibleContext = require('./use-collapsible-context.cjs');
 const CollapsibleTrigger = react.forwardRef(
   (props, ref) => {
     const collapsible = useCollapsibleContext.useCollapsibleContext();
-    const mergedProps = react$1.mergeProps(collapsible.triggerProps, props);
+    const mergedProps = react$1.mergeProps(collapsible.getTriggerProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/dist/components/collapsible/collapsible-trigger.js

@@ -8,7 +8,7 @@ import { useCollapsibleContext } from './use-collapsible-context.js';
 const CollapsibleTrigger = forwardRef(
   (props, ref) => {
     const collapsible = useCollapsibleContext();
-    const mergedProps = mergeProps(collapsible.triggerProps, props);
+    const mergedProps = mergeProps(collapsible.getTriggerProps(), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/dist/components/collapsible/collapsible.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
+const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
 
 
@@ -12,4 +13,5 @@ const collapsibleTrigger = require('./collapsible-trigger.cjs');
 exports.Content = collapsibleContent.CollapsibleContent;
 exports.Context = collapsibleContext.CollapsibleContext;
 exports.Root = collapsibleRoot.CollapsibleRoot;
+exports.RootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.Trigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/components/collapsible/collapsible.d.cts

@@ -2,4 +2,5 @@ export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps, } from './collapsible-context';
 export { CollapsibleRoot as Root, type CollapsibleRootProps as RootProps } from './collapsible-root';
+export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.d.ts

@@ -2,4 +2,5 @@ export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps, } from './collapsible-context';
 export { CollapsibleRoot as Root, type CollapsibleRootProps as RootProps } from './collapsible-root';
+export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.js

@@ -1,4 +1,5 @@
 export { CollapsibleContent as Content } from './collapsible-content.js';
 export { CollapsibleContext as Context } from './collapsible-context.js';
 export { CollapsibleRoot as Root } from './collapsible-root.js';
+export { CollapsibleRootProvider as RootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger as Trigger } from './collapsible-trigger.js';

package/dist/components/collapsible/index.cjs

@@ -5,7 +5,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
+const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
+const useCollapsible = require('./use-collapsible.cjs');
 const useCollapsibleContext = require('./use-collapsible-context.cjs');
 const collapsible = require('./collapsible.cjs');
 
@@ -14,6 +16,8 @@ const collapsible = require('./collapsible.cjs');
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
+exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
+exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
 exports.Collapsible = collapsible;

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

@@ -2,6 +2,8 @@ export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/
 export { CollapsibleContent, type CollapsibleContentProps } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
 export { CollapsibleRoot, type CollapsibleRootProps } from './collapsible-root';
+export { CollapsibleRootProvider, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerProps } from './collapsible-trigger';
-export { type UseCollapsibleContext, useCollapsibleContext } from './use-collapsible-context';
+export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
+export { useCollapsibleContext, type UseCollapsibleContext } from './use-collapsible-context';
 export * as Collapsible from './collapsible';

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

@@ -2,6 +2,8 @@ export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/
 export { CollapsibleContent, type CollapsibleContentProps } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
 export { CollapsibleRoot, type CollapsibleRootProps } from './collapsible-root';
+export { CollapsibleRootProvider, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerProps } from './collapsible-trigger';
-export { type UseCollapsibleContext, useCollapsibleContext } from './use-collapsible-context';
+export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
+export { useCollapsibleContext, type UseCollapsibleContext } from './use-collapsible-context';
 export * as Collapsible from './collapsible';

package/dist/components/collapsible/index.js

@@ -1,7 +1,9 @@
 export { CollapsibleContent } from './collapsible-content.js';
 export { CollapsibleContext } from './collapsible-context.js';
 export { CollapsibleRoot } from './collapsible-root.js';
+export { CollapsibleRootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger } from './collapsible-trigger.js';
+export { useCollapsible } from './use-collapsible.js';
 export { useCollapsibleContext } from './use-collapsible-context.js';
 import * as collapsible from './collapsible.js';
 export { collapsible as Collapsible };

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

@@ -14,7 +14,11 @@ const ColorPickerContent = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
     const presence = usePresenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(colorPicker.contentProps, presence.getPresenceProps(ref), props);
+    const mergedProps = react$1.mergeProps(
+      colorPicker.getContentProps(),
+      presence.getPresenceProps(ref),
+      props
+    );
     if (presence.unmounted) {
       return null;
     }

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

@@ -10,7 +10,11 @@ const ColorPickerContent = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
     const presence = usePresenceContext();
-    const mergedProps = mergeProps(colorPicker.contentProps, presence.getPresenceProps(ref), props);
+    const mergedProps = mergeProps(
+      colorPicker.getContentProps(),
+      presence.getPresenceProps(ref),
+      props
+    );
     if (presence.unmounted) {
       return null;
     }

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

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerControl = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.controlProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getControlProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerControl = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.controlProps, props);
+    const mergedProps = mergeProps(colorPicker.getControlProps(), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/dist/components/color-picker/color-picker-eye-dropper-trigger.cjs

@@ -11,7 +11,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerEyeDropperTrigger = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(colorPicker.eyeDropperTriggerProps, props);
+  const mergedProps = react$1.mergeProps(colorPicker.getEyeDropperTriggerProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";

package/dist/components/color-picker/color-picker-eye-dropper-trigger.js

@@ -7,7 +7,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerEyeDropperTrigger = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
-  const mergedProps = mergeProps(colorPicker.eyeDropperTriggerProps, props);
+  const mergedProps = mergeProps(colorPicker.getEyeDropperTriggerProps(), props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";

package/dist/components/color-picker/color-picker-format-select.cjs

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerFormatSelect = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.formatSelectProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getFormatSelectProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref, children: ["rgba", "hsla", "hsba"].map((format) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.option, { value: format, children: format }, format)) });
   }
 );

package/dist/components/color-picker/color-picker-format-select.js

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerFormatSelect = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.formatSelectProps, props);
+    const mergedProps = mergeProps(colorPicker.getFormatSelectProps(), props);
     return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref, children: ["rgba", "hsla", "hsba"].map((format) => /* @__PURE__ */ jsx(ark.option, { value: format, children: format }, format)) });
   }
 );

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

@@ -11,7 +11,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerFormatTrigger = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(colorPicker.formatTriggerProps, props);
+  const mergedProps = react$1.mergeProps(colorPicker.getFormatTriggerProps(), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";

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

@@ -7,7 +7,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerFormatTrigger = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
-  const mergedProps = mergeProps(colorPicker.formatTriggerProps, props);
+  const mergedProps = mergeProps(colorPicker.getFormatTriggerProps(), props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";

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

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerHiddenInput = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.hiddenInputProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getHiddenInputProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerHiddenInput = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.hiddenInputProps, props);
+    const mergedProps = mergeProps(colorPicker.getHiddenInputProps(), props);
     return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
   }
 );

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

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerLabel = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.labelProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getLabelProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerLabel = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.labelProps, props);
+    const mergedProps = mergeProps(colorPicker.getLabelProps(), props);
     return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
   }
 );

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

@@ -13,7 +13,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerPositioner = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.positionerProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getPositionerProps(), props);
     const presence = usePresenceContext.usePresenceContext();
     if (presence.unmounted) {
       return null;

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

@@ -9,7 +9,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerPositioner = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.positionerProps, props);
+    const mergedProps = mergeProps(colorPicker.getPositionerProps(), props);
     const presence = usePresenceContext();
     if (presence.unmounted) {
       return null;

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

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const usePresenceContext = require('../presence/use-presence-context.cjs');
+const useColorPickerContext = require('./use-color-picker-context.cjs');
+
+const ColorPickerRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
+    const [{ value: colorPicker }, localProps] = createSplitProps.createSplitProps()(
+      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 }) }) });
+  }
+);
+ColorPickerRootProvider.displayName = "ColorPickerRootProvider";
+
+exports.ColorPickerRootProvider = ColorPickerRootProvider;

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

@@ -0,0 +1,12 @@
+import { HTMLArkProps } from '../factory';
+import { UsePresenceProps } from '../presence';
+import { UseColorPickerReturn } from './use-color-picker';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseColorPickerReturn;
+}
+export interface ColorPickerRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps, UsePresenceProps {
+}
+export declare const ColorPickerRootProvider: ForwardRefExoticComponent<ColorPickerRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,12 @@
+import { HTMLArkProps } from '../factory';
+import { UsePresenceProps } from '../presence';
+import { UseColorPickerReturn } from './use-color-picker';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseColorPickerReturn;
+}
+export interface ColorPickerRootProviderProps extends HTMLArkProps<'div'>, RootProviderProps, UsePresenceProps {
+}
+export declare const ColorPickerRootProvider: ForwardRefExoticComponent<ColorPickerRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { splitPresenceProps } from '../presence/split-presence-props.js';
+import { usePresence } from '../presence/use-presence.js';
+import { PresenceProvider } from '../presence/use-presence-context.js';
+import { ColorPickerProvider } from './use-color-picker-context.js';
+
+const ColorPickerRootProvider = forwardRef(
+  (props, ref) => {
+    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+    const [{ value: colorPicker }, localProps] = createSplitProps()(
+      colorPickerProps,
+      ["value"]
+    );
+    const presence = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
+    const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(ColorPickerProvider, { value: colorPicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  }
+);
+ColorPickerRootProvider.displayName = "ColorPickerRootProvider";
+
+export { ColorPickerRootProvider };

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

@@ -44,7 +44,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
   );
   const colorPicker = useColorPicker.useColorPicker(useColorPickerProps);
   const presence = usePresence.usePresence(react$1.mergeProps({ present: colorPicker.open }, presenceProps));
-  const mergedProps = react$1.mergeProps(colorPicker.rootProps, localProps);
+  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 }) }) });
 });
 ColorPickerRoot.displayName = "ColorPickerRoot";

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

@@ -40,7 +40,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
   );
   const colorPicker = useColorPicker(useColorPickerProps);
   const presence = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
-  const mergedProps = mergeProps(colorPicker.rootProps, localProps);
+  const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(ColorPickerProvider, { value: colorPicker, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 ColorPickerRoot.displayName = "ColorPickerRoot";

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

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerSwatchGroup = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.swatchGroupProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getSwatchGroupProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerSwatchGroup = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.swatchGroupProps, props);
+    const mergedProps = mergeProps(colorPicker.getSwatchGroupProps(), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -12,7 +12,7 @@ const useColorPickerContext = require('./use-color-picker-context.cjs');
 const ColorPickerTrigger = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.triggerProps, props);
+    const mergedProps = react$1.mergeProps(colorPicker.getTriggerProps(), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -8,7 +8,7 @@ import { useColorPickerContext } from './use-color-picker-context.js';
 const ColorPickerTrigger = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.triggerProps, props);
+    const mergedProps = mergeProps(colorPicker.getTriggerProps(), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -19,6 +19,7 @@ const colorPickerHiddenInput = require('./color-picker-hidden-input.cjs');
 const colorPickerLabel = require('./color-picker-label.cjs');
 const colorPickerPositioner = require('./color-picker-positioner.cjs');
 const colorPickerRoot = require('./color-picker-root.cjs');
+const colorPickerRootProvider = require('./color-picker-root-provider.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPickerSwatchIndicator = require('./color-picker-swatch-indicator.cjs');
@@ -27,6 +28,7 @@ const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cj
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
 const colorPickerValueText = require('./color-picker-value-text.cjs');
 const colorPickerView = require('./color-picker-view.cjs');
+const useColorPicker = require('./use-color-picker.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const colorPicker = require('./color-picker.cjs');
 
@@ -49,6 +51,7 @@ exports.ColorPickerHiddenInput = colorPickerHiddenInput.ColorPickerHiddenInput;
 exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
 exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
 exports.ColorPickerRoot = colorPickerRoot.ColorPickerRoot;
+exports.ColorPickerRootProvider = colorPickerRootProvider.ColorPickerRootProvider;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;
@@ -57,5 +60,6 @@ exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTra
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPickerView = colorPickerView.ColorPickerView;
+exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
 exports.ColorPicker = colorPicker;

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

@@ -16,6 +16,7 @@ export { ColorPickerHiddenInput, type ColorPickerHiddenInputProps, } from './col
 export { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 export { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 export { ColorPickerRoot, type ColorPickerRootProps } from './color-picker-root';
+export { ColorPickerRootProvider, type ColorPickerRootProviderProps, } from './color-picker-root-provider';
 export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
 export { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps, } from './color-picker-swatch-indicator';
@@ -24,5 +25,6 @@ export { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps, } f
 export { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 export { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 export { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
+export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
 export { useColorPickerContext, type UseColorPickerContext } from './use-color-picker-context';
 export * as ColorPicker from './color-picker';

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

@@ -16,6 +16,7 @@ export { ColorPickerHiddenInput, type ColorPickerHiddenInputProps, } from './col
 export { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 export { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 export { ColorPickerRoot, type ColorPickerRootProps } from './color-picker-root';
+export { ColorPickerRootProvider, type ColorPickerRootProviderProps, } from './color-picker-root-provider';
 export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
 export { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps, } from './color-picker-swatch-indicator';
@@ -24,5 +25,6 @@ export { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps, } f
 export { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 export { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 export { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
+export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
 export { useColorPickerContext, type UseColorPickerContext } from './use-color-picker-context';
 export * as ColorPicker from './color-picker';

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

@@ -15,6 +15,7 @@ export { ColorPickerHiddenInput } from './color-picker-hidden-input.js';
 export { ColorPickerLabel } from './color-picker-label.js';
 export { ColorPickerPositioner } from './color-picker-positioner.js';
 export { ColorPickerRoot } from './color-picker-root.js';
+export { ColorPickerRootProvider } from './color-picker-root-provider.js';
 export { ColorPickerSwatch } from './color-picker-swatch.js';
 export { ColorPickerSwatchGroup } from './color-picker-swatch-group.js';
 export { ColorPickerSwatchIndicator } from './color-picker-swatch-indicator.js';
@@ -23,6 +24,7 @@ export { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.js
 export { ColorPickerTrigger } from './color-picker-trigger.js';
 export { ColorPickerValueText } from './color-picker-value-text.js';
 export { ColorPickerView } from './color-picker-view.js';
+export { useColorPicker } from './use-color-picker.js';
 export { useColorPickerContext } from './use-color-picker-context.js';
 import * as colorPicker from './color-picker.js';
 export { colorPicker as ColorPicker };