@ark-ui/react 0.15.0 → 1.0.0-beta.1

package/color-picker/color-picker-area-background.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerAreaBackgroundProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerAreaBackground: ForwardRefExoticComponent<ColorPickerAreaBackgroundProps & RefAttributes<HTMLDivElement>>;

package/color-picker/{color-picker-area-gradient.mjs → color-picker-area-background.mjs}

@@ -6,14 +6,14 @@ import { ark } from '../factory.mjs';
 import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerAreaGradient = forwardRef(
+const ColorPickerAreaBackground = forwardRef(
   (props, ref) => {
     const colorAreaProps = useColorPickerAreaContext();
-    const { getAreaGradientProps } = useColorPickerContext();
-    const mergedProps = mergeProps(getAreaGradientProps(colorAreaProps), props);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.getAreaBackgroundProps(colorAreaProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-ColorPickerAreaGradient.displayName = "ColorPickerAreaGradient";
+ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
 
-export { ColorPickerAreaGradient };
+export { ColorPickerAreaBackground };

package/color-picker/color-picker-area-context.d.ts

@@ -1,4 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import type { ColorAreaProps } from '@zag-js/color-picker';
-export declare const ColorPickerAreaProvider: Provider<ColorAreaProps>, useColorPickerAreaContext: () => ColorAreaProps;
+import type { AreaProps } from '@zag-js/color-picker';
+export interface ColorPickerAreaContext extends AreaProps {
+}
+export declare const ColorPickerAreaProvider: Provider<ColorPickerAreaContext>, useColorPickerAreaContext: () => ColorPickerAreaContext;

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

@@ -13,8 +13,8 @@ const colorPickerContext = require('./color-picker-context.cjs');
 const ColorPickerAreaThumb = react.forwardRef(
   (props, ref) => {
     const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
-    const { getAreaThumbProps } = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(getAreaThumbProps(colorAreaProps), props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.getAreaThumbProps(colorAreaProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-area-thumb.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerAreaThumbProps = HTMLArkProps<'div'>;
-export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerAreaThumbProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<ColorPickerAreaThumbProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area-thumb.mjs

@@ -9,8 +9,8 @@ import { useColorPickerContext } from './color-picker-context.mjs';
 const ColorPickerAreaThumb = forwardRef(
   (props, ref) => {
     const colorAreaProps = useColorPickerAreaContext();
-    const { getAreaThumbProps } = useColorPickerContext();
-    const mergedProps = mergeProps(getAreaThumbProps(colorAreaProps), props);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.getAreaThumbProps(colorAreaProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-area.cjs

@@ -12,12 +12,9 @@ const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerArea = react.forwardRef((props, ref) => {
-  const [channelProps, divprops] = createSplitProps.createSplitProps()(props, [
-    "xChannel",
-    "yChannel"
-  ]);
-  const { getAreaProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(getAreaProps(channelProps), divprops);
+  const [channelProps, divprops] = createSplitProps.createSplitProps()(props, ["xChannel", "yChannel"]);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.getAreaProps(channelProps), divprops);
   return /* @__PURE__ */ jsxRuntime.jsx(colorPickerAreaContext.ColorPickerAreaProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 ColorPickerArea.displayName = "ColorPickerArea";

package/color-picker/color-picker-area.d.ts

@@ -1,7 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { ColorAreaProps } from '@zag-js/color-picker';
+import type { AreaProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerAreaProps = Assign<HTMLArkProps<'div'>, ColorAreaProps>;
-export declare const ColorPickerArea: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, AreaProps> {
+}
+export declare const ColorPickerArea: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area.mjs

@@ -8,12 +8,9 @@ import { ColorPickerAreaProvider } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerArea = forwardRef((props, ref) => {
-  const [channelProps, divprops] = createSplitProps()(props, [
-    "xChannel",
-    "yChannel"
-  ]);
-  const { getAreaProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getAreaProps(channelProps), divprops);
+  const [channelProps, divprops] = createSplitProps()(props, ["xChannel", "yChannel"]);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.getAreaProps(channelProps), divprops);
   return /* @__PURE__ */ jsx(ColorPickerAreaProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 ColorPickerArea.displayName = "ColorPickerArea";

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

@@ -16,8 +16,8 @@ const ColorPickerChannelInput = react.forwardRef(
       "channel",
       "orientation"
     ]);
-    const { getChannelInputProps } = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(getChannelInputProps(channelProps), inputProps);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.getChannelInputProps(channelProps), inputProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-channel-input.d.ts

@@ -1,9 +1,8 @@
-import { ForwardRefExoticComponent, InputHTMLAttributes, DetailedHTMLProps, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { ColorChannelInputProps } from '@zag-js/color-picker';
+import type { ChannelInputProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerChannelInputProps = Assign<ColorChannelInputProps, HTMLArkProps<'input'>>;
-export declare const ColorPickerChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLInputElement>>;
+export interface ColorPickerChannelInputProps extends Assign<ChannelInputProps, HTMLArkProps<'input'>> {
+}
+export declare const ColorPickerChannelInput: ForwardRefExoticComponent<ColorPickerChannelInputProps & RefAttributes<HTMLInputElement>>;

package/color-picker/color-picker-channel-input.mjs

@@ -12,8 +12,8 @@ const ColorPickerChannelInput = forwardRef(
       "channel",
       "orientation"
     ]);
-    const { getChannelInputProps } = useColorPickerContext();
-    const mergedProps = mergeProps(getChannelInputProps(channelProps), inputProps);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.getChannelInputProps(channelProps), inputProps);
     return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-channel-slider-context.d.ts

@@ -1,4 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import type { ColorChannelProps } from '@zag-js/color-picker';
-export declare const ColorPickerChannelSliderProvider: Provider<ColorChannelProps>, useColorPickerChannelSliderContext: () => ColorChannelProps;
+import type { ChannelProps } from '@zag-js/color-picker';
+export interface ColorPickerChannelSliderContext extends ChannelProps {
+}
+export declare const ColorPickerChannelSliderProvider: Provider<ColorPickerChannelSliderContext>, useColorPickerChannelSliderContext: () => ColorPickerChannelSliderContext;

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

@@ -12,8 +12,8 @@ const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerChannelSliderThumb = react.forwardRef((props, ref) => {
   const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
-  const { getChannelSliderThumbProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(getChannelSliderThumbProps(sliderContext), props);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.getChannelSliderThumbProps(sliderContext), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";

package/color-picker/color-picker-channel-slider-thumb.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerChannelSliderThumbProps = HTMLArkProps<'div'>;
-export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerChannelSliderThumbProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<ColorPickerChannelSliderThumbProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-thumb.mjs

@@ -8,8 +8,8 @@ import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerChannelSliderThumb = forwardRef((props, ref) => {
   const sliderContext = useColorPickerChannelSliderContext();
-  const { getChannelSliderThumbProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getChannelSliderThumbProps(sliderContext), props);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.getChannelSliderThumbProps(sliderContext), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";

package/color-picker/color-picker-channel-slider-track.cjs

@@ -6,19 +6,15 @@ 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('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerChannelSliderTrack = react.forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
-  const { getChannelSliderTrackProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react$1.mergeProps(getChannelSliderTrackProps(channelProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.getChannelSliderTrackProps(sliderContext), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
 

package/color-picker/color-picker-channel-slider-track.d.ts

@@ -1,7 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { ColorChannelProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-export type ColorPickerChannelSliderTrackProps = Assign<HTMLArkProps<'div'>, ColorChannelProps>;
-export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerChannelSliderTrackProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<ColorPickerChannelSliderTrackProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-track.mjs

@@ -2,19 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerChannelSliderTrack = forwardRef((props, ref) => {
-  const [channelProps, localProps] = createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
-  const { getChannelSliderTrackProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getChannelSliderTrackProps(channelProps), localProps);
-  return /* @__PURE__ */ jsx(ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const sliderContext = useColorPickerChannelSliderContext();
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.getChannelSliderTrackProps(sliderContext), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
 

package/color-picker/color-picker-channel-slider.cjs

@@ -0,0 +1,27 @@
+'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('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSlider = react.forwardRef(
+  (props, ref) => {
+    const [channelProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "channel",
+      "orientation"
+    ]);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.getChannelSliderProps(channelProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+ColorPickerChannelSlider.displayName = "ColorPickerChannelSlider";
+
+exports.ColorPickerChannelSlider = ColorPickerChannelSlider;

package/color-picker/color-picker-channel-slider.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ChannelProps } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ChannelProps> {
+}
+export declare const ColorPickerChannelSlider: ForwardRefExoticComponent<ColorPickerChannelSliderProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSlider = forwardRef(
+  (props, ref) => {
+    const [channelProps, localProps] = createSplitProps()(props, [
+      "channel",
+      "orientation"
+    ]);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.getChannelSliderProps(channelProps), localProps);
+    return /* @__PURE__ */ jsx(ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+ColorPickerChannelSlider.displayName = "ColorPickerChannelSlider";
+
+export { ColorPickerChannelSlider };

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

@@ -11,8 +11,8 @@ const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerContent = react.forwardRef(
   (props, ref) => {
-    const { contentProps } = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(contentProps, props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-content.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerContentProps = HTMLArkProps<'div'>;
-export declare const ColorPickerContent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerContentProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerContent: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-content.mjs

@@ -7,8 +7,8 @@ import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerContent = forwardRef(
   (props, ref) => {
-    const { contentProps } = useColorPickerContext();
-    const mergedProps = mergeProps(contentProps, props);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseColorPickerReturn } from './use-color-picker';
-export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: Provider<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;
+export interface ColorPickerContext extends UseColorPickerReturn {
+}
+export declare const ColorPickerProvider: Provider<ColorPickerContext>, useColorPickerContext: () => ColorPickerContext;

package/{range-slider/range-slider-control.cjs → color-picker/color-picker-control.cjs}

@@ -7,15 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const rangeSliderContext = require('./range-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
-const RangeSliderControl = react.forwardRef(
+const ColorPickerControl = react.forwardRef(
   (props, ref) => {
-    const { controlProps } = rangeSliderContext.useRangeSliderContext();
-    const mergedProps = react$1.mergeProps(controlProps, props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.controlProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-RangeSliderControl.displayName = "RangeSliderControl";
+ColorPickerControl.displayName = "ColorPickerControl";
 
-exports.RangeSliderControl = RangeSliderControl;
+exports.ColorPickerControl = ColorPickerControl;

package/color-picker/color-picker-control.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerControlProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerControl: ForwardRefExoticComponent<ColorPickerControlProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-control.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerControl = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.controlProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerControl.displayName = "ColorPickerControl";
+
+export { ColorPickerControl };

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

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

package/color-picker/color-picker-eye-dropper-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerEyeDropperTriggerProps = HTMLArkProps<'button'>;
-export declare const ColorPickerEyeDropperTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface ColorPickerEyeDropperTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ColorPickerEyeDropperTrigger: ForwardRefExoticComponent<ColorPickerEyeDropperTriggerProps & RefAttributes<HTMLButtonElement>>;

package/color-picker/color-picker-eye-dropper-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerEyeDropperTrigger = forwardRef((props, ref) => {
-  const { eyeDropperTriggerProps } = useColorPickerContext();
-  const mergedProps = mergeProps(eyeDropperTriggerProps, props);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.eyeDropperTriggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";

package/{range-slider/range-slider-label.cjs → color-picker/color-picker-label.cjs}

@@ -7,15 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const rangeSliderContext = require('./range-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
-const RangeSliderLabel = react.forwardRef(
+const ColorPickerLabel = react.forwardRef(
   (props, ref) => {
-    const { labelProps } = rangeSliderContext.useRangeSliderContext();
-    const mergedProps = react$1.mergeProps(labelProps, props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.labelProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
   }
 );
-RangeSliderLabel.displayName = "RangeSliderLabel";
+ColorPickerLabel.displayName = "ColorPickerLabel";
 
-exports.RangeSliderLabel = RangeSliderLabel;
+exports.ColorPickerLabel = ColorPickerLabel;

package/color-picker/color-picker-label.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ColorPickerLabel: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;

package/color-picker/color-picker-label.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerLabel = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.labelProps, props);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  }
+);
+ColorPickerLabel.displayName = "ColorPickerLabel";
+
+export { ColorPickerLabel };

package/{range-slider/range-slider-marker-group.cjs → color-picker/color-picker-positioner.cjs}

@@ -7,15 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const rangeSliderContext = require('./range-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
-const RangeSliderMarkerGroup = react.forwardRef(
+const ColorPickerPositioner = react.forwardRef(
   (props, ref) => {
-    const { markerGroupProps } = rangeSliderContext.useRangeSliderContext();
-    const mergedProps = react$1.mergeProps(markerGroupProps, props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.positionerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-RangeSliderMarkerGroup.displayName = "RangeSliderMarkerGroup";
+ColorPickerPositioner.displayName = "ColorPickerPositioner";
 
-exports.RangeSliderMarkerGroup = RangeSliderMarkerGroup;
+exports.ColorPickerPositioner = ColorPickerPositioner;

package/color-picker/color-picker-positioner.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerPositionerProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerPositioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-positioner.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerPositioner = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.positionerProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerPositioner.displayName = "ColorPickerPositioner";
+
+export { ColorPickerPositioner };

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

@@ -4,12 +4,17 @@
 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 factory = require('../factory.cjs');
-const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerSwatchGroup = react.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...colorPicker_anatomy.parts.swatchGroup.attrs, ...props, ref })
+  (props, ref) => {
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.swatchGroupProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
 );
 ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
 

package/color-picker/color-picker-swatch-group.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type ColorPickerSwatchGroupProps = HTMLArkProps<'div'>;
-export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface ColorPickerSwatchGroupProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;