@fangxinyan/lumina 0.1.2 → 0.1.4

package/dist/chunk-RPD2OIIP.js

@@ -0,0 +1,335 @@
+import { useFloating } from './chunk-V2DIQ3RH.js';
+import './tokens-HWQ7KWPG.css';
+import './shared-NJHRNLRH.css';
+import './ColorPicker-GP7AQYUU.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
+function normalizeHex(input) {
+  const s = input.trim().replace(/^#/, "");
+  if (!/^([\da-f]{3}|[\da-f]{6})$/i.test(s)) return null;
+  const full = s.length === 3 ? s.split("").map((c) => c + c).join("") : s;
+  return "#" + full.toLowerCase();
+}
+function hexToRgb(hex) {
+  const n = normalizeHex(hex);
+  if (!n) return null;
+  const int = parseInt(n.slice(1), 16);
+  return [int >> 16 & 255, int >> 8 & 255, int & 255];
+}
+function rgbToHex(r, g, b) {
+  const to = (x) => {
+    const h = clamp(Math.round(x), 0, 255).toString(16);
+    return h.length === 1 ? "0" + h : h;
+  };
+  return "#" + to(r) + to(g) + to(b);
+}
+function rgbToHsv(r, g, b) {
+  const R = r / 255;
+  const G = g / 255;
+  const B = b / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === R) h = (G - B) / d % 6;
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max * 100;
+  const v = max * 100;
+  return [h, s, v];
+}
+function hsvToRgb(h, s, v) {
+  const S = s / 100;
+  const V = v / 100;
+  const c = V * S;
+  const hh = h % 360 / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  const m = V - c;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hh < 1) [r, g, b] = [c, x, 0];
+  else if (hh < 2) [r, g, b] = [x, c, 0];
+  else if (hh < 3) [r, g, b] = [0, c, x];
+  else if (hh < 4) [r, g, b] = [0, x, c];
+  else if (hh < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+var hexToHsv = (hex) => {
+  const rgb = hexToRgb(hex);
+  return rgb ? rgbToHsv(...rgb) : null;
+};
+var hsvToHex = (h, s, v) => rgbToHex(...hsvToRgb(h, s, v));
+var DEFAULT_PRESETS = [
+  "#ff6b6b",
+  "#ffa94d",
+  "#ffd43b",
+  "#51cf66",
+  "#22b8cf",
+  "#339af0",
+  "#845ef7",
+  "#f06595",
+  "#868e96",
+  "#212529"
+];
+var SaturationBoard = ({ hue, s, v, onChange }) => {
+  const ref = React.useRef(null);
+  const compute = (clientX, clientY) => {
+    const el = ref.current;
+    if (!el) return { s, v };
+    const rect = el.getBoundingClientRect();
+    const ns = clamp((clientX - rect.left) / rect.width * 100, 0, 100);
+    const nv = clamp(100 - (clientY - rect.top) / rect.height * 100, 0, 100);
+    return { s: ns, v: nv };
+  };
+  const handlePointerDown = (e) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    const first = compute(e.clientX, e.clientY);
+    onChange(first.s, first.v, false);
+    const move = (ev) => {
+      const c = compute(ev.clientX, ev.clientY);
+      onChange(c.s, c.v, false);
+    };
+    const up = (ev) => {
+      const c = compute(ev.clientX, ev.clientY);
+      onChange(c.s, c.v, true);
+      el.releasePointerCapture(e.pointerId);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+    };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "cp-board",
+      style: { background: `hsl(${hue}, 100%, 50%)` },
+      onPointerDown: handlePointerDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cp-board-white" }),
+        /* @__PURE__ */ jsx("div", { className: "cp-board-black" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cp-board-thumb",
+            style: { left: `${s}%`, top: `${100 - v}%` }
+          }
+        )
+      ]
+    }
+  );
+};
+var HueSlider = ({ hue, onChange }) => {
+  const ref = React.useRef(null);
+  const compute = (clientX) => {
+    const el = ref.current;
+    if (!el) return hue;
+    const rect = el.getBoundingClientRect();
+    return clamp((clientX - rect.left) / rect.width * 360, 0, 360);
+  };
+  const handlePointerDown = (e) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    onChange(compute(e.clientX), false);
+    const move = (ev) => onChange(compute(ev.clientX), false);
+    const up = (ev) => {
+      onChange(compute(ev.clientX), true);
+      el.releasePointerCapture(e.pointerId);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+    };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: "cp-hue", onPointerDown: handlePointerDown, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "cp-hue-thumb",
+      style: { left: `${hue / 360 * 100}%` }
+    }
+  ) });
+};
+var ColorPicker = React.forwardRef(
+  (props, ref) => {
+    const {
+      value,
+      defaultValue = "#845ef7",
+      onChange,
+      onChangeComplete,
+      disabled,
+      size = "md",
+      placement = "bottom",
+      presets = DEFAULT_PRESETS,
+      showText = false,
+      children,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      className = "",
+      style
+    } = props;
+    const isControlled = value != null;
+    const [internal, setInternal] = React.useState(
+      normalizeHex(defaultValue) ?? "#845ef7"
+    );
+    const current = normalizeHex((isControlled ? value : internal) ?? "") ?? "#845ef7";
+    const isOpenControlled = openProp != null;
+    const [openState, setOpenState] = React.useState(defaultOpen);
+    const open = isOpenControlled ? !!openProp : openState;
+    const setOpen = (next) => {
+      if (!isOpenControlled) setOpenState(next);
+      onOpenChange?.(next);
+    };
+    const [inputText, setInputText] = React.useState(current);
+    React.useEffect(() => setInputText(current), [current]);
+    const { triggerRef, floatingStyle } = useFloating({
+      open,
+      placement,
+      panelWidth: 256,
+      panelHeight: 300
+    });
+    const panelRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => triggerRef.current);
+    React.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        const t = e.target;
+        if (triggerRef.current?.contains(t)) return;
+        if (panelRef.current?.contains(t)) return;
+        setOpen(false);
+      };
+      const onKey = (e) => {
+        if (e.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("mousedown", onDown);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDown);
+        document.removeEventListener("keydown", onKey);
+      };
+    }, [open]);
+    const commit = (hex, done) => {
+      const n = normalizeHex(hex);
+      if (!n) return;
+      if (!isControlled) setInternal(n);
+      onChange?.(n);
+      if (done) onChangeComplete?.(n);
+    };
+    const hsv = hexToHsv(current) ?? [0, 100, 100];
+    const [h, s, v] = hsv;
+    const handleBoard = (ns, nv, done) => {
+      commit(hsvToHex(h, ns, nv), done);
+    };
+    const handleHue = (nh, done) => {
+      commit(hsvToHex(nh, s, v), done);
+    };
+    const handleInputBlur = () => {
+      const n = normalizeHex(inputText);
+      if (n) commit(n, true);
+      else setInputText(current);
+    };
+    const handleInputKey = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `cp ${placement} ${open ? "open" : ""} ${className}`,
+        style,
+        children: [
+          children ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref: triggerRef,
+              className: "cp-custom-trigger",
+              disabled,
+              onClick: () => !disabled && setOpen(!open),
+              children
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              ref: triggerRef,
+              className: `cp-trigger ${size}`,
+              disabled,
+              onClick: () => !disabled && setOpen(!open),
+              "aria-label": `\u9009\u62E9\u989C\u8272 (\u5F53\u524D ${current})`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cp-swatch", style: { background: current } }),
+                showText && /* @__PURE__ */ jsx("span", { className: "cp-text", children: current })
+              ]
+            }
+          ),
+          open && !disabled && typeof document !== "undefined" && createPortal(
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: panelRef,
+                className: "cp-panel",
+                role: "dialog",
+                style: floatingStyle,
+                children: [
+                  /* @__PURE__ */ jsx(SaturationBoard, { hue: h, s, v, onChange: handleBoard }),
+                  /* @__PURE__ */ jsx(HueSlider, { hue: h, onChange: handleHue }),
+                  /* @__PURE__ */ jsxs("div", { className: "cp-row", children: [
+                    /* @__PURE__ */ jsx("span", { className: "cp-swatch sm", style: { background: current } }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: "cp-input",
+                        value: inputText,
+                        onChange: (e) => setInputText(e.target.value),
+                        onBlur: handleInputBlur,
+                        onKeyDown: handleInputKey,
+                        spellCheck: false
+                      }
+                    )
+                  ] }),
+                  presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "cp-presets", children: presets.map((p) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `cp-preset ${current === normalizeHex(p) ? "active" : ""}`,
+                      style: { background: p },
+                      onClick: () => commit(p, true),
+                      "aria-label": p
+                    },
+                    p
+                  )) })
+                ]
+              }
+            ),
+            document.body
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+export { ColorPicker };
+//# sourceMappingURL=chunk-RPD2OIIP.js.map
+//# sourceMappingURL=chunk-RPD2OIIP.js.map

package/dist/chunk-RPD2OIIP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","file":"chunk-RPD2OIIP.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./ColorPicker.css\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFloating } from \"../../utils/useFloating\";\n\n/* ============================================================================\n * Color conversion helpers\n * ========================================================================== */\n\ntype RGB = [number, number, number];\ntype HSV = [number, number, number];\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi);\n\nfunction normalizeHex(input: string): string | null {\n  const s = input.trim().replace(/^#/, \"\");\n  if (!/^([\\da-f]{3}|[\\da-f]{6})$/i.test(s)) return null;\n  const full = s.length === 3 ? s.split(\"\").map((c) => c + c).join(\"\") : s;\n  return \"#\" + full.toLowerCase();\n}\n\nfunction hexToRgb(hex: string): RGB | null {\n  const n = normalizeHex(hex);\n  if (!n) return null;\n  const int = parseInt(n.slice(1), 16);\n  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const to = (x: number) => {\n    const h = clamp(Math.round(x), 0, 255).toString(16);\n    return h.length === 1 ? \"0\" + h : h;\n  };\n  return \"#\" + to(r) + to(g) + to(b);\n}\n\nfunction rgbToHsv(r: number, g: number, b: number): HSV {\n  const R = r / 255;\n  const G = g / 255;\n  const B = b / 255;\n  const max = Math.max(R, G, B);\n  const 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;\n    else if (max === G) h = (B - R) / d + 2;\n    else h = (R - G) / d + 4;\n    h *= 60;\n    if (h < 0) h += 360;\n  }\n  const s = max === 0 ? 0 : (d / max) * 100;\n  const v = max * 100;\n  return [h, s, v];\n}\n\nfunction hsvToRgb(h: number, s: number, v: number): RGB {\n  const S = s / 100;\n  const V = v / 100;\n  const c = V * S;\n  const hh = (h % 360) / 60;\n  const x = c * (1 - Math.abs((hh % 2) - 1));\n  const m = V - c;\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (hh < 1) [r, g, b] = [c, x, 0];\n  else if (hh < 2) [r, g, b] = [x, c, 0];\n  else if (hh < 3) [r, g, b] = [0, c, x];\n  else if (hh < 4) [r, g, b] = [0, x, c];\n  else if (hh < 5) [r, g, b] = [x, 0, c];\n  else [r, g, b] = [c, 0, x];\n  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];\n}\n\nconst hexToHsv = (hex: string): HSV | null => {\n  const rgb = hexToRgb(hex);\n  return rgb ? rgbToHsv(...rgb) : null;\n};\n\nconst hsvToHex = (h: number, s: number, v: number): string => rgbToHex(...hsvToRgb(h, s, v));\n\n/* ============================================================================\n * Public API\n * ========================================================================== */\n\nexport interface ColorPickerProps {\n  /** Controlled hex color (e.g. \"#ff6b6b\"). */\n  value?: string;\n  /** Initial hex when uncontrolled. */\n  defaultValue?: string;\n  /** Fires on every pixel of drag / input edit. */\n  onChange?: (hex: string) => void;\n  /** Fires once when a drag / input / preset commit finishes. */\n  onChangeComplete?: (hex: string) => void;\n  /** Disable the trigger. */\n  disabled?: boolean;\n  /** Size of the swatch trigger. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Where the panel appears relative to the trigger. */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Hex preset chips below the panel. */\n  presets?: string[];\n  /** Show the current hex next to the swatch. */\n  showText?: boolean;\n  /** Custom trigger; defaults to a swatch chip. */\n  children?: React.ReactNode;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/* ============================================================================\n * Internals\n * ========================================================================== */\n\nconst DEFAULT_PRESETS = [\n  \"#ff6b6b\",\n  \"#ffa94d\",\n  \"#ffd43b\",\n  \"#51cf66\",\n  \"#22b8cf\",\n  \"#339af0\",\n  \"#845ef7\",\n  \"#f06595\",\n  \"#868e96\",\n  \"#212529\",\n];\n\ninterface BoardProps {\n  hue: number;\n  s: number;\n  v: number;\n  onChange: (s: number, v: number, done: boolean) => void;\n}\n\nconst SaturationBoard: React.FC<BoardProps> = ({ hue, s, v, onChange }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  const compute = (clientX: number, clientY: number) => {\n    const el = ref.current;\n    if (!el) return { s, v };\n    const rect = el.getBoundingClientRect();\n    const ns = clamp(((clientX - rect.left) / rect.width) * 100, 0, 100);\n    const nv = clamp(100 - ((clientY - rect.top) / rect.height) * 100, 0, 100);\n    return { s: ns, v: nv };\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el) return;\n    el.setPointerCapture(e.pointerId);\n    const first = compute(e.clientX, e.clientY);\n    onChange(first.s, first.v, false);\n\n    const move = (ev: PointerEvent) => {\n      const c = compute(ev.clientX, ev.clientY);\n      onChange(c.s, c.v, false);\n    };\n    const up = (ev: PointerEvent) => {\n      const c = compute(ev.clientX, ev.clientY);\n      onChange(c.s, c.v, true);\n      el.releasePointerCapture(e.pointerId);\n      el.removeEventListener(\"pointermove\", move);\n      el.removeEventListener(\"pointerup\", up);\n      el.removeEventListener(\"pointercancel\", up);\n    };\n    el.addEventListener(\"pointermove\", move);\n    el.addEventListener(\"pointerup\", up);\n    el.addEventListener(\"pointercancel\", up);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className=\"cp-board\"\n      style={{ background: `hsl(${hue}, 100%, 50%)` }}\n      onPointerDown={handlePointerDown}\n    >\n      <div className=\"cp-board-white\" />\n      <div className=\"cp-board-black\" />\n      <div\n        className=\"cp-board-thumb\"\n        style={{ left: `${s}%`, top: `${100 - v}%` }}\n      />\n    </div>\n  );\n};\n\ninterface HueProps {\n  hue: number;\n  onChange: (h: number, done: boolean) => void;\n}\n\nconst HueSlider: React.FC<HueProps> = ({ hue, onChange }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  const compute = (clientX: number) => {\n    const el = ref.current;\n    if (!el) return hue;\n    const rect = el.getBoundingClientRect();\n    return clamp(((clientX - rect.left) / rect.width) * 360, 0, 360);\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el) return;\n    el.setPointerCapture(e.pointerId);\n    onChange(compute(e.clientX), false);\n    const move = (ev: PointerEvent) => onChange(compute(ev.clientX), false);\n    const up = (ev: PointerEvent) => {\n      onChange(compute(ev.clientX), true);\n      el.releasePointerCapture(e.pointerId);\n      el.removeEventListener(\"pointermove\", move);\n      el.removeEventListener(\"pointerup\", up);\n      el.removeEventListener(\"pointercancel\", up);\n    };\n    el.addEventListener(\"pointermove\", move);\n    el.addEventListener(\"pointerup\", up);\n    el.addEventListener(\"pointercancel\", up);\n  };\n\n  return (\n    <div ref={ref} className=\"cp-hue\" onPointerDown={handlePointerDown}>\n      <div\n        className=\"cp-hue-thumb\"\n        style={{ left: `${(hue / 360) * 100}%` }}\n      />\n    </div>\n  );\n};\n\n/* ============================================================================\n * Main component\n * ========================================================================== */\n\n/**\n * `ColorPicker` — neumorphic color picker with HSV panel, hue slider,\n * hex input and optional preset palette.\n *\n * @example\n * <ColorPicker defaultValue=\"#845ef7\" onChange={setColor} />\n */\nexport const ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\n  (props, ref) => {\n    const {\n      value,\n      defaultValue = \"#845ef7\",\n      onChange,\n      onChangeComplete,\n      disabled,\n      size = \"md\",\n      placement = \"bottom\",\n      presets = DEFAULT_PRESETS,\n      showText = false,\n      children,\n      open: openProp,\n      defaultOpen = false,\n      onOpenChange,\n      className = \"\",\n      style,\n    } = props;\n\n    const isControlled = value != null;\n    const [internal, setInternal] = React.useState(\n      normalizeHex(defaultValue) ?? \"#845ef7\"\n    );\n    const current = normalizeHex((isControlled ? value : internal) ?? \"\") ?? \"#845ef7\";\n\n    const isOpenControlled = openProp != null;\n    const [openState, setOpenState] = React.useState(defaultOpen);\n    const open = isOpenControlled ? !!openProp : openState;\n    const setOpen = (next: boolean) => {\n      if (!isOpenControlled) setOpenState(next);\n      onOpenChange?.(next);\n    };\n\n    const [inputText, setInputText] = React.useState(current);\n    React.useEffect(() => setInputText(current), [current]);\n\n    const { triggerRef, floatingStyle } = useFloating<HTMLButtonElement>({\n      open,\n      placement,\n      panelWidth: 256,\n      panelHeight: 300,\n    });\n    const panelRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => triggerRef.current as HTMLButtonElement);\n\n    React.useEffect(() => {\n      if (!open) return;\n      const onDown = (e: MouseEvent) => {\n        const t = e.target as Node;\n        if (triggerRef.current?.contains(t)) return;\n        if (panelRef.current?.contains(t)) return;\n        setOpen(false);\n      };\n      const onKey = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") setOpen(false);\n      };\n      document.addEventListener(\"mousedown\", onDown);\n      document.addEventListener(\"keydown\", onKey);\n      return () => {\n        document.removeEventListener(\"mousedown\", onDown);\n        document.removeEventListener(\"keydown\", onKey);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    const commit = (hex: string, done: boolean) => {\n      const n = normalizeHex(hex);\n      if (!n) return;\n      if (!isControlled) setInternal(n);\n      onChange?.(n);\n      if (done) onChangeComplete?.(n);\n    };\n\n    const hsv = hexToHsv(current) ?? [0, 100, 100];\n    const [h, s, v] = hsv;\n\n    const handleBoard = (ns: number, nv: number, done: boolean) => {\n      commit(hsvToHex(h, ns, nv), done);\n    };\n    const handleHue = (nh: number, done: boolean) => {\n      commit(hsvToHex(nh, s, v), done);\n    };\n\n    const handleInputBlur = () => {\n      const n = normalizeHex(inputText);\n      if (n) commit(n, true);\n      else setInputText(current);\n    };\n\n    const handleInputKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        (e.target as HTMLInputElement).blur();\n      }\n    };\n\n    return (\n      <div\n        className={`cp ${placement} ${open ? \"open\" : \"\"} ${className}`}\n        style={style}\n      >\n        {children ? (\n          <button\n            type=\"button\"\n            ref={triggerRef}\n            className=\"cp-custom-trigger\"\n            disabled={disabled}\n            onClick={() => !disabled && setOpen(!open)}\n          >\n            {children}\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            ref={triggerRef}\n            className={`cp-trigger ${size}`}\n            disabled={disabled}\n            onClick={() => !disabled && setOpen(!open)}\n            aria-label={`选择颜色 (当前 ${current})`}\n          >\n            <span className=\"cp-swatch\" style={{ background: current }} />\n            {showText && <span className=\"cp-text\">{current}</span>}\n          </button>\n        )}\n\n        {open && !disabled && typeof document !== \"undefined\" &&\n          createPortal(\n            <div\n              ref={panelRef}\n              className=\"cp-panel\"\n              role=\"dialog\"\n              style={floatingStyle}\n            >\n              <SaturationBoard hue={h} s={s} v={v} onChange={handleBoard} />\n              <HueSlider hue={h} onChange={handleHue} />\n              <div className=\"cp-row\">\n                <span className=\"cp-swatch sm\" style={{ background: current }} />\n                <input\n                  className=\"cp-input\"\n                  value={inputText}\n                  onChange={(e) => setInputText(e.target.value)}\n                  onBlur={handleInputBlur}\n                  onKeyDown={handleInputKey}\n                  spellCheck={false}\n                />\n              </div>\n              {presets.length > 0 && (\n                <div className=\"cp-presets\">\n                  {presets.map((p) => (\n                    <button\n                      key={p}\n                      type=\"button\"\n                      className={`cp-preset ${current === normalizeHex(p) ? \"active\" : \"\"}`}\n                      style={{ background: p }}\n                      onClick={() => commit(p, true)}\n                      aria-label={p}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\nColorPicker.displayName = \"ColorPicker\";\n"]}

