@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/chunk-UE4HFGJ6.js

@@ -0,0 +1,264 @@
+import { Textarea, createValueOverrideTarget } from './chunk-3F424R5P.js';
+import { Icon, isIconName, renderIconSlot } from './chunk-LQMOYVQF.js';
+import { useComponentThemeRootRef, ComponentThemeBoundary, mergeComponentRootStyleWithInstanceStyle } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Input-ZUASNDXM.css';
+import * as React2 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var InputThemeIdentityContext = React2.createContext(null);
+function InputThemeIdentityProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(InputThemeIdentityContext.Provider, { value, children });
+}
+function useInputThemeIdentity() {
+  return React2.useContext(InputThemeIdentityContext);
+}
+var InputBase = React2.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.useState(defaultValue ?? "");
+    const themeIdentity = useInputThemeIdentity();
+    const themeComponent = themeIdentity?.component ?? "Input";
+    const themeCssPrefix = themeIdentity?.cssPrefix ?? "input";
+    const [themeRootElement, themeRootRef] = useComponentThemeRootRef(
+      void 0,
+      { component: themeComponent, theme }
+    );
+    const inputRef = React2.useRef(null);
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : inner;
+    const setInputRef = React2.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 (isIconName(icon)) {
+        return /* @__PURE__ */ jsx(
+          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__ */ 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: 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 = 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__ */ jsx(
+      ComponentThemeBoundary,
+      {
+        component: themeComponent,
+        cssPrefix: themeCssPrefix,
+        theme,
+        rootElement: themeRootElement,
+        children: (themeState) => {
+          const mergedRootStyle = mergeComponentRootStyleWithInstanceStyle(
+            themeState.rootStyle,
+            style
+          );
+          const inputElement = /* @__PURE__ */ 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__ */ jsx("span", { className: "input-affix prefix", children: prefix }),
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "input-affix suffix", children: suffix }),
+                showClear && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "input-clear",
+                    role: "button",
+                    "aria-label": "Clear",
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: handleClear,
+                    children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
+                  }
+                ),
+                renderAffixIcon(trailingIcon, "trail", onTrailingIconClick)
+              ]
+            }
+          );
+          if (!showCount) return inputElement;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: themeRootRef,
+              className: "input-shell",
+              ...themeState.rootDataAttributes,
+              style: mergedRootStyle,
+              children: [
+                inputElement,
+                /* @__PURE__ */ jsx("div", { className: "input-count", style: themeState.styles.count, children: maxLength != null ? `${count} / ${maxLength}` : `${count}` })
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+);
+InputBase.displayName = "Input";
+var InputPassword = React2.forwardRef(
+  ({
+    visibilityToggle = true,
+    iconRender,
+    suffix,
+    onValueChange,
+    ...rest
+  }, ref) => {
+    const [visible, setVisible] = React2.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__ */ 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__ */ jsx(InputThemeIdentityProvider, { value: { component: "InputPassword", cssPrefix: "input" }, children: /* @__PURE__ */ jsx(
+      InputBase,
+      {
+        ref,
+        ...rest,
+        type: visible ? "text" : "password",
+        suffix: toggleNode ? /* @__PURE__ */ jsxs(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 = Textarea;
+
+export { Input, InputPassword, InputThemeIdentityProvider };