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

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

@@ -1,11 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { parts } from './color-picker.anatomy.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerSwatchGroup = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx(ark.div, { ...parts.swatchGroup.attrs, ...props, ref })
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.swatchGroupProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
 );
 ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
 

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

@@ -0,0 +1,21 @@
+'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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerSwatchTrigger = react.forwardRef((props, ref) => {
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.getSwatchTriggerProps(triggerProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+ColorPickerSwatchTrigger.displayName = "ColorPickerSwatchTrigger";
+
+exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;

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

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { Color } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface SwatchTriggerProps {
+    value: string | Color;
+}
+export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, SwatchTriggerProps> {
+}
+export declare const ColorPickerSwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
+export {};

package/color-picker/color-picker-swatch-trigger.mjs

@@ -0,0 +1,17 @@
+'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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerSwatchTrigger = forwardRef((props, ref) => {
+  const [triggerProps, localProps] = createSplitProps()(props, ["value"]);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.getSwatchTriggerProps(triggerProps), localProps);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+ColorPickerSwatchTrigger.displayName = "ColorPickerSwatchTrigger";
+
+export { ColorPickerSwatchTrigger };

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

@@ -9,17 +9,16 @@ const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
-const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
 const ColorPickerSwatch = react.forwardRef(
   (props, ref) => {
     const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, [
-      "readOnly",
+      "respectAlpha",
       "value"
     ]);
-    const { getSwatchProps } = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(getSwatchProps(colorSwatchProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(colorPickerSwatchContext.ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.getSwatchProps(colorSwatchProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 ColorPickerSwatch.displayName = "ColorPickerSwatch";

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

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

package/color-picker/color-picker-swatch.mjs

@@ -5,17 +5,16 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
-import { ColorPickerSwatchProvider } from './color-picker-swatch-context.mjs';
 
 const ColorPickerSwatch = forwardRef(
   (props, ref) => {
     const [colorSwatchProps, localProps] = createSplitProps()(props, [
-      "readOnly",
+      "respectAlpha",
       "value"
     ]);
-    const { getSwatchProps } = useColorPickerContext();
-    const mergedProps = mergeProps(getSwatchProps(colorSwatchProps), localProps);
-    return /* @__PURE__ */ jsx(ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsx(ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.getSwatchProps(colorSwatchProps), localProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 ColorPickerSwatch.displayName = "ColorPickerSwatch";

package/{date-picker/date-picker-grid.cjs → color-picker/color-picker-transparency-grid.cjs}

@@ -8,14 +8,14 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const datePickerContext = require('./date-picker-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
-const DatePickerGrid = react.forwardRef((props, ref) => {
-  const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ["view", "columns", "id"]);
-  const { getGridProps, view } = datePickerContext.useDatePickerContext();
-  const mergedProps = react$1.mergeProps(getGridProps({ view, id: react.useId(), ...gridProps }), localProps);
+const ColorPickerTransparencyGrid = react.forwardRef((props, ref) => {
+  const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ["size"]);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.getTransparencyGridProps(gridProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
-DatePickerGrid.displayName = "DatePickerGrid";
+ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
 
-exports.DatePickerGrid = DatePickerGrid;
+exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;

package/color-picker/color-picker-transparency-grid.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface TransparancyGridProps {
+    size: string;
+}
+export interface ColorPickerTransparencyGridPrps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+}
+export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+export {};

package/color-picker/color-picker-transparency-grid.mjs

@@ -0,0 +1,17 @@
+'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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerTransparencyGrid = forwardRef((props, ref) => {
+  const [gridProps, localProps] = createSplitProps()(props, ["size"]);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.getTransparencyGridProps(gridProps), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ColorPickerTransparencyGrid.displayName = "ColorPickerTransparencyGrid";
+
+export { ColorPickerTransparencyGrid };

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

@@ -0,0 +1,21 @@
+'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 factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
+
+exports.ColorPickerTrigger = ColorPickerTrigger;

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

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

package/color-picker/color-picker-trigger.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 ColorPickerTrigger = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
+
+export { ColorPickerTrigger };

package/color-picker/color-picker.cjs

@@ -4,16 +4,48 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 
-const ColorPicker = (props) => {
-  const { children, ...useColorPickerProps } = props;
-  const colorPicker = useColorPicker.useColorPicker(useColorPickerProps);
-  const view = runIfFn.runIfFn(children, colorPicker);
-  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: colorPicker, children: view });
-};
+const ColorPicker = react.forwardRef((props, ref) => {
+  const [colorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "autoFocus",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "getRootNode",
+      "id",
+      "ids",
+      "initialFocusEl",
+      "name",
+      "name",
+      "onFocusOutside",
+      "onInteractOutside",
+      "onOpenChange",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueChangeEnd",
+      "open",
+      "positioning",
+      "readOnly",
+      "value"
+    ]
+  );
+  const api = useColorPicker.useColorPicker(colorPickerProps);
+  const view = runIfFn.runIfFn(children, api);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(colorPickerContext.ColorPickerProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
+});
+ColorPicker.displayName = "ColorPicker";
 
 exports.ColorPicker = ColorPicker;

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

@@ -1,9 +1,9 @@
-import { JSX } from 'react/jsx-runtime';
-import { type ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type ColorPickerContext } from './color-picker-context';
 import { type UseColorPickerProps } from './use-color-picker';
-export type ColorPickerProps = Assign<UseColorPickerProps, {
+export interface ColorPickerProps extends Assign<UseColorPickerProps, {
     children?: ReactNode | ((props: ColorPickerContext) => ReactNode);
-}>;
-export declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+}> {
+}
+export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker.mjs

@@ -1,15 +1,47 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import { jsxs, 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 { runIfFn } from '../run-if-fn.mjs';
 import { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
 
-const ColorPicker = (props) => {
-  const { children, ...useColorPickerProps } = props;
-  const colorPicker = useColorPicker(useColorPickerProps);
-  const view = runIfFn(children, colorPicker);
-  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: colorPicker, children: view });
-};
+const ColorPicker = forwardRef((props, ref) => {
+  const [colorPickerProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "autoFocus",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "getRootNode",
+      "id",
+      "ids",
+      "initialFocusEl",
+      "name",
+      "name",
+      "onFocusOutside",
+      "onInteractOutside",
+      "onOpenChange",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueChangeEnd",
+      "open",
+      "positioning",
+      "readOnly",
+      "value"
+    ]
+  );
+  const api = useColorPicker(colorPickerProps);
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxs(ColorPickerProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
+});
+ColorPicker.displayName = "ColorPicker";
 
 export { ColorPicker };

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

@@ -5,4 +5,3 @@ type ColorPickerType = typeof ColorPicker;
 declare const meta: Meta<ColorPickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Controlled: () => JSX.Element;

package/color-picker/index.cjs

@@ -5,52 +5,65 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const colorPicker = require('./color-picker.cjs');
 const colorPickerArea = require('./color-picker-area.cjs');
+const colorPickerAreaBackground = require('./color-picker-area-background.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
-const colorPickerAreaGradient = require('./color-picker-area-gradient.cjs');
 const colorPickerAreaThumb = require('./color-picker-area-thumb.cjs');
 const colorPickerChannelInput = require('./color-picker-channel-input.cjs');
-const colorPickerChannelSliderBackground = require('./color-picker-channel-slider-background.cjs');
+const colorPickerChannelSlider = require('./color-picker-channel-slider.cjs');
+const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerChannelSliderThumb = require('./color-picker-channel-slider-thumb.cjs');
 const colorPickerChannelSliderTrack = require('./color-picker-channel-slider-track.cjs');
 const colorPickerContent = require('./color-picker-content.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
+const colorPickerControl = require('./color-picker-control.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
+const colorPickerLabel = require('./color-picker-label.cjs');
+const colorPickerPositioner = require('./color-picker-positioner.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
-const colorPickerSwatchBackground = require('./color-picker-swatch-background.cjs');
-const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
-const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
+const colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
+const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
+const colorPickerTrigger = require('./color-picker-trigger.cjs');
 
 const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Root: colorPicker.ColorPicker,
   Area: colorPickerArea.ColorPickerArea,
-  AreaGradient: colorPickerAreaGradient.ColorPickerAreaGradient,
+  AreaBackground: colorPickerAreaBackground.ColorPickerAreaBackground,
   AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
   ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
-  ChannelSliderBackground: colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground,
+  ChannelSlider: colorPickerChannelSlider.ColorPickerChannelSlider,
   ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
   ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
   Content: colorPickerContent.ColorPickerContent,
+  Control: colorPickerControl.ColorPickerControl,
   EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  Label: colorPickerLabel.ColorPickerLabel,
+  Positioner: colorPickerPositioner.ColorPickerPositioner,
   Swatch: colorPickerSwatch.ColorPickerSwatch,
-  SwatchBackground: colorPickerSwatchBackground.ColorPickerSwatchBackground,
-  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup
+  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
+  SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
+  TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
+  Trigger: colorPickerTrigger.ColorPickerTrigger
 });
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
+exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
-exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
 exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
-exports.ColorPickerChannelSliderBackground = colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground;
+exports.ColorPickerChannelSlider = colorPickerChannelSlider.ColorPickerChannelSlider;
+exports.useColorPickerChannelSliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext;
 exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
+exports.ColorPickerControl = colorPickerControl.ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
+exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
-exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwatchBackground;
-exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
-exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
+exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
+exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
+exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -1,57 +1,45 @@
-import { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps } from '@zag-js/color-picker';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type ColorPickerProps } from './color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
-import { useColorPickerAreaContext } from './color-picker-area-context';
-import { ColorPickerAreaGradient, type ColorPickerAreaGradientProps } from './color-picker-area-gradient';
+import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
+import { useColorPickerAreaContext, type ColorPickerAreaContext } from './color-picker-area-context';
 import { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
 import { ColorPickerChannelInput, type ColorPickerChannelInputProps } from './color-picker-channel-input';
-import { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps } from './color-picker-channel-slider-background';
+import { ColorPickerChannelSlider, type ColorPickerChannelSliderProps } from './color-picker-channel-slider';
+import { useColorPickerChannelSliderContext, type ColorPickerChannelSliderContext } from './color-picker-channel-slider-context';
 import { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps } from './color-picker-channel-slider-thumb';
 import { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps } from './color-picker-channel-slider-track';
 import { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
-import { useColorPickerContext } from './color-picker-context';
+import { useColorPickerContext, type ColorPickerContext } from './color-picker-context';
+import { ColorPickerControl, type ColorPickerControlProps } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
+import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
-import { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps } from './color-picker-swatch-background';
-import { useColorPickerSwatchContext } from './color-picker-swatch-context';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
-import { colorPickerAnatomy } from './color-picker.anatomy';
-declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
-    Root: (props: ColorPickerProps) => JSX.Element;
-    Area: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
-    AreaGradient: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    AreaThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    ChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLInputElement>>;
-    ChannelSliderBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    ChannelSliderThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    ChannelSliderTrack: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    EyeDropperTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Swatch: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ColorSwatchProps> & ColorSwatchProps & RefAttributes<HTMLButtonElement>>;
-    SwatchBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    SwatchGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
+import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridPrps } from './color-picker-transparency-grid';
+import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
+declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+    Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
+    AreaBackground: ForwardRefExoticComponent<ColorPickerAreaBackgroundProps & RefAttributes<HTMLDivElement>>;
+    AreaThumb: ForwardRefExoticComponent<ColorPickerAreaThumbProps & RefAttributes<HTMLDivElement>>;
+    ChannelInput: ForwardRefExoticComponent<ColorPickerChannelInputProps & RefAttributes<HTMLInputElement>>;
+    ChannelSlider: ForwardRefExoticComponent<ColorPickerChannelSliderProps & RefAttributes<HTMLDivElement>>;
+    ChannelSliderThumb: ForwardRefExoticComponent<ColorPickerChannelSliderThumbProps & RefAttributes<HTMLDivElement>>;
+    ChannelSliderTrack: ForwardRefExoticComponent<ColorPickerChannelSliderTrackProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<ColorPickerControlProps & RefAttributes<HTMLDivElement>>;
+    EyeDropperTrigger: ForwardRefExoticComponent<ColorPickerEyeDropperTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Label: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;
+    Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
+    SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
+    SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
+    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup, colorPickerAnatomy, useColorPickerAreaContext, useColorPickerContext, useColorPickerSwatchContext, };
-export type { ColorPickerAreaGradientProps, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderBackgroundProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerEyeDropperTriggerProps, ColorPickerProps, ColorPickerSwatchBackgroundProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridPrps, ColorPickerTriggerProps, };

package/color-picker/index.mjs

@@ -1,36 +1,45 @@
 'use client';
 import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
 import { ColorPickerArea } from './color-picker-area.mjs';
+import { ColorPickerAreaBackground } from './color-picker-area-background.mjs';
 export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
-import { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
 import { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
 import { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
-import { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
+import { ColorPickerChannelSlider } from './color-picker-channel-slider.mjs';
+export { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
 import { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
 import { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
 import { ColorPickerContent } from './color-picker-content.mjs';
 export { useColorPickerContext } from './color-picker-context.mjs';
+import { ColorPickerControl } from './color-picker-control.mjs';
 import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+import { ColorPickerLabel } from './color-picker-label.mjs';
+import { ColorPickerPositioner } from './color-picker-positioner.mjs';
 import { ColorPickerSwatch } from './color-picker-swatch.mjs';
-import { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
-export { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
 import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
-export { colorPickerAnatomy } from './color-picker.anatomy.mjs';
+import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
+import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
+import { ColorPickerTrigger } from './color-picker-trigger.mjs';
 
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
   Area: ColorPickerArea,
-  AreaGradient: ColorPickerAreaGradient,
+  AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
   ChannelInput: ColorPickerChannelInput,
-  ChannelSliderBackground: ColorPickerChannelSliderBackground,
+  ChannelSlider: ColorPickerChannelSlider,
   ChannelSliderThumb: ColorPickerChannelSliderThumb,
   ChannelSliderTrack: ColorPickerChannelSliderTrack,
   Content: ColorPickerContent,
+  Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  Label: ColorPickerLabel,
+  Positioner: ColorPickerPositioner,
   Swatch: ColorPickerSwatch,
-  SwatchBackground: ColorPickerSwatchBackground,
-  SwatchGroup: ColorPickerSwatchGroup
+  SwatchGroup: ColorPickerSwatchGroup,
+  SwatchTrigger: ColorPickerSwatchTrigger,
+  TransparencyGrid: ColorPickerTransparencyGrid,
+  Trigger: ColorPickerTrigger
 });
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger };