kitunga-web 0.1.105 → 0.1.107

package/dist/features/inputs/components/Inputs/CodeBoxes.d.ts

@@ -3,16 +3,14 @@ export type CodeBoxesSize = 'sm' | 'md' | 'lg';
 export interface CodeBoxesProps {
     value: string;
     onChange?: (value: string) => void;
-    /** Tamanho — escala caixa, gap entre caixas e separador junto
-     *  (convenção dos controls kitunga). */
-    size?: CodeBoxesSize;
-    /** Total de caixas — 6 para OTP, 10 para o código de pairing. */
+    /** Total de caixas — 6 para OTP, 8 para o código de pairing. */
     length?: number;
-    /** Posições (1-based) depois das quais sai um separador. Ex.: [5]
-     *  para XXXXX-XXXXX; [2, 4] para XX-XX-XX. */
+    /** Posições (1-based) depois das quais sai um separador. */
     separators?: number[];
     charset?: CodeBoxesCharset;
-    /** Modo display — renderiza as caixas sem edição (código a copiar). */
+    /** sm/md/lg — caixa, gap e separador escalam juntos. */
+    size?: CodeBoxesSize;
+    /** Modo display — renderiza as caixas sem edição. */
     readOnly?: boolean;
     autoFocus?: boolean;
     hasError?: boolean;

package/dist/features/inputs/components/Inputs/CodeBoxes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBoxes.d.ts","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/CodeBoxes.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,cAAc,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;4CACwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;kDAC8C;IAC9C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAYD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAU,EACV,UAAe,EACf,IAAW,EACX,OAAmB,EACnB,QAAgB,EAChB,SAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,UAAU,EACV,EAAE,EACF,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,2CAsHhB"}
+{"version":3,"file":"CodeBoxes.d.ts","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/CodeBoxes.tsx"],"names":[],"mappings":"AAmBA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,cAAc,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,wDAAwD;IACxD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAOD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAU,EACV,UAAe,EACf,IAAW,EACX,OAAmB,EACnB,QAAgB,EAChB,SAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,UAAU,EACV,EAAE,EACF,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,2CAkGhB"}

package/dist/features/inputs/components/Inputs/CodeBoxes.js

@@ -1,106 +1,60 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // CodeBoxes — código em caixas segmentadas (estilo chave de produto).
-// Dois modos:
-//   input   — caixas editáveis (OTP do login, código do pairing);
-//             auto-avanço, backspace salta atrás, paste enche tudo.
-//   display — readonly: mostra um código já gerado (o device que quer
-//             entrar no pair mostra-o assim) — mesmo look, sem edição.
 //
-// `length` dita quantas caixas; `separators` é a lista de posições
-// (1-based) depois das quais sai um separador — ex.: [5] para
-// XXXXX-XXXXX, [2, 4] para XX-XX-XX. O separador ocupa um slot do
-// tamanho da caixa — o gap fica uniforme dos dois lados.
-import React, { useCallback, useRef } from 'react';
+// Arquitectura: UM input escondido cobre a fila inteira e recebe tudo
+// (digitar, backspace, paste, autofill one-time-code) — as caixas são
+// display puro. Foco nunca salta entre elementos, por isso o teclado
+// mobile NUNCA fecha e reabre entre caixas. O cursor lógico é sempre
+// a primeira caixa vazia — clicar onde for cai lá.
+//
+// Modos: input editável (OTP do login, código do pairing) e display
+// readonly (o device que entra mostra o código gerado).
+// `length` = quantas caixas; `separators` = posições (1-based) depois
+// das quais sai o traço — ex.: [4] → XXXX-XXXX, [2,4] → XX-XX-XX.
+import React, { useCallback, useRef, useState } from 'react';
 import { Minus } from 'lucide-react';
 import styles from './CodeBoxes.module.css';
