@ark-ui/react 4.9.2 → 5.0.0

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

@@ -9,16 +9,14 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useCollapsibleContext = require('./use-collapsible-context.cjs');
 
-const CollapsibleContent = react.forwardRef(
-  (props, ref) => {
-    const collapsible = useCollapsibleContext.useCollapsibleContext();
-    if (collapsible.isUnmounted) {
-      return null;
-    }
-    const mergedProps = react$1.mergeProps(collapsible.getContentProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+const CollapsibleContent = react.forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext.useCollapsibleContext();
+  if (collapsible.isUnmounted) {
+    return null;
   }
-);
+  const mergedProps = react$1.mergeProps(collapsible.getContentProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 CollapsibleContent.displayName = "CollapsibleContent";
 
 exports.CollapsibleContent = CollapsibleContent;

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

@@ -5,16 +5,14 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 
-const CollapsibleContent = forwardRef(
-  (props, ref) => {
-    const collapsible = useCollapsibleContext();
-    if (collapsible.isUnmounted) {
-      return null;
-    }
-    const mergedProps = mergeProps(collapsible.getContentProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+const CollapsibleContent = forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext();
+  if (collapsible.isUnmounted) {
+    return null;
   }
-);
+  const mergedProps = mergeProps(collapsible.getContentProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 CollapsibleContent.displayName = "CollapsibleContent";
 
 export { CollapsibleContent };

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

@@ -10,15 +10,11 @@ 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 }) });
-  }
-);
+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.js

@@ -6,15 +6,11 @@ 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 }) });
-  }
-);
+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-trigger.cjs

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useCollapsibleContext } from './use-collapsible-context.js';
 
-const CollapsibleTrigger = forwardRef(
-  (props, ref) => {
-    const collapsible = useCollapsibleContext();
-    const mergedProps = mergeProps(collapsible.getTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const CollapsibleTrigger = forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext();
+  const mergedProps = mergeProps(collapsible.getTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 CollapsibleTrigger.displayName = "CollapsibleTrigger";
 
 export { CollapsibleTrigger };

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

@@ -1,6 +1,6 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
-export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps, } from './collapsible-context';
+export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

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

@@ -1,6 +1,6 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
-export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps, } from './collapsible-context';
+export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

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

@@ -1,10 +1,10 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
-export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps, } from './collapsible-root';
+export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';
 export { collapsibleAnatomy } from './collapsible.anatomy';
-export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
+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

@@ -1,10 +1,10 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
-export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps, } from './collapsible-root';
+export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';
 export { collapsibleAnatomy } from './collapsible.anatomy';
-export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
+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/split-collapsible-props.d.cts

@@ -1,2 +1,2 @@
 import { UseCollapsibleProps } from './use-collapsible';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "id" | "ids" | "disabled" | "lazyMount" | "unmountOnExit" | "onExitComplete" | "onOpenChange" | "defaultOpen">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "defaultOpen" | "onOpenChange" | "onExitComplete">];

package/dist/components/collapsible/split-collapsible-props.d.ts

