@academix-admin/pin-input 0.1.0

package/dist/index.cjs

@@ -0,0 +1,187 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// src/PinInput.tsx
+function PinInput({
+  length = 6,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  mask = false,
+  revealed = false,
+  autoFocus = true,
+  classNames = {},
+  className,
+  inputProps
+}) {
+  const inputs = Array(length).fill(0);
+  const getFirstInvalidIndex = (val) => {
+    for (let i = 0; i < length; i++) {
+      if (!val[i]) return i;
+    }
+    return length - 1;
+  };
+  const handleChange = (e, index) => {
+    const digit = e.target.value.replace(/\D/g, "").slice(-1);
+    const otpArray = value.split("");
+    otpArray[index] = digit || "";
+    const nextValue = otpArray.join("");
+    onChange(nextValue);
+    const allowedIndex = getFirstInvalidIndex(nextValue);
+    if (digit && index < length - 1 && index < allowedIndex) {
+      const next = e.target.nextElementSibling;
+      next?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key !== "Backspace") return;
+    if (error && value.length === length) {
+      onChange("");
+      const els2 = e.currentTarget.parentElement.querySelectorAll("input");
+      els2[0].focus();
+      return;
+    }
+    const els = e.currentTarget.parentElement.querySelectorAll("input");
+    const domValues = Array.from(els).map((input) => input.value);
+    if (!domValues[index] && index > 0) {
+      const prev = els[index - 1];
+      prev.focus();
+    }
+    const otpArray = value.split("");
+    for (let i = index; i < otpArray.length; i++) {
+      otpArray[i] = "";
+    }
+    onChange(otpArray.join(""));
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
+    if (pasted) {
+      onChange(pasted.slice(0, length));
+    }
+  };
+  const handleFocus = (e, index) => {
+    const els = e.currentTarget.parentElement.querySelectorAll("input");
+    let allowedIndex = 0;
+    for (let i = 0; i < length; i++) {
+      if (els[i].value === "") {
+        allowedIndex = i;
+        break;
+      }
+      if (i === length - 1) allowedIndex = length - 1;
+    }
+    if (index > allowedIndex) {
+      els[allowedIndex].focus();
+    }
+  };
+  const display = (index) => {
+    if (mask && !revealed) return value[index] ? "*" : "";
+    return value[index] || "";
+  };
+  const containerClass = `${className ?? classNames.container ?? ""}${error && classNames.containerError ? ` ${classNames.containerError}` : ""}`.trim() || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClass, children: inputs.map((_, index) => /* @__PURE__ */ react.createElement(
+    "input",
+    {
+      ...inputProps,
+      key: index,
+      type: "text",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      maxLength: 1,
+      value: display(index),
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      disabled,
+      className: classNames.input,
+      autoFocus: autoFocus && index === 0 && !error,
+      onFocus: (e) => handleFocus(e, index)
+    }
+  )) });
+}
+var DIGITS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+function Keypad({
+  value,
+  onChange,
+  length = 6,
+  disabled = false,
+  error,
+  showMaskToggle = false,
+  revealed = false,
+  onToggleReveal,
+  backspaceLabel = "\u2715",
+  classNames = {},
+  className
+}) {
+  const handleDigitInput = (digit) => {
+    if (value.length < length) {
+      onChange(value + digit);
+    } else if (!!error && value.length === length) {
+      onChange(`${digit}`);
+    }
+  };
+  const handleBackspace = () => {
+    if (value.length > 0 && !error) {
+      onChange(value.slice(0, -1));
+    } else if (!!error && value.length === length) {
+      onChange("");
+    }
+  };
+  const btn = classNames.button ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className ?? classNames.keypad, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames.grid, children: [
+    DIGITS.map((digit) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleDigitInput(digit),
+        disabled,
+        className: btn || void 0,
+        children: digit
+      },
+      digit
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleBackspace,
+        disabled,
+        className: `${btn} ${classNames.backspace ?? ""}`.trim() || void 0,
+        children: backspaceLabel
+      }
+    ),
+    showMaskToggle && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onToggleReveal?.(!revealed),
+        disabled,
+        className: `${btn} ${classNames.toggle ?? ""}`.trim() || void 0,
+        title: revealed ? "Hide" : "Show",
+        "aria-label": revealed ? "Hide" : "Show",
+        children: revealed ? /* @__PURE__ */ jsxRuntime.jsx(EyeOpen, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeClosed, {})
+      }
+    )
+  ] }) });
+}
+function EyeOpen() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
+  ] });
+}
+function EyeClosed() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+
+exports.Keypad = Keypad;
+exports.PinInput = PinInput;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PinInput.tsx","../src/Keypad.tsx"],"names":["els","jsx","createElement","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * PinInput — a segmented numeric code input (OTP / PIN). Headless: it renders accessible\n * markup and you style every slot via `classNames` (bring your own classes). React-only,\n * no app/theme coupling, so it is safe for any consumer.\n *\n * The focus / auto-advance / backspace-cascade / paste / focus-guard behavior is the\n * device-proven academix logic, preserved exactly. Set `mask` for a hidden PIN (digits\n * render as `*` unless `revealed`); leave it off for a visible OTP.\n */\n\nexport interface PinInputClassNames {\n  /** the boxes wrapper. */\n  container?: string;\n  /** appended to the container while `error` is true. */\n  containerError?: string;\n  /** each single-character box. */\n  input?: string;\n}\n\nexport interface PinInputProps {\n  length?: number;\n  value: string;\n  onChange: (value: string) => void;\n  disabled?: boolean;\n  error?: boolean;\n  /** render digits masked (as `*`) unless `revealed`. */\n  mask?: boolean;\n  /** when `mask`, show the real digits. */\n  revealed?: boolean;\n  /** autofocus the first box on mount (when not in error). Default true. */\n  autoFocus?: boolean;\n  classNames?: PinInputClassNames;\n  /** shortcut for `classNames.container`. */\n  className?: string;\n  /** spread onto every box (e.g. password-manager suppression attrs, incl. `data-*`). */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> & Record<`data-${string}`, unknown>;\n}\n\nexport function PinInput({\n  length = 6,\n  value,\n  onChange,\n  disabled = false,\n  error = false,\n  mask = false,\n  revealed = false,\n  autoFocus = true,\n  classNames = {},\n  className,\n  inputProps,\n}: PinInputProps) {\n  const inputs = Array(length).fill(0);\n\n  const getFirstInvalidIndex = (val: string) => {\n    for (let i = 0; i < length; i++) {\n      if (!val[i]) return i;\n    }\n    return length - 1; // all full → last field\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const digit = e.target.value.replace(/\\D/g, '').slice(-1);\n\n    const otpArray = value.split('');\n    otpArray[index] = digit || '';\n    const nextValue = otpArray.join('');\n\n    onChange(nextValue);\n\n    // compute allowed index from the new value\n    const allowedIndex = getFirstInvalidIndex(nextValue);\n\n    // Auto-advance only if digit is valid and index < allowed position\n    if (digit && index < length - 1 && index < allowedIndex) {\n      const next = e.target.nextElementSibling as HTMLInputElement | null;\n      next?.focus();\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    if (e.key !== 'Backspace') return;\n\n    // Error mode: clear everything\n    if (error && value.length === length) {\n      onChange('');\n      const els = e.currentTarget.parentElement!.querySelectorAll('input');\n      (els[0] as HTMLInputElement).focus();\n      return;\n    }\n\n    const els = e.currentTarget.parentElement!.querySelectorAll('input');\n\n    // Build a snapshot of the current actual values from DOM, not from state.\n    const domValues = Array.from(els).map((input) => (input as HTMLInputElement).value);\n\n    // If current field already empty → move back\n    if (!domValues[index] && index > 0) {\n      const prev = els[index - 1] as HTMLInputElement;\n      prev.focus();\n    }\n\n    // Clear current char (and everything after) and update parent state\n    const otpArray = value.split('');\n    for (let i = index; i < otpArray.length; i++) {\n      otpArray[i] = '';\n    }\n    onChange(otpArray.join(''));\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const pasted = e.clipboardData.getData('text').replace(/\\D/g, '');\n    if (pasted) {\n      onChange(pasted.slice(0, length));\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>, index: number) => {\n    const els = e.currentTarget.parentElement!.querySelectorAll('input');\n\n    // Determine focusable index based on ACTUAL input values\n    let allowedIndex = 0;\n    for (let i = 0; i < length; i++) {\n      if ((els[i] as HTMLInputElement).value === '') {\n        allowedIndex = i;\n        break;\n      }\n      if (i === length - 1) allowedIndex = length - 1;\n    }\n\n    // Prevent skipping ahead\n    if (index > allowedIndex) {\n      (els[allowedIndex] as HTMLInputElement).focus();\n    }\n  };\n\n  const display = (index: number) => {\n    if (mask && !revealed) return value[index] ? '*' : '';\n    return value[index] || '';\n  };\n\n  const containerClass = `${className ?? classNames.container ?? ''}${\n    error && classNames.containerError ? ` ${classNames.containerError}` : ''\n  }`.trim() || undefined;\n\n  return (\n    <div className={containerClass}>\n      {inputs.map((_, index) => (\n        <input\n          {...inputProps}\n          key={index}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxLength={1}\n          value={display(index)}\n          onChange={(e) => handleChange(e, index)}\n          onKeyDown={(e) => handleKeyDown(e, index)}\n          onPaste={handlePaste}\n          disabled={disabled}\n          className={classNames.input}\n          autoFocus={autoFocus && index === 0 && !error}\n          onFocus={(e) => handleFocus(e, index)}\n        />\n      ))}\n    </div>\n  );\n}\n","'use client';\n\nimport React from 'react';\n\n/**\n * Keypad — an on-screen numeric keypad (0-9 + backspace, optional reveal/mask toggle)\n * that drives a `PinInput`'s value. Headless: style each slot via `classNames`. React-only.\n *\n * Behavior preserved from academix: append up to `length` digits; while `error` and the\n * value is full, the next digit replaces it and backspace clears it. Set `showMaskToggle`\n * for the PIN eye button (calls `onToggleReveal`); omit it for a plain OTP keypad.\n */\n\nexport interface KeypadClassNames {\n  /** outer wrapper. */\n  keypad?: string;\n  /** the button grid. */\n  grid?: string;\n  /** every key (digits, backspace, toggle). */\n  button?: string;\n  /** appended to the backspace key. */\n  backspace?: string;\n  /** appended to the mask-toggle key. */\n  toggle?: string;\n}\n\nexport interface KeypadProps {\n  value: string;\n  onChange: (value: string) => void;\n  length?: number;\n  disabled?: boolean;\n  error?: boolean;\n  /** render the reveal/mask (eye) toggle key. */\n  showMaskToggle?: boolean;\n  /** current reveal state (for the toggle icon/label). */\n  revealed?: boolean;\n  onToggleReveal?: (revealed: boolean) => void;\n  /** backspace key content. Default `✕`. */\n  backspaceLabel?: React.ReactNode;\n  classNames?: KeypadClassNames;\n  /** shortcut for `classNames.keypad`. */\n  className?: string;\n}\n\nconst DIGITS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n\nexport function Keypad({\n  value,\n  onChange,\n  length = 6,\n  disabled = false,\n  error,\n  showMaskToggle = false,\n  revealed = false,\n  onToggleReveal,\n  backspaceLabel = '✕',\n  classNames = {},\n  className,\n}: KeypadProps) {\n  const handleDigitInput = (digit: number) => {\n    if (value.length < length) {\n      onChange(value + digit);\n    } else if (!!error && value.length === length) {\n      onChange(`${digit}`);\n    }\n  };\n\n  const handleBackspace = () => {\n    if (value.length > 0 && !error) {\n      onChange(value.slice(0, -1));\n    } else if (!!error && value.length === length) {\n      onChange('');\n    }\n  };\n\n  const btn = classNames.button ?? '';\n\n  return (\n    <div className={className ?? classNames.keypad}>\n      <div className={classNames.grid}>\n        {DIGITS.map((digit) => (\n          <button\n            key={digit}\n            type=\"button\"\n            onClick={() => handleDigitInput(digit)}\n            disabled={disabled}\n            className={btn || undefined}\n          >\n            {digit}\n          </button>\n        ))}\n        <button\n          type=\"button\"\n          onClick={handleBackspace}\n          disabled={disabled}\n          className={`${btn} ${classNames.backspace ?? ''}`.trim() || undefined}\n        >\n          {backspaceLabel}\n        </button>\n        {showMaskToggle && (\n          <button\n            type=\"button\"\n            onClick={() => onToggleReveal?.(!revealed)}\n            disabled={disabled}\n            className={`${btn} ${classNames.toggle ?? ''}`.trim() || undefined}\n            title={revealed ? 'Hide' : 'Show'}\n            aria-label={revealed ? 'Hide' : 'Show'}\n          >\n            {revealed ? <EyeOpen /> : <EyeClosed />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction EyeOpen() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\nfunction EyeClosed() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n      <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,79 @@
+import React from 'react';
+
+/**
+ * PinInput — a segmented numeric code input (OTP / PIN). Headless: it renders accessible
+ * markup and you style every slot via `classNames` (bring your own classes). React-only,
+ * no app/theme coupling, so it is safe for any consumer.
+ *
+ * The focus / auto-advance / backspace-cascade / paste / focus-guard behavior is the
+ * device-proven academix logic, preserved exactly. Set `mask` for a hidden PIN (digits
+ * render as `*` unless `revealed`); leave it off for a visible OTP.
+ */
+interface PinInputClassNames {
+    /** the boxes wrapper. */
+    container?: string;
+    /** appended to the container while `error` is true. */
+    containerError?: string;
+    /** each single-character box. */
+    input?: string;
+}
+interface PinInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    /** render digits masked (as `*`) unless `revealed`. */
+    mask?: boolean;
+    /** when `mask`, show the real digits. */
+    revealed?: boolean;
+    /** autofocus the first box on mount (when not in error). Default true. */
+    autoFocus?: boolean;
+    classNames?: PinInputClassNames;
+    /** shortcut for `classNames.container`. */
+    className?: string;
+    /** spread onto every box (e.g. password-manager suppression attrs, incl. `data-*`). */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & Record<`data-${string}`, unknown>;
+}
+declare function PinInput({ length, value, onChange, disabled, error, mask, revealed, autoFocus, classNames, className, inputProps, }: PinInputProps): React.JSX.Element;
+
+/**
+ * Keypad — an on-screen numeric keypad (0-9 + backspace, optional reveal/mask toggle)
+ * that drives a `PinInput`'s value. Headless: style each slot via `classNames`. React-only.
+ *
+ * Behavior preserved from academix: append up to `length` digits; while `error` and the
+ * value is full, the next digit replaces it and backspace clears it. Set `showMaskToggle`
+ * for the PIN eye button (calls `onToggleReveal`); omit it for a plain OTP keypad.
+ */
+interface KeypadClassNames {
+    /** outer wrapper. */
+    keypad?: string;
+    /** the button grid. */
+    grid?: string;
+    /** every key (digits, backspace, toggle). */
+    button?: string;
+    /** appended to the backspace key. */
+    backspace?: string;
+    /** appended to the mask-toggle key. */
+    toggle?: string;
+}
+interface KeypadProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    error?: boolean;
+    /** render the reveal/mask (eye) toggle key. */
+    showMaskToggle?: boolean;
+    /** current reveal state (for the toggle icon/label). */
+    revealed?: boolean;
+    onToggleReveal?: (revealed: boolean) => void;
+    /** backspace key content. Default `✕`. */
+    backspaceLabel?: React.ReactNode;
+    classNames?: KeypadClassNames;
+    /** shortcut for `classNames.keypad`. */
+    className?: string;
+}
+declare function Keypad({ value, onChange, length, disabled, error, showMaskToggle, revealed, onToggleReveal, backspaceLabel, classNames, className, }: KeypadProps): React.JSX.Element;
+
+export { Keypad, type KeypadClassNames, type KeypadProps, PinInput, type PinInputClassNames, type PinInputProps };