-function sanitizeChar(ch, charset) {
-    const upper = ch.toUpperCase();
-    if (charset === 'numeric')
-        return /[0-9]/.test(upper) ? upper : '';
-    return /[0-9A-Z]/.test(upper) ? upper : '';
-}
 function sanitizeValue(raw, charset, max) {
-    return [...raw].map((c) => sanitizeChar(c, charset)).join('').slice(0, max);
+    const pattern = charset === 'numeric' ? /[0-9]/ : /[0-9A-Z]/;
+    return [...raw.toUpperCase()].filter((c) => pattern.test(c)).join('').slice(0, max);
 }
 export default function CodeBoxes({ value, onChange, length = 6, separators = [], size = 'md', charset = 'numeric', readOnly = false, autoFocus = false, hasError = false, disabled = false, onComplete, id, 'aria-label': ariaLabel, }) {
     const total = length;
-    const refs = useRef([]);
+    const inputRef = useRef(null);
+    const [focused, setFocused] = useState(false);
     const separatorsSet = new Set(separators);
     const emit = useCallback((next) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(next);
         if (next.length === total)
             onComplete === null || onComplete === void 0 ? void 0 : onComplete(next);
     }, [onChange, onComplete, total]);
-    const focusBox = useCallback((i) => {
-        var _a, _b;
-        (_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.focus();
-        (_b = refs.current[i]) === null || _b === void 0 ? void 0 : _b.select();
-    }, []);
-    // Só a PRIMEIRA caixa vazia pode receber foco — clicar na 4ª com 1
-    // preenchida redirecciona para a 2ª (a primeira vazia). Nunca salta
-    // caixas por cima; todas vazias → a primeira.
-    const focusFirstEmpty = useCallback((e) => {
-        const firstEmpty = Math.min(value.length, total - 1);
-        const el = e.currentTarget;
-        if (refs.current[firstEmpty] && el !== refs.current[firstEmpty]) {
-            e.preventDefault();
-            focusBox(firstEmpty);
-        }
-        else {
-            el.select();
-        }
-    }, [value.length, total, focusBox]);
-    const handleInput = (i, raw) => {
+    const focusInput = useCallback(() => {
         var _a;
-        const clean = sanitizeValue(raw, charset, total - i);
-        if (!clean)
-            return;
-        const next = (value.slice(0, i) + clean + value.slice(i + clean.length)).slice(0, total);
-        emit(next);
-        const nextIdx = i + clean.length;
-        if (nextIdx >= total) {
-            // Completo — larga o foco em vez de segurar a última caixa.
-            (_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.blur();
-        }
-        else {
-            focusBox(nextIdx);
-        }
-    };
-    const handleKeyDown = (i, e) => {
-        if (e.key === 'Backspace') {
-            e.preventDefault();
-            if (value[i]) {
-                emit(value.slice(0, i) + value.slice(i + 1));
-            }
-            else if (i > 0) {
-                emit(value.slice(0, i - 1) + value.slice(i));
-                focusBox(i - 1);
-            }
-        }
-        else if (e.key === 'ArrowLeft' && i > 0) {
-            e.preventDefault();
-            focusBox(i - 1);
-        }
-        else if (e.key === 'ArrowRight' && i < total - 1) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    if (readOnly) {
+        return (_jsx("div", { className: `${styles.wrap} ${styles[size]} ${styles.readOnly}`, role: "group", "aria-label": ariaLabel, id: id, children: Array.from({ length: total }).map((_, i) => {
+                var _a;
+                const ch = (_a = value[i]) !== null && _a !== void 0 ? _a : '';
+                return (_jsxs(React.Fragment, { children: [_jsx("span", { className: `${styles.box} ${ch ? styles.filled : ''}`, children: ch }), separatorsSet.has(i + 1) && (_jsx("span", { className: styles.separator, "aria-hidden": "true", children: _jsx(Minus, { size: size === 'lg' ? 18 : size === 'sm' ? 13 : 16 }) }))] }, i));
+            }) }));
+    }
+    // A caixa "corrente" — a primeira vazia — veste o anel quando o
+    // input escondido tem foco. Código cheio: nenhuma acesa.
+    const currentIdx = value.length < total ? value.length : -1;
+    return (_jsxs("div", { className: `${styles.wrap} ${styles[size]} ${hasError ? styles.hasError : ''} ${disabled ? styles.isDisabled : ''}`, onMouseDown: (e) => {
             e.preventDefault();
-            focusBox(i + 1);
-        }
-    };
-    const handlePaste = (i, e) => {
-        e.preventDefault();
-        const pasted = e.clipboardData.getData('text');
-        const clean = sanitizeValue(pasted, charset, total);
-        if (!clean)
-            return;
-        const next = (value.slice(0, i) + clean).slice(0, total);
-        emit(next);
-        focusBox(Math.min(i + clean.length, total - 1));
-    };
-    return (_jsx("div", { className: `${styles.wrap} ${styles[size]} ${hasError ? styles.hasError : ''} ${readOnly ? styles.readOnly : ''}`, role: readOnly ? 'group' : undefined, "aria-label": ariaLabel, id: id, children: Array.from({ length: total }).map((_, i) => {
-            var _a;
-            const ch = (_a = value[i]) !== null && _a !== void 0 ? _a : '';
-            return (_jsxs(React.Fragment, { children: [readOnly ? (_jsx("span", { className: `${styles.box} ${ch ? styles.filled : ''}`, children: ch })) : (_jsx("input", { ref: (el) => { refs.current[i] = el; }, className: `${styles.box} ${ch ? styles.filled : ''}`, value: ch, inputMode: charset === 'numeric' ? 'numeric' : 'text', autoComplete: "off", autoCapitalize: "characters", disabled: disabled, autoFocus: autoFocus && i === 0, onChange: (e) => handleInput(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onPaste: (e) => handlePaste(i, e), onFocus: focusFirstEmpty, onMouseDown: focusFirstEmpty, "aria-label": `${ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'code'} ${i + 1}` })), separatorsSet.has(i + 1) && (_jsx("span", { className: styles.separator, "aria-hidden": "true", children: _jsx(Minus, { size: size === 'lg' ? 18 : size === 'sm' ? 13 : 16 }) }))] }, i));
-        }) }));
+            focusInput();
+        }, id: id, children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput, value: value, inputMode: charset === 'numeric' ? 'numeric' : 'text', autoComplete: charset === 'numeric' ? 'one-time-code' : 'off', autoCapitalize: "characters", autoFocus: autoFocus, disabled: disabled, maxLength: total, "aria-label": ariaLabel, onChange: (e) => emit(sanitizeValue(e.target.value, charset, total)), onFocus: (e) => {
+                    setFocused(true);
+                    // O teclado virtual abre por cima — traz a fila para a vista
+                    // (smooth: a janela ainda está a redimensionar).
+                    e.currentTarget.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                }, onBlur: () => setFocused(false) }), Array.from({ length: total }).map((_, i) => {
+                var _a;
+                const ch = (_a = value[i]) !== null && _a !== void 0 ? _a : '';
+                return (_jsxs(React.Fragment, { children: [_jsx("span", { className: `${styles.box} ${ch ? styles.filled : ''} ${focused && i === currentIdx ? styles.current : ''}`, "aria-hidden": "true", children: ch }), separatorsSet.has(i + 1) && (_jsx("span", { className: styles.separator, "aria-hidden": "true", children: _jsx(Minus, { size: size === 'lg' ? 18 : size === 'sm' ? 13 : 16 }) }))] }, i));
+            })] }));
 }
 //# sourceMappingURL=CodeBoxes.js.map

