@ark-ui/react 4.9.2 → 5.0.0

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

@@ -12,35 +12,33 @@ import { ColorPickerProvider } from './use-color-picker-context.js';
 
 const ColorPickerRoot = forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(
-    colorPickerProps,
-    [
-      "closeOnSelect",
-      "defaultOpen",
-      "defaultValue",
-      "disabled",
-      "format",
-      "id",
-      "ids",
-      "initialFocusEl",
-      "invalid",
-      "name",
-      "name",
-      "onFocusOutside",
-      "onFormatChange",
-      "onInteractOutside",
-      "onOpenChange",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueChangeEnd",
-      "open",
-      "openAutoFocus",
-      "positioning",
-      "readOnly",
-      "required",
-      "value"
-    ]
-  );
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
+    "closeOnSelect",
+    "defaultOpen",
+    "defaultValue",
+    "defaultFormat",
+    "disabled",
+    "format",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "invalid",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onFormatChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "openAutoFocus",
+    "positioning",
+    "readOnly",
+    "required",
+    "value"
+  ]);
   const colorPicker = useColorPicker(useColorPickerProps);
   const presence = usePresence(mergeProps({ present: colorPicker.open }, presenceProps));
   const mergedProps = mergeProps(colorPicker.getRootProps(), localProps);

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

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

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerSwatchGroup = forwardRef(
-  (props, ref) => {
-    const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.getSwatchGroupProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const ColorPickerSwatchGroup = forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext();
+  const mergedProps = mergeProps(colorPicker.getSwatchGroupProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
 
 export { ColorPickerSwatchGroup };

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

@@ -11,10 +11,7 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerSwatchTrigger = react.forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "value",
-    "disabled"
-  ]);
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

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

@@ -7,10 +7,7 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerSwatchTrigger = forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps()(props, [
-    "value",
-    "disabled"
-  ]);
+  const [triggerProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

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

@@ -11,17 +11,12 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerSwatchPropsContext = require('./use-color-picker-swatch-props-context.cjs');
 
-const ColorPickerSwatch = react.forwardRef(
-  (props, ref) => {
-    const [swatwchProps, localProps] = createSplitProps.createSplitProps()(props, [
-      "respectAlpha",
-      "value"
-    ]);
-    const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ColorPickerSwatch = react.forwardRef((props, ref) => {
+  const [swatwchProps, localProps] = createSplitProps.createSplitProps()(props, ["respectAlpha", "value"]);
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 ColorPickerSwatch.displayName = "ColorPickerSwatch";
 
 exports.ColorPickerSwatch = ColorPickerSwatch;

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

@@ -7,17 +7,12 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context.js';
 
-const ColorPickerSwatch = forwardRef(
-  (props, ref) => {
-    const [swatwchProps, localProps] = createSplitProps()(props, [
-      "respectAlpha",
-      "value"
-    ]);
-    const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
-    return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ColorPickerSwatch = forwardRef((props, ref) => {
+  const [swatwchProps, localProps] = createSplitProps()(props, ["respectAlpha", "value"]);
+  const colorPicker = useColorPickerContext();
+  const mergedProps = mergeProps(colorPicker.getSwatchProps(swatwchProps), localProps);
+  return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatwchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 ColorPickerSwatch.displayName = "ColorPickerSwatch";
 
 export { ColorPickerSwatch };

package/dist/components/color-picker/color-picker-transparency-grid.cjs

@@ -10,12 +10,14 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
-const ColorPickerTransparencyGrid = react.forwardRef((props, ref) => {
-  const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ["size"]);
-  const colorPicker = useColorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const ColorPickerTransparencyGrid = react.forwardRef(
+  (props, ref) => {
+    const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ["size"]);
+    const colorPicker = useColorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
 ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
 
 exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;

package/dist/components/color-picker/color-picker-transparency-grid.js

@@ -6,12 +6,14 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerTransparencyGrid = forwardRef((props, ref) => {
-  const [gridProps, localProps] = createSplitProps()(props, ["size"]);
-  const colorPicker = useColorPickerContext();
-  const mergedProps = mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const ColorPickerTransparencyGrid = forwardRef(
+  (props, ref) => {
+    const [gridProps, localProps] = createSplitProps()(props, ["size"]);
+    const colorPicker = useColorPickerContext();
+    const mergedProps = mergeProps(colorPicker.getTransparencyGridProps(gridProps), localProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
 ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
 
 export { ColorPickerTransparencyGrid };

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

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

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

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

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

@@ -11,20 +11,16 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerSwatchPropsContext = require('./use-color-picker-swatch-props-context.cjs');
 
-const ColorPickerValueSwatch = react.forwardRef(
-  (props, ref) => {
-    const [{ respectAlpha }, localProps] = createSplitProps.createSplitProps()(props, [
-      "respectAlpha"
-    ]);
-    const colorPicker = useColorPickerContext.useColorPickerContext();
-    const swatchProps = {
-      respectAlpha,
-      value: colorPicker.valueAsString
-    };
-    const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ColorPickerValueSwatch = react.forwardRef((props, ref) => {
+  const [{ respectAlpha }, localProps] = createSplitProps.createSplitProps()(props, ["respectAlpha"]);
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const swatchProps = {
+    respectAlpha,
+    value: colorPicker.valueAsString
+  };
+  const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
 
 exports.ColorPickerValueSwatch = ColorPickerValueSwatch;

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

@@ -7,20 +7,16 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context.js';
 
-const ColorPickerValueSwatch = forwardRef(
-  (props, ref) => {
-    const [{ respectAlpha }, localProps] = createSplitProps()(props, [
-      "respectAlpha"
-    ]);
-    const colorPicker = useColorPickerContext();
-    const swatchProps = {
-      respectAlpha,
-      value: colorPicker.valueAsString
-    };
-    const mergedProps = mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
-    return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const ColorPickerValueSwatch = forwardRef((props, ref) => {
+  const [{ respectAlpha }, localProps] = createSplitProps()(props, ["respectAlpha"]);
+  const colorPicker = useColorPickerContext();
+  const swatchProps = {
+    respectAlpha,
+    value: colorPicker.valueAsString
+  };
+  const mergedProps = mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
+  return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
 
 export { ColorPickerValueSwatch };

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -9,14 +9,12 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
-const ColorPickerValueText = react.forwardRef(
-  (props, ref) => {
-    const { children, ...localprops } = props;
-    const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
-  }
-);
+const ColorPickerValueText = react.forwardRef((props, ref) => {
+  const { children, ...localprops } = props;
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+});
 ColorPickerValueText.displayName = "ColorPickerValueText";
 
 exports.ColorPickerValueText = ColorPickerValueText;

package/dist/components/color-picker/color-picker-value-text.js

@@ -5,14 +5,12 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
-const ColorPickerValueText = forwardRef(
-  (props, ref) => {
-    const { children, ...localprops } = props;
-    const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
-    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
-  }
-);
+const ColorPickerValueText = forwardRef((props, ref) => {
+  const { children, ...localprops } = props;
+  const colorPicker = useColorPickerContext();
+  const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+});
 ColorPickerValueText.displayName = "ColorPickerValueText";
 
 export { ColorPickerValueText };

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

@@ -17,15 +17,7 @@ const ColorPickerView = react.forwardRef((props, ref) => {
   if (colorPicker.format !== formatProps.format) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerFormatContext.ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    factory.ark.div,
-    {
-      ref,
-      "data-format": props.format,
-      ...colorPicker_anatomy.colorPickerAnatomy.build().view.attrs,
-      ...restProps
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerFormatContext.ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, "data-format": props.format, ...colorPicker_anatomy.colorPickerAnatomy.build().view.attrs, ...restProps }) });
 });
 ColorPickerView.displayName = "ColorPickerView";
 

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

@@ -13,15 +13,7 @@ const ColorPickerView = forwardRef((props, ref) => {
   if (colorPicker.format !== formatProps.format) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsx(
-    ark.div,
-    {
-      ref,
-      "data-format": props.format,
-      ...colorPickerAnatomy.build().view.attrs,
-      ...restProps
-    }
-  ) });
+  return /* @__PURE__ */ jsx(ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsx(ark.div, { ref, "data-format": props.format, ...colorPickerAnatomy.build().view.attrs, ...restProps }) });
 });
 ColorPickerView.displayName = "ColorPickerView";
 

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

@@ -9,7 +9,7 @@ export { ColorPickerChannelSliderThumb as ChannelSliderThumb, type ColorPickerCh
 export { ColorPickerChannelSliderTrack as ChannelSliderTrack, type ColorPickerChannelSliderTrackBaseProps as ChannelSliderTrackBaseProps, type ColorPickerChannelSliderTrackProps as ChannelSliderTrackProps, } from './color-picker-channel-slider-track';
 export { ColorPickerChannelSliderValueText as ChannelSliderValueText, type ColorPickerChannelSliderValueTextBaseProps as ChannelSliderValueTextBaseProps, type ColorPickerChannelSliderValueTextProps as ChannelSliderValueTextProps, } from './color-picker-channel-slider-value-text';
 export { ColorPickerContent as Content, type ColorPickerContentBaseProps as ContentBaseProps, type ColorPickerContentProps as ContentProps, } from './color-picker-content';
-export { ColorPickerContext as Context, type ColorPickerContextProps as ContextProps, } from './color-picker-context';
+export { ColorPickerContext as Context, type ColorPickerContextProps as ContextProps } from './color-picker-context';
 export { ColorPickerControl as Control, type ColorPickerControlBaseProps as ControlBaseProps, type ColorPickerControlProps as ControlProps, } from './color-picker-control';
 export { ColorPickerEyeDropperTrigger as EyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProps as EyeDropperTriggerBaseProps, type ColorPickerEyeDropperTriggerProps as EyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
 export { ColorPickerFormatSelect as FormatSelect, type ColorPickerFormatSelectBaseProps as FormatSelectBaseProps, type ColorPickerFormatSelectProps as FormatSelectProps, } from './color-picker-format-select';

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

@@ -9,7 +9,7 @@ export { ColorPickerChannelSliderThumb as ChannelSliderThumb, type ColorPickerCh
 export { ColorPickerChannelSliderTrack as ChannelSliderTrack, type ColorPickerChannelSliderTrackBaseProps as ChannelSliderTrackBaseProps, type ColorPickerChannelSliderTrackProps as ChannelSliderTrackProps, } from './color-picker-channel-slider-track';
 export { ColorPickerChannelSliderValueText as ChannelSliderValueText, type ColorPickerChannelSliderValueTextBaseProps as ChannelSliderValueTextBaseProps, type ColorPickerChannelSliderValueTextProps as ChannelSliderValueTextProps, } from './color-picker-channel-slider-value-text';
 export { ColorPickerContent as Content, type ColorPickerContentBaseProps as ContentBaseProps, type ColorPickerContentProps as ContentProps, } from './color-picker-content';
-export { ColorPickerContext as Context, type ColorPickerContextProps as ContextProps, } from './color-picker-context';
+export { ColorPickerContext as Context, type ColorPickerContextProps as ContextProps } from './color-picker-context';
 export { ColorPickerControl as Control, type ColorPickerControlBaseProps as ControlBaseProps, type ColorPickerControlProps as ControlProps, } from './color-picker-control';
 export { ColorPickerEyeDropperTrigger as EyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProps as EyeDropperTriggerBaseProps, type ColorPickerEyeDropperTriggerProps as EyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
 export { ColorPickerFormatSelect as FormatSelect, type ColorPickerFormatSelectBaseProps as FormatSelectBaseProps, type ColorPickerFormatSelectProps as FormatSelectProps, } from './color-picker-format-select';

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

@@ -1,6 +1,6 @@
 export { parse as parseColor } from '@zag-js/color-picker';
 export type { Color, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
-export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps, } from './color-picker-area';
+export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps } from './color-picker-area';
 export { ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb';
 export { ColorPickerChannelInput, type ColorPickerChannelInputBaseProps, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
@@ -16,11 +16,11 @@ export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProp
 export { ColorPickerFormatSelect, type ColorPickerFormatSelectBaseProps, type ColorPickerFormatSelectProps, } from './color-picker-format-select';
 export { ColorPickerFormatTrigger, type ColorPickerFormatTriggerBaseProps, type ColorPickerFormatTriggerProps, } from './color-picker-format-trigger';
 export { ColorPickerHiddenInput, type ColorPickerHiddenInputBaseProps, type ColorPickerHiddenInputProps, } from './color-picker-hidden-input';
-export { ColorPickerLabel, type ColorPickerLabelBaseProps, type ColorPickerLabelProps, } from './color-picker-label';
+export { ColorPickerLabel, type ColorPickerLabelBaseProps, type ColorPickerLabelProps } from './color-picker-label';
 export { ColorPickerPositioner, type ColorPickerPositionerBaseProps, type ColorPickerPositionerProps, } from './color-picker-positioner';
-export { ColorPickerRoot, type ColorPickerRootBaseProps, type ColorPickerRootProps, } from './color-picker-root';
+export { ColorPickerRoot, type ColorPickerRootBaseProps, type ColorPickerRootProps } from './color-picker-root';
 export { ColorPickerRootProvider, type ColorPickerRootProviderBaseProps, type ColorPickerRootProviderProps, } from './color-picker-root-provider';
-export { ColorPickerSwatch, type ColorPickerSwatchBaseProps, type ColorPickerSwatchProps, } from './color-picker-swatch';
+export { ColorPickerSwatch, type ColorPickerSwatchBaseProps, type ColorPickerSwatchProps } from './color-picker-swatch';
 export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupBaseProps, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
 export { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorBaseProps, type ColorPickerSwatchIndicatorProps, } from './color-picker-swatch-indicator';
 export { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerBaseProps, type ColorPickerSwatchTriggerProps, } from './color-picker-swatch-trigger';
@@ -28,8 +28,8 @@ export { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridBaseProps,
 export { ColorPickerTrigger, type ColorPickerTriggerBaseProps, type ColorPickerTriggerProps, } from './color-picker-trigger';
 export { ColorPickerValueSwatch, type ColorPickerValueSwatchBaseProps, type ColorPickerValueSwatchProps, } from './color-picker-value-swatch';
 export { ColorPickerValueText, type ColorPickerValueTextBaseProps, type ColorPickerValueTextProps, } from './color-picker-value-text';
-export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps, } from './color-picker-view';
+export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps } from './color-picker-view';
 export { colorPickerAnatomy } from './color-picker.anatomy';
-export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
+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

@@ -1,6 +1,6 @@
 export { parse as parseColor } from '@zag-js/color-picker';
 export type { Color, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
-export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps, } from './color-picker-area';
+export { ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps } from './color-picker-area';
 export { ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb';
 export { ColorPickerChannelInput, type ColorPickerChannelInputBaseProps, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
@@ -16,11 +16,11 @@ export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProp
 export { ColorPickerFormatSelect, type ColorPickerFormatSelectBaseProps, type ColorPickerFormatSelectProps, } from './color-picker-format-select';
 export { ColorPickerFormatTrigger, type ColorPickerFormatTriggerBaseProps, type ColorPickerFormatTriggerProps, } from './color-picker-format-trigger';
 export { ColorPickerHiddenInput, type ColorPickerHiddenInputBaseProps, type ColorPickerHiddenInputProps, } from './color-picker-hidden-input';
-export { ColorPickerLabel, type ColorPickerLabelBaseProps, type ColorPickerLabelProps, } from './color-picker-label';
+export { ColorPickerLabel, type ColorPickerLabelBaseProps, type ColorPickerLabelProps } from './color-picker-label';
 export { ColorPickerPositioner, type ColorPickerPositionerBaseProps, type ColorPickerPositionerProps, } from './color-picker-positioner';
-export { ColorPickerRoot, type ColorPickerRootBaseProps, type ColorPickerRootProps, } from './color-picker-root';
+export { ColorPickerRoot, type ColorPickerRootBaseProps, type ColorPickerRootProps } from './color-picker-root';
 export { ColorPickerRootProvider, type ColorPickerRootProviderBaseProps, type ColorPickerRootProviderProps, } from './color-picker-root-provider';
-export { ColorPickerSwatch, type ColorPickerSwatchBaseProps, type ColorPickerSwatchProps, } from './color-picker-swatch';
+export { ColorPickerSwatch, type ColorPickerSwatchBaseProps, type ColorPickerSwatchProps } from './color-picker-swatch';
 export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupBaseProps, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
 export { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorBaseProps, type ColorPickerSwatchIndicatorProps, } from './color-picker-swatch-indicator';
 export { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerBaseProps, type ColorPickerSwatchTriggerProps, } from './color-picker-swatch-trigger';
@@ -28,8 +28,8 @@ export { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridBaseProps,
 export { ColorPickerTrigger, type ColorPickerTriggerBaseProps, type ColorPickerTriggerProps, } from './color-picker-trigger';
 export { ColorPickerValueSwatch, type ColorPickerValueSwatchBaseProps, type ColorPickerValueSwatchProps, } from './color-picker-value-swatch';
 export { ColorPickerValueText, type ColorPickerValueTextBaseProps, type ColorPickerValueTextProps, } from './color-picker-value-text';
-export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps, } from './color-picker-view';
+export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps } from './color-picker-view';
 export { colorPickerAnatomy } from './color-picker.anatomy';
-export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
+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/use-color-picker.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');
 const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -31,11 +30,12 @@ function _interopNamespaceDefault(e) {
 const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
 
 const useColorPicker = (props = {}) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       input: field?.ids.control
@@ -46,19 +46,10 @@ const useColorPicker = (props = {}) => {
     readOnly: field?.readOnly,
     required: field?.required,
     getRootNode,
-    open: props.defaultOpen,
-    "open.controlled": props.open !== void 0,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-    onValueChangeEnd: useEvent.useEvent(props.onValueChangeEnd)
-  };
-  const [state, send] = react$1.useMachine(colorPicker__namespace.machine(initialContext), { context });
-  return colorPicker__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(colorPicker__namespace.machine, machineProps);
+  return colorPicker__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useColorPicker = useColorPicker;

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

@@ -1,17 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as colorPicker from '@zag-js/color-picker';
-export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial open state of the color picker when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: colorPicker.Context['open'];
-    /**
-     * The initial value of the color picker when it is first rendered.
-     * Use when you do not need to control the state of the color picker.
-     */
-    defaultValue?: colorPicker.Context['value'];
+export interface UseColorPickerProps extends Optional<Omit<colorPicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseColorPickerReturn extends colorPicker.Api<PropTypes> {
 }

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

@@ -1,17 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as colorPicker from '@zag-js/color-picker';
-export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial open state of the color picker when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: colorPicker.Context['open'];
-    /**
-     * The initial value of the color picker when it is first rendered.
-     * Use when you do not need to control the state of the color picker.
-     */
-    defaultValue?: colorPicker.Context['value'];
+export interface UseColorPickerProps extends Optional<Omit<colorPicker.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseColorPickerReturn extends colorPicker.Api<PropTypes> {
 }