@luxfi/ui 6.1.2 → 7.0.0

package/dist/pin-input.cjs

@@ -0,0 +1,182 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/pin-input.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var INPUT_BASE = [
+  "w-10 h-10",
+  "text-center text-sm font-medium",
+  "border-2 rounded-md",
+  "outline-none appearance-none",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
+  "border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder)]",
+  "hover:border-[var(--color-input-border-hover)]",
+  "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
+  "disabled:opacity-40"
+].join(" ");
+var INPUT_FILLED = "border-[var(--color-input-border)]";
+var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
+var PinInput = React__namespace.forwardRef(
+  function PinInput2(props, ref) {
+    const {
+      count = 6,
+      inputProps,
+      rootRef,
+      attached,
+      placeholder = " ",
+      value: controlledValue,
+      onValueChange,
+      onValueComplete,
+      disabled,
+      invalid,
+      otp,
+      name,
+      bgColor,
+      className
+    } = props;
+    const inputRefs = React__namespace.useRef([]);
+    const values = React__namespace.useMemo(
+      () => controlledValue ?? Array.from({ length: count }).fill(""),
+      [controlledValue, count]
+    );
+    const updateValue = React__namespace.useCallback((index, char) => {
+      const next = [...values];
+      next[index] = char;
+      onValueChange?.({ value: next });
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+    }, [values, onValueChange, onValueComplete]);
+    const focusInput = React__namespace.useCallback((index) => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      inputRefs.current[clamped]?.focus();
+    }, [count]);
+    const handleInput = React__namespace.useCallback((index, e) => {
+      const target = e.currentTarget;
+      const char = target.value.slice(-1);
+      updateValue(index, char);
+      if (char && index < count - 1) {
+        focusInput(index + 1);
+      }
+    }, [count, updateValue, focusInput]);
+    const handleKeyDown = React__namespace.useCallback((index, e) => {
+      if (e.key === "Backspace") {
+        if (values[index]) {
+          updateValue(index, "");
+        } else if (index > 0) {
+          updateValue(index - 1, "");
+          focusInput(index - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        focusInput(index - 1);
+        e.preventDefault();
+      } else if (e.key === "ArrowRight" && index < count - 1) {
+        focusInput(index + 1);
+        e.preventDefault();
+      }
+    }, [count, values, updateValue, focusInput]);
+    const handlePaste = React__namespace.useCallback((e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text/plain").trim();
+      if (!pasted) {
+        return;
+      }
+      const chars = pasted.slice(0, count).split("");
+      const next = [...values];
+      chars.forEach((char, i) => {
+        next[i] = char;
+      });
+      onValueChange?.({ value: next });
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+      focusInput(Math.min(chars.length, count - 1));
+    }, [count, values, onValueChange, onValueComplete, focusInput]);
+    const handleFocus = React__namespace.useCallback((e) => {
+      e.currentTarget.select();
+    }, []);
+    const handleNoop = React__namespace.useCallback(() => {
+    }, []);
+    const setInputRef = React__namespace.useCallback((index) => (el) => {
+      inputRefs.current[index] = el;
+    }, []);
+    const onInputAtIndex = React__namespace.useCallback((index) => (e) => {
+      handleInput(index, e);
+    }, [handleInput]);
+    const onKeyDownAtIndex = React__namespace.useCallback((index) => (e) => {
+      handleKeyDown(index, e);
+    }, [handleKeyDown]);
+    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          type: "hidden",
+          name,
+          value: values.join(""),
+          ...inputProps
+        }
+      ),
+      Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: setInputRef(index),
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: otp ? "one-time-code" : "off",
+          pattern: "[0-9]*",
+          maxLength: 1,
+          placeholder,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          value: values[index] || "",
+          className: cn(
+            INPUT_BASE,
+            values[index] && INPUT_FILLED,
+            invalid && INPUT_INVALID,
+            attached && index > 0 && "-ml-0.5"
+          ),
+          style: bgStyle,
+          onInput: onInputAtIndex(index),
+          onKeyDown: onKeyDownAtIndex(index),
+          onPaste: handlePaste,
+          onFocus: handleFocus,
+          onChange: handleNoop
+        },
+        index
+      ))
+    ] });
+  }
+);
+
+exports.PinInput = PinInput;

package/dist/pin-input.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface PinInputProps {
+    readonly rootRef?: React.Ref<HTMLDivElement>;
+    readonly count?: number;
+    readonly inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    readonly attached?: boolean;
+    readonly placeholder?: string;
+    readonly value?: Array<string>;
+    readonly onValueChange?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly onValueComplete?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly disabled?: boolean;
+    readonly invalid?: boolean;
+    readonly otp?: boolean;
+    readonly name?: string;
+    readonly bgColor?: string;
+    readonly className?: string;
+}
+declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PinInput, type PinInputProps };

package/dist/pin-input.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface PinInputProps {
+    readonly rootRef?: React.Ref<HTMLDivElement>;
+    readonly count?: number;
+    readonly inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    readonly attached?: boolean;
+    readonly placeholder?: string;
+    readonly value?: Array<string>;
+    readonly onValueChange?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly onValueComplete?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly disabled?: boolean;
+    readonly invalid?: boolean;
+    readonly otp?: boolean;
+    readonly name?: string;
+    readonly bgColor?: string;
+    readonly className?: string;
+}
+declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PinInput, type PinInputProps };

package/dist/pin-input.js

@@ -0,0 +1,160 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/pin-input.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var INPUT_BASE = [
+  "w-10 h-10",
+  "text-center text-sm font-medium",
+  "border-2 rounded-md",
+  "outline-none appearance-none",
+  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
+  "border-[var(--color-input-border)]",
+  "placeholder:text-[var(--color-input-placeholder)]",
+  "hover:border-[var(--color-input-border-hover)]",
+  "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
+  "disabled:opacity-40"
+].join(" ");
+var INPUT_FILLED = "border-[var(--color-input-border)]";
+var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
+var PinInput = React.forwardRef(
+  function PinInput2(props, ref) {
+    const {
+      count = 6,
+      inputProps,
+      rootRef,
+      attached,
+      placeholder = " ",
+      value: controlledValue,
+      onValueChange,
+      onValueComplete,
+      disabled,
+      invalid,
+      otp,
+      name,
+      bgColor,
+      className
+    } = props;
+    const inputRefs = React.useRef([]);
+    const values = React.useMemo(
+      () => controlledValue ?? Array.from({ length: count }).fill(""),
+      [controlledValue, count]
+    );
+    const updateValue = React.useCallback((index, char) => {
+      const next = [...values];
+      next[index] = char;
+      onValueChange?.({ value: next });
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+    }, [values, onValueChange, onValueComplete]);
+    const focusInput = React.useCallback((index) => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      inputRefs.current[clamped]?.focus();
+    }, [count]);
+    const handleInput = React.useCallback((index, e) => {
+      const target = e.currentTarget;
+      const char = target.value.slice(-1);
+      updateValue(index, char);
+      if (char && index < count - 1) {
+        focusInput(index + 1);
+      }
+    }, [count, updateValue, focusInput]);
+    const handleKeyDown = React.useCallback((index, e) => {
+      if (e.key === "Backspace") {
+        if (values[index]) {
+          updateValue(index, "");
+        } else if (index > 0) {
+          updateValue(index - 1, "");
+          focusInput(index - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        focusInput(index - 1);
+        e.preventDefault();
+      } else if (e.key === "ArrowRight" && index < count - 1) {
+        focusInput(index + 1);
+        e.preventDefault();
+      }
+    }, [count, values, updateValue, focusInput]);
+    const handlePaste = React.useCallback((e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text/plain").trim();
+      if (!pasted) {
+        return;
+      }
+      const chars = pasted.slice(0, count).split("");
+      const next = [...values];
+      chars.forEach((char, i) => {
+        next[i] = char;
+      });
+      onValueChange?.({ value: next });
+      if (next.every((v) => v.length > 0)) {
+        onValueComplete?.({ value: next });
+      }
+      focusInput(Math.min(chars.length, count - 1));
+    }, [count, values, onValueChange, onValueComplete, focusInput]);
+    const handleFocus = React.useCallback((e) => {
+      e.currentTarget.select();
+    }, []);
+    const handleNoop = React.useCallback(() => {
+    }, []);
+    const setInputRef = React.useCallback((index) => (el) => {
+      inputRefs.current[index] = el;
+    }, []);
+    const onInputAtIndex = React.useCallback((index) => (e) => {
+      handleInput(index, e);
+    }, [handleInput]);
+    const onKeyDownAtIndex = React.useCallback((index) => (e) => {
+      handleKeyDown(index, e);
+    }, [handleKeyDown]);
+    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
+    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "hidden",
+          name,
+          value: values.join(""),
+          ...inputProps
+        }
+      ),
+      Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: setInputRef(index),
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: otp ? "one-time-code" : "off",
+          pattern: "[0-9]*",
+          maxLength: 1,
+          placeholder,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          value: values[index] || "",
+          className: cn(
+            INPUT_BASE,
+            values[index] && INPUT_FILLED,
+            invalid && INPUT_INVALID,
+            attached && index > 0 && "-ml-0.5"
+          ),
+          style: bgStyle,
+          onInput: onInputAtIndex(index),
+          onKeyDown: onKeyDownAtIndex(index),
+          onPaste: handlePaste,
+          onFocus: handleFocus,
+          onChange: handleNoop
+        },
+        index
+      ))
+    ] });
+  }
+);
+
+export { PinInput };