package/dist/features/inputs/components/Inputs/CodeBoxes.js.map

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

package/dist/features/inputs/components/Inputs/CodeBoxes.module.css

@@ -42,12 +42,14 @@
   justify-content: center;
 }
 
-input.box {
+.box {
   cursor: text;
+  user-select: none;
 }
 
-input.box:focus {
-  outline: none;
+/* A caixa corrente (primeira vazia) veste o anel enquanto o input
+   escondido tem foco — o look de foco, sem o foco saltar. */
+.box.current {
   border-color: var(--border-focus);
   background-color: var(--bg-primary);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
@@ -67,11 +69,36 @@ input.box:focus {
   cursor: default;
 }
 
-.wrap input.box:disabled {
+/* O input escondido cobre a fila toda — recebe digitar/backspace/
+   paste; opacity 0 mas font 16px (mata o auto-zoom do iOS). */
+.hiddenInput {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  caret-color: transparent;
+  background: transparent;
+  cursor: text;
+}
+
+.wrap {
+  position: relative;
+}
+
+.isDisabled .box {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
+.isDisabled .hiddenInput {
+  cursor: default;
+}
+
 /* Tamanhos — a caixa, a gap e o separador escalam juntos: a gap do
    flex é a mesma que distancia o traço, por isso size toca tudo. */
 .sm.wrap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitunga-web",
-  "version": "0.1.105",
+  "version": "0.1.107",
   "private": false,
   "type": "module",
   "repository": {