@zentauri-ui/zentauri-components 1.7.3 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +8 -6
  2. package/cli/registry.json +1 -0
  3. package/dist/design-system/index.d.ts +1 -0
  4. package/dist/design-system/index.d.ts.map +1 -1
  5. package/dist/design-system/otp-input.d.ts +27 -0
  6. package/dist/design-system/otp-input.d.ts.map +1 -0
  7. package/dist/ui/otp-input/index.d.ts +4 -0
  8. package/dist/ui/otp-input/index.d.ts.map +1 -0
  9. package/dist/ui/otp-input/otp-input.d.ts +6 -0
  10. package/dist/ui/otp-input/otp-input.d.ts.map +1 -0
  11. package/dist/ui/otp-input/types.d.ts +23 -0
  12. package/dist/ui/otp-input/types.d.ts.map +1 -0
  13. package/dist/ui/otp-input/variants.d.ts +5 -0
  14. package/dist/ui/otp-input/variants.d.ts.map +1 -0
  15. package/dist/ui/otp-input.js +302 -0
  16. package/dist/ui/otp-input.js.map +1 -0
  17. package/dist/ui/otp-input.mjs +299 -0
  18. package/dist/ui/otp-input.mjs.map +1 -0
  19. package/package.json +1 -1
  20. package/src/design-system/index.ts +1 -0
  21. package/src/design-system/otp-input.ts +50 -0
  22. package/src/ui/otp-input/index.ts +9 -0
  23. package/src/ui/otp-input/otp-input.test.tsx +99 -0
  24. package/src/ui/otp-input/otp-input.tsx +327 -0
  25. package/src/ui/otp-input/types.ts +32 -0
  26. package/src/ui/otp-input/variants.ts +18 -0
package/dist/ui/otp-input.mjs ADDED
@@ -0,0 +1,299 @@
1
+ "use client";
2
+ import { cn } from '../chunk-4D54YOL6.mjs';
3
+ import { useId, useState, useRef, useMemo, useCallback } from 'react';
4
+ import { cva } from 'class-variance-authority';
5
+ import { jsxs, jsx } from 'react/jsx-runtime';
6
+
7
+ // src/design-system/otp-input.ts
8
+ var zuiOtpRootBase = "grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
9
+ var zuiOtpLabelBase = "text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]";
10
+ var zuiOtpHintBase = "max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
11
+ var zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
12
+ var zuiOtpCellBase = "grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
13
+ var zuiOtpSeparatorBase = "h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]";
14
+ var zuiOtpErrorBase = "text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]";
15
+ var zuiOtpSizes = {
16
+ sm: "size-7 md:size-9 rounded-lg text-sm",
17
+ md: "size-9 md:size-11 text-base",
18
+ lg: "size-11 md:size-13 rounded-2xl text-lg"
19
+ };
20
+ var zuiOtpAppearances = {
21
+ default: "border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]",
22
+ outline: "border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
23
+ glass: "border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]",
24
+ success: "border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]",
25
+ error: "border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]",
26
+ warning: "border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]",
27
+ info: "border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
28
+ violet: "border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]",
29
+ amber: "border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]",
30
+ pink: "border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]",
31
+ indigo: "border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]",
32
+ orange: "border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]"
33
+ };
34
+ var otpInputCellVariants = cva(zuiOtpCellBase, {
35
+ variants: {
36
+ appearance: zuiOtpAppearances,
37
+ size: zuiOtpSizes
38
+ },
39
+ defaultVariants: {
40
+ appearance: "default",
41
+ size: "md"
42
+ }
43
+ });
44
+ function clampLength(length) {
45
+ return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;
46
+ }
47
+ function sanitizeValue(value, allowedCharacters, maxLength) {
48
+ const pattern = allowedCharacters === "numeric" ? /[0-9]/g : /[a-zA-Z0-9]/g;
49
+ return (value.match(pattern) ?? []).join("").slice(0, maxLength);
50
+ }
51
+ function valueToCells(value, length) {
52
+ return Array.from({ length }, (_, index) => {
53
+ const c = value[index] ?? "\0";
54
+ return c === "\0" ? "" : c;
55
+ });
56
+ }
57
+ function cellsToInternal(cells, length) {
58
+ return Array.from({ length }, (_, i) => cells[i] || "\0").join("");
59
+ }
60
+ function OTPInput(props) {
61
+ const {
62
+ allowedCharacters = "numeric",
63
+ appearance,
64
+ autoFocus,
65
+ cellClassName,
66
+ className,
67
+ defaultValue = "",
68
+ disabled,
69
+ errorMessage,
70
+ hint,
71
+ id,
72
+ label,
73
+ length = 6,
74
+ mask,
75
+ name,
76
+ onComplete,
77
+ onValueChange,
78
+ ref,
79
+ separatorEvery,
80
+ size,
81
+ value,
82
+ ...rest
83
+ } = props;
84
+ const generatedId = useId();
85
+ const rootId = id ?? generatedId;
86
+ const resolvedLength = clampLength(length);
87
+ const isControlled = value !== void 0;
88
+ const [uncontrolledValue, setUncontrolledValue] = useState(() => {
89
+ const clean = sanitizeValue(
90
+ defaultValue,
91
+ allowedCharacters,
92
+ resolvedLength
93
+ );
94
+ return clean.padEnd(resolvedLength, "\0");
95
+ });
96
+ const inputRefs = useRef([]);
97
+ const cells = useMemo(
98
+ () => isControlled ? valueToCells(
99
+ sanitizeValue(
100
+ value ?? "",
101
+ allowedCharacters,
102
+ resolvedLength
103
+ ).padEnd(resolvedLength, "\0"),
104
+ resolvedLength
105
+ ) : Array.from({ length: resolvedLength }, (_, index) => {
106
+ const c = uncontrolledValue[index] ?? "\0";
107
+ return c === "\0" ? "" : sanitizeValue(c, allowedCharacters, 1);
108
+ }),
109
+ [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value]
110
+ );
111
+ const sanitizedValue = cells.filter(Boolean).join("");
112
+ const labelId = `${rootId}-label`;
113
+ const hintId = `${rootId}-hint`;
114
+ const errorId = `${rootId}-error`;
115
+ const describedBy = [
116
+ hint !== void 0 ? hintId : void 0,
117
+ errorMessage !== void 0 ? errorId : void 0
118
+ ].filter(Boolean).join(" ");
119
+ const commitValue = useCallback(
120
+ (nextCells) => {
121
+ if (!isControlled) {
122
+ setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));
123
+ }
124
+ const next = nextCells.filter(Boolean).join("").slice(0, resolvedLength);
125
+ onValueChange?.(next);
126
+ if (next.length === resolvedLength) {
127
+ onComplete?.(next);
128
+ }
129
+ },
130
+ [isControlled, onComplete, onValueChange, resolvedLength]
131
+ );
132
+ const focusCell = useCallback(
133
+ (index) => {
134
+ const target = inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];
135
+ target?.focus();
136
+ target?.select();
137
+ },
138
+ [resolvedLength]
139
+ );
140
+ const updateAtIndex = useCallback(
141
+ (index, nextChars, isPaste = false) => {
142
+ let chars = sanitizeValue(
143
+ nextChars,
144
+ allowedCharacters,
145
+ resolvedLength
146
+ );
147
+ if (!isPaste && chars && chars.length === 2 && chars[0] === (cells[index] ?? "")) {
148
+ chars = chars[1];
149
+ }
150
+ if (!chars?.length || !isPaste && chars === cells[index]) {
151
+ return;
152
+ }
153
+ const nextCells = [...cells];
154
+ chars.split("").forEach((char, offset) => {
155
+ const targetIndex = index + offset;
156
+ if (targetIndex < resolvedLength) {
157
+ nextCells[targetIndex] = char;
158
+ }
159
+ });
160
+ commitValue(nextCells);
161
+ focusCell(
162
+ Math.min(index + Math.max(chars.length, 1), resolvedLength - 1)
163
+ );
164
+ },
165
+ [allowedCharacters, cells, commitValue, focusCell, resolvedLength]
166
+ );
167
+ const clearAtIndex = useCallback(
168
+ (index) => {
169
+ const nextCells = [...cells];
170
+ nextCells[index] = "";
171
+ commitValue(nextCells);
172
+ },
173
+ [cells, commitValue]
174
+ );
175
+ const handlePaste = useCallback(
176
+ (event, index) => {
177
+ event.preventDefault();
178
+ updateAtIndex(index, event.clipboardData.getData("text"), true);
179
+ },
180
+ [updateAtIndex]
181
+ );
182
+ const handleKeyDown = useCallback(
183
+ (event, index) => {
184
+ if (event.key === "Backspace") {
185
+ event.preventDefault();
186
+ if (cells[index]) {
187
+ clearAtIndex(index);
188
+ return;
189
+ }
190
+ clearAtIndex(Math.max(index - 1, 0));
191
+ focusCell(index - 1);
192
+ return;
193
+ }
194
+ if (event.key === "Delete") {
195
+ event.preventDefault();
196
+ clearAtIndex(index);
197
+ return;
198
+ }
199
+ if (event.key === "ArrowLeft") {
200
+ event.preventDefault();
201
+ focusCell(index - 1);
202
+ return;
203
+ }
204
+ if (event.key === "ArrowRight") {
205
+ event.preventDefault();
206
+ focusCell(index + 1);
207
+ return;
208
+ }
209
+ if (event.key === "Home") {
210
+ event.preventDefault();
211
+ focusCell(0);
212
+ return;
213
+ }
214
+ if (event.key === "End") {
215
+ event.preventDefault();
216
+ focusCell(resolvedLength - 1);
217
+ }
218
+ },
219
+ [cells, clearAtIndex, focusCell, resolvedLength]
220
+ );
221
+ return /* @__PURE__ */ jsxs(
222
+ "div",
223
+ {
224
+ ref,
225
+ id: rootId,
226
+ role: "group",
227
+ "aria-labelledby": label !== void 0 ? labelId : void 0,
228
+ "aria-describedby": describedBy || void 0,
229
+ "aria-invalid": errorMessage !== void 0 ? true : void 0,
230
+ className: cn(zuiOtpRootBase, className),
231
+ "data-disabled": disabled ? "true" : void 0,
232
+ "data-slot": "otp-input",
233
+ ...rest,
234
+ children: [
235
+ label !== void 0 && /* @__PURE__ */ jsx("p", { id: labelId, className: zuiOtpLabelBase, children: label }),
236
+ hint !== void 0 && /* @__PURE__ */ jsx("p", { id: hintId, className: zuiOtpHintBase, children: hint }),
237
+ /* @__PURE__ */ jsx("div", { className: zuiOtpCellsBase, "data-slot": "otp-input-cells", children: cells.map((char, index) => /* @__PURE__ */ jsxs(
238
+ "span",
239
+ {
240
+ className: "contents",
241
+ "data-slot": "otp-input-cell-wrapper",
242
+ children: [
243
+ /* @__PURE__ */ jsx(
244
+ "input",
245
+ {
246
+ ref: (node) => {
247
+ inputRefs.current[index] = node;
248
+ },
249
+ "aria-label": `Digit ${index + 1} of ${resolvedLength}`,
250
+ autoComplete: index === 0 ? "one-time-code" : "off",
251
+ autoFocus: autoFocus && index === 0,
252
+ className: cn(
253
+ otpInputCellVariants({ appearance, size }),
254
+ cellClassName
255
+ ),
256
+ "data-slot": "otp-input-cell",
257
+ disabled,
258
+ inputMode: allowedCharacters === "numeric" ? "numeric" : "text",
259
+ maxLength: resolvedLength,
260
+ onChange: (event) => updateAtIndex(index, event.currentTarget.value, false),
261
+ onFocus: (event) => event.currentTarget.select(),
262
+ onKeyDown: (event) => handleKeyDown(event, index),
263
+ onPaste: (event) => handlePaste(event, index),
264
+ pattern: allowedCharacters === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*",
265
+ type: mask ? "password" : "text",
266
+ value: char
267
+ }
268
+ ),
269
+ separatorEvery && separatorEvery > 0 && index < resolvedLength - 1 && (index + 1) % separatorEvery === 0 && /* @__PURE__ */ jsx(
270
+ "span",
271
+ {
272
+ "aria-hidden": "true",
273
+ className: zuiOtpSeparatorBase,
274
+ "data-slot": "otp-input-separator"
275
+ }
276
+ )
277
+ ]
278
+ },
279
+ `${rootId}-${index}`
280
+ )) }),
281
+ name !== void 0 && /* @__PURE__ */ jsx(
282
+ "input",
283
+ {
284
+ type: "hidden",
285
+ name,
286
+ value: sanitizedValue,
287
+ disabled
288
+ }
289
+ ),
290
+ errorMessage !== void 0 && /* @__PURE__ */ jsx("p", { id: errorId, className: zuiOtpErrorBase, children: errorMessage })
291
+ ]
292
+ }
293
+ );
294
+ }
295
+ OTPInput.displayName = "OTPInput";
296
+
297
+ export { OTPInput, otpInputCellVariants };
298
+ //# sourceMappingURL=otp-input.mjs.map
299
+ //# sourceMappingURL=otp-input.mjs.map
package/dist/ui/otp-input.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/design-system/otp-input.ts","../../src/ui/otp-input/variants.ts","../../src/ui/otp-input/otp-input.tsx"],"names":[],"mappings":";;;;;;AAAO,IAAM,cAAA,GACX,oOAAA;AAEK,IAAM,eAAA,GACX,yKAAA;AAEK,IAAM,cAAA,GACX,mKAAA;AAEK,IAAM,eAAA,GAAkB,mCAAA;AAExB,IAAM,cAAA,GACX,4tBAAA;AAEK,IAAM,mBAAA,GACX,gIAAA;AAEK,IAAM,eAAA,GACX,2JAAA;AAEK,IAAM,WAAA,GAAc;AAAA,EACzB,EAAA,EAAI,qCAAA;AAAA,EACJ,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,OAAA,EACE,mfAAA;AAAA,EACF,OAAA,EACE,shBAAA;AAAA,EACF,KAAA,EACE,klBAAA;AAAA,EACF,OAAA,EACE,iiBAAA;AAAA,EACF,KAAA,EACE,ohBAAA;AAAA,EACF,OAAA,EACE,+hBAAA;AAAA,EACF,IAAA,EAAM,mhBAAA;AAAA,EACN,MAAA,EACE,6hBAAA;AAAA,EACF,KAAA,EACE,ihBAAA;AAAA,EACF,IAAA,EAAM,+gBAAA;AAAA,EACN,MAAA,EACE,+hBAAA;AAAA,EACF,MAAA,EACE;AACJ,CAAA;ACzCO,IAAM,oBAAA,GAAuB,IAAI,cAAA,EAAgB;AAAA,EACtD,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,iBAAA;AAAA,IACZ,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM;AAAA;AAEV,CAAC;ACQD,SAAS,YAAY,MAAA,EAAwB;AAC3C,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,MAAM,CAAC,CAAA,GAAI,CAAA;AACvE;AAEA,SAAS,aAAA,CACP,KAAA,EACA,iBAAA,EACA,SAAA,EACQ;AACR,EAAA,MAAM,OAAA,GAAU,iBAAA,KAAsB,SAAA,GAAY,QAAA,GAAW,cAAA;AAC7D,EAAA,OAAA,CAAQ,KAAA,CAAM,KAAA,CAAM,OAAO,CAAA,IAAK,EAAC,EAAG,IAAA,CAAK,EAAE,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,SAAS,CAAA;AACjE;AAEA,SAAS,YAAA,CAAa,OAAe,MAAA,EAA0B;AAC7D,EAAA,OAAO,MAAM,IAAA,CAAK,EAAE,QAAO,EAAG,CAAC,GAAG,KAAA,KAAU;AAC1C,IAAA,MAAM,CAAA,GAAI,KAAA,CAAM,KAAK,CAAA,IAAK,IAAA;AAC1B,IAAA,OAAO,CAAA,KAAM,OAAS,EAAA,GAAK,CAAA;AAAA,EAC7B,CAAC,CAAA;AACH;AAEA,SAAS,eAAA,CAAgB,OAAiB,MAAA,EAAwB;AAChE,EAAA,OAAO,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,IAAU,CAAC,CAAA,EAAG,CAAA,KAAM,KAAA,CAAM,CAAC,CAAA,IAAK,IAAM,CAAA,CAAE,KAAK,EAAE,CAAA;AACrE;AAEO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,MAAM;AAAA,IACJ,iBAAA,GAAoB,SAAA;AAAA,IACpB,UAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,GAAe,EAAA;AAAA,IACf,QAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,EAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA,GAAS,CAAA;AAAA,IACT,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAA;AAAA,IACA,cAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,SAAS,EAAA,IAAM,WAAA;AACrB,EAAA,MAAM,cAAA,GAAiB,YAAY,MAAM,CAAA;AACzC,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,MAAM;AAC/D,IAAA,MAAM,KAAA,GAAQ,aAAA;AAAA,MACZ,YAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,OAAO,KAAA,CAAM,MAAA,CAAO,cAAA,EAAgB,IAAM,CAAA;AAAA,EAC5C,CAAC,CAAA;AACD,EAAA,MAAM,SAAA,GAAY,MAAA,CAAuC,EAAE,CAAA;AAC3D,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,MACE,YAAA,GACI,YAAA;AAAA,MACE,aAAA;AAAA,QACE,KAAA,IAAS,EAAA;AAAA,QACT,iBAAA;AAAA,QACA;AAAA,OACF,CAAE,MAAA,CAAO,cAAA,EAAgB,IAAM,CAAA;AAAA,MAC/B;AAAA,KACF,GACA,MAAM,IAAA,CAAK,EAAE,QAAQ,cAAA,EAAe,EAAG,CAAC,CAAA,EAAG,KAAA,KAAU;AACnD,MAAA,MAAM,CAAA,GAAI,iBAAA,CAAkB,KAAK,CAAA,IAAK,IAAA;AACtC,MAAA,OAAO,MAAM,IAAA,GAAS,EAAA,GAAK,aAAA,CAAc,CAAA,EAAG,mBAAmB,CAAC,CAAA;AAAA,IAClE,CAAC,CAAA;AAAA,IACP,CAAC,iBAAA,EAAmB,YAAA,EAAc,cAAA,EAAgB,mBAAmB,KAAK;AAAA,GAC5E;AACA,EAAA,MAAM,iBAAiB,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,EAAE,CAAA;AACpD,EAAA,MAAM,OAAA,GAAU,GAAG,MAAM,CAAA,MAAA,CAAA;AACzB,EAAA,MAAM,MAAA,GAAS,GAAG,MAAM,CAAA,KAAA,CAAA;AACxB,EAAA,MAAM,OAAA,GAAU,GAAG,MAAM,CAAA,MAAA,CAAA;AACzB,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,IAAA,KAAS,SAAY,MAAA,GAAS,MAAA;AAAA,IAC9B,YAAA,KAAiB,SAAY,OAAA,GAAU;AAAA,GACzC,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,SAAA,KAAwB;AACvB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,oBAAA,CAAqB,eAAA,CAAgB,SAAA,EAAW,cAAc,CAAC,CAAA;AAAA,MACjE;AACA,MAAA,MAAM,IAAA,GAAO,SAAA,CAAU,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,EAAE,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,cAAc,CAAA;AACvE,MAAA,aAAA,GAAgB,IAAI,CAAA;AACpB,MAAA,IAAI,IAAA,CAAK,WAAW,cAAA,EAAgB;AAClC,QAAA,UAAA,GAAa,IAAI,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAA,EAAc,UAAA,EAAY,aAAA,EAAe,cAAc;AAAA,GAC1D;AAEA,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,KAAA,KAAkB;AACjB,MAAA,MAAM,MAAA,GACJ,SAAA,CAAU,OAAA,CAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,cAAA,GAAiB,CAAC,CAAC,CAAC,CAAA;AACpE,MAAA,MAAA,EAAQ,KAAA,EAAM;AACd,MAAA,MAAA,EAAQ,MAAA,EAAO;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,EAAe,SAAA,EAAmB,OAAA,GAAU,KAAA,KAAU;AACrD,MAAA,IAAI,KAAA,GAA4B,aAAA;AAAA,QAC9B,SAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACF;AAGA,MAAA,IACE,CAAC,OAAA,IACD,KAAA,IACA,KAAA,CAAM,MAAA,KAAW,CAAA,IACjB,KAAA,CAAM,CAAC,CAAA,MAAO,KAAA,CAAM,KAAK,CAAA,IAAK,EAAA,CAAA,EAC9B;AACA,QAAA,KAAA,GAAQ,MAAM,CAAC,CAAA;AAAA,MACjB;AAEA,MAAA,IAAI,CAAC,OAAO,MAAA,IAAW,CAAC,WAAW,KAAA,KAAU,KAAA,CAAM,KAAK,CAAA,EAAI;AAC1D,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,SAAA,GAAY,CAAC,GAAG,KAAK,CAAA;AAE3B,MAAA,KAAA,CAAM,MAAM,EAAE,CAAA,CAAE,OAAA,CAAQ,CAAC,MAAM,MAAA,KAAW;AACxC,QAAA,MAAM,cAAc,KAAA,GAAQ,MAAA;AAC5B,QAAA,IAAI,cAAc,cAAA,EAAgB;AAChC,UAAA,SAAA,CAAU,WAAW,CAAA,GAAI,IAAA;AAAA,QAC3B;AAAA,MACF,CAAC,CAAA;AAED,MAAA,WAAA,CAAY,SAAS,CAAA;AACrB,MAAA,SAAA;AAAA,QACE,IAAA,CAAK,GAAA,CAAI,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,MAAM,MAAA,EAAQ,CAAC,CAAA,EAAG,cAAA,GAAiB,CAAC;AAAA,OAChE;AAAA,IACF,CAAA;AAAA,IACA,CAAC,iBAAA,EAAmB,KAAA,EAAO,WAAA,EAAa,WAAW,cAAc;AAAA,GACnE;AAEA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,KAAA,KAAkB;AACjB,MAAA,MAAM,SAAA,GAAY,CAAC,GAAG,KAAK,CAAA;AAC3B,MAAA,SAAA,CAAU,KAAK,CAAA,GAAI,EAAA;AACnB,MAAA,WAAA,CAAY,SAAS,CAAA;AAAA,IACvB,CAAA;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,GACrB;AAEA,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,OAAyC,KAAA,KAAkB;AAC1D,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,OAAO,KAAA,CAAM,aAAA,CAAc,OAAA,CAAQ,MAAM,GAAG,IAAI,CAAA;AAAA,IAChE,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,OAAwC,KAAA,KAAkB;AACzD,MAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,KAAA,CAAM,KAAK,CAAA,EAAG;AAChB,UAAA,YAAA,CAAa,KAAK,CAAA;AAClB,UAAA;AAAA,QACF;AACA,QAAA,YAAA,CAAa,IAAA,CAAK,GAAA,CAAI,KAAA,GAAQ,CAAA,EAAG,CAAC,CAAC,CAAA;AACnC,QAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AACnB,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AACnB,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,CAAM,QAAQ,YAAA,EAAc;AAC9B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AACnB,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,CAAM,QAAQ,MAAA,EAAQ;AACxB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,CAAC,CAAA;AACX,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,CAAM,QAAQ,KAAA,EAAO;AACvB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,SAAA,CAAU,iBAAiB,CAAC,CAAA;AAAA,MAC9B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,YAAA,EAAc,SAAA,EAAW,cAAc;AAAA,GACjD;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,IAAA,EAAK,OAAA;AAAA,MACL,iBAAA,EAAiB,KAAA,KAAU,MAAA,GAAY,OAAA,GAAU,MAAA;AAAA,MACjD,oBAAkB,WAAA,IAAe,MAAA;AAAA,MACjC,cAAA,EAAc,YAAA,KAAiB,MAAA,GAAY,IAAA,GAAO,MAAA;AAAA,MAClD,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,SAAS,CAAA;AAAA,MACvC,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,WAAA,EAAU,WAAA;AAAA,MACT,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,KAAU,0BACT,GAAA,CAAC,GAAA,EAAA,EAAE,IAAI,OAAA,EAAS,SAAA,EAAW,iBACxB,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,QAED,IAAA,KAAS,0BACR,GAAA,CAAC,GAAA,EAAA,EAAE,IAAI,MAAA,EAAQ,SAAA,EAAW,gBACvB,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,EAAiB,WAAA,EAAU,mBACxC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAChB,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,UAAA;AAAA,YACV,WAAA,EAAU,wBAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,oBAAA,SAAA,CAAU,OAAA,CAAQ,KAAK,CAAA,GAAI,IAAA;AAAA,kBAC7B,CAAA;AAAA,kBACA,YAAA,EAAY,CAAA,MAAA,EAAS,KAAA,GAAQ,CAAC,OAAO,cAAc,CAAA,CAAA;AAAA,kBACnD,YAAA,EAAc,KAAA,KAAU,CAAA,GAAI,eAAA,GAAkB,KAAA;AAAA,kBAC9C,SAAA,EAAW,aAAa,KAAA,KAAU,CAAA;AAAA,kBAClC,SAAA,EAAW,EAAA;AAAA,oBACT,oBAAA,CAAqB,EAAE,UAAA,EAAY,IAAA,EAAM,CAAA;AAAA,oBACzC;AAAA,mBACF;AAAA,kBACA,WAAA,EAAU,gBAAA;AAAA,kBACV,QAAA;AAAA,kBACA,SAAA,EAAW,iBAAA,KAAsB,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,kBACzD,SAAA,EAAW,cAAA;AAAA,kBACX,QAAA,EAAU,CAAC,KAAA,KACT,aAAA,CAAc,OAAO,KAAA,CAAM,aAAA,CAAc,OAAO,KAAK,CAAA;AAAA,kBAEvD,OAAA,EAAS,CAAC,KAAA,KAAU,KAAA,CAAM,cAAc,MAAA,EAAO;AAAA,kBAC/C,SAAA,EAAW,CAAC,KAAA,KAAU,aAAA,CAAc,OAAO,KAAK,CAAA;AAAA,kBAChD,OAAA,EAAS,CAAC,KAAA,KAAU,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,kBAC5C,OAAA,EACE,iBAAA,KAAsB,SAAA,GAAY,QAAA,GAAW,cAAA;AAAA,kBAE/C,IAAA,EAAM,OAAO,UAAA,GAAa,MAAA;AAAA,kBAC1B,KAAA,EAAO;AAAA;AAAA,eACT;AAAA,cACC,cAAA,IACC,iBAAiB,CAAA,IACjB,KAAA,GAAQ,iBAAiB,CAAA,IAAA,CACxB,KAAA,GAAQ,CAAA,IAAK,cAAA,KAAmB,CAAA,oBAC/B,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAY,MAAA;AAAA,kBACZ,SAAA,EAAW,mBAAA;AAAA,kBACX,WAAA,EAAU;AAAA;AAAA;AACZ;AAAA,WAAA;AAAA,UAvCC,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,SA0C1B,CAAA,EACH,CAAA;AAAA,QACC,SAAS,MAAA,oBACR,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA;AAAA,YACA,KAAA,EAAO,cAAA;AAAA,YACP;AAAA;AAAA,SACF;AAAA,QAED,YAAA,KAAiB,0BAChB,GAAA,CAAC,GAAA,EAAA,EAAE,IAAI,OAAA,EAAS,SAAA,EAAW,iBACxB,QAAA,EAAA,YAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"otp-input.mjs","sourcesContent":["export const zuiOtpRootBase =\n \"grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\";\n\nexport const zuiOtpLabelBase =\n \"text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]\";\n\nexport const zuiOtpHintBase =\n \"max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiOtpCellsBase = \"flex flex-wrap items-center gap-2\";\n\nexport const zuiOtpCellBase =\n \"grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiOtpSeparatorBase =\n \"h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]\";\n\nexport const zuiOtpErrorBase =\n \"text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]\";\n\nexport const zuiOtpSizes = {\n sm: \"size-7 md:size-9 rounded-lg text-sm\",\n md: \"size-9 md:size-11 text-base\",\n lg: \"size-11 md:size-13 rounded-2xl text-lg\",\n} as const;\n\nexport const zuiOtpAppearances = {\n default:\n \"border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]\",\n outline:\n \"border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n glass:\n \"border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]\",\n success:\n \"border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]\",\n error:\n \"border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]\",\n warning:\n \"border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]\",\n info: \"border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n violet:\n \"border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]\",\n amber:\n \"border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]\",\n pink: \"border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]\",\n indigo:\n \"border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]\",\n orange:\n \"border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiOtpAppearances,\n zuiOtpCellBase,\n zuiOtpSizes,\n} from \"../../design-system/otp-input\";\n\nexport const otpInputCellVariants = cva(zuiOtpCellBase, {\n variants: {\n appearance: zuiOtpAppearances,\n size: zuiOtpSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n","\"use client\";\n\nimport {\n type ClipboardEvent,\n type KeyboardEvent,\n useCallback,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n zuiOtpCellsBase,\n zuiOtpErrorBase,\n zuiOtpHintBase,\n zuiOtpLabelBase,\n zuiOtpRootBase,\n zuiOtpSeparatorBase,\n} from \"../../design-system/otp-input\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { OTPInputAllowedCharacters, OTPInputProps } from \"./types\";\nimport { otpInputCellVariants } from \"./variants\";\n\nfunction clampLength(length: number): number {\n return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;\n}\n\nfunction sanitizeValue(\n value: string,\n allowedCharacters: OTPInputAllowedCharacters,\n maxLength: number,\n): string {\n const pattern = allowedCharacters === \"numeric\" ? /[0-9]/g : /[a-zA-Z0-9]/g;\n return (value.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nfunction valueToCells(value: string, length: number): string[] {\n return Array.from({ length }, (_, index) => {\n const c = value[index] ?? \"\\x00\";\n return c === \"\\x00\" ? \"\" : c;\n });\n}\n\nfunction cellsToInternal(cells: string[], length: number): string {\n return Array.from({ length }, (_, i) => cells[i] || \"\\x00\").join(\"\");\n}\n\nexport function OTPInput(props: OTPInputProps) {\n const {\n allowedCharacters = \"numeric\",\n appearance,\n autoFocus,\n cellClassName,\n className,\n defaultValue = \"\",\n disabled,\n errorMessage,\n hint,\n id,\n label,\n length = 6,\n mask,\n name,\n onComplete,\n onValueChange,\n ref,\n separatorEvery,\n size,\n value,\n ...rest\n } = props;\n const generatedId = useId();\n const rootId = id ?? generatedId;\n const resolvedLength = clampLength(length);\n const isControlled = value !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(() => {\n const clean = sanitizeValue(\n defaultValue,\n allowedCharacters,\n resolvedLength,\n );\n return clean.padEnd(resolvedLength, \"\\x00\");\n });\n const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n const cells = useMemo(\n () =>\n isControlled\n ? valueToCells(\n sanitizeValue(\n value ?? \"\",\n allowedCharacters,\n resolvedLength,\n ).padEnd(resolvedLength, \"\\x00\"),\n resolvedLength,\n )\n : Array.from({ length: resolvedLength }, (_, index) => {\n const c = uncontrolledValue[index] ?? \"\\x00\";\n return c === \"\\x00\" ? \"\" : sanitizeValue(c, allowedCharacters, 1);\n }),\n [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value],\n );\n const sanitizedValue = cells.filter(Boolean).join(\"\");\n const labelId = `${rootId}-label`;\n const hintId = `${rootId}-hint`;\n const errorId = `${rootId}-error`;\n const describedBy = [\n hint !== undefined ? hintId : undefined,\n errorMessage !== undefined ? errorId : undefined,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const commitValue = useCallback(\n (nextCells: string[]) => {\n if (!isControlled) {\n setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));\n }\n const next = nextCells.filter(Boolean).join(\"\").slice(0, resolvedLength);\n onValueChange?.(next);\n if (next.length === resolvedLength) {\n onComplete?.(next);\n }\n },\n [isControlled, onComplete, onValueChange, resolvedLength],\n );\n\n const focusCell = useCallback(\n (index: number) => {\n const target =\n inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];\n target?.focus();\n target?.select();\n },\n [resolvedLength],\n );\n\n const updateAtIndex = useCallback(\n (index: number, nextChars: string, isPaste = false) => {\n let chars: string | undefined = sanitizeValue(\n nextChars,\n allowedCharacters,\n resolvedLength,\n );\n\n // Detect single-char overwrite: browser gives \"existingChar + typedChar\"\n if (\n !isPaste &&\n chars &&\n chars.length === 2 &&\n chars[0] === (cells[index] ?? \"\")\n ) {\n chars = chars[1];\n }\n\n if (!chars?.length || (!isPaste && chars === cells[index])) {\n return;\n }\n\n const nextCells = [...cells];\n\n chars.split(\"\").forEach((char, offset) => {\n const targetIndex = index + offset;\n if (targetIndex < resolvedLength) {\n nextCells[targetIndex] = char;\n }\n });\n\n commitValue(nextCells);\n focusCell(\n Math.min(index + Math.max(chars.length, 1), resolvedLength - 1),\n );\n },\n [allowedCharacters, cells, commitValue, focusCell, resolvedLength],\n );\n\n const clearAtIndex = useCallback(\n (index: number) => {\n const nextCells = [...cells];\n nextCells[index] = \"\";\n commitValue(nextCells);\n },\n [cells, commitValue],\n );\n\n const handlePaste = useCallback(\n (event: ClipboardEvent<HTMLInputElement>, index: number) => {\n event.preventDefault();\n updateAtIndex(index, event.clipboardData.getData(\"text\"), true);\n },\n [updateAtIndex],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>, index: number) => {\n if (event.key === \"Backspace\") {\n event.preventDefault();\n if (cells[index]) {\n clearAtIndex(index);\n return;\n }\n clearAtIndex(Math.max(index - 1, 0));\n focusCell(index - 1);\n return;\n }\n\n if (event.key === \"Delete\") {\n event.preventDefault();\n clearAtIndex(index);\n return;\n }\n\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n focusCell(index - 1);\n return;\n }\n\n if (event.key === \"ArrowRight\") {\n event.preventDefault();\n focusCell(index + 1);\n return;\n }\n\n if (event.key === \"Home\") {\n event.preventDefault();\n focusCell(0);\n return;\n }\n\n if (event.key === \"End\") {\n event.preventDefault();\n focusCell(resolvedLength - 1);\n }\n },\n [cells, clearAtIndex, focusCell, resolvedLength],\n );\n\n return (\n <div\n ref={ref}\n id={rootId}\n role=\"group\"\n aria-labelledby={label !== undefined ? labelId : undefined}\n aria-describedby={describedBy || undefined}\n aria-invalid={errorMessage !== undefined ? true : undefined}\n className={cn(zuiOtpRootBase, className)}\n data-disabled={disabled ? \"true\" : undefined}\n data-slot=\"otp-input\"\n {...rest}\n >\n {label !== undefined && (\n <p id={labelId} className={zuiOtpLabelBase}>\n {label}\n </p>\n )}\n {hint !== undefined && (\n <p id={hintId} className={zuiOtpHintBase}>\n {hint}\n </p>\n )}\n <div className={zuiOtpCellsBase} data-slot=\"otp-input-cells\">\n {cells.map((char, index) => (\n <span\n key={`${rootId}-${index}`}\n className=\"contents\"\n data-slot=\"otp-input-cell-wrapper\"\n >\n <input\n ref={(node) => {\n inputRefs.current[index] = node;\n }}\n aria-label={`Digit ${index + 1} of ${resolvedLength}`}\n autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n autoFocus={autoFocus && index === 0}\n className={cn(\n otpInputCellVariants({ appearance, size }),\n cellClassName,\n )}\n data-slot=\"otp-input-cell\"\n disabled={disabled}\n inputMode={allowedCharacters === \"numeric\" ? \"numeric\" : \"text\"}\n maxLength={resolvedLength}\n onChange={(event) =>\n updateAtIndex(index, event.currentTarget.value, false)\n }\n onFocus={(event) => event.currentTarget.select()}\n onKeyDown={(event) => handleKeyDown(event, index)}\n onPaste={(event) => handlePaste(event, index)}\n pattern={\n allowedCharacters === \"numeric\" ? \"[0-9]*\" : \"[A-Za-z0-9]*\"\n }\n type={mask ? \"password\" : \"text\"}\n value={char}\n />\n {separatorEvery &&\n separatorEvery > 0 &&\n index < resolvedLength - 1 &&\n (index + 1) % separatorEvery === 0 && (\n <span\n aria-hidden=\"true\"\n className={zuiOtpSeparatorBase}\n data-slot=\"otp-input-separator\"\n />\n )}\n </span>\n ))}\n </div>\n {name !== undefined && (\n <input\n type=\"hidden\"\n name={name}\n value={sanitizedValue}\n disabled={disabled}\n />\n )}\n {errorMessage !== undefined && (\n <p id={errorId} className={zuiOtpErrorBase}>\n {errorMessage}\n </p>\n )}\n </div>\n );\n}\n\nOTPInput.displayName = \"OTPInput\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zentauri-ui/zentauri-components",
3
- "version": "1.7.3",
3
+ "version": "1.7.4",
4
4
  "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
5
5
  "license": "MIT",
6
6
  "files": [
package/src/design-system/index.ts CHANGED
@@ -15,6 +15,7 @@ export * from "./empty-state";
15
15
  export * from "./file-upload";
16
16
  export * from "./inputs";
17
17
  export * from "./modal";
18
+ export * from "./otp-input";
18
19
  export * from "./pagination";
19
20
  export * from "./popover";
20
21
  export * from "./progress";
package/src/design-system/otp-input.ts ADDED
@@ -0,0 +1,50 @@
1
+ export const zuiOtpRootBase =
2
+ "grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
3
+
4
+ export const zuiOtpLabelBase =
5
+ "text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]";
6
+
7
+ export const zuiOtpHintBase =
8
+ "max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
9
+
10
+ export const zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
11
+
12
+ export const zuiOtpCellBase =
13
+ "grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
14
+
15
+ export const zuiOtpSeparatorBase =
16
+ "h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]";
17
+
18
+ export const zuiOtpErrorBase =
19
+ "text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]";
20
+
21
+ export const zuiOtpSizes = {
22
+ sm: "size-7 md:size-9 rounded-lg text-sm",
23
+ md: "size-9 md:size-11 text-base",
24
+ lg: "size-11 md:size-13 rounded-2xl text-lg",
25
+ } as const;
26
+
27
+ export const zuiOtpAppearances = {
28
+ default:
29
+ "border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]",
30
+ outline:
31
+ "border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
32
+ glass:
33
+ "border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]",
34
+ success:
35
+ "border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]",
36
+ error:
37
+ "border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]",
38
+ warning:
39
+ "border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]",
40
+ info: "border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
41
+ violet:
42
+ "border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]",
43
+ amber:
44
+ "border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]",
45
+ pink: "border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]",
46
+ indigo:
47
+ "border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]",
48
+ orange:
49
+ "border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]",
50
+ } as const;
package/src/ui/otp-input/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+
3
+ export { OTPInput } from "./otp-input";
4
+ export type {
5
+ OTPInputAllowedCharacters,
6
+ OTPInputCellVariantProps,
7
+ OTPInputProps,
8
+ } from "./types";
9
+ export { otpInputCellVariants } from "./variants";
package/src/ui/otp-input/otp-input.test.tsx ADDED
@@ -0,0 +1,99 @@
1
+ import { createRef } from "react";
2
+ import { render, screen } from "@testing-library/react";
3
+ import userEvent from "@testing-library/user-event";
4
+ import { describe, expect, it, vi } from "vitest";
5
+
6
+ import { OTPInput } from "./otp-input";
7
+
8
+ describe("OTPInput", () => {
9
+ it("should expose displayName", () => {
10
+ expect(OTPInput.displayName).toBe("OTPInput");
11
+ });
12
+
13
+ it("should stamp data-slot", () => {
14
+ render(<OTPInput label="Verification code" />);
15
+ expect(document.querySelector('[data-slot="otp-input"]')).toBeTruthy();
16
+ expect(
17
+ document.querySelectorAll('[data-slot="otp-input-cell"]'),
18
+ ).toHaveLength(6);
19
+ });
20
+
21
+ it("should type numeric values across cells", async () => {
22
+ const user = userEvent.setup();
23
+ const onValueChange = vi.fn();
24
+ render(<OTPInput label="Code" onValueChange={onValueChange} />);
25
+
26
+ await user.type(screen.getByLabelText("Digit 1 of 6"), "123");
27
+
28
+ expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
29
+ expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
30
+ expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("3");
31
+ expect(onValueChange).toHaveBeenLastCalledWith("123");
32
+ });
33
+
34
+ it("should ignore non-numeric characters by default", async () => {
35
+ const user = userEvent.setup();
36
+ render(<OTPInput label="Code" />);
37
+
38
+ await user.type(screen.getByLabelText("Digit 1 of 6"), "a1b2");
39
+
40
+ expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
41
+ expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
42
+ });
43
+
44
+ it("should support alphanumeric values", async () => {
45
+ const user = userEvent.setup();
46
+ render(<OTPInput allowedCharacters="alphanumeric" label="Invite code" />);
47
+
48
+ await user.type(screen.getByLabelText("Digit 1 of 6"), "A7Z");
49
+
50
+ expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("A");
51
+ expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("7");
52
+ expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("Z");
53
+ });
54
+
55
+ it("should fill cells from paste and call onComplete", async () => {
56
+ const user = userEvent.setup();
57
+ const onComplete = vi.fn();
58
+ render(<OTPInput label="Code" onComplete={onComplete} />);
59
+
60
+ await user.click(screen.getByLabelText("Digit 1 of 6"));
61
+ await user.paste("12-34 56");
62
+
63
+ expect(screen.getByLabelText("Digit 6 of 6")).toHaveValue("6");
64
+ expect(onComplete).toHaveBeenLastCalledWith("123456");
65
+ });
66
+
67
+ it("should clear the previous cell when backspacing from an empty cell", async () => {
68
+ const user = userEvent.setup();
69
+ render(<OTPInput defaultValue="12" label="Code" />);
70
+
71
+ await user.click(screen.getByLabelText("Digit 3 of 6"));
72
+ await user.keyboard("{Backspace}");
73
+
74
+ expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("");
75
+ });
76
+
77
+ it("should support controlled state", async () => {
78
+ const user = userEvent.setup();
79
+ const onValueChange = vi.fn();
80
+ render(<OTPInput label="Code" value="98" onValueChange={onValueChange} />);
81
+
82
+ await user.type(screen.getByLabelText("Digit 3 of 6"), "7");
83
+
84
+ expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("9");
85
+ expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("8");
86
+ expect(onValueChange).toHaveBeenLastCalledWith("987");
87
+ });
88
+
89
+ it("should forward ref to the root", () => {
90
+ const ref = createRef<HTMLDivElement>();
91
+ render(<OTPInput ref={ref} label="Code" />);
92
+ expect(ref.current?.getAttribute("data-slot")).toBe("otp-input");
93
+ });
94
+
95
+ it("should render a hidden input when name is provided", () => {
96
+ render(<OTPInput defaultValue="123456" label="Code" name="otp" />);
97
+ expect(document.querySelector('input[name="otp"]')).toHaveValue("123456");
98
+ });
99
+ });