@ark-ui/react 1.3.0 → 2.0.1

package/checkbox/index.cjs

@@ -1,23 +1,19 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const checkbox = require('./checkbox.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
+const checkboxRoot = require('./checkbox-root.cjs');
+const checkbox = require('./checkbox.cjs');
+
 
-const Checkbox = Object.assign(checkbox.Checkbox, {
-  Root: checkbox.Checkbox,
-  Control: checkboxControl.CheckboxControl,
-  Label: checkboxLabel.CheckboxLabel,
-  Indicator: checkboxIndicator.CheckboxIndicator
-});
 
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
-exports.Checkbox = Checkbox;
+exports.CheckboxRoot = checkboxRoot.CheckboxRoot;
+exports.Checkbox = checkbox;

package/checkbox/index.d.ts

@@ -1,16 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
-import { type CheckboxProps } from './checkbox';
+import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxState } from '@zag-js/checkbox';
 import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
 import { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
-declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;
-    Control: ForwardRefExoticComponent<CheckboxControlProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<CheckboxLabelProps & RefAttributes<HTMLSpanElement>>;
-    Indicator: ForwardRefExoticComponent<CheckboxIndicatorProps & RefAttributes<HTMLDivElement>>;
-};
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
-export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };
+import { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
+export * as Checkbox from './checkbox';
+export { CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, useCheckboxContext };
+export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxRootProps, CheckboxState, };

package/checkbox/index.mjs

@@ -1,15 +1,7 @@
-'use client';
-import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
-import { CheckboxControl } from './checkbox-control.mjs';
-import { CheckboxIndicator } from './checkbox-indicator.mjs';
-import { CheckboxLabel } from './checkbox-label.mjs';
-
-const Checkbox = Object.assign(Checkbox$1, {
-  Root: Checkbox$1,
-  Control: CheckboxControl,
-  Label: CheckboxLabel,
-  Indicator: CheckboxIndicator
-});
-
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel };
+export { CheckboxControl } from './checkbox-control.mjs';
+export { CheckboxIndicator } from './checkbox-indicator.mjs';
+export { CheckboxLabel } from './checkbox-label.mjs';
+export { CheckboxRoot } from './checkbox-root.mjs';
+import * as checkbox from './checkbox.mjs';
+export { checkbox as Checkbox };

package/checkbox/use-checkbox.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkbox = require('@zag-js/checkbox');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/checkbox/use-checkbox.mjs

@@ -2,9 +2,8 @@
 import * as checkbox from '@zag-js/checkbox';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useCheckbox = (props = {}) => {
   const initialContext = {

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

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const colorPickerContext = require('./color-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerContent = react.forwardRef(
   (props, ref) => {

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

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useColorPickerContext } from './color-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerContent = forwardRef(
   (props, ref) => {

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

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const colorPickerContext = require('./color-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerPositioner = react.forwardRef(
   (props, ref) => {

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

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useColorPickerContext } from './color-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerPositioner = forwardRef(
   (props, ref) => {

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

@@ -0,0 +1,55 @@
+'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 presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+const useColorPicker = require('./use-color-picker.cjs');
+
+const ColorPickerRoot = react.forwardRef((props, ref) => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useColorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(colorPickerProps, [
+    "closeOnSelect",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "format",
+    "getRootNode",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onFormatChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "positioning",
+    "readOnly",
+    "value"
+  ]);
+  const api = useColorPicker.useColorPicker(useColorPickerProps);
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
+  const view = runIfFn.runIfFn(children, api);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsxs(presenceContext.PresenceProvider, { value: presenceApi, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] }) });
+});
+ColorPickerRoot.displayName = "ColorPickerRoot";
+
+exports.ColorPickerRoot = ColorPickerRoot;

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

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import { type Assign } from '../types';
+import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
+export interface ColorPickerRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseColorPickerReturn) => ReactNode);
+}>, UseColorPickerProps>, UsePresenceProps {
+}
+export declare const ColorPickerRoot: ForwardRefExoticComponent<ColorPickerRootProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-root.mjs

@@ -0,0 +1,51 @@
+'use client';
+import { jsx, jsxs } 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 { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { ColorPickerProvider } from './color-picker-context.mjs';
+import { useColorPicker } from './use-color-picker.mjs';
+
+const ColorPickerRoot = forwardRef((props, ref) => {
+  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+  const [useColorPickerProps, { children, ...localProps }] = createSplitProps()(colorPickerProps, [
+    "closeOnSelect",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "format",
+    "getRootNode",
+    "id",
+    "ids",
+    "initialFocusEl",
+    "name",
+    "name",
+    "onFocusOutside",
+    "onFormatChange",
+    "onInteractOutside",
+    "onOpenChange",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueChangeEnd",
+    "open",
+    "positioning",
+    "readOnly",
+    "value"
+  ]);
+  const api = useColorPicker(useColorPickerProps);
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxs(PresenceProvider, { value: presenceApi, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] }) });
+});
+ColorPickerRoot.displayName = "ColorPickerRoot";
+
+export { ColorPickerRoot };

package/color-picker/color-picker.cjs

@@ -1,56 +1,53 @@
-'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');
-require('../presence/index.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const colorPickerContext = require('./color-picker-context.cjs');
-const useColorPicker = require('./use-color-picker.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const colorPickerArea = require('./color-picker-area.cjs');
+const colorPickerAreaBackground = require('./color-picker-area-background.cjs');
+const colorPickerAreaThumb = require('./color-picker-area-thumb.cjs');
+const colorPickerChannelInput = require('./color-picker-channel-input.cjs');
+const colorPickerChannelSlider = require('./color-picker-channel-slider.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 colorPickerControl = require('./color-picker-control.cjs');
+const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
+const colorPickerFormatSelect = require('./color-picker-format-select.cjs');
+const colorPickerFormatTrigger = require('./color-picker-format-trigger.cjs');
+const colorPickerLabel = require('./color-picker-label.cjs');
+const colorPickerPositioner = require('./color-picker-positioner.cjs');
+const colorPickerRoot = require('./color-picker-root.cjs');
+const colorPickerSwatch = require('./color-picker-swatch.cjs');
+const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
+const colorPickerSwatchIndicator = require('./color-picker-swatch-indicator.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 colorPickerValueText = require('./color-picker-value-text.cjs');
+const colorPickerView = require('./color-picker-view.cjs');
 
-const ColorPicker = react.forwardRef((props, ref) => {
-  const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useColorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(colorPickerProps, [
-    "closeOnSelect",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "format",
-    "getRootNode",
-    "id",
-    "ids",
-    "initialFocusEl",
-    "name",
-    "name",
-    "onFocusOutside",
-    "onFormatChange",
-    "onInteractOutside",
-    "onOpenChange",
-    "onPointerDownOutside",
-    "onValueChange",
-    "onValueChangeEnd",
-    "open",
-    "positioning",
-    "readOnly",
-    "value"
-  ]);
-  const api = useColorPicker.useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn.runIfFn(children, api);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsxs(presenceContext.PresenceProvider, { value: presenceApi, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] }) });
-});
-ColorPicker.displayName = "ColorPicker";
 
-exports.ColorPicker = ColorPicker;
+
+exports.Area = colorPickerArea.ColorPickerArea;
+exports.AreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
+exports.AreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
+exports.ChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
+exports.ChannelSlider = colorPickerChannelSlider.ColorPickerChannelSlider;
+exports.ChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
+exports.ChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
+exports.Content = colorPickerContent.ColorPickerContent;
+exports.Control = colorPickerControl.ColorPickerControl;
+exports.EyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.FormatSelect = colorPickerFormatSelect.ColorPickerFormatSelect;
+exports.FormatTrigger = colorPickerFormatTrigger.ColorPickerFormatTrigger;
+exports.Label = colorPickerLabel.ColorPickerLabel;
+exports.Positioner = colorPickerPositioner.ColorPickerPositioner;
+exports.Root = colorPickerRoot.ColorPickerRoot;
+exports.Swatch = colorPickerSwatch.ColorPickerSwatch;
+exports.SwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
+exports.SwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;
+exports.SwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
+exports.TransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
+exports.Trigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ValueText = colorPickerValueText.ColorPickerValueText;
+exports.View = colorPickerView.ColorPickerView;

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

@@ -1,10 +1,24 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import { type Assign } from '../types';
-import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
-export interface ColorPickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseColorPickerReturn) => ReactNode);
-}>, UseColorPickerProps>, UsePresenceProps {
-}
-export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+import { ColorPickerArea as Area } from './color-picker-area';
+import { ColorPickerAreaBackground as AreaBackground } from './color-picker-area-background';
+import { ColorPickerAreaThumb as AreaThumb } from './color-picker-area-thumb';
+import { ColorPickerChannelInput as ChannelInput } from './color-picker-channel-input';
+import { ColorPickerChannelSlider as ChannelSlider } from './color-picker-channel-slider';
+import { ColorPickerChannelSliderThumb as ChannelSliderThumb } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack as ChannelSliderTrack } from './color-picker-channel-slider-track';
+import { ColorPickerContent as Content } from './color-picker-content';
+import { ColorPickerControl as Control } from './color-picker-control';
+import { ColorPickerEyeDropperTrigger as EyeDropperTrigger } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect as FormatSelect } from './color-picker-format-select';
+import { ColorPickerFormatTrigger as FormatTrigger } from './color-picker-format-trigger';
+import { ColorPickerLabel as Label } from './color-picker-label';
+import { ColorPickerPositioner as Positioner } from './color-picker-positioner';
+import { ColorPickerRoot as Root } from './color-picker-root';
+import { ColorPickerSwatch as Swatch } from './color-picker-swatch';
+import { ColorPickerSwatchGroup as SwatchGroup } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator as SwatchIndicator } from './color-picker-swatch-indicator';
+import { ColorPickerSwatchTrigger as SwatchTrigger } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid as TransparencyGrid } from './color-picker-transparency-grid';
+import { ColorPickerTrigger as Trigger } from './color-picker-trigger';
+import { ColorPickerValueText as ValueText } from './color-picker-value-text';
+import { ColorPickerView as View } from './color-picker-view';
+export { Area, AreaBackground, AreaThumb, ChannelInput, ChannelSlider, ChannelSliderThumb, ChannelSliderTrack, Content, Control, EyeDropperTrigger, FormatSelect, FormatTrigger, Label, Positioner, Root, Swatch, SwatchGroup, SwatchIndicator, SwatchTrigger, TransparencyGrid, Trigger, ValueText, View, };