@@ -1,2 +1,2 @@
 import { UseCollapsibleProps } from './use-collapsible';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "id" | "ids" | "disabled" | "lazyMount" | "unmountOnExit" | "onExitComplete" | "onOpenChange" | "defaultOpen">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "defaultOpen" | "onOpenChange" | "onExitComplete">];

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

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -31,24 +30,18 @@ const collapsible__namespace = /*#__PURE__*/_interopNamespaceDefault(collapsible
 
 const useCollapsible = (props = {}) => {
   const { lazyMount, unmountOnExit, ...collapsibleProps } = props;
+  const id = react.useId();
   const wasVisible = react.useRef(false);
   const { dir } = useLocaleContext.useLocaleContext();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...collapsibleProps
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(collapsible__namespace.machine(initialContext), { context });
-  const api = collapsible__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(collapsible__namespace.machine, machineProps);
+  const api = collapsible__namespace.connect(service, react$1.normalizeProps);
   if (api.visible) {
     wasVisible.current = true;
   }

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

@@ -2,12 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as collapsible from '@zag-js/collapsible';
-export interface UseCollapsibleProps extends Optional<Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'>, RenderStrategyProps {
-    /**
-     * The initial open state of the collapsible when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: collapsible.Context['open'];
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Props, 'dir' | 'getRootNode'>, 'id'>, RenderStrategyProps {
 }
 export interface UseCollapsibleReturn extends collapsible.Api<PropTypes> {
     /**

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

@@ -2,12 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { RenderStrategyProps } from '../../utils/render-strategy';
 import * as collapsible from '@zag-js/collapsible';
-export interface UseCollapsibleProps extends Optional<Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'>, RenderStrategyProps {
-    /**
-     * The initial open state of the collapsible when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: collapsible.Context['open'];
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Props, 'dir' | 'getRootNode'>, 'id'>, RenderStrategyProps {
 }
 export interface UseCollapsibleReturn extends collapsible.Api<PropTypes> {
     /**

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

@@ -1,31 +1,24 @@
 'use client';
 import * as collapsible from '@zag-js/collapsible';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { useRef, useId } from 'react';
+import { useId, useRef } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
 const useCollapsible = (props = {}) => {
   const { lazyMount, unmountOnExit, ...collapsibleProps } = props;
+  const id = useId();
   const wasVisible = useRef(false);
   const { dir } = useLocaleContext();
   const { getRootNode } = useEnvironmentContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
     ...collapsibleProps
   };
-  const context = {
-    ...initialContext,
-    open: props.open,
-    onOpenChange: useEvent(props.onOpenChange, { sync: true })
-  };
-  const [state, send] = useMachine(collapsible.machine(initialContext), { context });
-  const api = collapsible.connect(state, send, normalizeProps);
+  const service = useMachine(collapsible.machine, machineProps);
+  const api = collapsible.connect(service, normalizeProps);
   if (api.visible) {
     wasVisible.current = true;
   }

package/dist/components/collection.cjs

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const collection = require('@zag-js/collection');
-const core = require('@zag-js/core');
 
-const createListCollection = (options) => core.ref(new collection.ListCollection(options));
-const createTreeCollection = (options) => core.ref(new collection.TreeCollection(options));
-const createFileTreeCollection = (paths) => core.ref(collection.filePathToTree(paths));
+const createListCollection = (options) => new collection.ListCollection(options);
+const createTreeCollection = (options) => new collection.TreeCollection(options);
+const createFileTreeCollection = (paths) => collection.filePathToTree(paths);
 
 exports.createFileTreeCollection = createFileTreeCollection;
 exports.createListCollection = createListCollection;

package/dist/components/collection.d.cts

@@ -1,6 +1,6 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
-export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
+export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
-export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
 export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection.d.ts

@@ -1,6 +1,6 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
-export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
+export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
-export declare const createTreeCollection: <T extends unknown>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
 export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection.js

@@ -1,8 +1,7 @@
-import { ListCollection, TreeCollection, filePathToTree } from '@zag-js/collection';
-import { ref } from '@zag-js/core';
+import { ListCollection, filePathToTree, TreeCollection } from '@zag-js/collection';
 
-const createListCollection = (options) => ref(new ListCollection(options));
-const createTreeCollection = (options) => ref(new TreeCollection(options));
-const createFileTreeCollection = (paths) => ref(filePathToTree(paths));
+const createListCollection = (options) => new ListCollection(options);
+const createTreeCollection = (options) => new TreeCollection(options);
+const createFileTreeCollection = (paths) => filePathToTree(paths);
 
 export { createFileTreeCollection, createListCollection, createTreeCollection };

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

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useColorPickerAreaPropsContext = require('./use-color-picker-area-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
-const ColorPickerAreaBackground = react.forwardRef(
-  (props, ref) => {
-    const colorPicker = useColorPickerContext.useColorPickerContext();
-    const areaProps = useColorPickerAreaPropsContext.useColorPickerAreaPropsContext();
-    const mergedProps = react$1.mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const ColorPickerAreaBackground = react.forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext.useColorPickerAreaPropsContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
 
 exports.ColorPickerAreaBackground = ColorPickerAreaBackground;

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

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerAreaBackground = forwardRef(
-  (props, ref) => {
-    const colorPicker = useColorPickerContext();
-    const areaProps = useColorPickerAreaPropsContext();
-    const mergedProps = mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const ColorPickerAreaBackground = forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps(colorPicker.getAreaBackgroundProps(areaProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
 
 export { ColorPickerAreaBackground };

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

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useColorPickerAreaPropsContext = require('./use-color-picker-area-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
-const ColorPickerAreaThumb = react.forwardRef(
-  (props, ref) => {
-    const colorPicker = useColorPickerContext.useColorPickerContext();
-    const areaProps = useColorPickerAreaPropsContext.useColorPickerAreaPropsContext();
-    const mergedProps = react$1.mergeProps(colorPicker.getAreaThumbProps(areaProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const ColorPickerAreaThumb = react.forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext.useColorPickerAreaPropsContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getAreaThumbProps(areaProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
 
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;

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

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useColorPickerAreaPropsContext } from './use-color-picker-area-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerAreaThumb = forwardRef(
-  (props, ref) => {
-    const colorPicker = useColorPickerContext();
-    const areaProps = useColorPickerAreaPropsContext();
-    const mergedProps = mergeProps(colorPicker.getAreaThumbProps(areaProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const ColorPickerAreaThumb = forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext();
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps(colorPicker.getAreaThumbProps(areaProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
 
 export { ColorPickerAreaThumb };

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

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

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

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

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

@@ -10,12 +10,14 @@ const factory = require('../factory.cjs');
 const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
-const ColorPickerChannelSliderLabel = react.forwardRef((props, ref) => {
-  const colorPicker = useColorPickerContext.useColorPickerContext();
-  const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
-  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
-});
+const ColorPickerChannelSliderLabel = react.forwardRef(
+  (props, ref) => {
+    const colorPicker = useColorPickerContext.useColorPickerContext();
+    const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
+    const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  }
+);
 ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
 
 exports.ColorPickerChannelSliderLabel = ColorPickerChannelSliderLabel;

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

@@ -6,12 +6,14 @@ import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerChannelSliderLabel = forwardRef((props, ref) => {
-  const colorPicker = useColorPickerContext();
-  const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
-});
+const ColorPickerChannelSliderLabel = forwardRef(
+  (props, ref) => {
+    const colorPicker = useColorPickerContext();
+    const channelProps = useColorPickerChannelPropsContext();
+    const mergedProps = mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  }
+);
 ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
 
 export { ColorPickerChannelSliderLabel };

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

@@ -11,14 +11,16 @@ const useColorPickerChannelPropsContext = require('./use-color-picker-channel-pr
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
-const ColorPickerChannelSliderThumb = react.forwardRef((props, ref) => {
-  const colorPicker = useColorPickerContext.useColorPickerContext();
-  const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
-  const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
-  const channelSliderProps = { ...channelProps, ...formatProps };
-  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const ColorPickerChannelSliderThumb = react.forwardRef(
+  (props, ref) => {
+    const colorPicker = useColorPickerContext.useColorPickerContext();
+    const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
+    const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
+    const channelSliderProps = { ...channelProps, ...formatProps };
+    const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
 
 exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;

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

@@ -7,14 +7,16 @@ import { useColorPickerChannelPropsContext } from './use-color-picker-channel-pr
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { useColorPickerFormatPropsContext } from './use-color-picker-format-context.js';
 
-const ColorPickerChannelSliderThumb = forwardRef((props, ref) => {
-  const colorPicker = useColorPickerContext();
-  const channelProps = useColorPickerChannelPropsContext();
-  const formatProps = useColorPickerFormatPropsContext();
-  const channelSliderProps = { ...channelProps, ...formatProps };
-  const mergedProps = mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const ColorPickerChannelSliderThumb = forwardRef(
+  (props, ref) => {
+    const colorPicker = useColorPickerContext();
+    const channelProps = useColorPickerChannelPropsContext();
+    const formatProps = useColorPickerFormatPropsContext();
+    const channelSliderProps = { ...channelProps, ...formatProps };
+    const mergedProps = mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
 
 export { ColorPickerChannelSliderThumb };