package/dist/index.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+
+/**
+ * PinInput — a segmented numeric code input (OTP / PIN). Headless: it renders accessible
+ * markup and you style every slot via `classNames` (bring your own classes). React-only,
+ * no app/theme coupling, so it is safe for any consumer.
+ *
+ * The focus / auto-advance / backspace-cascade / paste / focus-guard behavior is the
+ * device-proven academix logic, preserved exactly. Set `mask` for a hidden PIN (digits
+ * render as `*` unless `revealed`); leave it off for a visible OTP.
+ */
+interface PinInputClassNames {
+    /** the boxes wrapper. */
+    container?: string;
+    /** appended to the container while `error` is true. */
+    containerError?: string;
+    /** each single-character box. */
+    input?: string;
+}
+interface PinInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    /** render digits masked (as `*`) unless `revealed`. */
+    mask?: boolean;
+    /** when `mask`, show the real digits. */
+    revealed?: boolean;
+    /** autofocus the first box on mount (when not in error). Default true. */
+    autoFocus?: boolean;
+    classNames?: PinInputClassNames;
+    /** shortcut for `classNames.container`. */
+    className?: string;
+    /** spread onto every box (e.g. password-manager suppression attrs, incl. `data-*`). */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & Record<`data-${string}`, unknown>;
+}
+declare function PinInput({ length, value, onChange, disabled, error, mask, revealed, autoFocus, classNames, className, inputProps, }: PinInputProps): React.JSX.Element;
+
+/**
+ * Keypad — an on-screen numeric keypad (0-9 + backspace, optional reveal/mask toggle)
+ * that drives a `PinInput`'s value. Headless: style each slot via `classNames`. React-only.
+ *
+ * Behavior preserved from academix: append up to `length` digits; while `error` and the
+ * value is full, the next digit replaces it and backspace clears it. Set `showMaskToggle`
+ * for the PIN eye button (calls `onToggleReveal`); omit it for a plain OTP keypad.
+ */
+interface KeypadClassNames {
+    /** outer wrapper. */
+    keypad?: string;
+    /** the button grid. */
+    grid?: string;
+    /** every key (digits, backspace, toggle). */
+    button?: string;
+    /** appended to the backspace key. */
+    backspace?: string;
+    /** appended to the mask-toggle key. */
+    toggle?: string;
+}
+interface KeypadProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    error?: boolean;
+    /** render the reveal/mask (eye) toggle key. */
+    showMaskToggle?: boolean;
+    /** current reveal state (for the toggle icon/label). */
+    revealed?: boolean;
+    onToggleReveal?: (revealed: boolean) => void;
+    /** backspace key content. Default `✕`. */
+    backspaceLabel?: React.ReactNode;
+    classNames?: KeypadClassNames;
+    /** shortcut for `classNames.keypad`. */
+    className?: string;
+}
+declare function Keypad({ value, onChange, length, disabled, error, showMaskToggle, revealed, onToggleReveal, backspaceLabel, classNames, className, }: KeypadProps): React.JSX.Element;
+
+export { Keypad, type KeypadClassNames, type KeypadProps, PinInput, type PinInputClassNames, type PinInputProps };

package/dist/index.js

@@ -0,0 +1,184 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createElement } from 'react';
+
+// src/PinInput.tsx
+function PinInput({
+  length = 6,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  mask = false,
+  revealed = false,
+  autoFocus = true,
+  classNames = {},
+  className,
+  inputProps
+}) {
+  const inputs = Array(length).fill(0);
+  const getFirstInvalidIndex = (val) => {
+    for (let i = 0; i < length; i++) {
+      if (!val[i]) return i;
+    }
+    return length - 1;
+  };
+  const handleChange = (e, index) => {
+    const digit = e.target.value.replace(/\D/g, "").slice(-1);
+    const otpArray = value.split("");
+    otpArray[index] = digit || "";
+    const nextValue = otpArray.join("");
+    onChange(nextValue);
+    const allowedIndex = getFirstInvalidIndex(nextValue);
+    if (digit && index < length - 1 && index < allowedIndex) {
+      const next = e.target.nextElementSibling;
+      next?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key !== "Backspace") return;
+    if (error && value.length === length) {
+      onChange("");
+      const els2 = e.currentTarget.parentElement.querySelectorAll("input");
+      els2[0].focus();
+      return;
+    }
+    const els = e.currentTarget.parentElement.querySelectorAll("input");
+    const domValues = Array.from(els).map((input) => input.value);
+    if (!domValues[index] && index > 0) {
+      const prev = els[index - 1];
+      prev.focus();
+    }
+    const otpArray = value.split("");
+    for (let i = index; i < otpArray.length; i++) {
+      otpArray[i] = "";
+    }
+    onChange(otpArray.join(""));
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
+    if (pasted) {
+      onChange(pasted.slice(0, length));
+    }
+  };
+  const handleFocus = (e, index) => {
+    const els = e.currentTarget.parentElement.querySelectorAll("input");
+    let allowedIndex = 0;
+    for (let i = 0; i < length; i++) {
+      if (els[i].value === "") {
+        allowedIndex = i;
+        break;
+      }
+      if (i === length - 1) allowedIndex = length - 1;
+    }
+    if (index > allowedIndex) {
+      els[allowedIndex].focus();
+    }
+  };
+  const display = (index) => {
+    if (mask && !revealed) return value[index] ? "*" : "";
+    return value[index] || "";
+  };
+  const containerClass = `${className ?? classNames.container ?? ""}${error && classNames.containerError ? ` ${classNames.containerError}` : ""}`.trim() || void 0;
+  return /* @__PURE__ */ jsx("div", { className: containerClass, children: inputs.map((_, index) => /* @__PURE__ */ createElement(
+    "input",
+    {
+      ...inputProps,
+      key: index,
+      type: "text",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      maxLength: 1,
+      value: display(index),
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      disabled,
+      className: classNames.input,
+      autoFocus: autoFocus && index === 0 && !error,
+      onFocus: (e) => handleFocus(e, index)
+    }
+  )) });
+}
+var DIGITS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+function Keypad({
+  value,
+  onChange,
+  length = 6,
+  disabled = false,
+  error,
+  showMaskToggle = false,
+  revealed = false,
+  onToggleReveal,
+  backspaceLabel = "\u2715",
+  classNames = {},
+  className
+}) {
+  const handleDigitInput = (digit) => {
+    if (value.length < length) {
+      onChange(value + digit);
+    } else if (!!error && value.length === length) {
+      onChange(`${digit}`);
+    }
+  };
+  const handleBackspace = () => {
+    if (value.length > 0 && !error) {
+      onChange(value.slice(0, -1));
+    } else if (!!error && value.length === length) {
+      onChange("");
+    }
+  };
+  const btn = classNames.button ?? "";
+  return /* @__PURE__ */ jsx("div", { className: className ?? classNames.keypad, children: /* @__PURE__ */ jsxs("div", { className: classNames.grid, children: [
+    DIGITS.map((digit) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleDigitInput(digit),
+        disabled,
+        className: btn || void 0,
+        children: digit
+      },
+      digit
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleBackspace,
+        disabled,
+        className: `${btn} ${classNames.backspace ?? ""}`.trim() || void 0,
+        children: backspaceLabel
+      }
+    ),
+    showMaskToggle && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onToggleReveal?.(!revealed),
+        disabled,
+        className: `${btn} ${classNames.toggle ?? ""}`.trim() || void 0,
+        title: revealed ? "Hide" : "Show",
+        "aria-label": revealed ? "Hide" : "Show",
+        children: revealed ? /* @__PURE__ */ jsx(EyeOpen, {}) : /* @__PURE__ */ jsx(EyeClosed, {})
+      }
+    )
+  ] }) });
+}
+function EyeOpen() {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
+  ] });
+}
+function EyeClosed() {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+
+export { Keypad, PinInput };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PinInput.tsx","../src/Keypad.tsx"],"names":["els","jsx"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * PinInput — a segmented numeric code input (OTP / PIN). Headless: it renders accessible\n * markup and you style every slot via `classNames` (bring your own classes). React-only,\n * no app/theme coupling, so it is safe for any consumer.\n *\n * The focus / auto-advance / backspace-cascade / paste / focus-guard behavior is the\n * device-proven academix logic, preserved exactly. Set `mask` for a hidden PIN (digits\n * render as `*` unless `revealed`); leave it off for a visible OTP.\n */\n\nexport interface PinInputClassNames {\n  /** the boxes wrapper. */\n  container?: string;\n  /** appended to the container while `error` is true. */\n  containerError?: string;\n  /** each single-character box. */\n  input?: string;\n}\n\nexport interface PinInputProps {\n  length?: number;\n  value: string;\n  onChange: (value: string) => void;\n  disabled?: boolean;\n  error?: boolean;\n  /** render digits masked (as `*`) unless `revealed`. */\n  mask?: boolean;\n  /** when `mask`, show the real digits. */\n  revealed?: boolean;\n  /** autofocus the first box on mount (when not in error). Default true. */\n  autoFocus?: boolean;\n  classNames?: PinInputClassNames;\n  /** shortcut for `classNames.container`. */\n  className?: string;\n  /** spread onto every box (e.g. password-manager suppression attrs, incl. `data-*`). */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> & Record<`data-${string}`, unknown>;\n}\n\nexport function PinInput({\n  length = 6,\n  value,\n  onChange,\n  disabled = false,\n  error = false,\n  mask = false,\n  revealed = false,\n  autoFocus = true,\n  classNames = {},\n  className,\n  inputProps,\n}: PinInputProps) {\n  const inputs = Array(length).fill(0);\n\n  const getFirstInvalidIndex = (val: string) => {\n    for (let i = 0; i < length; i++) {\n      if (!val[i]) return i;\n    }\n    return length - 1; // all full → last field\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const digit = e.target.value.replace(/\\D/g, '').slice(-1);\n\n    const otpArray = value.split('');\n    otpArray[index] = digit || '';\n    const nextValue = otpArray.join('');\n\n    onChange(nextValue);\n\n    // compute allowed index from the new value\n    const allowedIndex = getFirstInvalidIndex(nextValue);\n\n    // Auto-advance only if digit is valid and index < allowed position\n    if (digit && index < length - 1 && index < allowedIndex) {\n      const next = e.target.nextElementSibling as HTMLInputElement | null;\n      next?.focus();\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    if (e.key !== 'Backspace') return;\n\n    // Error mode: clear everything\n    if (error && value.length === length) {\n      onChange('');\n      const els = e.currentTarget.parentElement!.querySelectorAll('input');\n      (els[0] as HTMLInputElement).focus();\n      return;\n    }\n\n    const els = e.currentTarget.parentElement!.querySelectorAll('input');\n\n    // Build a snapshot of the current actual values from DOM, not from state.\n    const domValues = Array.from(els).map((input) => (input as HTMLInputElement).value);\n\n    // If current field already empty → move back\n    if (!domValues[index] && index > 0) {\n      const prev = els[index - 1] as HTMLInputElement;\n      prev.focus();\n    }\n\n    // Clear current char (and everything after) and update parent state\n    const otpArray = value.split('');\n    for (let i = index; i < otpArray.length; i++) {\n      otpArray[i] = '';\n    }\n    onChange(otpArray.join(''));\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const pasted = e.clipboardData.getData('text').replace(/\\D/g, '');\n    if (pasted) {\n      onChange(pasted.slice(0, length));\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>, index: number) => {\n    const els = e.currentTarget.parentElement!.querySelectorAll('input');\n\n    // Determine focusable index based on ACTUAL input values\n    let allowedIndex = 0;\n    for (let i = 0; i < length; i++) {\n      if ((els[i] as HTMLInputElement).value === '') {\n        allowedIndex = i;\n        break;\n      }\n      if (i === length - 1) allowedIndex = length - 1;\n    }\n\n    // Prevent skipping ahead\n    if (index > allowedIndex) {\n      (els[allowedIndex] as HTMLInputElement).focus();\n    }\n  };\n\n  const display = (index: number) => {\n    if (mask && !revealed) return value[index] ? '*' : '';\n    return value[index] || '';\n  };\n\n  const containerClass = `${className ?? classNames.container ?? ''}${\n    error && classNames.containerError ? ` ${classNames.containerError}` : ''\n  }`.trim() || undefined;\n\n  return (\n    <div className={containerClass}>\n      {inputs.map((_, index) => (\n        <input\n          {...inputProps}\n          key={index}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxLength={1}\n          value={display(index)}\n          onChange={(e) => handleChange(e, index)}\n          onKeyDown={(e) => handleKeyDown(e, index)}\n          onPaste={handlePaste}\n          disabled={disabled}\n          className={classNames.input}\n          autoFocus={autoFocus && index === 0 && !error}\n          onFocus={(e) => handleFocus(e, index)}\n        />\n      ))}\n    </div>\n  );\n}\n","'use client';\n\nimport React from 'react';\n\n/**\n * Keypad — an on-screen numeric keypad (0-9 + backspace, optional reveal/mask toggle)\n * that drives a `PinInput`'s value. Headless: style each slot via `classNames`. React-only.\n *\n * Behavior preserved from academix: append up to `length` digits; while `error` and the\n * value is full, the next digit replaces it and backspace clears it. Set `showMaskToggle`\n * for the PIN eye button (calls `onToggleReveal`); omit it for a plain OTP keypad.\n */\n\nexport interface KeypadClassNames {\n  /** outer wrapper. */\n  keypad?: string;\n  /** the button grid. */\n  grid?: string;\n  /** every key (digits, backspace, toggle). */\n  button?: string;\n  /** appended to the backspace key. */\n  backspace?: string;\n  /** appended to the mask-toggle key. */\n  toggle?: string;\n}\n\nexport interface KeypadProps {\n  value: string;\n  onChange: (value: string) => void;\n  length?: number;\n  disabled?: boolean;\n  error?: boolean;\n  /** render the reveal/mask (eye) toggle key. */\n  showMaskToggle?: boolean;\n  /** current reveal state (for the toggle icon/label). */\n  revealed?: boolean;\n  onToggleReveal?: (revealed: boolean) => void;\n  /** backspace key content. Default `✕`. */\n  backspaceLabel?: React.ReactNode;\n  classNames?: KeypadClassNames;\n  /** shortcut for `classNames.keypad`. */\n  className?: string;\n}\n\nconst DIGITS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n\nexport function Keypad({\n  value,\n  onChange,\n  length = 6,\n  disabled = false,\n  error,\n  showMaskToggle = false,\n  revealed = false,\n  onToggleReveal,\n  backspaceLabel = '✕',\n  classNames = {},\n  className,\n}: KeypadProps) {\n  const handleDigitInput = (digit: number) => {\n    if (value.length < length) {\n      onChange(value + digit);\n    } else if (!!error && value.length === length) {\n      onChange(`${digit}`);\n    }\n  };\n\n  const handleBackspace = () => {\n    if (value.length > 0 && !error) {\n      onChange(value.slice(0, -1));\n    } else if (!!error && value.length === length) {\n      onChange('');\n    }\n  };\n\n  const btn = classNames.button ?? '';\n\n  return (\n    <div className={className ?? classNames.keypad}>\n      <div className={classNames.grid}>\n        {DIGITS.map((digit) => (\n          <button\n            key={digit}\n            type=\"button\"\n            onClick={() => handleDigitInput(digit)}\n            disabled={disabled}\n            className={btn || undefined}\n          >\n            {digit}\n          </button>\n        ))}\n        <button\n          type=\"button\"\n          onClick={handleBackspace}\n          disabled={disabled}\n          className={`${btn} ${classNames.backspace ?? ''}`.trim() || undefined}\n        >\n          {backspaceLabel}\n        </button>\n        {showMaskToggle && (\n          <button\n            type=\"button\"\n            onClick={() => onToggleReveal?.(!revealed)}\n            disabled={disabled}\n            className={`${btn} ${classNames.toggle ?? ''}`.trim() || undefined}\n            title={revealed ? 'Hide' : 'Show'}\n            aria-label={revealed ? 'Hide' : 'Show'}\n          >\n            {revealed ? <EyeOpen /> : <EyeClosed />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction EyeOpen() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\nfunction EyeClosed() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden>\n      <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@academix-admin/pin-input",
+  "version": "0.1.0",
+  "description": "Headless segmented code input (OTP / PIN) + on-screen numeric Keypad — accessible, device-proven focus/paste behavior, style every slot via classNames.",
+  "keywords": [
+    "react",
+    "otp",
+    "pin",
+    "code-input",
+    "one-time-password",
+    "keypad",
+    "headless"
+  ],
+  "license": "MIT",
+  "author": "Academix",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/academix-admin/academix-ui.git",
+    "directory": "packages/pin-input"
+  },
+  "homepage": "https://github.com/academix-admin/academix-ui/tree/main/packages/pin-input#readme",
+  "bugs": {
+    "url": "https://github.com/academix-admin/academix-ui/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}