package/color-picker/color-picker.mjs

@@ -1,52 +1,23 @@
-'use client';
-import { jsx, jsxs } 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 '../presence/index.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { ColorPickerProvider } from './color-picker-context.mjs';
-import { useColorPicker } from './use-color-picker.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
-
-const ColorPicker = forwardRef((props, ref) => {
-  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, { children, ...localProps }] = createSplitProps()(colorPickerProps, [
-    "closeOnSelect",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "format",
-    "getRootNode",
-    "id",
-    "ids",
-    "initialFocusEl",
-    "name",
-    "name",
-    "onFocusOutside",
-    "onFormatChange",
-    "onInteractOutside",
-    "onOpenChange",
-    "onPointerDownOutside",
-    "onValueChange",
-    "onValueChangeEnd",
-    "open",
-    "positioning",
-    "readOnly",
-    "value"
-  ]);
-  const api = useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
-  const view = runIfFn(children, api);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxs(PresenceProvider, { value: presenceApi, children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] }) });
-});
-ColorPicker.displayName = "ColorPicker";
-
-export { ColorPicker };
+export { ColorPickerArea as Area } from './color-picker-area.mjs';
+export { ColorPickerAreaBackground as AreaBackground } from './color-picker-area-background.mjs';
+export { ColorPickerAreaThumb as AreaThumb } from './color-picker-area-thumb.mjs';
+export { ColorPickerChannelInput as ChannelInput } from './color-picker-channel-input.mjs';
+export { ColorPickerChannelSlider as ChannelSlider } from './color-picker-channel-slider.mjs';
+export { ColorPickerChannelSliderThumb as ChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
+export { ColorPickerChannelSliderTrack as ChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
+export { ColorPickerContent as Content } from './color-picker-content.mjs';
+export { ColorPickerControl as Control } from './color-picker-control.mjs';
+export { ColorPickerEyeDropperTrigger as EyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerFormatSelect as FormatSelect } from './color-picker-format-select.mjs';
+export { ColorPickerFormatTrigger as FormatTrigger } from './color-picker-format-trigger.mjs';
+export { ColorPickerLabel as Label } from './color-picker-label.mjs';
+export { ColorPickerPositioner as Positioner } from './color-picker-positioner.mjs';
+export { ColorPickerRoot as Root } from './color-picker-root.mjs';
+export { ColorPickerSwatch as Swatch } from './color-picker-swatch.mjs';
+export { ColorPickerSwatchGroup as SwatchGroup } from './color-picker-swatch-group.mjs';
+export { ColorPickerSwatchIndicator as SwatchIndicator } from './color-picker-swatch-indicator.mjs';
+export { ColorPickerSwatchTrigger as SwatchTrigger } from './color-picker-swatch-trigger.mjs';
+export { ColorPickerTransparencyGrid as TransparencyGrid } from './color-picker-transparency-grid.mjs';
+export { ColorPickerTrigger as Trigger } from './color-picker-trigger.mjs';
+export { ColorPickerValueText as ValueText } from './color-picker-value-text.mjs';
+export { ColorPickerView as View } from './color-picker-view.mjs';

package/color-picker/index.cjs

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 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');
@@ -21,6 +19,7 @@ const colorPickerFormatSelect = require('./color-picker-format-select.cjs');
 const colorPickerFormatTrigger = require('./color-picker-format-trigger.cjs');
 const colorPickerLabel = require('./color-picker-label.cjs');
 const colorPickerPositioner = require('./color-picker-positioner.cjs');
+const colorPickerRoot = require('./color-picker-root.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPickerSwatchIndicator = require('./color-picker-swatch-indicator.cjs');
@@ -29,32 +28,9 @@ const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cj
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
 const colorPickerValueText = require('./color-picker-value-text.cjs');
 const colorPickerView = require('./color-picker-view.cjs');
+const colorPicker = require('./color-picker.cjs');
+
 
-const ColorPicker = Object.assign(colorPicker.ColorPicker, {
-  Root: colorPicker.ColorPicker,
-  Area: colorPickerArea.ColorPickerArea,
-  AreaBackground: colorPickerAreaBackground.ColorPickerAreaBackground,
-  AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
-  ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
-  ChannelSlider: colorPickerChannelSlider.ColorPickerChannelSlider,
-  ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
-  ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
-  Content: colorPickerContent.ColorPickerContent,
-  Control: colorPickerControl.ColorPickerControl,
-  EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
-  FormatTrigger: colorPickerFormatTrigger.ColorPickerFormatTrigger,
-  FormatSelect: colorPickerFormatSelect.ColorPickerFormatSelect,
-  Label: colorPickerLabel.ColorPickerLabel,
-  Positioner: colorPickerPositioner.ColorPickerPositioner,
-  Swatch: colorPickerSwatch.ColorPickerSwatch,
-  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
-  SwatchIndicator: colorPickerSwatchIndicator.ColorPickerSwatchIndicator,
-  SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
-  TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
-  Trigger: colorPickerTrigger.ColorPickerTrigger,
-  ValueText: colorPickerValueText.ColorPickerValueText,
-  View: colorPickerView.ColorPickerView
-});
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
 exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
@@ -73,6 +49,7 @@ exports.ColorPickerFormatSelect = colorPickerFormatSelect.ColorPickerFormatSelec
 exports.ColorPickerFormatTrigger = colorPickerFormatTrigger.ColorPickerFormatTrigger;
 exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
 exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
+exports.ColorPickerRoot = colorPickerRoot.ColorPickerRoot;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;
@@ -81,4 +58,4 @@ exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTra
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPickerView = colorPickerView.ColorPickerView;
-exports.ColorPicker = ColorPicker;
+exports.ColorPicker = colorPicker;

package/color-picker/index.d.ts

@@ -1,7 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails } from '@zag-js/color-picker';
-import { type ColorPickerProps } from './color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
 import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
 import { useColorPickerAreaContext, type ColorPickerAreaContext } from './color-picker-area-context';
@@ -19,6 +16,7 @@ import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './co
 import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
+import { ColorPickerRoot, type ColorPickerRootProps } from './color-picker-root';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
@@ -27,30 +25,6 @@ import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } fr
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
-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>>;
-    FormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;
-    FormatSelect: ForwardRefExoticComponent<ColorPickerFormatSelectProps & RefAttributes<HTMLSelectElement>>;
-    Label: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;
-    Positioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;
-    Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
-    SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
-    SwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;
-    SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
-    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
-    ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
-    View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
-};
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatChangeDetails, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerOpenChangeDetails, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueChangeDetails, ColorPickerValueTextProps, ColorPickerViewProps, };
+export * as ColorPicker from './color-picker';
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatChangeDetails, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerOpenChangeDetails, ColorPickerPositionerProps, ColorPickerRootProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueChangeDetails, ColorPickerValueTextProps, ColorPickerViewProps, };