@moduix/react 1.1.0 → 2.0.0

package/dist/components/color-picker/ColorPicker.css

@@ -1,8 +1,10 @@
 @layer ui.components {
-  @keyframes GCUAhG_color-picker-content-open {
+  @keyframes kgcaIq_color-picker-content-open {
     from {
-      opacity: var(--color-picker-content-closed-opacity, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -11,19 +13,20 @@
     }
   }
 
-  @keyframes GCUAhG_color-picker-content-closed {
+  @keyframes kgcaIq_color-picker-content-closed {
     from {
       opacity: 1;
       transform: scale(1);
     }
 
     to {
-      opacity: var(--color-picker-content-closed-opacity, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
-  .GCUAhG_root {
+  .kgcaIq_root {
     box-sizing: border-box;
     width: var(--color-picker-width, 16rem);
     max-width: var(--color-picker-max-width, 100%);
@@ -38,7 +41,7 @@
     }
   }
 
-  .GCUAhG_label {
+  .kgcaIq_label {
     color: var(--color-picker-label-color, var(--color-picker-color, var(--color-foreground)));
     font-size: var(--color-picker-label-font-size, var(--text-sm));
     font-weight: var(--color-picker-label-font-weight, var(--weight-medium));
@@ -52,7 +55,7 @@
     }
   }
 
-  .GCUAhG_control {
+  .kgcaIq_control {
     align-items: center;
     gap: var(--color-picker-control-gap, var(--spacing-2));
     min-width: 0;
@@ -63,7 +66,7 @@
     }
   }
 
-  .GCUAhG_trigger {
+  .kgcaIq_trigger {
     box-sizing: border-box;
     width: var(--color-picker-trigger-size, var(--size-lg));
     height: var(--color-picker-trigger-size, var(--size-lg));
@@ -98,14 +101,29 @@
     &:is([disabled], [data-disabled], [data-readonly]) {
       cursor: default;
     }
+
+    &[data-fit-content] {
+      width: auto;
+      min-width: var(--color-picker-trigger-size, var(--size-lg));
+      padding-inline: var(--color-picker-trigger-fit-content-padding-x, var(--spacing-3));
+      gap: var(--color-picker-trigger-fit-content-gap, var(--spacing-2));
+      display: inline-flex;
+    }
+
+    &[data-fit-content] [data-slot="color-picker-transparency-grid"], &[data-fit-content] [data-slot="color-picker-value-swatch"] {
+      width: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
+      height: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
+      flex-shrink: 0;
+      grid-area: auto;
+    }
   }
 
-  .GCUAhG_positioner {
+  .kgcaIq_positioner {
     z-index: var(--z-popup);
     outline: 0;
   }
 
-  .GCUAhG_content {
+  .kgcaIq_content {
     box-sizing: border-box;
     width: var(--color-picker-content-width, 16rem);
     max-width: var(--available-width);
@@ -126,16 +144,19 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: GCUAhG_color-picker-content-open var(--color-picker-transition, var(--transition-default));
+      animation: kgcaIq_color-picker-content-open
+        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: GCUAhG_color-picker-content-closed
-        var(--color-picker-transition, var(--transition-default));
+      animation: kgcaIq_color-picker-content-closed
+        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
-  .GCUAhG_area {
+  .kgcaIq_area {
     box-sizing: border-box;
     width: 100%;
     height: var(--color-picker-area-height, 10rem);
@@ -152,13 +173,13 @@
     }
   }
 
-  .GCUAhG_areaBackground {
+  .kgcaIq_areaBackground {
     border-radius: inherit;
     width: 100%;
     height: 100%;
   }
 
-  .GCUAhG_thumb {
+  .kgcaIq_thumb {
     box-sizing: border-box;
     width: var(--color-picker-thumb-size, 1rem);
     height: var(--color-picker-thumb-size, 1rem);
@@ -185,7 +206,7 @@
     }
   }
 
-  .GCUAhG_channelSlider {
+  .kgcaIq_channelSlider {
     box-sizing: border-box;
     height: var(--color-picker-channel-slider-height, var(--spacing-3));
     border-radius: var(--color-picker-channel-slider-radius, var(--radius-full));
@@ -203,7 +224,15 @@
     }
   }
 
-  .GCUAhG_channelSliderTrack {
+  .kgcaIq_sliders {
+    gap: var(--color-picker-sliders-gap, var(--spacing-2));
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .kgcaIq_channelSliderTrack {
     width: 100%;
     height: var(--color-picker-channel-slider-track-size, var(--spacing-3));
     border-radius: inherit;
@@ -216,20 +245,20 @@
     }
   }
 
-  .GCUAhG_channelSliderLabel {
+  .kgcaIq_channelSliderLabel {
     color: var(--color-picker-channel-slider-label-color, var(--color-picker-color, var(--color-foreground)));
     font-size: var(--color-picker-channel-slider-label-font-size, var(--text-sm));
     font-weight: var(--color-picker-channel-slider-label-font-weight, var(--weight-medium));
     line-height: var(--color-picker-channel-slider-label-line-height, var(--line-height-text-sm));
   }
 
-  .GCUAhG_channelSliderValueText {
+  .kgcaIq_channelSliderValueText {
     color: var(--color-picker-channel-slider-value-color, var(--color-muted-foreground));
     font-size: var(--color-picker-channel-slider-value-font-size, var(--text-sm));
     line-height: var(--color-picker-channel-slider-value-line-height, var(--line-height-text-sm));
   }
 
-  .GCUAhG_channelInput, .GCUAhG_formatSelect {
+  .kgcaIq_channelInput, .kgcaIq_formatSelect {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -270,7 +299,7 @@
     }
   }
 
-  .GCUAhG_channelInput {
+  .kgcaIq_channelInput {
     flex: 1;
 
     &[data-channel="alpha"] {
@@ -279,12 +308,12 @@
     }
   }
 
-  .GCUAhG_formatSelect {
+  .kgcaIq_formatSelect {
     cursor: pointer;
     width: auto;
   }
 
-  .GCUAhG_eyeDropperTrigger, .GCUAhG_formatTrigger {
+  .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
     box-sizing: border-box;
     height: var(--color-picker-action-size, var(--size-lg));
     min-width: var(--color-picker-action-size, var(--size-lg));
@@ -335,13 +364,13 @@
     }
   }
 
-  .GCUAhG_swatchGroup {
+  .kgcaIq_swatchGroup {
     gap: var(--color-picker-swatch-gap, var(--spacing-2));
     flex-wrap: wrap;
     display: flex;
   }
 
-  .GCUAhG_swatchTrigger {
+  .kgcaIq_swatchTrigger {
     border-radius: var(--color-picker-swatch-radius, var(--radius-sm));
     cursor: pointer;
     background: none;
@@ -364,7 +393,7 @@
     }
   }
 
-  .GCUAhG_swatch {
+  .kgcaIq_swatch {
     box-sizing: border-box;
     width: var(--color-picker-swatch-size, 2rem);
     height: var(--color-picker-swatch-size, 2rem);
@@ -378,7 +407,7 @@
     overflow: hidden;
   }
 
-  .GCUAhG_swatchIndicator {
+  .kgcaIq_swatchIndicator {
     color: var(--color-picker-swatch-indicator-color, white);
     filter: drop-shadow(0 1px 1px #00000073);
     pointer-events: none;
@@ -398,14 +427,14 @@
     }
   }
 
-  .GCUAhG_transparencyGrid {
+  .kgcaIq_transparencyGrid {
     border-radius: inherit;
     grid-area: 1 / 1;
     width: 100%;
     height: 100%;
   }
 
-  .GCUAhG_valueSwatch {
+  .kgcaIq_valueSwatch {
     border-radius: inherit;
     z-index: 1;
     grid-area: 1 / 1;
@@ -413,14 +442,14 @@
     height: 100%;
   }
 
-  .GCUAhG_valueText {
+  .kgcaIq_valueText {
     min-width: 0;
     color: var(--color-picker-value-text-color, var(--color-picker-color, var(--color-foreground)));
     font-size: var(--color-picker-value-text-font-size, var(--text-sm));
     line-height: var(--color-picker-value-text-line-height, var(--line-height-text-sm));
   }
 
-  .GCUAhG_view {
+  .kgcaIq_view {
     gap: var(--color-picker-view-gap, var(--spacing-2));
     flex-direction: column;
     min-width: 0;

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 
 //#region src/components/color-picker/ColorPicker.d.ts
 type ColorPickerRootProps = ComponentProps<typeof ColorPicker.Root> & OverlayPortalProps;
@@ -17,6 +17,7 @@ declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<Colo
   AreaBackground: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   AreaThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSlider: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Sliders: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderTrack: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderTrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ChannelSliderLabel: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderLabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
@@ -33,7 +34,6 @@ declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<Colo
   ValueSwatch: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueSwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   View: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ViewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<ColorPicker.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 //#endregion
-export { ColorPicker$1 as ColorPicker, parseColor };
+export { ColorPicker$1 as ColorPicker, parseColor, useColorPicker, useColorPickerContext };

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

@@ -1,33 +1,37 @@
-import { CheckIcon, PipetteIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, PipetteIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import ColorPicker_module_default from "./ColorPicker.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/ColorPicker.tsx
-const ColorPickerRoot = forwardRef(function ColorPickerRoot({ className, portalled, portalRef, ...props }, ref) {
+const ColorPickerRoot = forwardRef(function ColorPickerRoot({ asChild, children, className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
 		children: /* @__PURE__ */ jsx(ColorPicker.Root, {
 			ref,
+			asChild,
 			"data-slot": "color-picker-root",
 			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
-			...props
+			...props,
+			children: withHiddenInput(children, asChild)
 		})
 	});
 });
-const ColorPickerRootProvider = forwardRef(function ColorPickerRootProvider({ className, portalled, portalRef, ...props }, ref) {
+const ColorPickerRootProvider = forwardRef(function ColorPickerRootProvider({ asChild, children, className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
 		children: /* @__PURE__ */ jsx(ColorPicker.RootProvider, {
 			ref,
+			asChild,
 			"data-slot": "color-picker-root-provider",
 			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
-			...props
+			...props,
+			children: withHiddenInput(children, asChild)
 		})
 	});
 });
@@ -47,12 +51,19 @@ const ColorPickerControl = forwardRef(function ColorPickerControl({ className, .
 		...props
 	});
 });
-const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ className, ...props }, ref) {
+const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.Trigger, {
 		ref,
 		"data-slot": "color-picker-trigger",
 		className: clsx(ColorPicker_module_default.trigger, normalizeClassName(className)),
-		...props
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorPicker.TransparencyGrid, {
+			"data-slot": "color-picker-transparency-grid",
+			className: ColorPicker_module_default.transparencyGrid
+		}), /* @__PURE__ */ jsx(ColorPicker.ValueSwatch, {
+			"data-slot": "color-picker-value-swatch",
+			className: ColorPicker_module_default.valueSwatch
+		})] })
 	});
 });
 const ColorPickerPositioner = forwardRef(function ColorPickerPositioner({ className, ...props }, ref) {
@@ -71,12 +82,19 @@ const ColorPickerContent = forwardRef(function ColorPickerContent({ className, .
 		...props
 	});
 });
-const ColorPickerArea = forwardRef(function ColorPickerArea({ className, ...props }, ref) {
+const ColorPickerArea = forwardRef(function ColorPickerArea({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.Area, {
 		ref,
 		"data-slot": "color-picker-area",
 		className: clsx(ColorPicker_module_default.area, normalizeClassName(className)),
-		...props
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorPicker.AreaBackground, {
+			"data-slot": "color-picker-area-background",
+			className: ColorPicker_module_default.areaBackground
+		}), /* @__PURE__ */ jsx(ColorPicker.AreaThumb, {
+			"data-slot": "color-picker-area-thumb",
+			className: ColorPicker_module_default.thumb
+		})] })
 	});
 });
 const ColorPickerAreaBackground = forwardRef(function ColorPickerAreaBackground({ className, ...props }, ref) {
@@ -95,12 +113,36 @@ const ColorPickerAreaThumb = forwardRef(function ColorPickerAreaThumb({ classNam
 		...props
 	});
 });
-const ColorPickerChannelSlider = forwardRef(function ColorPickerChannelSlider({ className, ...props }, ref) {
+const ColorPickerChannelSlider = forwardRef(function ColorPickerChannelSlider({ className, children, channel, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.ChannelSlider, {
 		ref,
 		"data-slot": "color-picker-channel-slider",
 		className: clsx(ColorPicker_module_default.channelSlider, normalizeClassName(className)),
-		...props
+		channel,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			channel === "alpha" && /* @__PURE__ */ jsx(ColorPicker.TransparencyGrid, {
+				"data-slot": "color-picker-transparency-grid",
+				className: ColorPicker_module_default.transparencyGrid
+			}),
+			/* @__PURE__ */ jsx(ColorPicker.ChannelSliderTrack, {
+				"data-slot": "color-picker-channel-slider-track",
+				className: ColorPicker_module_default.channelSliderTrack
+			}),
+			/* @__PURE__ */ jsx(ColorPicker.ChannelSliderThumb, {
+				"data-slot": "color-picker-channel-slider-thumb",
+				className: ColorPicker_module_default.thumb
+			})
+		] })
+	});
+});
+const ColorPickerSliders = forwardRef(function ColorPickerSliders({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "color-picker-sliders",
+		className: clsx(ColorPicker_module_default.sliders, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "hue" }), /* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "alpha" })]
 	});
 });
 const ColorPickerChannelSliderTrack = forwardRef(function ColorPickerChannelSliderTrack({ className, ...props }, ref) {
@@ -176,12 +218,23 @@ const ColorPickerSwatchGroup = forwardRef(function ColorPickerSwatchGroup({ clas
 		...props
 	});
 });
-const ColorPickerSwatchTrigger = forwardRef(function ColorPickerSwatchTrigger({ className, ...props }, ref) {
+const ColorPickerSwatchTrigger = forwardRef(function ColorPickerSwatchTrigger({ className, children, value, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.SwatchTrigger, {
 		ref,
 		"data-slot": "color-picker-swatch-trigger",
 		className: clsx(ColorPicker_module_default.swatchTrigger, normalizeClassName(className)),
-		...props
+		value,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ColorPicker.Swatch, {
+			"data-slot": "color-picker-swatch",
+			className: ColorPicker_module_default.swatch,
+			value,
+			children: /* @__PURE__ */ jsx(ColorPicker.SwatchIndicator, {
+				"data-slot": "color-picker-swatch-indicator",
+				className: ColorPicker_module_default.swatchIndicator,
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		})
 	});
 });
 const ColorPickerSwatch = forwardRef(function ColorPickerSwatch({ className, ...props }, ref) {
@@ -233,14 +286,12 @@ const ColorPickerView = forwardRef(function ColorPickerView({ className, ...prop
 		...props
 	});
 });
-const ColorPickerHiddenInput = forwardRef(function ColorPickerHiddenInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ColorPicker.HiddenInput, {
-		ref,
-		"data-slot": "color-picker-hidden-input",
-		className: normalizeClassName(className),
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(ColorPicker.HiddenInput, { "data-slot": "color-picker-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	Root: ColorPickerRoot,
 	RootProvider: ColorPickerRootProvider,
@@ -253,6 +304,7 @@ const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	AreaBackground: ColorPickerAreaBackground,
 	AreaThumb: ColorPickerAreaThumb,
 	ChannelSlider: ColorPickerChannelSlider,
+	Sliders: ColorPickerSliders,
 	ChannelSliderTrack: ColorPickerChannelSliderTrack,
 	ChannelSliderThumb: ColorPickerChannelSliderThumb,
 	ChannelSliderLabel: ColorPickerChannelSliderLabel,
@@ -268,8 +320,7 @@ const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	TransparencyGrid: ColorPickerTransparencyGrid,
 	ValueSwatch: ColorPickerValueSwatch,
 	ValueText: ColorPickerValueText,
-	View: ColorPickerView,
-	HiddenInput: ColorPickerHiddenInput
+	View: ColorPickerView
 });
 //#endregion
-export { ColorPicker$1 as ColorPicker, parseColor };
+export { ColorPicker$1 as ColorPicker, parseColor, useColorPicker, useColorPickerContext };

package/dist/components/color-picker/ColorPicker.module.js

@@ -1,33 +1,34 @@
 import './ColorPicker.css';
 //#region src/components/color-picker/ColorPicker.module.css
 var ColorPicker_module_default = {
-	"area": "GCUAhG_area",
-	"areaBackground": "GCUAhG_areaBackground",
-	"channelInput": "GCUAhG_channelInput",
-	"channelSlider": "GCUAhG_channelSlider",
-	"channelSliderLabel": "GCUAhG_channelSliderLabel",
-	"channelSliderTrack": "GCUAhG_channelSliderTrack",
-	"channelSliderValueText": "GCUAhG_channelSliderValueText",
-	"color-picker-content-closed": "GCUAhG_color-picker-content-closed",
-	"color-picker-content-open": "GCUAhG_color-picker-content-open",
-	"content": "GCUAhG_content",
-	"control": "GCUAhG_control",
-	"eyeDropperTrigger": "GCUAhG_eyeDropperTrigger",
-	"formatSelect": "GCUAhG_formatSelect",
-	"formatTrigger": "GCUAhG_formatTrigger",
-	"label": "GCUAhG_label",
-	"positioner": "GCUAhG_positioner",
-	"root": "GCUAhG_root",
-	"swatch": "GCUAhG_swatch",
-	"swatchGroup": "GCUAhG_swatchGroup",
-	"swatchIndicator": "GCUAhG_swatchIndicator",
-	"swatchTrigger": "GCUAhG_swatchTrigger",
-	"thumb": "GCUAhG_thumb",
-	"transparencyGrid": "GCUAhG_transparencyGrid",
-	"trigger": "GCUAhG_trigger",
-	"valueSwatch": "GCUAhG_valueSwatch",
-	"valueText": "GCUAhG_valueText",
-	"view": "GCUAhG_view"
+	"area": "kgcaIq_area",
+	"areaBackground": "kgcaIq_areaBackground",
+	"channelInput": "kgcaIq_channelInput",
+	"channelSlider": "kgcaIq_channelSlider",
+	"channelSliderLabel": "kgcaIq_channelSliderLabel",
+	"channelSliderTrack": "kgcaIq_channelSliderTrack",
+	"channelSliderValueText": "kgcaIq_channelSliderValueText",
+	"color-picker-content-closed": "kgcaIq_color-picker-content-closed",
+	"color-picker-content-open": "kgcaIq_color-picker-content-open",
+	"content": "kgcaIq_content",
+	"control": "kgcaIq_control",
+	"eyeDropperTrigger": "kgcaIq_eyeDropperTrigger",
+	"formatSelect": "kgcaIq_formatSelect",
+	"formatTrigger": "kgcaIq_formatTrigger",
+	"label": "kgcaIq_label",
+	"positioner": "kgcaIq_positioner",
+	"root": "kgcaIq_root",
+	"sliders": "kgcaIq_sliders",
+	"swatch": "kgcaIq_swatch",
+	"swatchGroup": "kgcaIq_swatchGroup",
+	"swatchIndicator": "kgcaIq_swatchIndicator",
+	"swatchTrigger": "kgcaIq_swatchTrigger",
+	"thumb": "kgcaIq_thumb",
+	"transparencyGrid": "kgcaIq_transparencyGrid",
+	"trigger": "kgcaIq_trigger",
+	"valueSwatch": "kgcaIq_valueSwatch",
+	"valueText": "kgcaIq_valueText",
+	"view": "kgcaIq_view"
 };
 //#endregion
 export { ColorPicker_module_default as default };

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

@@ -1,2 +1,2 @@
-import { ColorPicker, parseColor } from "./ColorPicker.js";
-export { ColorPicker, parseColor };
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "./ColorPicker.js";
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };