@justanarthur/modo-ui 0.1.0 → 0.3.0

package/dist/shared/{components-r2gke5p6.js → components-jthe1pwb.js}

@@ -1,51 +1,51 @@
 import {
-  Slider
-} from "./components-8hk9ve3r.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  Tooltip
-} from "./components-gndm6am4.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
   useIcon
-} from "./components-m5br529r.js";
-import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  SurfaceProvider,
-  surfaceClasses,
-  useSurface
-} from "./components-csxz9f52.js";
+} from "./components-zrkzcayz.js";
 import {
   MorphSurface
-} from "./components-jxgznftn.js";
-import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
-import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+} from "./components-0q0sqfh4.js";
 import {
   shapeMap,
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  inPlaceOffset,
-  opensInPlace,
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  surfaceClasses2,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  Tooltip2
+} from "./components-ng72k97e.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  Slider2
+} from "./components-wvp1m52g.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/color-picker/index.tsx
 import { Menu } from "@base-ui/react/menu";
@@ -64,7 +64,7 @@ import {
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ColorPickerPortalContainerContext = createContext(null);
-function ColorPickerPortalContainer({ value, children }) {
+function ColorPickerPortalContainer2({ value, children }) {
   return /* @__PURE__ */ jsx(ColorPickerPortalContainerContext.Provider, {
     value,
     children
@@ -283,7 +283,7 @@ function parseAlphaPart(part) {
     return 1;
   return part.endsWith("%") ? parseFloat(part) / 100 : parseFloat(part);
 }
-function parseColor(input) {
+function parseColor2(input) {
   const s = input.trim();
   if (!s)
     return null;
@@ -335,7 +335,7 @@ function parseColor(input) {
 }
 var cssColorCtx = null;
 function resolveCssColor(input) {
-  const direct = parseColor(input);
+  const direct = parseColor2(input);
   if (direct)
     return direct;
   const s = input.trim();
@@ -355,9 +355,9 @@ function resolveCssColor(input) {
   const second = String(ctx.fillStyle);
   if (first !== second)
     return null;
-  return parseColor(first);
+  return parseColor2(first);
 }
-function buildParsed(h, s, v, a) {
+function buildParsed2(h, s, v, a) {
   const { r, g, b } = hsvToRgb(h, s, v);
   const hsl = rgbToHsl(r, g, b);
   const oklch = rgbToOklch(r, g, b);
@@ -481,13 +481,13 @@ function SaturationSquare({ h, s, v, onChange }) {
     onPointerMove,
     onPointerUp,
     onKeyDown,
-    className: cn("relative w-full select-none touch-none cursor-none outline-none", focused && "ring-2 ring-focus-ring", shape.bg),
+    className: cn2("relative w-full select-none touch-none cursor-none outline-none", focused && "ring-2 ring-focus-ring", shape.bg),
     style: {
       height: SQUARE_HEIGHT
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        className: cn("absolute inset-0 overflow-hidden", shape.bg === "rounded-[20px]" ? "rounded-2xl" : shape.bg),
+        className: cn2("absolute inset-0 overflow-hidden", shape.bg === "rounded-[20px]" ? "rounded-2xl" : shape.bg),
         style: {
           background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${h}, 100%, 50%))`
         }
@@ -522,7 +522,7 @@ function SaturationSquare({ h, s, v, onChange }) {
 }
 function HueSlider({ h, onChange }) {
   const hueColor = `hsl(${h}, 100%, 50%)`;
-  return /* @__PURE__ */ jsx(Slider, {
+  return /* @__PURE__ */ jsx(Slider2, {
     value: h,
     onChange: (v) => onChange(typeof v === "number" ? v : v[0] ?? 0),
     min: 0,
@@ -548,7 +548,7 @@ function AlphaSlider({
   onChange
 }) {
   const transparentColor = `rgba(${solidR}, ${solidG}, ${solidB}, 0)`;
-  return /* @__PURE__ */ jsx(Slider, {
+  return /* @__PURE__ */ jsx(Slider2, {
     value: Math.round(a * 100),
     onChange: (v) => onChange((typeof v === "number" ? v : v[0] ?? 0) / 100),
     min: 0,
@@ -584,9 +584,9 @@ function FormatItem({
   const ref = useRef(null);
   const menuCtx = useContext(FormatMenuContext);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
-  useRegisterFluidHoverItem(menuCtx?.registerItem, index, ref);
+  useRegisterFluidHoverItem2(menuCtx?.registerItem, index, ref);
   const isActive = menuCtx?.activeIndex === index;
   return /* @__PURE__ */ jsx(Menu.RadioItem, {
     value,
@@ -595,7 +595,7 @@ function FormatItem({
     render: /* @__PURE__ */ jsx("div", {
       ref,
       "data-fluid-hover-index": index,
-      className: cn("relative z-10 flex items-center cursor-pointer outline-none", compact ? "px-2.5 py-1.5" : "px-3 py-2", sizeClasses.text, shape.item)
+      className: cn2("relative z-10 flex items-center cursor-pointer outline-none", compact ? "px-2.5 py-1.5" : "px-3 py-2", sizeClasses.text, shape.item)
     }),
     children: /* @__PURE__ */ jsxs("span", {
       className: "inline-grid",
@@ -606,7 +606,7 @@ function FormatItem({
           children: label
         }),
         /* @__PURE__ */ jsx("span", {
-          className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", isActive || checked ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+          className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", isActive || checked ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
           children: label
         })
       ]
@@ -624,13 +624,13 @@ function FormatDropdown({
   const open = isControlled ? openProp : internalOpen;
   const { origin, capture } = useMorphOrigin();
   const morph = useMorph(open, origin, { tier: "moderate" });
-  const level = Math.min(useSurface() + 2, 8);
+  const level = Math.min(useSurface2() + 2, 8);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const portalContainer = useContext(ColorPickerPortalContainerContext);
   const containerRef = useRef(null);
   const ChevronDownIcon = useIcon("chevron-down");
-  const hover = useFluidHover(containerRef);
+  const hover = useFluidHover2(containerRef);
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
   useEffect(() => {
@@ -653,7 +653,7 @@ function FormatDropdown({
     modal: false,
     children: [
       /* @__PURE__ */ jsxs(Menu.Trigger, {
-        className: cn("flex items-center justify-between bg-transparent hover:bg-hover hover:text-foreground transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, sizeClasses.px, sizeClasses.text, open ? "bg-active text-foreground" : "text-muted-foreground active:bg-active", shape.input, "weight-medium"),
+        className: cn2("flex items-center justify-between bg-transparent hover:bg-hover hover:text-foreground transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, sizeClasses.px, sizeClasses.text, open ? "bg-active text-foreground" : "text-muted-foreground active:bg-active", shape.input, "weight-medium"),
         children: [
           /* @__PURE__ */ jsx("span", {
             children: FORMAT_LABELS[value]
@@ -661,7 +661,7 @@ function FormatDropdown({
           /* @__PURE__ */ jsx(ChevronDownIcon, {
             size: 14,
             strokeWidth: 1.5,
-            className: cn("text-muted-foreground transition-transform duration-150", open && "rotate-180")
+            className: cn2("text-muted-foreground transition-transform duration-150", open && "rotate-180")
           })
         ]
       }),
@@ -698,7 +698,7 @@ function FormatDropdown({
                 setActiveIndex(null);
               },
               className: "relative select-none outline-none",
-              children: /* @__PURE__ */ jsx(SurfaceProvider, {
+              children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                 value: level,
                 children: /* @__PURE__ */ jsx(MorphSurface, {
                   morph,
@@ -721,14 +721,14 @@ function FormatDropdown({
                             height: checkedRect.height,
                             opacity: 1
                           },
-                          exit: { opacity: 0, transition: spring.moderate.exit },
+                          exit: { opacity: 0, transition: spring2.moderate.exit },
                           transition: {
-                            ...spring.moderate,
-                            opacity: { duration: spring.fast.duration }
+                            ...spring2.moderate,
+                            opacity: { duration: spring2.fast.duration }
                           }
                         })
                       }),
-                      /* @__PURE__ */ jsx(FluidHoverHighlight, {
+                      /* @__PURE__ */ jsx(FluidHoverHighlight2, {
                         hover,
                         from: checkedRect,
                         className: menuShape.bg
@@ -743,10 +743,10 @@ function FormatDropdown({
                             width: focusRect.width + 4,
                             height: focusRect.height + 4
                           },
-                          exit: { opacity: 0, transition: spring.fast.exit },
+                          exit: { opacity: 0, transition: spring2.fast.exit },
                           transition: {
-                            ...spring.fast,
-                            opacity: { duration: spring.fast.duration }
+                            ...spring2.fast,
+                            opacity: { duration: spring2.fast.duration }
                           }
                         })
                       }),
@@ -793,7 +793,7 @@ var TextColorInput = forwardRef(({
   const [draft, setDraft] = useState(value);
   const interactingRef = useRef(false);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   useEffect(() => {
     if (!interactingRef.current)
@@ -824,11 +824,11 @@ var TextColorInput = forwardRef(({
     commitNumber(cur + direction * baseStep);
   };
   return /* @__PURE__ */ jsxs("div", {
-    className: cn("flex items-center px-2 bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
+    className: cn2("flex items-center px-2 bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
     style: { width },
     children: [
       prefix && /* @__PURE__ */ jsx("span", {
-        className: cn("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
+        className: cn2("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
         children: prefix
       }),
       /* @__PURE__ */ jsx("input", {
@@ -864,7 +864,7 @@ var TextColorInput = forwardRef(({
         },
         inputMode,
         "aria-label": ariaLabel,
-        className: cn("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", "weight-medium", inputClassName)
+        className: cn2("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", "weight-medium", inputClassName)
       })
     ]
   });
@@ -889,7 +889,7 @@ var ScrubColorInput = forwardRef(({
   wrap = false
 }, ref) => {
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const inputRef = useRef(null);
   const [editing, setEditing] = useState(false);
@@ -955,7 +955,7 @@ var ScrubColorInput = forwardRef(({
     step: nudgeStep ?? 1,
     largeStep: nudgeShiftStep ?? 10,
     format,
-    className: cn("flex items-center bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
+    className: cn2("flex items-center bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
     style: { width },
     children: /* @__PURE__ */ jsxs(NumberField.ScrubArea, {
       direction: "horizontal",
@@ -969,7 +969,7 @@ var ScrubColorInput = forwardRef(({
         inputRef.current?.focus();
         inputRef.current?.select();
       },
-      className: cn("flex flex-1 min-w-0 items-center self-stretch px-2", !editing && "cursor-ew-resize"),
+      className: cn2("flex flex-1 min-w-0 items-center self-stretch px-2", !editing && "cursor-ew-resize"),
       children: [
         /* @__PURE__ */ jsx(NumberField.ScrubAreaCursor, {
           className: "drop-shadow-picker-cursor",
@@ -986,7 +986,7 @@ var ScrubColorInput = forwardRef(({
           })
         }),
         prefix && /* @__PURE__ */ jsx("span", {
-          className: cn("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
+          className: cn2("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
           children: prefix
         }),
         /* @__PURE__ */ jsx(NumberField.Input, {
@@ -1020,7 +1020,7 @@ var ScrubColorInput = forwardRef(({
               input.blur();
             }
           },
-          className: cn("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", !editing && "pointer-events-none", "weight-medium", inputClassName)
+          className: cn2("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", !editing && "pointer-events-none", "weight-medium", inputClassName)
         })
       ]
     })
@@ -1038,7 +1038,7 @@ ColorInput.displayName = "ColorInput";
 function EyeDropperButton({ onPick }) {
   const [supported, setSupported] = useState(false);
   const shape = useShape();
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const PipetteIcon = useIcon("pipette");
   useEffect(() => {
     setSupported(typeof window !== "undefined" && "EyeDropper" in window);
@@ -1057,17 +1057,17 @@ function EyeDropperButton({ onPick }) {
     type: "button",
     onClick: handleClick,
     "aria-label": "Pick color from screen",
-    className: cn("flex items-center justify-center text-muted-foreground bg-transparent hover:bg-hover hover:text-foreground active:bg-active transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.control, sizeClasses.px, shape.input),
+    className: cn2("flex items-center justify-center text-muted-foreground bg-transparent hover:bg-hover hover:text-foreground active:bg-active transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.control, sizeClasses.px, shape.input),
     children: /* @__PURE__ */ jsx(PipetteIcon, {
       size: sizeClasses.icon,
       strokeWidth: 1.5
     })
   });
 }
-function ColorTile({ color, size = 24, className, style }) {
+function ColorTile2({ color, size = 24, className, style }) {
   const shape = useShape();
   return /* @__PURE__ */ jsx("span", {
-    className: cn("inline-block relative shrink-0 overflow-hidden shadow-swatch", shape.bg, className),
+    className: cn2("inline-block relative shrink-0 overflow-hidden shadow-swatch", shape.bg, className),
     style: {
       width: size,
       height: size,
@@ -1080,7 +1080,7 @@ function ColorTile({ color, size = 24, className, style }) {
     })
   });
 }
-var ColorSwatch = forwardRef(({ color, size = 28, selected, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+var ColorSwatch2 = forwardRef(({ color, size = 28, selected, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
   const shape = useShape();
   const [hovered, setHovered] = useState(false);
   const ring = selected ? "shadow-swatch-selected" : hovered ? "shadow-swatch-hover" : "shadow-swatch";
@@ -1088,7 +1088,7 @@ var ColorSwatch = forwardRef(({ color, size = 28, selected, className, onMouseEn
     ref,
     type: "button",
     "aria-label": `Select color ${color}`,
-    className: cn("relative shrink-0 overflow-hidden cursor-pointer outline-none transition-shadow duration-100", shape.bg, ring, className),
+    className: cn2("relative shrink-0 overflow-hidden cursor-pointer outline-none transition-shadow duration-100", shape.bg, ring, className),
     style: {
       width: size,
       height: size,
@@ -1109,21 +1109,21 @@ var ColorSwatch = forwardRef(({ color, size = 28, selected, className, onMouseEn
     })
   });
 });
-ColorSwatch.displayName = "ColorSwatch";
+ColorSwatch2.displayName = "ColorSwatch";
 function SwatchStrip({
   swatches,
   current,
   onPick
 }) {
   const normalizedCurrent = useMemo(() => {
-    const p = parseColor(current);
+    const p = parseColor2(current);
     return p ? rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase() : "";
   }, [current]);
   const [resolvedSwatches, setResolvedSwatches] = useState({});
   useEffect(() => {
     const next = {};
     for (const sw of swatches) {
-      if (!parseColor(sw)) {
+      if (!parseColor2(sw)) {
         const p = resolveCssColor(sw);
         if (p)
           next[sw] = rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase();
@@ -1134,10 +1134,10 @@ function SwatchStrip({
   return /* @__PURE__ */ jsx("div", {
     className: "flex flex-wrap gap-2",
     children: swatches.map((sw, i) => {
-      const parsed = parseColor(sw);
+      const parsed = parseColor2(sw);
       const normalized = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, parsed.a).toLowerCase() : resolvedSwatches[sw] ?? sw.toLowerCase();
       const isSelected = normalized === normalizedCurrent;
-      return /* @__PURE__ */ jsx(ColorSwatch, {
+      return /* @__PURE__ */ jsx(ColorSwatch2, {
         color: sw,
         size: 28,
         selected: isSelected,
@@ -1146,7 +1146,7 @@ function SwatchStrip({
     })
   });
 }
-var ColorPicker = forwardRef(({
+var ColorPicker2 = forwardRef(({
   value,
   defaultValue = "#6B97FF",
   onValueChange,
@@ -1168,11 +1168,11 @@ var ColorPicker = forwardRef(({
   const [internalFormat, setInternalFormat] = useState(defaultFormat);
   const currentFormat = isFormatControlled ? format : internalFormat;
   const initialParsed = useMemo(() => {
-    const p = parseColor(currentRawValue);
+    const p = parseColor2(currentRawValue);
     if (!p)
       return { h: 0, s: 1, v: 1, a: 1 };
-    const hsv2 = rgbToHsv(p.r, p.g, p.b);
-    return { h: hsv2.s === 0 ? 0 : hsv2.h, s: hsv2.s, v: hsv2.v, a: p.a };
+    const hsv = rgbToHsv(p.r, p.g, p.b);
+    return { h: hsv.s === 0 ? 0 : hsv.h, s: hsv.s, v: hsv.v, a: p.a };
   }, []);
   const [hsv, setHsv] = useState(initialParsed);
   const oklchHueRef = useRef(null);
@@ -1184,7 +1184,7 @@ var ColorPicker = forwardRef(({
     const cur = value;
     if (cur === emitted)
       return;
-    const p = parseColor(cur);
+    const p = parseColor2(cur);
     if (!p)
       return;
     oklchHueRef.current = null;
@@ -1196,11 +1196,11 @@ var ColorPicker = forwardRef(({
       a: p.a
     }));
   }, [value, isControlled]);
-  const parsed = useMemo(() => buildParsed(hsv.h, hsv.s, hsv.v, hsv.a), [hsv]);
+  const parsed = useMemo(() => buildParsed2(hsv.h, hsv.s, hsv.v, hsv.a), [hsv]);
   const updateHsv = useCallback((next) => {
     const merged = { ...hsv, ...next };
     setHsv(merged);
-    const p = buildParsed(merged.h, merged.s, merged.v, merged.a);
+    const p = buildParsed2(merged.h, merged.s, merged.v, merged.a);
     const formatted = formatValueByFormat(p, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
@@ -1230,7 +1230,7 @@ var ColorPicker = forwardRef(({
       a: p.a
     };
     setHsv(merged);
-    const next = buildParsed(merged.h, merged.s, merged.v, merged.a);
+    const next = buildParsed2(merged.h, merged.s, merged.v, merged.a);
     const formatted = formatValueByFormat(next, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
@@ -1249,14 +1249,14 @@ var ColorPicker = forwardRef(({
   const solidB = Math.round(solidHueRgb.b);
   const solidColorString = `rgb(${solidR}, ${solidG}, ${solidB})`;
   const shape = useShape();
-  const substrate = useSurface();
+  const substrate = useSurface2();
   const pickerLevel = Math.max(substrate, 3);
   const paintsSurface = useContext(PanelSurfaceContext);
-  const root = /* @__PURE__ */ jsx(SurfaceProvider, {
+  const root = /* @__PURE__ */ jsx(SurfaceProvider2, {
     value: pickerLevel,
     children: /* @__PURE__ */ jsxs("div", {
       ref,
-      className: cn("flex flex-col gap-2 p-3", paintsSurface && surfaceClasses(pickerLevel, 1), shape.container, className),
+      className: cn2("flex flex-col gap-2 p-3", paintsSurface && surfaceClasses2(pickerLevel, 1), shape.container, className),
       style: { width: PANEL_WIDTH },
       ...props,
       children: [
@@ -1304,19 +1304,19 @@ var ColorPicker = forwardRef(({
           parsed,
           format: currentFormat,
           oklchHue: oklchHueRef.current,
-          onChannelChange: (channel, value2) => {
+          onChannelChange: (channel, value) => {
             const p = { ...parsed };
             switch (channel) {
               case "hex":
-                handleHexCommit(value2);
+                handleHexCommit(value);
                 return;
               case "r":
               case "g":
               case "b": {
                 oklchHueRef.current = null;
-                const r = channel === "r" ? Number(value2) : p.r;
-                const g = channel === "g" ? Number(value2) : p.g;
-                const b = channel === "b" ? Number(value2) : p.b;
+                const r = channel === "r" ? Number(value) : p.r;
+                const g = channel === "g" ? Number(value) : p.g;
+                const b = channel === "b" ? Number(value) : p.b;
                 const hsvVal = rgbToHsv(r, g, b);
                 updateHsv({
                   h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
@@ -1331,9 +1331,9 @@ var ColorPicker = forwardRef(({
                 if (channel === "hSL")
                   oklchHueRef.current = null;
                 const hsl = rgbToHsl(p.r, p.g, p.b);
-                const h2 = channel === "hSL" ? Number(value2) : hsl.h;
-                const s2 = channel === "sSL" ? Number(value2) / 100 : hsl.s;
-                const l2 = channel === "lSL" ? Number(value2) / 100 : hsl.l;
+                const h2 = channel === "hSL" ? Number(value) : hsl.h;
+                const s2 = channel === "sSL" ? Number(value) / 100 : hsl.s;
+                const l2 = channel === "lSL" ? Number(value) / 100 : hsl.l;
                 const rgb = hslToRgb(h2, clamp01(s2), clamp01(l2));
                 const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
                 updateHsv({
@@ -1348,9 +1348,9 @@ var ColorPicker = forwardRef(({
               case "H": {
                 const cur = rgbToOklch(p.r, p.g, p.b);
                 const baseH = oklchHueRef.current ?? cur.H;
-                const L = channel === "L" ? Number(value2) / 100 : cur.L;
-                const C = channel === "C" ? Number(value2) : cur.C;
-                const H = channel === "H" ? Number(value2) : baseH;
+                const L = channel === "L" ? Number(value) / 100 : cur.L;
+                const C = channel === "C" ? Number(value) : cur.C;
+                const H = channel === "H" ? Number(value) : baseH;
                 oklchHueRef.current = H;
                 const rgb = oklchToRgb(clamp01(L), Math.max(0, C), H);
                 const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -1362,7 +1362,7 @@ var ColorPicker = forwardRef(({
                 return;
               }
               case "alphaPercent": {
-                const a = clamp01(Number(value2) / 100);
+                const a = clamp01(Number(value) / 100);
                 updateHsv({ a });
                 return;
               }
@@ -1377,12 +1377,12 @@ var ColorPicker = forwardRef(({
       ]
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: root
   }) : root;
 });
-ColorPicker.displayName = "ColorPicker";
+ColorPicker2.displayName = "ColorPicker";
 function ColorInputsRow({
   parsed,
   format,
@@ -1585,7 +1585,7 @@ function ColorInputsRow({
   });
 }
 function ChannelTooltip({ label, children }) {
-  return /* @__PURE__ */ jsx(Tooltip, {
+  return /* @__PURE__ */ jsx(Tooltip2, {
     content: label,
     delayDuration: 300,
     children: /* @__PURE__ */ jsx("div", {
@@ -1616,7 +1616,7 @@ function AlphaInput({ value, onCommit }) {
     })
   });
 }
-var ColorPickerPopover = forwardRef(({
+var ColorPickerPopover2 = forwardRef(({
   triggerLabel,
   triggerLabelPosition = "left",
   triggerShowValue = true,
@@ -1639,9 +1639,9 @@ var ColorPickerPopover = forwardRef(({
   const { origin, capture } = useMorphOrigin();
   const morph = useMorph(open, origin, { from, effect, hideSource, tier });
   const shape = useShape();
-  const sizeClasses = useSize(size);
+  const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
-  const substrate = useSurface();
+  const substrate = useSurface2();
   const level = Math.min(substrate + 2, 8);
   const handleOpenChange = useCallback((next, details) => {
     if (next)
@@ -1653,13 +1653,13 @@ var ColorPickerPopover = forwardRef(({
   const isControlled = pickerProps.value !== undefined;
   const [internalValue, setInternalValue] = useState(pickerProps.value ?? pickerProps.defaultValue ?? "#6B97FF");
   const currentValue = isControlled ? pickerProps.value : internalValue;
-  const handleValueChange = useCallback((v, parsed2) => {
+  const handleValueChange = useCallback((v, parsed) => {
     if (!isControlled)
       setInternalValue(v);
-    pickerProps.onValueChange?.(v, parsed2);
+    pickerProps.onValueChange?.(v, parsed);
   }, [isControlled, pickerProps]);
   const XIcon = useIcon("x");
-  const parsed = useMemo(() => parseColor(currentValue), [currentValue]);
+  const parsed = useMemo(() => parseColor2(currentValue), [currentValue]);
   const swatchColor = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, parsed.a) : currentValue;
   const valueLabel = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, 1).replace(/^#/, "").toUpperCase() : currentValue;
   const root = /* @__PURE__ */ jsx(Popover.Root, {
@@ -1671,22 +1671,22 @@ var ColorPickerPopover = forwardRef(({
       className: "inline-flex",
       children: [
         /* @__PURE__ */ jsxs(Popover.Trigger, {
-          className: cn("flex items-center border border-border bg-transparent hover:bg-hover transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, compact ? "px-1.5" : "px-2", shape.input, "weight-medium", triggerClassName),
+          className: cn2("flex items-center border border-border bg-transparent hover:bg-hover transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, compact ? "px-1.5" : "px-2", shape.input, "weight-medium", triggerClassName),
           children: [
             triggerLabel && triggerLabelPosition === "left" && /* @__PURE__ */ jsx("span", {
-              className: cn("text-muted-foreground px-1 select-none", sizeClasses.text),
+              className: cn2("text-muted-foreground px-1 select-none", sizeClasses.text),
               children: triggerLabel
             }),
-            /* @__PURE__ */ jsx(ColorTile, {
+            /* @__PURE__ */ jsx(ColorTile2, {
               color: swatchColor,
               size: compact ? 16 : 20
             }),
             triggerShowValue && /* @__PURE__ */ jsx("span", {
-              className: cn("text-foreground tabular-nums", sizeClasses.text),
+              className: cn2("text-foreground tabular-nums", sizeClasses.text),
               children: valueLabel
             }),
             triggerLabel && triggerLabelPosition === "right" && /* @__PURE__ */ jsx("span", {
-              className: cn("text-muted-foreground px-1 select-none", sizeClasses.text),
+              className: cn2("text-muted-foreground px-1 select-none", sizeClasses.text),
               children: triggerLabel
             }),
             triggerShowRemove && /* @__PURE__ */ jsx("span", {
@@ -1721,9 +1721,9 @@ var ColorPickerPopover = forwardRef(({
             children: /* @__PURE__ */ jsx(Popover.Popup, {
               ref: morph.popupRef,
               className: "relative outline-none",
-              children: /* @__PURE__ */ jsx(ColorPickerPortalContainer, {
+              children: /* @__PURE__ */ jsx(ColorPickerPortalContainer2, {
                 value: morph.popup,
-                children: /* @__PURE__ */ jsx(SurfaceProvider, {
+                children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                   value: level,
                   children: /* @__PURE__ */ jsx(MorphSurface, {
                     morph,
@@ -1732,7 +1732,7 @@ var ColorPickerPopover = forwardRef(({
                     radius: shape.container,
                     children: /* @__PURE__ */ jsx(PanelSurfaceContext.Provider, {
                       value: false,
-                      children: /* @__PURE__ */ jsx(ColorPicker, {
+                      children: /* @__PURE__ */ jsx(ColorPicker2, {
                         ...pickerProps,
                         value: currentValue,
                         onValueChange: handleValueChange
@@ -1747,13 +1747,13 @@ var ColorPickerPopover = forwardRef(({
       ]
     })
   });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
     size,
     children: root
   }) : root;
 });
-ColorPickerPopover.displayName = "ColorPickerPopover";
-Object.assign(ColorPicker, { Popover: ColorPickerPopover });
-var color_picker_default = ColorPicker;
+ColorPickerPopover2.displayName = "ColorPickerPopover";
+Object.assign(ColorPicker2, { Popover: ColorPickerPopover2 });
+var color_picker_default = ColorPicker2;
 
-export { ColorPickerPortalContainer, parseColor, buildParsed, ColorTile, ColorSwatch, ColorPicker, ColorPickerPopover, color_picker_default };
+export { ColorPickerPortalContainer2, parseColor2, buildParsed2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };