@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-STQDKMS5.cjs

@@ -0,0 +1,288 @@
+'use strict';
+
+var chunkHYHBCHFM_cjs = require('./chunk-HYHBCHFM.cjs');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Input-ZUASNDXM.css');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var InputThemeIdentityContext = React2__namespace.createContext(null);
+function InputThemeIdentityProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(InputThemeIdentityContext.Provider, { value, children });
+}
+function useInputThemeIdentity() {
+  return React2__namespace.useContext(InputThemeIdentityContext);
+}
+var InputBase = React2__namespace.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onValueChange,
+    placeholder,
+    leadingIcon,
+    trailingIcon,
+    onLeadingIconClick,
+    onTrailingIconClick,
+    size = "md",
+    invalid,
+    disabled,
+    allowClear,
+    maxLength,
+    showCount,
+    prefix,
+    suffix,
+    className = "",
+    theme,
+    style,
+    ...rest
+  }, ref) => {
+    const [inner, setInner] = React2__namespace.useState(defaultValue ?? "");
+    const themeIdentity = useInputThemeIdentity();
+    const themeComponent = themeIdentity?.component ?? "Input";
+    const themeCssPrefix = themeIdentity?.cssPrefix ?? "input";
+    const [themeRootElement, themeRootRef] = chunkNRJXZPZR_cjs.useComponentThemeRootRef(
+      void 0,
+      { component: themeComponent, theme }
+    );
+    const inputRef = React2__namespace.useRef(null);
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : inner;
+    const setInputRef = React2__namespace.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const wrapCls = [
+      "input-wrap",
+      size !== "md" && size,
+      invalid && "invalid",
+      disabled && "disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const handleIconClick = (handler) => handler ? (e) => {
+      e.stopPropagation();
+      if (!disabled) handler(e);
+    } : void 0;
+    const renderAffixIcon = (icon, side, handler) => {
+      if (icon == null || icon === false) return null;
+      const className2 = `${side}${handler ? " interactive" : ""}`;
+      if (chunk2AUXUZ3Z_cjs.isIconName(icon)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunk2AUXUZ3Z_cjs.Icon,
+          {
+            name: icon,
+            size: 14,
+            className: className2,
+            onClick: handleIconClick(handler),
+            role: handler ? "button" : void 0,
+            tabIndex: handler && !disabled ? 0 : void 0,
+            "aria-label": handler ? side === "lead" ? "Activate leading icon" : "Activate trailing icon" : void 0,
+            onKeyDown: handler ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handler(event);
+              }
+            } : void 0
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: className2,
+          onClick: handler ? (e) => {
+            e.stopPropagation();
+            if (!disabled) handler(e);
+          } : void 0,
+          role: handler ? "button" : void 0,
+          tabIndex: handler && !disabled ? 0 : void 0,
+          "aria-label": handler ? side === "lead" ? "Activate leading icon" : "Activate trailing icon" : void 0,
+          onKeyDown: handler ? (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              handler(event);
+            }
+          } : void 0,
+          children: chunk2AUXUZ3Z_cjs.renderIconSlot(icon)
+        }
+      );
+    };
+    const handleChange = (e) => {
+      if (!isControlled) setInner(e.target.value);
+      onChange?.(e);
+      onValueChange?.(e.target.value, e);
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      if (!isControlled) setInner("");
+      if (!isControlled && inputRef.current) inputRef.current.value = "";
+      const clearedTarget = chunkHYHBCHFM_cjs.createValueOverrideTarget(inputRef.current, "");
+      const synthetic = {
+        ...e,
+        type: "change",
+        target: clearedTarget,
+        currentTarget: clearedTarget
+      };
+      onChange?.(synthetic);
+      onValueChange?.("", synthetic);
+    };
+    const showClear = !!allowClear && !!currentValue && !disabled;
+    const count = currentValue ? currentValue.length : 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkNRJXZPZR_cjs.ComponentThemeBoundary,
+      {
+        component: themeComponent,
+        cssPrefix: themeCssPrefix,
+        theme,
+        rootElement: themeRootElement,
+        children: (themeState) => {
+          const mergedRootStyle = chunkNRJXZPZR_cjs.mergeComponentRootStyleWithInstanceStyle(
+            themeState.rootStyle,
+            style
+          );
+          const inputElement = /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: showCount ? void 0 : themeRootRef,
+              className: wrapCls,
+              ...!showCount ? themeState.rootDataAttributes : null,
+              style: showCount ? themeState.styles.control : mergedRootStyle,
+              children: [
+                renderAffixIcon(leadingIcon, "lead", onLeadingIconClick),
+                prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "input-affix prefix", children: prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: setInputRef,
+                    className: "input",
+                    value: isControlled ? value : void 0,
+                    defaultValue: isControlled ? void 0 : defaultValue,
+                    onChange: handleChange,
+                    placeholder,
+                    disabled,
+                    maxLength,
+                    ...rest,
+                    style: { ...themeState.styles.input, ...style }
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "input-affix suffix", children: suffix }),
+                showClear && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "input-clear",
+                    role: "button",
+                    "aria-label": "Clear",
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: handleClear,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "x", size: 12 })
+                  }
+                ),
+                renderAffixIcon(trailingIcon, "trail", onTrailingIconClick)
+              ]
+            }
+          );
+          if (!showCount) return inputElement;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: themeRootRef,
+              className: "input-shell",
+              ...themeState.rootDataAttributes,
+              style: mergedRootStyle,
+              children: [
+                inputElement,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "input-count", style: themeState.styles.count, children: maxLength != null ? `${count} / ${maxLength}` : `${count}` })
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+);
+InputBase.displayName = "Input";
+var InputPassword = React2__namespace.forwardRef(
+  ({
+    visibilityToggle = true,
+    iconRender,
+    suffix,
+    onValueChange,
+    ...rest
+  }, ref) => {
+    const [visible, setVisible] = React2__namespace.useState(false);
+    const renderedIcon = iconRender?.(visible);
+    const useCustomToggle = visibilityToggle !== false && !!renderedIcon;
+    const useDefaultToggle = visibilityToggle !== false && !renderedIcon;
+    const toggle = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setVisible((v) => !v);
+    };
+    const toggleNode = useCustomToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "input-password-toggle",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: toggle,
+        "aria-label": visible ? "Hide password" : "Show password",
+        children: renderedIcon
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(InputThemeIdentityProvider, { value: { component: "InputPassword", cssPrefix: "input" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      InputBase,
+      {
+        ref,
+        ...rest,
+        type: visible ? "text" : "password",
+        suffix: toggleNode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          suffix,
+          toggleNode
+        ] }) : suffix,
+        trailingIcon: useDefaultToggle ? visible ? "eyeOff" : "eye" : void 0,
+        onTrailingIconClick: useDefaultToggle ? () => setVisible((v) => !v) : void 0,
+        onValueChange
+      }
+    ) });
+  }
+);
+InputPassword.displayName = "Input.Password";
+var Input = InputBase;
+Input.Password = InputPassword;
+Input.TextArea = chunkHYHBCHFM_cjs.Textarea;
+
+exports.Input = Input;
+exports.InputPassword = InputPassword;
+exports.InputThemeIdentityProvider = InputThemeIdentityProvider;

package/dist/{chunk-HG6YS4I7.js → chunk-SXLRWYQQ.js}

@@ -1,13 +1,16 @@
 import { useInputTriggerToggle } from './chunk-RC6ULCQP.js';
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-IOAOG5L7.js';
-import { Button } from './chunk-IPSNC5VZ.js';
-import './tokens-RYJ3DFTU.css';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './TimePicker-ZBJOXH3U.css';
+import './TimePicker-WJ3FSK6A.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var clampStep = (value) => {
   if (!Number.isFinite(value) || !value || value < 1) return 1;
@@ -61,7 +64,7 @@ var compose = (base, key, value) => ({
   second: key === "second" ? value : base.second
 });
 var byDistanceFrom = (preferred) => (a, b) => Math.abs(a - preferred) - Math.abs(b - preferred) || a - b;
-var TimePicker = React.forwardRef(
+var TimePickerBase = React.forwardRef(
   ({
     value,
     defaultValue = null,
@@ -88,6 +91,12 @@ var TimePicker = React.forwardRef(
     dropdownClassName = "",
     className = "",
     onKeyDown,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": ariaRequired,
+    "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const includeSecond = showSecond ?? format === "HH:mm:ss";
@@ -122,13 +131,23 @@ var TimePicker = React.forwardRef(
       setOpen
     });
     const rootRef = React.useRef(null);
-    const panelRef = React.useRef(null);
-    const { triggerRef, floatingStyle } = useFloating({
+    const panelId = React.useId();
+    const portalContainer = usePortalContainer();
+    const portalTheme = useComponentPortalTheme("TimePicker");
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
       open,
       placement,
       panelWidth: includeSecond ? 312 : 236,
       panelHeight: 330
     });
+    useOverlayLayer({
+      open: open && !disabled && !readOnly && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
     const setRootRef = React.useCallback(
       (node) => {
         rootRef.current = node;
@@ -175,20 +194,16 @@ var TimePicker = React.forwardRef(
         if (panelRef.current?.contains(target)) return;
         setOpen(false);
       };
-      const onDocKey = (event) => {
-        if (event.key === "Escape") setOpen(false);
-      };
       document.addEventListener("mousedown", onDown);
-      document.addEventListener("keydown", onDocKey);
       return () => {
         document.removeEventListener("mousedown", onDown);
-        document.removeEventListener("keydown", onDocKey);
       };
     }, [open, setOpen]);
     const scrollListTo = React.useCallback(
       (list, top, animate) => {
         const frame = scrollFramesRef.current.get(list);
         if (frame != null) cancelAnimationFrame(frame);
+        scrollFramesRef.current.delete(list);
         if (!animate) {
           list.scrollTop = top;
           return;
@@ -218,7 +233,8 @@ var TimePicker = React.forwardRef(
     );
     React.useEffect(() => {
       if (!open) return;
-      const shouldAnimate = wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
+      const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const shouldAnimate = !prefersReducedMotion && wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
       requestAnimationFrame(() => {
         panelRef.current?.querySelectorAll(".time-picker-list").forEach((list) => {
           const selected = list.querySelector(".time-picker-option.selected");
@@ -276,11 +292,12 @@ var TimePicker = React.forwardRef(
         return;
       }
       const parsed = parseTime(draft);
-      if (!parsed || isDisabledTime(parsed)) {
+      const normalized = parsed ? { ...parsed, second: includeSecond ? parsed.second : 0 } : null;
+      if (!normalized || isDisabledTime(normalized)) {
         setDraft(current ?? "");
         return;
       }
-      commit(parsed);
+      commit(normalized);
     };
     const handleRootKeyDown = (event) => {
       onKeyDown?.(event);
@@ -294,6 +311,20 @@ var TimePicker = React.forwardRef(
         setOpen(false);
       }
     };
+    const handleOptionKeyDown = (event) => {
+      const list = event.currentTarget.parentElement;
+      if (!list) return;
+      const options = Array.from(list.querySelectorAll("button:not(:disabled)"));
+      const index = options.indexOf(event.currentTarget);
+      let nextIndex = index;
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") nextIndex = index + 1;
+      else if (event.key === "ArrowUp" || event.key === "ArrowLeft") nextIndex = index - 1;
+      else if (event.key === "Home") nextIndex = 0;
+      else if (event.key === "End") nextIndex = options.length - 1;
+      else return;
+      event.preventDefault();
+      options[Math.max(0, Math.min(options.length - 1, nextIndex))]?.focus();
+    };
     const renderColumn = (label, key, options) => /* @__PURE__ */ jsxs("div", { className: "time-picker-column", children: [
       /* @__PURE__ */ jsx("div", { className: "time-picker-column-label", children: label }),
       /* @__PURE__ */ jsx("div", { className: "time-picker-list", role: "listbox", "aria-label": label, children: options.map((option) => {
@@ -308,6 +339,7 @@ var TimePicker = React.forwardRef(
             disabled: optionDisabled,
             className: `time-picker-option ${selected ? "selected" : ""}`,
             onClick: () => pick(key, option),
+            onKeyDown: handleOptionKeyDown,
             children: pad(option)
           },
           option
@@ -326,10 +358,16 @@ var TimePicker = React.forwardRef(
       invalid && "invalid",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
+    return /* @__PURE__ */ jsx("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: ["Input", "Button"], children: [
       /* @__PURE__ */ jsx(
         Input,
         {
+          id: fieldId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
+          "aria-describedby": ariaDescribedBy,
           value: draft,
           size,
           placeholder,
@@ -343,17 +381,21 @@ var TimePicker = React.forwardRef(
           onBlur: handleInputBlur,
           inputMode: "numeric",
           "aria-expanded": open,
-          "aria-haspopup": "dialog"
+          "aria-haspopup": "dialog",
+          "aria-controls": open ? panelId : void 0
         }
       ),
-      open && !disabled && !readOnly && typeof document !== "undefined" && createPortal(
+      open && !disabled && !readOnly && portalContainer && createPortal(
         /* @__PURE__ */ jsxs(
           "div",
           {
             ref: panelRef,
+            id: panelId,
             className: `time-picker-panel ${includeSecond ? "with-second" : "without-second"} ${mergedPanelClassName}`,
             role: "dialog",
-            style: floatingStyle,
+            "aria-label": "\u9009\u62E9\u65F6\u95F4",
+            ...portalTheme.dataAttributes,
+            style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "time-picker-columns", children: [
                 renderColumn("\u65F6", "hour", hourOptions),
@@ -389,11 +431,16 @@ var TimePicker = React.forwardRef(
             ]
           }
         ),
-        document.body
+        portalContainer
       )
-    ] });
+    ] }) });
   }
 );
-TimePicker.displayName = "TimePicker";
+TimePickerBase.displayName = "TimePicker";
+var TimePicker = withComponentTheme(
+  TimePickerBase,
+  "TimePicker",
+  ["time-picker", "input", "button"]
+);
 
 export { TimePicker };

package/dist/{chunk-SW2HMNCA.cjs → chunk-T4RR6NVU.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('./Button-TUMZUQLI.css');
+require('./Button-ILNZUX2N.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 Button = React__namespace.forwardRef(
+var ButtonBase = React__namespace.forwardRef(
   ({
     children,
     variant = "default",
@@ -64,22 +65,29 @@ var Button = React__namespace.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
+        "aria-busy": loading || void 0,
         "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : chunkQMX67CVT_cjs.renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : chunk2AUXUZ3Z_cjs.renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
           content,
-          chunkQMX67CVT_cjs.renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
+          chunk2AUXUZ3Z_cjs.renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
         ]
       }
     );
   }
 );
-Button.displayName = "Button";
-var IconButton = React__namespace.forwardRef(
+ButtonBase.displayName = "Button";
+var Button = chunkNRJXZPZR_cjs.withComponentTheme(ButtonBase, "Button", "button");
+var IconButtonBase = React__namespace.forwardRef(
   ({ icon, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, icon, iconOnly: true, ...rest })
 );
-IconButton.displayName = "IconButton";
+IconButtonBase.displayName = "IconButton";
+var IconButton = chunkNRJXZPZR_cjs.withComponentTheme(
+  IconButtonBase,
+  "IconButton",
+  "button"
+);
 
 exports.Button = Button;
 exports.IconButton = IconButton;

package/dist/{chunk-6SPMHY54.js → chunk-TSL3F2K3.js}

@@ -178,14 +178,32 @@ 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)]));
 }
 
-export { cloneLuminaThemePreset, pickLuminaThemePresets };
+export { LUMINA_THEME_PRESETS, cloneLuminaThemePreset, pickLuminaThemePresets };