@pablo-v/pin-input 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @pablo-v/pin-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Segmented OTP and PIN code input
+
+```bash
+pnpm add @pablo-v/pin-input @pablo-v/tokens
+```
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/pin-input/style.css';
+import { PinInput } from '@pablo-v/pin-input';
+```

package/dist/PinInput.d.ts

@@ -0,0 +1,33 @@
+import { type PixelSize } from '@pablo-v/core';
+import { type ComponentPropsWithRef } from 'react';
+export interface PinInputProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** Number of characters. @default 6 */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Fires once every cell is filled. */
+    onComplete?: (value: string) => void;
+    /** @default 'numeric' */
+    type?: 'numeric' | 'alphanumeric';
+    /** Hides the characters behind solid cells, for PINs. */
+    mask?: boolean;
+    /** @default 'md' */
+    size?: PixelSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    /** Id of the first cell. Inside a `Field` this is automatic. */
+    id?: string;
+    /** Name of a hidden input that submits the joined value. */
+    name?: string;
+    autoFocus?: boolean;
+    /** Accessible name of each cell. @default (i, n) => `Character ${i} of ${n}` */
+    cellLabel?: (index: number, length: number) => string;
+}
+/**
+ * One-time code or PIN entry, one cell per character. Typing advances,
+ * Backspace steps back, and pasting or SMS autofill spreads across the cells.
+ */
+export declare function PinInput({ length, value: valueProp, defaultValue, onChange, onComplete, type, mask, size, disabled, invalid, required, id, name, autoFocus, cellLabel, className, 'aria-describedby': describedBy, 'aria-labelledby': labelledBy, ...rest }: PinInputProps): import("react").JSX.Element;
+//# sourceMappingURL=PinInput.d.ts.map

package/dist/PinInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../src/PinInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,SAAS,EAAmD,MAAM,eAAe,CAAC;AAEpG,OAAO,EAAuB,KAAK,qBAAqB,EAA8B,MAAM,OAAO,CAAC;AAEpG,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACvE,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAClC,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CACvD;AAID;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,KAAK,EAAE,SAAS,EAChB,YAAiB,EACjB,QAAQ,EACR,UAAU,EACV,IAAgB,EAChB,IAAY,EACZ,IAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,SAAS,EACT,SAA8C,EAC9C,SAAS,EACT,kBAAkB,EAAE,WAAW,EAC/B,iBAAiB,EAAE,UAAU,EAC7B,GAAG,IAAI,EACR,EAAE,aAAa,+BAsIf"}

package/dist/PinInput.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, useControllableState, useIsomorphicLayoutEffect } from '@pablo-v/core';
+import { useFieldControl, useFieldLabelId } from '@pablo-v/field';
+import { useRef } from 'react';
+const PATTERN = { numeric: /[0-9]/, alphanumeric: /[a-z0-9]/i };
+/**
+ * One-time code or PIN entry, one cell per character. Typing advances,
+ * Backspace steps back, and pasting or SMS autofill spreads across the cells.
+ */
+export function PinInput({ length = 6, value: valueProp, defaultValue = '', onChange, onComplete, type = 'numeric', mask = false, size = 'md', disabled, invalid, required, id, name, autoFocus, cellLabel = (i, n) => `Character ${i} of ${n}`, className, 'aria-describedby': describedBy, 'aria-labelledby': labelledBy, ...rest }) {
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
+    const control = useFieldControl({
+        id,
+        'aria-describedby': describedBy,
+        'aria-invalid': undefined,
+        required,
+        disabled,
+    }, invalid);
+    const fieldLabelId = useFieldLabelId();
+    const inputs = useRef([]);
+    const chars = Array.from({ length }, (_, i) => value[i] ?? '');
+    const pattern = PATTERN[type];
+    const pendingFocus = useRef(null);
+    // Focus moves after the commit renders, so the gap check in onFocus sees the new value.
+    useIsomorphicLayoutEffect(() => {
+        if (pendingFocus.current == null)
+            return;
+        focus(pendingFocus.current);
+        pendingFocus.current = null;
+    });
+    const focus = (index) => {
+        const el = inputs.current[Math.max(0, Math.min(index, length - 1))];
+        el?.focus();
+        el?.select();
+    };
+    const commit = (next) => {
+        const joined = next.join('').slice(0, length);
+        setValue(joined);
+        if (joined.length === length && next.every(Boolean))
+            onComplete?.(joined);
+    };
+    const fill = (index, text) => {
+        const accepted = Array.from(text).filter((c) => pattern.test(c));
+        if (accepted.length === 0)
+            return;
+        const next = [...chars];
+        accepted.slice(0, length - index).forEach((c, i) => {
+            next[index + i] = type === 'alphanumeric' ? c.toUpperCase() : c;
+        });
+        commit(next);
+        pendingFocus.current = index + accepted.length;
+    };
+    const handleKeyDown = (index, event) => {
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            const next = [...chars];
+            if (next[index]) {
+                next[index] = '';
+            }
+            else if (index > 0) {
+                next[index - 1] = '';
+                focus(index - 1);
+            }
+            commit(next);
+        }
+        else if (event.key === 'Delete') {
+            event.preventDefault();
+            commit(chars.map((c, i) => (i === index ? '' : c)));
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            focus(index - 1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            focus(index + 1);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            focus(event.key === 'Home' ? 0 : length - 1);
+        }
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        fill(index, event.clipboardData.getData('text'));
+    };
+    // A gap would split the value, so later cells only accept input once the earlier ones are filled.
+    const firstEmpty = chars.findIndex((c) => !c);
+    return (_jsxs("div", { role: "group", "aria-labelledby": labelledBy ?? fieldLabelId, className: cx('pxl-pin-input', className), "data-size": size, "data-invalid": control['aria-invalid'] ? true : undefined, "data-disabled": control.disabled || undefined, "data-mask": mask || undefined, ...rest, children: [chars.map((char, i) => (_jsx("input", { ref: (el) => {
+                    inputs.current[i] = el;
+                }, id: i === 0 ? control.id : undefined, className: "pxl-pin-input__cell", type: mask ? 'password' : 'text', inputMode: type === 'numeric' ? 'numeric' : 'text', autoComplete: i === 0 ? 'one-time-code' : 'off', autoCapitalize: "characters", spellCheck: false, autoFocus: autoFocus && i === 0, "aria-label": cellLabel(i + 1, length), "aria-describedby": control['aria-describedby'], "aria-invalid": control['aria-invalid'], "aria-required": control.required || undefined, disabled: control.disabled, "data-filled": char ? true : undefined, value: char, onFocus: (event) => {
+                    if (firstEmpty >= 0 && i > firstEmpty)
+                        focus(firstEmpty);
+                    else
+                        event.currentTarget.select();
+                }, onChange: (event) => {
+                    const typed = event.target.value.replace(char, '') || event.target.value;
+                    fill(i, typed);
+                }, onKeyDown: (event) => handleKeyDown(i, event), onPaste: (event) => handlePaste(i, event) }, i))), name && _jsx("input", { type: "hidden", name: name, value: value })] }));
+}
+//# sourceMappingURL=PinInput.js.map

package/dist/PinInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.js","sourceRoot":"","sources":["../src/PinInput.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { PinInput, type PinInputProps } from './PinInput.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { PinInput } from './PinInput.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC"}

package/dist/pin-input.css

@@ -0,0 +1,97 @@
+.pxl-pin-input {
+  --_size: var(--pxl-size-md);
+  --_text: var(--pxl-text-md);
+
+  display: inline-flex;
+  gap: var(--pxl-space-2);
+  font-family: var(--pxl-font-mono);
+}
+
+.pxl-pin-input[data-size="sm"] {
+  --_size: var(--pxl-size-sm);
+  --_text: var(--pxl-text-sm);
+}
+
+.pxl-pin-input[data-size="lg"] {
+  --_size: var(--pxl-size-lg);
+  --_text: var(--pxl-text-lg);
+}
+
+.pxl-pin-input__cell {
+  --_border: var(--pxl-gray-600);
+
+  box-sizing: border-box;
+  width: var(--_size);
+  height: calc(var(--_size) * 1.2);
+  padding: 0;
+  border: 1px solid var(--_border);
+  border-radius: var(--pxl-radius-md);
+  outline: 0;
+  background: var(--pxl-bg-subtle);
+  color: var(--pxl-fg);
+  font: inherit;
+  font-size: var(--_text);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  caret-color: var(--pxl-accent);
+  transition:
+    border-color var(--pxl-dur-fast) linear,
+    background-color var(--pxl-dur-fast) linear;
+}
+
+.pxl-pin-input__cell:hover:not(:disabled, :focus) {
+  --_border: var(--pxl-gray-800);
+
+  background: var(--pxl-bg);
+}
+
+.pxl-pin-input__cell:focus {
+  --_border: var(--pxl-accent);
+
+  background: var(--pxl-bg);
+}
+
+.pxl-pin-input__cell:focus-visible {
+  outline: 1px solid var(--_border);
+  outline-offset: 0;
+}
+
+.pxl-pin-input__cell::selection {
+  background: transparent;
+}
+
+.pxl-pin-input[data-invalid] .pxl-pin-input__cell {
+  --_border: var(--pxl-danger);
+}
+
+.pxl-pin-input__cell:disabled {
+  --_border: var(--pxl-border);
+
+  color: var(--pxl-fg-muted);
+  cursor: not-allowed;
+}
+
+/* A masked character becomes one solid pixel cell instead of a bullet. */
+.pxl-pin-input[data-mask] .pxl-pin-input__cell[data-filled] {
+  color: transparent;
+  background-image: linear-gradient(var(--pxl-fg), var(--pxl-fg));
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 8px 8px;
+  animation: pxl-pin-mask var(--pxl-dur-base) var(--pxl-ease-out);
+}
+
+@keyframes pxl-pin-mask {
+  0% {
+    background-size: 0 0;
+  }
+  60% {
+    background-size: 10px 10px;
+  }
+}
+
+@media (pointer: coarse) {
+  .pxl-pin-input__cell {
+    font-size: max(16px, var(--_text));
+  }
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@pablo-v/pin-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Segmented OTP and PIN code input",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/pin-input"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/pin-input.css",
+      "default": "./dist/pin-input.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.1",
+    "@pablo-v/field": "^1.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }