@mdigital_ui/ui 0.4.8 → 0.5.1

package/dist/{chunk-UFYG3HKL.js → chunk-6K6RGQNL.js}

@@ -1,4 +1,5 @@
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-ROQGBDET.js';
+import { useControllable } from './chunk-CB7YOZWV.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-6XXAZ6P2.js';
 import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
@@ -56,10 +57,10 @@ function normalizeHex(v) {
   return isValidHex(clean) ? clean.toLowerCase() : "#000000";
 }
 var sizeMap = {
-  xs: { area: "w-40 h-28", hue: "h-2", swatch: "w-4 h-4" },
-  sm: { area: "w-48 h-32", hue: "h-2.5", swatch: "w-5 h-5" },
-  md: { area: "w-56 h-36", hue: "h-3", swatch: "w-6 h-6" },
-  lg: { area: "w-64 h-44", hue: "h-3.5", swatch: "w-7 h-7" }
+  xs: { area: "min-w-40 h-28", hue: "h-2", swatch: "w-4 h-4" },
+  sm: { area: "min-w-48 h-32", hue: "h-2.5", swatch: "w-5 h-5" },
+  md: { area: "min-w-56 h-36", hue: "h-3", swatch: "w-6 h-6" },
+  lg: { area: "min-w-64 h-44", hue: "h-3.5", swatch: "w-7 h-7" }
 };
 var inputVariants = cva(
   "flex items-center rounded-md border border-border bg-background text-text-primary transition-colors focus-within:border-primary",
@@ -75,6 +76,36 @@ var inputVariants = cva(
     defaultVariants: { size: "md" }
   }
 );
+function useDrag(onUpdate, disabled) {
+  const ref = React.useRef(null);
+  const rectRef = React.useRef(null);
+  const cbRef = React.useRef(onUpdate);
+  cbRef.current = onUpdate;
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.target.setPointerCapture(e.pointerId);
+      rectRef.current = ref.current?.getBoundingClientRect() ?? null;
+      if (rectRef.current) cbRef.current(e.clientX, e.clientY, rectRef.current);
+    },
+    [disabled]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (!e.target.hasPointerCapture(e.pointerId)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (rectRef.current) cbRef.current(e.clientX, e.clientY, rectRef.current);
+    },
+    []
+  );
+  const handlePointerUp = React.useCallback(() => {
+    rectRef.current = null;
+  }, []);
+  return { ref, handlePointerDown, handlePointerMove, handlePointerUp };
+}
 function SaturationArea({
   hue,
   sat,
@@ -83,43 +114,59 @@ function SaturationArea({
   areaClass,
   disabled
 }) {
-  const ref = React.useRef(null);
-  const update = React.useCallback(
-    (clientX, clientY) => {
-      if (!ref.current || disabled) return;
-      const rect = ref.current.getBoundingClientRect();
-      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const v = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
-      onChangeSV(s, v);
-    },
-    [onChangeSV, disabled]
-  );
-  const handlePointerDown = (e) => {
-    if (disabled) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    update(e.clientX, e.clientY);
-  };
-  const handlePointerMove = (e) => {
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      update(e.clientX, e.clientY);
-    }
-  };
+  const onChangeSVRef = React.useRef(onChangeSV);
+  onChangeSVRef.current = onChangeSV;
+  const { ref, handlePointerDown, handlePointerMove, handlePointerUp } = useDrag((clientX, clientY, rect) => {
+    const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const v = Math.max(
+      0,
+      Math.min(1, 1 - (clientY - rect.top) / rect.height)
+    );
+    onChangeSVRef.current(s, v);
+  }, disabled);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: cn("colorPicker_saturation", "relative rounded-md cursor-crosshair", areaClass),
-      style: { background: `hsl(${hue}, 100%, 50%)` },
+      className: cn(
+        "colorPicker_saturation",
+        "relative rounded-md cursor-crosshair select-none overflow-visible",
+        areaClass
+      ),
+      style: {
+        background: `hsl(${hue}, 100%, 50%)`,
+        touchAction: "none",
+        paddingBottom: 7
+      },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to right, white, transparent)" } }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to top, black, transparent)" } }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none",
-            style: { left: `${sat * 100}%`, top: `${(1 - val) * 100}%` }
+            className: "absolute inset-0 rounded-md",
+            style: { background: "linear-gradient(to right, white, transparent)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 rounded-md",
+            style: { background: "linear-gradient(to top, black, transparent)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md pointer-events-none z-10",
+            style: {
+              left: `${sat * 100}%`,
+              top: `${(1 - val) * 100}%`,
+              transform: "translate(-50%, -50%)",
+              willChange: "left, top"
+            }
           }
         )
       ]
@@ -132,37 +179,43 @@ function HueSlider({
   hueClass,
   disabled
 }) {
-  const ref = React.useRef(null);
-  const update = React.useCallback(
-    (clientX) => {
-      if (!ref.current || disabled) return;
-      const rect = ref.current.getBoundingClientRect();
-      const h = Math.max(0, Math.min(360, (clientX - rect.left) / rect.width * 360));
-      onChange(h);
-    },
-    [onChange, disabled]
-  );
-  const handlePointerDown = (e) => {
-    if (disabled) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    update(e.clientX);
-  };
-  const handlePointerMove = (e) => {
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) update(e.clientX);
-  };
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  const { ref, handlePointerDown, handlePointerMove, handlePointerUp } = useDrag((clientX, _clientY, rect) => {
+    const h = Math.max(
+      0,
+      Math.min(360, (clientX - rect.left) / rect.width * 360)
+    );
+    onChangeRef.current(h);
+  }, disabled);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: cn("colorPicker_hue", "relative rounded-full cursor-pointer", hueClass),
-      style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
+      className: cn(
+        "colorPicker_hue",
+        "relative rounded-full cursor-pointer select-none",
+        hueClass
+      ),
+      style: {
+        background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+        touchAction: "none",
+        paddingTop: 7
+      },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none",
-          style: { left: `${hue / 360 * 100}%` }
+          className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md pointer-events-none z-10",
+          style: {
+            left: `${hue / 360 * 100}%`,
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+            willChange: "left"
+          }
         }
       )
     }
@@ -180,30 +233,64 @@ var ColorPicker = React.memo(
     className,
     classNames
   }) => {
-    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue));
-    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
-    const [h, s, v] = React.useMemo(() => hexToHsv(currentValue), [currentValue]);
-    const [hue, setHue] = React.useState(h);
+    const normalizedValue = value !== void 0 ? normalizeHex(value) : void 0;
+    const [currentValue, setCurrentValue] = useControllable({
+      value: normalizedValue,
+      defaultValue: normalizeHex(defaultValue),
+      onChange
+    });
+    const initHsv = React.useMemo(
+      () => hexToHsv(normalizeHex(defaultValue)),
+      []
+    );
+    const [hue, setHue] = React.useState(initHsv[0]);
+    const [liveSat, setLiveSat] = React.useState(initHsv[1]);
+    const [liveVal, setLiveVal] = React.useState(initHsv[2]);
+    const prevValueRef = React.useRef(currentValue);
     React.useEffect(() => {
-      if (s > 0.01 || v > 0.01) setHue(h);
-    }, [h, s, v]);
+      if (currentValue !== prevValueRef.current) {
+        prevValueRef.current = currentValue;
+        const [h2, s2, v2] = hexToHsv(currentValue);
+        if (s2 > 0.01 || v2 > 0.01) setHue(h2);
+        setLiveSat(s2);
+        setLiveVal(v2);
+      }
+    }, [currentValue]);
     const [inputText, setInputText] = React.useState(currentValue);
     React.useEffect(() => setInputText(currentValue), [currentValue]);
-    const update = (hex) => {
-      const valid = normalizeHex(hex);
-      if (value === void 0) setInternalValue(valid);
-      onChange?.(valid);
-    };
-    const handleSVChange = (ns, nv) => {
-      update(hsvToHex(hue, ns, nv));
-    };
-    const handleHueChange = (nh) => {
-      setHue(nh);
-      update(hsvToHex(nh, s, v));
-    };
+    const handleSVChange = React.useCallback(
+      (ns, nv) => {
+        setLiveSat(ns);
+        setLiveVal(nv);
+        const hex = normalizeHex(hsvToHex(hue, ns, nv));
+        prevValueRef.current = hex;
+        setCurrentValue(hex);
+      },
+      [hue, setCurrentValue]
+    );
+    const handleHueChange = React.useCallback(
+      (nh) => {
+        setHue(nh);
+        const hex = normalizeHex(hsvToHex(nh, liveSat, liveVal));
+        prevValueRef.current = hex;
+        setCurrentValue(hex);
+      },
+      [liveSat, liveVal, setCurrentValue]
+    );
+    const updateFromHex = React.useCallback(
+      (hex) => {
+        const normalized = normalizeHex(hex);
+        const [h2, s2, v2] = hexToHsv(normalized);
+        if (s2 > 0.01 || v2 > 0.01) setHue(h2);
+        setLiveSat(s2);
+        setLiveVal(v2);
+        setCurrentValue(normalized);
+      },
+      [setCurrentValue]
+    );
     const handleInputBlur = () => {
       if (isValidHex(inputText) || isValidHex(`#${inputText}`)) {
-        update(inputText.startsWith("#") ? inputText : `#${inputText}`);
+        updateFromHex(inputText.startsWith("#") ? inputText : `#${inputText}`);
       } else {
         setInputText(currentValue);
       }
@@ -215,7 +302,7 @@ var ColorPicker = React.memo(
         "data-slot": "root",
         className: cn(
           "colorPicker_root",
-          "inline-flex flex-col gap-2",
+          "inline-flex flex-col gap-3",
           disabled && "opacity-50 pointer-events-none",
           classNames?.root,
           className
@@ -226,8 +313,8 @@ var ColorPicker = React.memo(
             SaturationArea,
             {
               hue,
-              sat: s,
-              val: v,
+              sat: liveSat,
+              val: liveVal,
               onChangeSV: handleSVChange,
               areaClass: cn(sizes.area, classNames?.saturation),
               disabled
@@ -285,7 +372,7 @@ var ColorPicker = React.memo(
                 "button",
                 {
                   type: "button",
-                  onClick: () => update(swatch),
+                  onClick: () => updateFromHex(swatch),
                   className: cn(
                     "colorPicker_swatch",
                     sizes.swatch,
@@ -319,12 +406,14 @@ var ColorInput = React.memo(
     className,
     classNames
   }) => {
-    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue));
-    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
+    const normalizedValue = value !== void 0 ? normalizeHex(value) : void 0;
+    const [currentValue, setCurrentValue] = useControllable({
+      value: normalizedValue,
+      defaultValue: normalizeHex(defaultValue),
+      onChange
+    });
     const update = (hex) => {
-      const valid = normalizeHex(hex);
-      if (value === void 0) setInternalValue(valid);
-      onChange?.(valid);
+      setCurrentValue(normalizeHex(hex));
     };
     return /* @__PURE__ */ jsxs(
       "div",
@@ -339,16 +428,26 @@ var ColorInput = React.memo(
         children: [
           label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: label }),
           /* @__PURE__ */ jsxs(Popover, { children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn(inputVariants({ size }), disabled && "opacity-50 cursor-not-allowed", fullWidth && "w-full"), children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-5 h-5 rounded border border-border shrink-0",
-                  style: { backgroundColor: currentValue }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-text-primary font-mono", children: currentValue })
-            ] }) }),
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  inputVariants({ size }),
+                  disabled && "opacity-50 cursor-not-allowed",
+                  fullWidth && "w-full"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-5 h-5 rounded border border-border shrink-0",
+                      style: { backgroundColor: currentValue }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-text-primary font-mono", children: currentValue })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(
               ColorPicker,
               {
@@ -370,5 +469,5 @@ ColorInput.displayName = "ColorInput";
 var color_picker_default = ColorPicker;
 
 export { ColorInput, ColorPicker, color_picker_default };
-//# sourceMappingURL=chunk-UFYG3HKL.js.map
-//# sourceMappingURL=chunk-UFYG3HKL.js.map
+//# sourceMappingURL=chunk-6K6RGQNL.js.map
+//# sourceMappingURL=chunk-6K6RGQNL.js.map

package/dist/chunk-6K6RGQNL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-picker/index.tsx"],"names":[],"mappings":"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","file":"chunk-6K6RGQNL.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { useControllable } from \"../hooks/useControllable\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { cn } from \"../utils\";\nimport type { ColorPickerProps, ColorInputProps } from \"./types\";\n\n// ── Color utilities ──────────────────────────────────────────\nfunction hexToHsv(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255;\n  const g = parseInt(hex.slice(3, 5), 16) / 255;\n  const b = parseInt(hex.slice(5, 7), 16) / 255;\n  const max = Math.max(r, g, b),\n    min = Math.min(r, g, b);\n  const d = max - min;\n  let h = 0;\n  if (d !== 0) {\n    if (max === r) h = ((g - b) / d + 6) % 6;\n    else if (max === g) h = (b - r) / d + 2;\n    else h = (r - g) / d + 4;\n    h *= 60;\n  }\n  const s = max === 0 ? 0 : d / max;\n  return [h, s, max];\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n  const c = v * s;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = v - c;\n  let r = 0,\n    g = 0,\n    b = 0;\n  if (h < 60) {\n    r = c;\n    g = x;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n  } else if (h < 180) {\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    b = c;\n  } else {\n    r = c;\n    b = x;\n  }\n  const toHex = (n: number) =>\n    Math.round((n + m) * 255)\n      .toString(16)\n      .padStart(2, \"0\");\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nfunction isValidHex(v: string): boolean {\n  return /^#[0-9a-fA-F]{6}$/.test(v);\n}\n\nfunction normalizeHex(v: string): string {\n  if (!v) return \"#000000\";\n  const clean = v.startsWith(\"#\") ? v : `#${v}`;\n  return isValidHex(clean) ? clean.toLowerCase() : \"#000000\";\n}\n\n// ── Size variants ────────────────────────────────────────────\nconst sizeMap = {\n  xs: { area: \"min-w-40 h-28\", hue: \"h-2\", swatch: \"w-4 h-4\" },\n  sm: { area: \"min-w-48 h-32\", hue: \"h-2.5\", swatch: \"w-5 h-5\" },\n  md: { area: \"min-w-56 h-36\", hue: \"h-3\", swatch: \"w-6 h-6\" },\n  lg: { area: \"min-w-64 h-44\", hue: \"h-3.5\", swatch: \"w-7 h-7\" },\n};\n\nconst inputVariants = cva(\n  \"flex items-center rounded-md border border-border bg-background text-text-primary transition-colors focus-within:border-primary\",\n  {\n    variants: {\n      size: {\n        xs: \"h-7 px-2 text-xs gap-1.5\",\n        sm: \"h-8 px-2.5 text-sm gap-2\",\n        md: \"h-9 px-3 text-sm gap-2\",\n        lg: \"h-10 px-3.5 text-base gap-2.5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// ── Shared drag hook ─────────────────────────────────────────\nfunction useDrag(\n  onUpdate: (clientX: number, clientY: number, rect: DOMRect) => void,\n  disabled?: boolean,\n) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const rectRef = React.useRef<DOMRect | null>(null);\n  const cbRef = React.useRef(onUpdate);\n  cbRef.current = onUpdate;\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      rectRef.current = ref.current?.getBoundingClientRect() ?? null;\n      if (rectRef.current) cbRef.current(e.clientX, e.clientY, rectRef.current);\n    },\n    [disabled],\n  );\n\n  const handlePointerMove = React.useCallback(\n    (e: React.PointerEvent) => {\n      if (!(e.target as HTMLElement).hasPointerCapture(e.pointerId)) return;\n      e.preventDefault();\n      e.stopPropagation();\n      if (rectRef.current) cbRef.current(e.clientX, e.clientY, rectRef.current);\n    },\n    [],\n  );\n\n  const handlePointerUp = React.useCallback(() => {\n    rectRef.current = null;\n  }, []);\n\n  return { ref, handlePointerDown, handlePointerMove, handlePointerUp };\n}\n\n// ── Saturation Area ──────────────────────────────────────────\nfunction SaturationArea({\n  hue,\n  sat,\n  val,\n  onChangeSV,\n  areaClass,\n  disabled,\n}: {\n  hue: number;\n  sat: number;\n  val: number;\n  onChangeSV: (s: number, v: number) => void;\n  areaClass: string;\n  disabled?: boolean;\n}) {\n  const onChangeSVRef = React.useRef(onChangeSV);\n  onChangeSVRef.current = onChangeSV;\n\n  const { ref, handlePointerDown, handlePointerMove, handlePointerUp } =\n    useDrag((clientX, clientY, rect) => {\n      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n      const v = Math.max(\n        0,\n        Math.min(1, 1 - (clientY - rect.top) / rect.height),\n      );\n      onChangeSVRef.current(s, v);\n    }, disabled);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"colorPicker_saturation\",\n        \"relative rounded-md cursor-crosshair select-none overflow-visible\",\n        areaClass,\n      )}\n      style={{\n        background: `hsl(${hue}, 100%, 50%)`,\n        touchAction: \"none\",\n        paddingBottom: 7,\n      }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n    >\n      <div\n        className=\"absolute inset-0 rounded-md\"\n        style={{ background: \"linear-gradient(to right, white, transparent)\" }}\n      />\n      <div\n        className=\"absolute inset-0 rounded-md\"\n        style={{ background: \"linear-gradient(to top, black, transparent)\" }}\n      />\n      <div\n        className=\"absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md pointer-events-none z-10\"\n        style={{\n          left: `${sat * 100}%`,\n          top: `${(1 - val) * 100}%`,\n          transform: \"translate(-50%, -50%)\",\n          willChange: \"left, top\",\n        }}\n      />\n    </div>\n  );\n}\n\n// ── Hue Slider ───────────────────────────────────────────────\nfunction HueSlider({\n  hue,\n  onChange,\n  hueClass,\n  disabled,\n}: {\n  hue: number;\n  onChange: (h: number) => void;\n  hueClass: string;\n  disabled?: boolean;\n}) {\n  const onChangeRef = React.useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const { ref, handlePointerDown, handlePointerMove, handlePointerUp } =\n    useDrag((clientX, _clientY, rect) => {\n      const h = Math.max(\n        0,\n        Math.min(360, ((clientX - rect.left) / rect.width) * 360),\n      );\n      onChangeRef.current(h);\n    }, disabled);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"colorPicker_hue\",\n        \"relative rounded-full cursor-pointer select-none\",\n        hueClass,\n      )}\n      style={{\n        background:\n          \"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)\",\n        touchAction: \"none\",\n        paddingTop: 7,\n      }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n    >\n      <div\n        className=\"absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md pointer-events-none z-10\"\n        style={{\n          left: `${(hue / 360) * 100}%`,\n          top: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n          willChange: \"left\",\n        }}\n      />\n    </div>\n  );\n}\n\n// ── ColorPicker ──────────────────────────────────────────────\nconst ColorPicker = React.memo<ColorPickerProps>(\n  ({\n    value,\n    defaultValue = \"#3b82f6\",\n    onChange,\n    swatches,\n    size = \"md\",\n    disabled = false,\n    label,\n    className,\n    classNames,\n  }) => {\n    const normalizedValue =\n      value !== undefined ? normalizeHex(value) : undefined;\n    const [currentValue, setCurrentValue] = useControllable({\n      value: normalizedValue,\n      defaultValue: normalizeHex(defaultValue),\n      onChange,\n    });\n\n    const initHsv = React.useMemo(\n      () => hexToHsv(normalizeHex(defaultValue)),\n      [],\n    );\n    const [hue, setHue] = React.useState(initHsv[0]);\n    const [liveSat, setLiveSat] = React.useState(initHsv[1]);\n    const [liveVal, setLiveVal] = React.useState(initHsv[2]);\n\n    // Sync HSV from external value changes (typing, swatches, controlled)\n    const prevValueRef = React.useRef(currentValue);\n    React.useEffect(() => {\n      if (currentValue !== prevValueRef.current) {\n        prevValueRef.current = currentValue;\n        const [h2, s2, v2] = hexToHsv(currentValue!);\n        if (s2 > 0.01 || v2 > 0.01) setHue(h2);\n        setLiveSat(s2);\n        setLiveVal(v2);\n      }\n    }, [currentValue]);\n\n    const [inputText, setInputText] = React.useState(currentValue!);\n    React.useEffect(() => setInputText(currentValue!), [currentValue]);\n\n    const handleSVChange = React.useCallback(\n      (ns: number, nv: number) => {\n        setLiveSat(ns);\n        setLiveVal(nv);\n        const hex = normalizeHex(hsvToHex(hue, ns, nv));\n        prevValueRef.current = hex;\n        setCurrentValue(hex);\n      },\n      [hue, setCurrentValue],\n    );\n\n    const handleHueChange = React.useCallback(\n      (nh: number) => {\n        setHue(nh);\n        const hex = normalizeHex(hsvToHex(nh, liveSat, liveVal));\n        prevValueRef.current = hex;\n        setCurrentValue(hex);\n      },\n      [liveSat, liveVal, setCurrentValue],\n    );\n\n    const updateFromHex = React.useCallback(\n      (hex: string) => {\n        const normalized = normalizeHex(hex);\n        const [h2, s2, v2] = hexToHsv(normalized);\n        if (s2 > 0.01 || v2 > 0.01) setHue(h2);\n        setLiveSat(s2);\n        setLiveVal(v2);\n        setCurrentValue(normalized);\n      },\n      [setCurrentValue],\n    );\n\n    const handleInputBlur = () => {\n      if (isValidHex(inputText) || isValidHex(`#${inputText}`)) {\n        updateFromHex(inputText.startsWith(\"#\") ? inputText : `#${inputText}`);\n      } else {\n        setInputText(currentValue);\n      }\n    };\n\n    const sizes = sizeMap[size];\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          \"colorPicker_root\",\n          \"inline-flex flex-col gap-3\",\n          disabled && \"opacity-50 pointer-events-none\",\n          classNames?.root,\n          className,\n        )}\n      >\n        {label && (\n          <span className=\"text-sm font-medium text-text-primary\">{label}</span>\n        )}\n\n        <SaturationArea\n          hue={hue}\n          sat={liveSat}\n          val={liveVal}\n          onChangeSV={handleSVChange}\n          areaClass={cn(sizes.area, classNames?.saturation)}\n          disabled={disabled}\n        />\n\n        <HueSlider\n          hue={hue}\n          onChange={handleHueChange}\n          hueClass={cn(sizes.hue, classNames?.hueSlider)}\n          disabled={disabled}\n        />\n\n        {/* Input + preview */}\n        <div className=\"flex items-center gap-2\">\n          <div\n            data-slot=\"preview\"\n            className={cn(\n              \"colorPicker_preview\",\n              \"w-8 h-8 rounded-md border border-border shrink-0\",\n              classNames?.preview,\n            )}\n            style={{ backgroundColor: currentValue }}\n          />\n          <input\n            type=\"text\"\n            value={inputText}\n            onChange={(e) => setInputText(e.target.value)}\n            onBlur={handleInputBlur}\n            onKeyDown={(e) => e.key === \"Enter\" && handleInputBlur()}\n            className={cn(\n              \"colorPicker_input\",\n              \"flex-1 min-w-0 bg-transparent border border-border rounded-md px-2 py-1 text-sm text-text-primary outline-none focus:border-primary font-mono\",\n              classNames?.input,\n            )}\n            disabled={disabled}\n          />\n        </div>\n\n        {/* Swatches */}\n        {swatches && swatches.length > 0 && (\n          <div\n            data-slot=\"swatches\"\n            className={cn(\n              \"colorPicker_swatches\",\n              \"flex flex-wrap gap-1\",\n              classNames?.swatches,\n            )}\n          >\n            {swatches.map((swatch) => (\n              <button\n                key={swatch}\n                type=\"button\"\n                onClick={() => updateFromHex(swatch)}\n                className={cn(\n                  \"colorPicker_swatch\",\n                  sizes.swatch,\n                  \"rounded-md border border-border cursor-pointer transition-transform hover:scale-110\",\n                  currentValue === normalizeHex(swatch) &&\n                    \"ring-2 ring-primary ring-offset-1 ring-offset-background\",\n                  classNames?.swatch,\n                )}\n                style={{ backgroundColor: swatch }}\n                aria-label={`Select color ${swatch}`}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = \"ColorPicker\";\n\n// ── ColorInput ───────────────────────────────────────────────\nconst ColorInput = React.memo<ColorInputProps>(\n  ({\n    value,\n    defaultValue = \"#3b82f6\",\n    onChange,\n    swatches,\n    size = \"md\",\n    disabled = false,\n    label,\n    fullWidth = true,\n    className,\n    classNames,\n  }) => {\n    const normalizedValue =\n      value !== undefined ? normalizeHex(value) : undefined;\n    const [currentValue, setCurrentValue] = useControllable({\n      value: normalizedValue,\n      defaultValue: normalizeHex(defaultValue),\n      onChange,\n    });\n\n    const update = (hex: string) => {\n      setCurrentValue(normalizeHex(hex));\n    };\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          \"colorInput_root\",\n          \"flex flex-col gap-1.5\",\n          fullWidth ? \"w-full\" : \"inline-flex\",\n          className,\n        )}\n      >\n        {label && (\n          <span className=\"text-sm font-medium text-text-primary\">{label}</span>\n        )}\n\n        <Popover>\n          <PopoverTrigger asChild>\n            <div\n              className={cn(\n                inputVariants({ size }),\n                disabled && \"opacity-50 cursor-not-allowed\",\n                fullWidth && \"w-full\",\n              )}\n            >\n              <div\n                className=\"w-5 h-5 rounded border border-border shrink-0\"\n                style={{ backgroundColor: currentValue }}\n              />\n              <span className=\"flex-1 truncate text-text-primary font-mono\">\n                {currentValue}\n              </span>\n            </div>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-3\" align=\"start\">\n            <ColorPicker\n              value={currentValue}\n              onChange={update}\n              swatches={swatches}\n              size={size}\n              disabled={disabled}\n              classNames={classNames}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    );\n  },\n);\n\nColorInput.displayName = \"ColorInput\";\n\nexport type * from \"./types\";\nexport { ColorPicker, ColorInput };\nexport default ColorPicker;\n"]}

package/dist/{chunk-ROQGBDET.js → chunk-6XXAZ6P2.js}

@@ -2,6 +2,7 @@ import { colorVars } from './chunk-G6QIIWKU.js';
 import { cn } from './chunk-RAS6HUEI.js';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { cva } from 'class-variance-authority';
+import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 function Popover({
@@ -50,7 +51,7 @@ var popoverContentVariants = cva(
     }
   }
 );
-function PopoverContent({
+var PopoverContent = React.memo(({
   className,
   align = "center",
   sideOffset = 4,
@@ -58,9 +59,10 @@ function PopoverContent({
   variant = "default",
   color = "default",
   classNames,
+  portal = true,
   ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+}) => {
+  const content = /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -74,8 +76,10 @@ function PopoverContent({
       ),
       ...props
     }
-  ) });
-}
+  );
+  if (!portal) return content;
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content });
+});
 function PopoverAnchor({
   ...props
 }) {
@@ -87,7 +91,11 @@ function PopoverAnchor({
     }
   );
 }
+Popover.displayName = "Popover";
+PopoverTrigger.displayName = "PopoverTrigger";
+PopoverContent.displayName = "PopoverContent";
+PopoverAnchor.displayName = "PopoverAnchor";
 
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
-//# sourceMappingURL=chunk-ROQGBDET.js.map
-//# sourceMappingURL=chunk-ROQGBDET.js.map
+//# sourceMappingURL=chunk-6XXAZ6P2.js.map
+//# sourceMappingURL=chunk-6XXAZ6P2.js.map

package/dist/chunk-6XXAZ6P2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popover/index.tsx"],"names":[],"mappings":";;;;;;;AAUA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,IAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,SAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAM,sBAAA,GAAyB,GAAA;AAAA,EAC7B,sqBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA,QACJ,EAAA,EAAI,eAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oDAAA;AAAA,QACT,KAAA,EAAO,yCAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,KACT;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAcA,IAAM,cAAA,GAAuB,WAAK,CAAC;AAAA,EACjC,SAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,UAAA,GAAa,CAAA;AAAA,EACb,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,KAAA,GAAQ,SAAA;AAAA,EACR,UAAA;AAAA,EACA,MAAA,GAAS,IAAA;AAAA,EACT,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAkB,gBAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,iBAAA;AAAA,QACA,sBAAA,CAAuB,EAAE,IAAA,EAAM,OAAA,EAAS,OAAO,CAAA;AAAA,QAC/C,SAAA;AAAA,QACA,UAAA,EAAY;AAAA,OACd;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,IAAI,CAAC,QAAQ,OAAO,OAAA;AAEpB,EAAA,uBACE,GAAA,CAAkB,gBAAA,CAAA,MAAA,EAAjB,EACE,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ,CAAC;AAED,SAAS,aAAA,CAAc;AAAA,EACrB,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,MAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AACtB,cAAA,CAAe,WAAA,GAAc,gBAAA;AAC7B,cAAA,CAAe,WAAA,GAAc,gBAAA;AAC7B,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-6XXAZ6P2.js","sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../utils'\nimport { colorVars } from '../variants'\nimport type { PopoverClassNames } from './types'\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return (\n    <PopoverPrimitive.Root\n      data-slot=\"popover\"\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return (\n    <PopoverPrimitive.Trigger\n      data-slot=\"popover-trigger\"\n      {...props}\n    />\n  )\n}\n\nconst popoverContentVariants = cva(\n  'overflow-hidden will-change-[transform,_opacity] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 z-[var(--z-popover)] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border outline-none',\n  {\n    variants: {\n      size: {\n        xs: 'p-2 text-xs',\n        sm: 'p-3 text-sm',\n        md: 'p-4 text-base',\n        lg: 'p-5 text-lg',\n      },\n      variant: {\n        default: 'bg-background border border-slot text-text-primary',\n        solid: 'bg-slot border border-slot text-slot-fg',\n        soft: 'backdrop-blur-sm bg-slot-10 border border-slot-30 text-slot',\n      },\n      color: colorVars,\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      color: 'default',\n    },\n  },\n)\n\nexport interface PopoverContentProps\n  extends Omit<React.ComponentProps<typeof PopoverPrimitive.Content>, 'color'>,\n    VariantProps<typeof popoverContentVariants> {\n  classNames?: PopoverClassNames\n  /**\n   * Whether to render content in a React portal.\n   * Set to `false` to keep content in the DOM tree (inherits parent CSS).\n   * @default true\n   */\n  portal?: boolean\n}\n\nconst PopoverContent = React.memo(({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  size = 'md',\n  variant = 'default',\n  color = 'default',\n  classNames,\n  portal = true,\n  ...props\n}: PopoverContentProps) => {\n  const content = (\n    <PopoverPrimitive.Content\n      data-slot=\"popover-content\"\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'popover_content',\n        popoverContentVariants({ size, variant, color }),\n        className,\n        classNames?.content,\n      )}\n      {...props}\n    />\n  )\n\n  if (!portal) return content\n\n  return (\n    <PopoverPrimitive.Portal>\n      {content}\n    </PopoverPrimitive.Portal>\n  )\n})\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return (\n    <PopoverPrimitive.Anchor\n      data-slot=\"popover-anchor\"\n      {...props}\n    />\n  )\n}\n\nPopover.displayName = 'Popover'\nPopoverTrigger.displayName = 'PopoverTrigger'\nPopoverContent.displayName = 'PopoverContent'\nPopoverAnchor.displayName = 'PopoverAnchor'\n\nexport type * from './types'\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"]}

package/dist/{chunk-3Z7RLVWD.js → chunk-75T5BISG.js}

@@ -1,6 +1,7 @@
+import { useControllable } from './chunk-CB7YOZWV.js';
 import { cn, statusMessageVariants } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var textareaVariants = cva(
@@ -79,8 +80,7 @@ var Mentions = React.memo(
     className,
     classNames
   }) => {
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const currentValue = value !== void 0 ? value : internalValue;
+    const [currentValue, setCurrentValue] = useControllable({ value, defaultValue: defaultValue ?? "", onChange });
     const [showDropdown, setShowDropdown] = useState(false);
     const [query, setQuery] = useState("");
     const [activeTrigger, setActiveTrigger] = useState("");
@@ -88,13 +88,7 @@ var Mentions = React.memo(
     const [highlightedIdx, setHighlightedIdx] = useState(0);
     const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
     const textareaRef = useRef(null);
-    const update = useCallback(
-      (v) => {
-        if (value === void 0) setInternalValue(v);
-        onChange?.(v);
-      },
-      [value, onChange]
-    );
+    const update = setCurrentValue;
     const filteredOptions = useMemo(() => {
       if (!query) return options;
       const q = query.toLowerCase();
@@ -133,7 +127,7 @@ var Mentions = React.memo(
         const lastTrigger = textBefore.lastIndexOf(trigger);
         if (lastTrigger >= 0) {
           const between = textBefore.substring(lastTrigger + trigger.length);
-          const charBefore = lastTrigger > 0 ? textBefore[lastTrigger - 1] : " ";
+          const charBefore = lastTrigger > 0 ? textBefore[lastTrigger - 1] ?? " " : " ";
           if (/\s/.test(charBefore) || lastTrigger === 0) {
             if (!/\s/.test(between)) {
               setActiveTrigger(trigger);
@@ -254,5 +248,5 @@ Mentions.displayName = "Mentions";
 var mentions_default = Mentions;
 
 export { mentions_default };
-//# sourceMappingURL=chunk-3Z7RLVWD.js.map
-//# sourceMappingURL=chunk-3Z7RLVWD.js.map
+//# sourceMappingURL=chunk-75T5BISG.js.map
+//# sourceMappingURL=chunk-75T5BISG.js.map

package/dist/chunk-75T5BISG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mentions/index.tsx"],"names":[],"mappings":"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","file":"chunk-75T5BISG.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useState, useRef, useCallback, useMemo, useEffect } from 'react'\n\nimport { useControllable } from '../hooks/useControllable'\nimport { cn, statusMessageVariants } from '../utils'\nimport type { MentionOption, MentionsProps } from './types'\n\nconst textareaVariants = cva(\n  'w-full rounded-md border bg-background text-text-primary placeholder:text-text-secondary/50 outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default',\n  {\n    variants: {\n      size: {\n        xs: 'px-(--input-padding-x-xs) py-1.5 text-xs',\n        sm: 'px-(--input-padding-x-sm) py-2 text-sm',\n        md: 'px-(--input-padding-x-md) py-2 text-sm',\n        lg: 'px-(--input-padding-x-lg) py-2.5 text-base',\n      },\n      status: {\n        default: 'border-border focus:border-primary',\n        error: 'border-error focus:border-error',\n      },\n    },\n    defaultVariants: { size: 'md', status: 'default' },\n  },\n)\n\nfunction getCaretCoordinates(element: HTMLTextAreaElement, position: number) {\n  const div = document.createElement('div')\n  const style = getComputedStyle(element)\n  const props = [\n    'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'lineHeight',\n    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',\n    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',\n    'wordWrap', 'whiteSpace', 'overflowWrap',\n  ] as const\n\n  div.style.position = 'absolute'\n  div.style.visibility = 'hidden'\n  div.style.whiteSpace = 'pre-wrap'\n  div.style.wordWrap = 'break-word'\n  div.style.width = `${element.offsetWidth}px`\n  for (const prop of props) div.style[prop as any] = style.getPropertyValue(prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`))\n\n  div.textContent = element.value.substring(0, position)\n  const span = document.createElement('span')\n  span.textContent = element.value.substring(position) || '.'\n  div.appendChild(span)\n  document.body.appendChild(div)\n\n  const top = span.offsetTop - element.scrollTop\n  const left = span.offsetLeft - element.scrollLeft\n  document.body.removeChild(div)\n  return { top, left }\n}\n\nconst Mentions = React.memo<MentionsProps>(\n  ({\n    value,\n    defaultValue = '',\n    onChange,\n    onSelect,\n    options = [],\n    triggers = ['@'],\n    loading = false,\n    size = 'md',\n    disabled = false,\n    readOnly = false,\n    placeholder,\n    rows = 3,\n    label,\n    error,\n    helperText,\n    fullWidth = true,\n    className,\n    classNames,\n  }) => {\n    const [currentValue, setCurrentValue] = useControllable({ value, defaultValue: defaultValue ?? '', onChange })\n    const [showDropdown, setShowDropdown] = useState(false)\n    const [query, setQuery] = useState('')\n    const [activeTrigger, setActiveTrigger] = useState('')\n    const [triggerStart, setTriggerStart] = useState(-1)\n    const [highlightedIdx, setHighlightedIdx] = useState(0)\n    const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 })\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n    const update = setCurrentValue\n\n    const filteredOptions = useMemo(() => {\n      if (!query) return options\n      const q = query.toLowerCase()\n      return options.filter(\n        (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n      )\n    }, [options, query])\n\n    const insertMention = useCallback(\n      (option: MentionOption) => {\n        const before = currentValue.substring(0, triggerStart)\n        const after = currentValue.substring(textareaRef.current?.selectionStart ?? triggerStart)\n        const mention = `${activeTrigger}${option.value} `\n        const next = before + mention + after\n        update(next)\n        onSelect?.(option, activeTrigger)\n        setShowDropdown(false)\n        setQuery('')\n\n        requestAnimationFrame(() => {\n          if (textareaRef.current) {\n            const pos = before.length + mention.length\n            textareaRef.current.selectionStart = pos\n            textareaRef.current.selectionEnd = pos\n            textareaRef.current.focus()\n          }\n        })\n      },\n      [currentValue, triggerStart, activeTrigger, update, onSelect],\n    )\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      const v = e.target.value\n      update(v)\n\n      const cursor = e.target.selectionStart\n      const textBefore = v.substring(0, cursor)\n\n      let found = false\n      for (const trigger of triggers) {\n        const lastTrigger = textBefore.lastIndexOf(trigger)\n        if (lastTrigger >= 0) {\n          const between = textBefore.substring(lastTrigger + trigger.length)\n          const charBefore = lastTrigger > 0 ? (textBefore[lastTrigger - 1] ?? ' ') : ' '\n          if (/\\s/.test(charBefore) || lastTrigger === 0) {\n            if (!/\\s/.test(between)) {\n              setActiveTrigger(trigger)\n              setTriggerStart(lastTrigger)\n              setQuery(between)\n              setShowDropdown(true)\n              setHighlightedIdx(0)\n              found = true\n\n              if (typeof window !== 'undefined' && textareaRef.current) {\n                const coords = getCaretCoordinates(textareaRef.current, lastTrigger)\n                setDropdownPos({ top: coords.top + 24, left: coords.left })\n              }\n              break\n            }\n          }\n        }\n      }\n      if (!found) setShowDropdown(false)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!showDropdown || filteredOptions.length === 0) return\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setHighlightedIdx((p) => Math.min(p + 1, filteredOptions.length - 1))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setHighlightedIdx((p) => Math.max(p - 1, 0))\n      } else if (e.key === 'Enter' || e.key === 'Tab') {\n        e.preventDefault()\n        if (filteredOptions[highlightedIdx]) insertMention(filteredOptions[highlightedIdx])\n      } else if (e.key === 'Escape') {\n        setShowDropdown(false)\n      }\n    }\n\n    useEffect(() => {\n      if (highlightedIdx >= filteredOptions.length) setHighlightedIdx(Math.max(0, filteredOptions.length - 1))\n    }, [filteredOptions.length, highlightedIdx])\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'mentions_root',\n          'flex flex-col gap-1.5',\n          fullWidth ? 'w-full' : 'inline-flex',\n          classNames?.root,\n          className,\n        )}\n      >\n        {label && (\n          <label data-slot=\"label\" className=\"text-sm font-medium text-text-primary\">\n            {label}\n          </label>\n        )}\n\n        <div className=\"relative\">\n          <textarea\n            ref={textareaRef}\n            value={currentValue}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            onBlur={() => setTimeout(() => setShowDropdown(false), 150)}\n            placeholder={placeholder}\n            rows={rows}\n            disabled={disabled}\n            readOnly={readOnly}\n            data-slot=\"textarea\"\n            className={cn(\n              'mentions_textarea',\n              textareaVariants({ size, status: error ? 'error' : 'default' }),\n              'resize-y',\n              classNames?.textarea,\n            )}\n          />\n\n          {showDropdown && filteredOptions.length > 0 && (\n            <div\n              data-slot=\"dropdown\"\n              className={cn(\n                'mentions_dropdown',\n                'absolute z-[var(--z-popover)] rounded-md border border-border bg-background shadow-md max-h-[200px] overflow-auto min-w-[180px]',\n                classNames?.dropdown,\n              )}\n              style={{ top: dropdownPos.top, left: Math.min(dropdownPos.left, 200) }}\n            >\n              {loading ? (\n                <div className=\"px-3 py-2 text-sm text-text-secondary\">Loading...</div>\n              ) : (\n                filteredOptions.map((option, idx) => (\n                  <div\n                    key={option.value}\n                    onMouseDown={(e) => { e.preventDefault(); insertMention(option) }}\n                    onMouseEnter={() => setHighlightedIdx(idx)}\n                    data-slot=\"option\"\n                    className={cn(\n                      'mentions_option',\n                      'flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors',\n                      idx === highlightedIdx ? 'bg-surface text-text-primary' : 'text-text-primary hover:bg-surface',\n                      classNames?.option,\n                    )}\n                  >\n                    {option.icon && <span className=\"shrink-0 w-5 h-5\">{option.icon}</span>}\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"font-medium truncate\">{option.label}</div>\n                      {option.description && (\n                        <div className=\"text-xs text-text-secondary truncate\">{option.description}</div>\n                      )}\n                    </div>\n                  </div>\n                ))\n              )}\n            </div>\n          )}\n        </div>\n\n        {(error || helperText) && (\n          <p data-slot=\"message\" className={cn('text-xs', error ? statusMessageVariants({ status: 'error' }) : 'text-text-secondary')}>\n            {error || helperText}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nMentions.displayName = 'Mentions'\n\nexport type * from './types'\nexport default Mentions\n"]}