package/dist/chunk-RZ2E3XEU.cjs

@@ -0,0 +1,131 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/utils/useFloating.ts
+function useFloating(opts) {
+  const triggerRef = React__namespace.useRef(null);
+  const preferred = opts.placement ?? "bottom";
+  const gap = opts.gap ?? 8;
+  const panelW = opts.panelWidth ?? 240;
+  const panelH = opts.panelHeight ?? 300;
+  const doShift = opts.shift !== false;
+  const doFlip = opts.flip !== false;
+  const matchW = !!opts.matchTriggerWidth;
+  const align = opts.alignCross ?? "start";
+  const open = opts.open;
+  const [state, setState] = React__namespace.useState({ top: 0, left: 0, placement: preferred });
+  React__namespace.useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const el = triggerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const w = matchW ? rect.width : panelW;
+      const h = panelH;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const MARGIN = 8;
+      const place = (p) => {
+        switch (p) {
+          case "top":
+            return { top: rect.top - gap - h, left: rect.left };
+          case "right":
+            return { top: rect.top, left: rect.right + gap };
+          case "left":
+            return { top: rect.top, left: rect.left - gap - w };
+          case "bottom":
+          default:
+            return { top: rect.bottom + gap, left: rect.left };
+        }
+      };
+      const fits = (p, c) => {
+        if (p === "bottom") return c.top + h <= vh - MARGIN;
+        if (p === "top") return c.top >= MARGIN;
+        if (p === "right") return c.left + w <= vw - MARGIN;
+        if (p === "left") return c.left >= MARGIN;
+        return true;
+      };
+      let resolved = preferred;
+      let coords = place(resolved);
+      if (doFlip && !fits(resolved, coords)) {
+        const opp = {
+          top: "bottom",
+          bottom: "top",
+          left: "right",
+          right: "left"
+        };
+        const alt = opp[resolved];
+        const altCoords = place(alt);
+        if (fits(alt, altCoords)) {
+          resolved = alt;
+          coords = altCoords;
+        }
+      }
+      if (align !== "start") {
+        if (resolved === "top" || resolved === "bottom") {
+          coords.left = align === "center" ? rect.left + rect.width / 2 : rect.right;
+        } else {
+          coords.top = align === "center" ? rect.top + rect.height / 2 : rect.bottom;
+        }
+      } else if (doShift) {
+        if (resolved === "bottom" || resolved === "top") {
+          coords.left = Math.max(MARGIN, Math.min(coords.left, vw - w - MARGIN));
+        } else {
+          coords.top = Math.max(MARGIN, Math.min(coords.top, vh - h - MARGIN));
+        }
+      }
+      setState({
+        top: coords.top,
+        left: coords.left,
+        width: matchW ? rect.width : void 0,
+        placement: resolved
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, preferred, gap, panelW, panelH, doShift, doFlip, matchW]);
+  let transform;
+  if (align !== "start") {
+    const cross = state.placement === "top" || state.placement === "bottom" ? "X" : "Y";
+    const percent = align === "center" ? "-50%" : "-100%";
+    transform = `translate${cross}(${percent})`;
+  }
+  const floatingStyle = {
+    position: "fixed",
+    top: state.top,
+    left: state.left,
+    ...state.width != null ? { width: state.width } : {},
+    ...transform ? { transform } : {}
+  };
+  return { triggerRef, floatingStyle, placement: state.placement };
+}
+
+exports.useFloating = useFloating;
+//# sourceMappingURL=chunk-RZ2E3XEU.cjs.map
+//# sourceMappingURL=chunk-RZ2E3XEU.cjs.map

package/dist/chunk-RZ2E3XEU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useFloating.ts"],"names":["React"],"mappings":"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","file":"chunk-RZ2E3XEU.cjs","sourcesContent":["import * as React from \"react\";\n\nexport type Placement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface UseFloatingOptions {\n  /** Whether the floating element is currently visible. */\n  open: boolean;\n  /** Preferred placement relative to the trigger. Default `\"bottom\"`. */\n  placement?: Placement;\n  /** Distance between trigger and panel in px. Default 8. */\n  gap?: number;\n  /** Estimated panel width, used for flip / shift math. Ignored when `matchTriggerWidth`. */\n  panelWidth?: number;\n  /** Estimated panel height, used for flip / shift math. */\n  panelHeight?: number;\n  /** Keep the panel inside the viewport horizontally / vertically. Default true. */\n  shift?: boolean;\n  /** Flip to the opposite side if the preferred side would overflow. Default true. */\n  flip?: boolean;\n  /** Make the panel width track the trigger width (used by Select / Cascader). */\n  matchTriggerWidth?: boolean;\n  /**\n   * Cross-axis alignment of the panel relative to the trigger.\n   * - `\"start\"`  (default) — panel's leading edge lines up with trigger's leading edge.\n   * - `\"center\"` — panel is centered on the trigger (uses a CSS transform).\n   * - `\"end\"`    — panel's trailing edge lines up with trigger's trailing edge.\n   *\n   * `shift` is ignored for non-`\"start\"` alignments to avoid tugging against the\n   * caller's translate.\n   */\n  alignCross?: \"start\" | \"center\" | \"end\";\n}\n\nexport interface UseFloatingResult<T extends HTMLElement> {\n  /** Attach this to the trigger element. */\n  triggerRef: React.RefObject<T>;\n  /** Spread this onto the panel element. Already contains `position: fixed` + coords. */\n  floatingStyle: React.CSSProperties;\n  /** Resolved placement after flip logic — useful for arrow direction. */\n  placement: Placement;\n}\n\n/**\n * Minimal floating-element positioning hook used by Tooltip / Popover / Select /\n * Cascader / ColorPicker. Designed to be paired with `createPortal(document.body)`\n * so overflow clipping from ancestors becomes a non-issue.\n *\n * Not a general-purpose `@floating-ui` replacement — it only covers flip + shift\n * relative to the viewport, which is what Lumina's overlays need.\n */\nexport function useFloating<T extends HTMLElement = HTMLElement>(\n  opts: UseFloatingOptions\n): UseFloatingResult<T> {\n  const triggerRef = React.useRef<T>(null);\n  const preferred = opts.placement ?? \"bottom\";\n  const gap = opts.gap ?? 8;\n  const panelW = opts.panelWidth ?? 240;\n  const panelH = opts.panelHeight ?? 300;\n  const doShift = opts.shift !== false;\n  const doFlip = opts.flip !== false;\n  const matchW = !!opts.matchTriggerWidth;\n  const align = opts.alignCross ?? \"start\";\n  const open = opts.open;\n\n  const [state, setState] = React.useState<{\n    top: number;\n    left: number;\n    width?: number;\n    placement: Placement;\n  }>({ top: 0, left: 0, placement: preferred });\n\n  React.useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const el = triggerRef.current;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      const w = matchW ? rect.width : panelW;\n      const h = panelH;\n      const vw = window.innerWidth;\n      const vh = window.innerHeight;\n      const MARGIN = 8;\n\n      const place = (p: Placement) => {\n        switch (p) {\n          case \"top\":\n            return { top: rect.top - gap - h, left: rect.left };\n          case \"right\":\n            return { top: rect.top, left: rect.right + gap };\n          case \"left\":\n            return { top: rect.top, left: rect.left - gap - w };\n          case \"bottom\":\n          default:\n            return { top: rect.bottom + gap, left: rect.left };\n        }\n      };\n\n      const fits = (p: Placement, c: { top: number; left: number }) => {\n        if (p === \"bottom\") return c.top + h <= vh - MARGIN;\n        if (p === \"top\") return c.top >= MARGIN;\n        if (p === \"right\") return c.left + w <= vw - MARGIN;\n        if (p === \"left\") return c.left >= MARGIN;\n        return true;\n      };\n\n      let resolved: Placement = preferred;\n      let coords = place(resolved);\n\n      if (doFlip && !fits(resolved, coords)) {\n        const opp: Record<Placement, Placement> = {\n          top: \"bottom\",\n          bottom: \"top\",\n          left: \"right\",\n          right: \"left\",\n        };\n        const alt = opp[resolved];\n        const altCoords = place(alt);\n        if (fits(alt, altCoords)) {\n          resolved = alt;\n          coords = altCoords;\n        }\n      }\n\n      // Cross-axis alignment replaces the cross coordinate with the trigger\n      // midpoint / far edge; the paired CSS transform then visually aligns.\n      if (align !== \"start\") {\n        if (resolved === \"top\" || resolved === \"bottom\") {\n          coords.left =\n            align === \"center\" ? rect.left + rect.width / 2 : rect.right;\n        } else {\n          coords.top =\n            align === \"center\" ? rect.top + rect.height / 2 : rect.bottom;\n        }\n      } else if (doShift) {\n        if (resolved === \"bottom\" || resolved === \"top\") {\n          coords.left = Math.max(MARGIN, Math.min(coords.left, vw - w - MARGIN));\n        } else {\n          coords.top = Math.max(MARGIN, Math.min(coords.top, vh - h - MARGIN));\n        }\n      }\n\n      setState({\n        top: coords.top,\n        left: coords.left,\n        width: matchW ? rect.width : undefined,\n        placement: resolved,\n      });\n    };\n\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, preferred, gap, panelW, panelH, doShift, doFlip, matchW]);\n\n  let transform: string | undefined;\n  if (align !== \"start\") {\n    const cross = state.placement === \"top\" || state.placement === \"bottom\" ? \"X\" : \"Y\";\n    const percent = align === \"center\" ? \"-50%\" : \"-100%\";\n    transform = `translate${cross}(${percent})`;\n  }\n\n  const floatingStyle: React.CSSProperties = {\n    position: \"fixed\",\n    top: state.top,\n    left: state.left,\n    ...(state.width != null ? { width: state.width } : {}),\n    ...(transform ? { transform } : {}),\n  };\n\n  return { triggerRef, floatingStyle, placement: state.placement };\n}\n"]}

package/dist/{chunk-ZXM247EM.cjs → chunk-TWBJCFEJ.cjs}

@@ -1,10 +1,12 @@
 'use strict';
 
+var chunkRZ2E3XEU_cjs = require('./chunk-RZ2E3XEU.cjs');
 var chunkYVO7XO4W_cjs = require('./chunk-YVO7XO4W.cjs');
 require('./tokens-HWQ7KWPG.css');
 require('./shared-NJHRNLRH.css');
-require('./Cascader-TO2QMSLJ.css');
+require('./Cascader-DTRTTXC2.css');
 var React = require('react');
+var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -41,10 +43,19 @@ var Cascader = ({
   const cur = isControlled ? value : inner;
   const [open, setOpen] = React__namespace.useState(false);
   const [path, setPath] = React__namespace.useState(cur);
-  const ref = React__namespace.useRef(null);
+  const panelRef = React__namespace.useRef(null);
+  const { triggerRef: ref, floatingStyle } = chunkRZ2E3XEU_cjs.useFloating({
+    open,
+    placement: "bottom",
+    panelWidth: 520,
+    panelHeight: 260
+  });
   React__namespace.useEffect(() => {
     const h = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      const t = e.target;
+      if (ref.current?.contains(t)) return;
+      if (panelRef.current?.contains(t)) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
@@ -96,28 +107,31 @@ var Cascader = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-panel", children: columns.map((col, depth) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-col", children: col.map((o) => {
-      const isActive = path[depth] === o.value;
-      const hasChildren = !!(o.children && o.children.length);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: `cascader-item ${isActive ? "active" : ""}`,
-          disabled: o.disabled,
-          onClick: () => pick(depth, o.value, hasChildren),
-          children: [
-            o.icon && /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: o.icon, size: 13 }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: o.label }),
-            hasChildren && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chev", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "chevRight", size: 12 }) })
-          ]
-        },
-        o.value
-      );
-    }) }, depth)) })
+    open && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: panelRef, className: "cascader-panel", style: floatingStyle, children: columns.map((col, depth) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-col", children: col.map((o) => {
+        const isActive = path[depth] === o.value;
+        const hasChildren = !!(o.children && o.children.length);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: `cascader-item ${isActive ? "active" : ""}`,
+            disabled: o.disabled,
+            onClick: () => pick(depth, o.value, hasChildren),
+            children: [
+              o.icon && /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: o.icon, size: 13 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: o.label }),
+              hasChildren && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chev", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "chevRight", size: 12 }) })
+            ]
+          },
+          o.value
+        );
+      }) }, depth)) }),
+      document.body
+    )
   ] });
 };
 
 exports.Cascader = Cascader;
-//# sourceMappingURL=chunk-ZXM247EM.cjs.map
-//# sourceMappingURL=chunk-ZXM247EM.cjs.map
+//# sourceMappingURL=chunk-TWBJCFEJ.cjs.map
+//# sourceMappingURL=chunk-TWBJCFEJ.cjs.map