@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-FY73C7JK.js

@@ -0,0 +1,520 @@
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './ColorPicker-GRZOKR5O.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } 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));
+function supportsDomRef(type) {
+  if (typeof type === "string") return type !== "svg";
+  if (typeof type !== "object" || type == null) return false;
+  const marker = type.$$typeof;
+  if (marker === /* @__PURE__ */ Symbol.for("react.memo")) {
+    return supportsDomRef(type.type);
+  }
+  const displayName = type.displayName;
+  return marker === /* @__PURE__ */ Symbol.for("react.forward_ref") && (displayName === "Button" || displayName === "IconButton");
+}
+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);
+  };
+  const handleKeyDown = (event) => {
+    let nextS = s;
+    let nextV = v;
+    if (event.key === "ArrowLeft") nextS -= 1;
+    else if (event.key === "ArrowRight") nextS += 1;
+    else if (event.key === "ArrowDown") nextV -= 1;
+    else if (event.key === "ArrowUp") nextV += 1;
+    else return;
+    event.preventDefault();
+    onChange(clamp(nextS, 0, 100), clamp(nextV, 0, 100), true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "cp-board",
+      style: { background: `hsl(${hue}, 100%, 50%)` },
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "slider",
+      "aria-label": "\u989C\u8272\u9971\u548C\u5EA6\u4E0E\u660E\u5EA6",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(s),
+      "aria-valuetext": `\u9971\u548C\u5EA6 ${Math.round(s)}%\uFF0C\u660E\u5EA6 ${Math.round(v)}%`,
+      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);
+  };
+  const handleKeyDown = (event) => {
+    let next = hue;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") next -= 1;
+    else if (event.key === "ArrowRight" || event.key === "ArrowUp") next += 1;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = 360;
+    else return;
+    event.preventDefault();
+    onChange(clamp(next, 0, 360), true);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "cp-hue",
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "slider",
+      "aria-label": "\u8272\u76F8",
+      "aria-valuemin": 0,
+      "aria-valuemax": 360,
+      "aria-valuenow": Math.round(hue),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "cp-hue-thumb",
+          style: { left: `${hue / 360 * 100}%` }
+        }
+      )
+    }
+  );
+};
+var ColorPickerBase = 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,
+      onClick,
+      onKeyDown,
+      tabIndex,
+      ...rest
+    } = 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 = !disabled && (isOpenControlled ? !!openProp : openState);
+    const setOpen = (next) => {
+      if (!isOpenControlled) setOpenState(next);
+      onOpenChange?.(next);
+    };
+    React.useEffect(() => {
+      if (!disabled || isOpenControlled || !openState) return;
+      setOpenState(false);
+      onOpenChange?.(false);
+    }, [disabled, isOpenControlled, onOpenChange, openState]);
+    const [inputText, setInputText] = React.useState(current);
+    const [wrappedHasInteractiveChild, setWrappedHasInteractiveChild] = React.useState(false);
+    React.useEffect(() => setInputText(current), [current]);
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
+      open,
+      placement,
+      panelWidth: 256,
+      panelHeight: 300
+    });
+    const portalContainer = usePortalContainer();
+    const portalTheme = useComponentPortalTheme(["ColorPicker", "ThemePanel"]);
+    const panelId = React.useId();
+    useOverlayLayer({
+      open: open && !disabled && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
+    const setTriggerRef = React.useCallback((node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }, [ref, triggerRef]);
+    const setWrappedTriggerRef = React.useCallback((node) => {
+      setTriggerRef(node);
+      if (!node) return;
+      const hasInteractiveChild = !!node?.querySelector(
+        "button,input,select,textarea,a[href],[role='button'],[role='link']"
+      );
+      setWrappedHasInteractiveChild(hasInteractiveChild);
+    }, [setTriggerRef]);
+    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);
+      };
+      document.addEventListener("mousedown", onDown);
+      return () => {
+        document.removeEventListener("mousedown", onDown);
+      };
+    }, [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();
+      }
+    };
+    const handleInputChange = (next) => {
+      setInputText(next);
+      const digits = next.trim().replace(/^#/, "");
+      if (digits.length === 6 && normalizeHex(next)) commit(next, false);
+    };
+    const childElement = React.isValidElement(children) ? children : null;
+    const childSupportsRef = childElement ? supportsDomRef(childElement.type) : false;
+    const childType = childElement && typeof childElement.type === "string" ? childElement.type : void 0;
+    const nativeInteractive = childType === "button" || childType === "input" || childType === "select" || childType === "textarea" || childType === "a" && childElement?.props.href != null;
+    const handleCustomClick = (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      childElement?.props.onClick?.(event);
+      onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!open);
+    };
+    const handleWrappedClick = (event) => {
+      if (disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!open);
+    };
+    const handleCustomKeyDown = (event) => {
+      childElement?.props.onKeyDown?.(event);
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      const current2 = event.currentTarget;
+      const handlesKeyboardNatively = current2.matches("button,input,select,textarea") || current2.matches("a") && current2.hasAttribute("href");
+      if (!handlesKeyboardNatively && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    };
+    const handleWrappedKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) return;
+      const target = event.target;
+      const handlesKeyboardNatively = target.matches("button,input,select,textarea") || target.matches("a") && target.hasAttribute("href");
+      if (!handlesKeyboardNatively && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    };
+    const customTrigger = childElement && childSupportsRef ? React.cloneElement(childElement, {
+      ...rest,
+      ref: setTriggerRef,
+      role: childElement.props.role ?? (nativeInteractive ? void 0 : "button"),
+      tabIndex: disabled ? -1 : childElement.props.tabIndex ?? tabIndex ?? (nativeInteractive ? void 0 : 0),
+      ...childType === "button" || typeof childElement.type !== "string" ? { disabled: childElement.props.disabled ?? disabled } : {},
+      "aria-disabled": disabled || void 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0,
+      onClick: handleCustomClick,
+      onKeyDown: handleCustomKeyDown
+    }) : null;
+    const wrappedCustomTrigger = children != null && !customTrigger ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref: setWrappedTriggerRef,
+        className: "cp-custom-trigger",
+        role: wrappedHasInteractiveChild ? void 0 : "button",
+        tabIndex: wrappedHasInteractiveChild ? void 0 : disabled ? -1 : tabIndex ?? 0,
+        "aria-disabled": disabled || void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-label": rest["aria-label"] ?? (typeof children === "string" ? `\u9009\u62E9\u989C\u8272\uFF1A${children}` : void 0),
+        onClickCapture: disabled ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : rest.onClickCapture,
+        onKeyDownCapture: disabled ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : rest.onKeyDownCapture,
+        onClick: handleWrappedClick,
+        onKeyDown: handleWrappedKeyDown,
+        children: childElement ? React.cloneElement(childElement, {
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-controls": open ? panelId : void 0
+        }) : children
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `cp ${placement} ${open ? "open" : ""} ${className}`,
+        style,
+        children: [
+          customTrigger ? customTrigger : wrappedCustomTrigger ? wrappedCustomTrigger : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              ref: setTriggerRef,
+              className: `cp-trigger ${size}`,
+              disabled,
+              tabIndex,
+              onClick: (e) => {
+                onClick?.(e);
+                if (!disabled) setOpen(!open);
+              },
+              onKeyDown,
+              "aria-label": `\u9009\u62E9\u989C\u8272 (\u5F53\u524D ${current})`,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-controls": open ? panelId : void 0,
+              style,
+              ...rest,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cp-swatch", style: { background: current } }),
+                showText && /* @__PURE__ */ jsx("span", { className: "cp-text", children: current })
+              ]
+            }
+          ),
+          open && !disabled && portalContainer && createPortal(
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: panelRef,
+                id: panelId,
+                className: "cp-panel",
+                role: "dialog",
+                "aria-label": "\u9009\u62E9\u989C\u8272",
+                ...portalTheme.dataAttributes,
+                style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
+                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(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        className: "cp-input",
+                        size: "sm",
+                        value: inputText,
+                        onValueChange: handleInputChange,
+                        onBlur: handleInputBlur,
+                        onKeyDown: handleInputKey,
+                        spellCheck: false,
+                        "aria-label": "\u5341\u516D\u8FDB\u5236\u989C\u8272"
+                      }
+                    ) })
+                  ] }),
+                  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
+                  )) })
+                ]
+              }
+            ),
+            portalContainer
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPickerBase.displayName = "ColorPicker";
+var ColorPicker = withComponentTheme(
+  ColorPickerBase,
+  "ColorPicker",
+  ["color-picker", "input"]
+);
+
+export { ColorPicker };

package/dist/{chunk-6EOSMK34.cjs → chunk-G5LCOBOT.cjs}

@@ -180,15 +180,34 @@ var LUMINA_THEME_PRESETS = {
 };
 function cloneLuminaThemePreset(key) {
   const preset = LUMINA_THEME_PRESETS[key];
+  const components = preset.components ? Object.fromEntries(
+    Object.entries(preset.components).map(([name, override]) => [
+      name,
+      override ? {
+        ...override,
+        colors: override.colors ? { ...override.colors } : void 0,
+        tokens: override.tokens ? { ...override.tokens } : void 0,
+        styles: override.styles ? Object.fromEntries(
+          Object.entries(override.styles).map(([slot, style]) => [
+            slot,
+            style ? { ...style } : style
+          ])
+        ) : void 0
+      } : override
+    ])
+  ) : void 0;
   return {
     ...preset,
     accent: typeof preset.accent === "object" ? { ...preset.accent } : preset.accent,
-    tokens: { ...preset.tokens }
+    colors: preset.colors ? { ...preset.colors } : void 0,
+    tokens: { ...preset.tokens },
+    components
   };
 }
 function pickLuminaThemePresets(keys) {
   return Object.fromEntries(keys.map((key) => [key, cloneLuminaThemePreset(key)]));
 }
 
+exports.LUMINA_THEME_PRESETS = LUMINA_THEME_PRESETS;
 exports.cloneLuminaThemePreset = cloneLuminaThemePreset;
 exports.pickLuminaThemePresets = pickLuminaThemePresets;

package/dist/{chunk-5ERD3W24.cjs → chunk-GFKWSDD6.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Tag-G2XWAL7A.css');
+require('./Tag-5GIZLRAH.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var Tag = React__namespace.forwardRef(({
+var TagBase = React__namespace.forwardRef(({
   tone = "neutral",
   solid,
   dot,
@@ -48,23 +49,32 @@ var Tag = React__namespace.forwardRef(({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cls, ...rest, children: [
     dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot" }),
-    chunkQMX67CVT_cjs.renderIconSlot(icon, { size: 11, className: "tag-ico" }),
+    chunk2AUXUZ3Z_cjs.renderIconSlot(icon, { size: 11, className: "tag-ico" }),
     children,
     removable && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: "x",
         role: "button",
-        "aria-label": "Remove",
+        "aria-label": "\u79FB\u9664",
+        tabIndex: 0,
         onClick: (e) => {
           e.stopPropagation();
           onRemove?.();
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "x", size: 11 })
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            onRemove?.();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "x", size: 11 })
       }
     )
   ] });
 });
-Tag.displayName = "Tag";
+TagBase.displayName = "Tag";
+var Tag = chunkNRJXZPZR_cjs.withComponentTheme(TagBase, "Tag", "tag");
 
 exports.Tag = Tag;