@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/README.md CHANGED
@@ -13,14 +13,14 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
13
13
 
14
14
  ## Package status and test coverage
15
15
 
16
- | Metric | Result |
17
- | ----------- | ---------------- |
18
- | Test files | 57 passed (57) |
19
- | Tests | 355 passed (355) |
16
+ | Metric | Result |
17
+ | ---------- | ---------------- |
18
+ | Test files | 57 passed (57) |
19
+ | Tests | 358 passed (358) |
20
20
 
21
21
  | Area | Test files | Tests |
22
22
  | --------------------------- | ---------- | ----- |
23
- | Components and UI utilities | 29 | 261 |
23
+ | Components and UI utilities | 29 | 264 |
24
24
  | React hooks | 26 | 85 |
25
25
  | CLI and import rewriting | 2 | 9 |
26
26
 
@@ -35,6 +35,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
35
35
  | `cli/cli.integration.test.ts` | 4 |
36
36
  | `src/ui/buttons/button.test.tsx` | 41 |
37
37
  | `src/ui/inputs/input.test.tsx` | 40 |
38
+ | `src/ui/otp-input/otp-input.test.tsx` | 10 |
38
39
  | `src/ui/card/card.test.tsx` | 7 |
39
40
  | `src/ui/checkbox/checkbox.test.tsx` | 6 |
40
41
  | `src/ui/popover/popover.test.tsx` | 4 |
@@ -141,6 +142,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
141
142
  | File upload | `file-upload` | — |
142
143
  | Input | `inputs` | `inputs/animated` |
143
144
  | Modal | `modal` | `modal/animated` |
145
+ | OTP input | `otp-input` | — |
144
146
  | Pagination | `pagination` | — |
145
147
  | Popover | `popover` | `popover/animated` |
146
148
  | Progress | `progress` | `progress/animated` |
@@ -658,7 +660,7 @@ From this package directory in the monorepo:
658
660
 
659
661
  - `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, the chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
660
662
  - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
661
- - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 355 test cases in total
663
+ - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 358 test cases in total
662
664
  - **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, merges in **`spinner`**, applies fixed **`nameAliases`**, and writes **`cli/registry.json`** (`components` + `hooks`). Run this after adding or renaming UI/chart areas or hook entries so the CLI stays in sync (the script prints counts).
663
665
 
664
666
  ## Github Release log
package/cli/registry.json CHANGED
@@ -24,6 +24,7 @@
24
24
  "file-upload",
25
25
  "inputs",
26
26
  "modal",
27
+ "otp-input",
27
28
  "pagination",
28
29
  "popover",
29
30
  "progress",
package/dist/design-system/index.d.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/dist/design-system/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
package/dist/design-system/otp-input.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ export declare const 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";
2
+ export declare const 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))]";
3
+ export declare const 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))]";
4
+ export declare const zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
5
+ export declare const 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))]";
6
+ export declare const 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)]";
7
+ export declare const 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))]";
8
+ export declare const zuiOtpSizes: {
9
+ readonly sm: "size-7 md:size-9 rounded-lg text-sm";
10
+ readonly md: "size-9 md:size-11 text-base";
11
+ readonly lg: "size-11 md:size-13 rounded-2xl text-lg";
12
+ };
13
+ export declare const zuiOtpAppearances: {
14
+ readonly 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))]";
15
+ readonly 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))]";
16
+ readonly 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))]";
17
+ readonly 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))]";
18
+ readonly 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))]";
19
+ readonly 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))]";
20
+ readonly 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))]";
21
+ readonly 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))]";
22
+ readonly 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))]";
23
+ readonly 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))]";
24
+ readonly 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))]";
25
+ readonly 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))]";
26
+ };
27
+ //# sourceMappingURL=otp-input.d.ts.map
package/dist/design-system/otp-input.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../src/design-system/otp-input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,uOAC2M,CAAC;AAEvO,eAAO,MAAM,eAAe,4KAC+I,CAAC;AAE5K,eAAO,MAAM,cAAc,sKAC0I,CAAC;AAEtK,eAAO,MAAM,eAAe,sCAAsC,CAAC;AAEnE,eAAO,MAAM,cAAc,+tBACmsB,CAAC;AAE/tB,eAAO,MAAM,mBAAmB,mIACkG,CAAC;AAEnI,eAAO,MAAM,eAAe,8JACiI,CAAC;AAE9J,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAuBpB,CAAC"}
package/dist/ui/otp-input/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { OTPInput } from "./otp-input";
2
+ export type { OTPInputAllowedCharacters, OTPInputCellVariantProps, OTPInputProps, } from "./types";
3
+ export { otpInputCellVariants } from "./variants";
4
+ //# sourceMappingURL=index.d.ts.map
package/dist/ui/otp-input/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/otp-input/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EACV,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}
package/dist/ui/otp-input/otp-input.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { OTPInputProps } from "./types";
2
+ export declare function OTPInput(props: OTPInputProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace OTPInput {
4
+ var displayName: string;
5
+ }
6
+ //# sourceMappingURL=otp-input.d.ts.map
package/dist/ui/otp-input/otp-input.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/ui/otp-input/otp-input.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,SAAS,CAAC;AA2BxE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAmR5C;yBAnRe,QAAQ"}
package/dist/ui/otp-input/types.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { ComponentPropsWithRef, ReactNode } from "react";
3
+ import type { otpInputCellVariants } from "./variants";
4
+ export type OTPInputAllowedCharacters = "numeric" | "alphanumeric";
5
+ export type OTPInputCellVariantProps = VariantProps<typeof otpInputCellVariants>;
6
+ export type OTPInputProps = OTPInputCellVariantProps & Omit<ComponentPropsWithRef<"div">, "defaultValue" | "dir" | "onChange" | "children"> & {
7
+ allowedCharacters?: OTPInputAllowedCharacters;
8
+ autoFocus?: boolean;
9
+ cellClassName?: string;
10
+ defaultValue?: string;
11
+ disabled?: boolean;
12
+ errorMessage?: ReactNode;
13
+ hint?: ReactNode;
14
+ label?: ReactNode;
15
+ length?: number;
16
+ mask?: boolean;
17
+ name?: string;
18
+ onComplete?: (value: string) => void;
19
+ onValueChange?: (value: string) => void;
20
+ separatorEvery?: number;
21
+ value?: string;
22
+ };
23
+ //# sourceMappingURL=types.d.ts.map
package/dist/ui/otp-input/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/otp-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,cAAc,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,YAAY,CACjD,OAAO,oBAAoB,CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,wBAAwB,GAClD,IAAI,CACF,qBAAqB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CACjD,GAAG;IACF,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
package/dist/ui/otp-input/variants.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const otpInputCellVariants: (props?: ({
2
+ appearance?: "default" | "outline" | "glass" | "violet" | "amber" | "indigo" | "orange" | "pink" | "error" | "success" | "warning" | "info" | null | undefined;
3
+ size?: "md" | "sm" | "lg" | null | undefined;
4
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
5
+ //# sourceMappingURL=variants.d.ts.map
package/dist/ui/otp-input/variants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/otp-input/variants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;8EAS/B,CAAC"}
package/dist/ui/otp-input.js ADDED
@@ -0,0 +1,302 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
5
+ var react = require('react');
6
+ var classVarianceAuthority = require('class-variance-authority');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+
9
+ // src/design-system/otp-input.ts
10
+ 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";
11
+ 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))]";
12
+ 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))]";
13
+ var zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
14
+ 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))]";
15
+ 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)]";
16
+ 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))]";
17
+ var zuiOtpSizes = {
18
+ sm: "size-7 md:size-9 rounded-lg text-sm",
19
+ md: "size-9 md:size-11 text-base",
20
+ lg: "size-11 md:size-13 rounded-2xl text-lg"
21
+ };
22
+ var zuiOtpAppearances = {
23
+ 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))]",
24
+ 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))]",
25
+ 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))]",
26
+ 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))]",
27
+ 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))]",
28
+ 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))]",
29
+ 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))]",
30
+ 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))]",
31
+ 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))]",
32
+ 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))]",
33
+ 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))]",
34
+ 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))]"
35
+ };
36
+ var otpInputCellVariants = classVarianceAuthority.cva(zuiOtpCellBase, {
37
+ variants: {
38
+ appearance: zuiOtpAppearances,
39
+ size: zuiOtpSizes
40
+ },
41
+ defaultVariants: {
42
+ appearance: "default",
43
+ size: "md"
44
+ }
45
+ });
46
+ function clampLength(length) {
47
+ return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;
48
+ }
49
+ function sanitizeValue(value, allowedCharacters, maxLength) {
50
+ const pattern = allowedCharacters === "numeric" ? /[0-9]/g : /[a-zA-Z0-9]/g;
51
+ return (value.match(pattern) ?? []).join("").slice(0, maxLength);
52
+ }
53
+ function valueToCells(value, length) {
54
+ return Array.from({ length }, (_, index) => {
55
+ const c = value[index] ?? "\0";
56
+ return c === "\0" ? "" : c;
57
+ });
58
+ }
59
+ function cellsToInternal(cells, length) {
60
+ return Array.from({ length }, (_, i) => cells[i] || "\0").join("");
61
+ }
62
+ function OTPInput(props) {
63
+ const {
64
+ allowedCharacters = "numeric",
65
+ appearance,
66
+ autoFocus,
67
+ cellClassName,
68
+ className,
69
+ defaultValue = "",
70
+ disabled,
71
+ errorMessage,
72
+ hint,
73
+ id,
74
+ label,
75
+ length = 6,
76
+ mask,
77
+ name,
78
+ onComplete,
79
+ onValueChange,
80
+ ref,
81
+ separatorEvery,
82
+ size,
83
+ value,
84
+ ...rest
85
+ } = props;
86
+ const generatedId = react.useId();
87
+ const rootId = id ?? generatedId;
88
+ const resolvedLength = clampLength(length);
89
+ const isControlled = value !== void 0;
90
+ const [uncontrolledValue, setUncontrolledValue] = react.useState(() => {
91
+ const clean = sanitizeValue(
92
+ defaultValue,
93
+ allowedCharacters,
94
+ resolvedLength
95
+ );
96
+ return clean.padEnd(resolvedLength, "\0");
97
+ });
98
+ const inputRefs = react.useRef([]);
99
+ const cells = react.useMemo(
100
+ () => isControlled ? valueToCells(
101
+ sanitizeValue(
102
+ value ?? "",
103
+ allowedCharacters,
104
+ resolvedLength
105
+ ).padEnd(resolvedLength, "\0"),
106
+ resolvedLength
107
+ ) : Array.from({ length: resolvedLength }, (_, index) => {
108
+ const c = uncontrolledValue[index] ?? "\0";
109
+ return c === "\0" ? "" : sanitizeValue(c, allowedCharacters, 1);
110
+ }),
111
+ [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value]
112
+ );
113
+ const sanitizedValue = cells.filter(Boolean).join("");
114
+ const labelId = `${rootId}-label`;
115
+ const hintId = `${rootId}-hint`;
116
+ const errorId = `${rootId}-error`;
117
+ const describedBy = [
118
+ hint !== void 0 ? hintId : void 0,
119
+ errorMessage !== void 0 ? errorId : void 0
120
+ ].filter(Boolean).join(" ");
121
+ const commitValue = react.useCallback(
122
+ (nextCells) => {
123
+ if (!isControlled) {
124
+ setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));
125
+ }
126
+ const next = nextCells.filter(Boolean).join("").slice(0, resolvedLength);
127
+ onValueChange?.(next);
128
+ if (next.length === resolvedLength) {
129
+ onComplete?.(next);
130
+ }
131
+ },
132
+ [isControlled, onComplete, onValueChange, resolvedLength]
133
+ );
134
+ const focusCell = react.useCallback(
135
+ (index) => {
136
+ const target = inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];
137
+ target?.focus();
138
+ target?.select();
139
+ },
140
+ [resolvedLength]
141
+ );
142
+ const updateAtIndex = react.useCallback(
143
+ (index, nextChars, isPaste = false) => {
144
+ let chars = sanitizeValue(
145
+ nextChars,
146
+ allowedCharacters,
147
+ resolvedLength
148
+ );
149
+ if (!isPaste && chars && chars.length === 2 && chars[0] === (cells[index] ?? "")) {
150
+ chars = chars[1];
151
+ }
152
+ if (!chars?.length || !isPaste && chars === cells[index]) {
153
+ return;
154
+ }
155
+ const nextCells = [...cells];
156
+ chars.split("").forEach((char, offset) => {
157
+ const targetIndex = index + offset;
158
+ if (targetIndex < resolvedLength) {
159
+ nextCells[targetIndex] = char;
160
+ }
161
+ });
162
+ commitValue(nextCells);
163
+ focusCell(
164
+ Math.min(index + Math.max(chars.length, 1), resolvedLength - 1)
165
+ );
166
+ },
167
+ [allowedCharacters, cells, commitValue, focusCell, resolvedLength]
168
+ );
169
+ const clearAtIndex = react.useCallback(
170
+ (index) => {
171
+ const nextCells = [...cells];
172
+ nextCells[index] = "";
173
+ commitValue(nextCells);
174
+ },
175
+ [cells, commitValue]
176
+ );
177
+ const handlePaste = react.useCallback(
178
+ (event, index) => {
179
+ event.preventDefault();
180
+ updateAtIndex(index, event.clipboardData.getData("text"), true);
181
+ },
182
+ [updateAtIndex]
183
+ );
184
+ const handleKeyDown = react.useCallback(
185
+ (event, index) => {
186
+ if (event.key === "Backspace") {
187
+ event.preventDefault();
188
+ if (cells[index]) {
189
+ clearAtIndex(index);
190
+ return;
191
+ }
192
+ clearAtIndex(Math.max(index - 1, 0));
193
+ focusCell(index - 1);
194
+ return;
195
+ }
196
+ if (event.key === "Delete") {
197
+ event.preventDefault();
198
+ clearAtIndex(index);
199
+ return;
200
+ }
201
+ if (event.key === "ArrowLeft") {
202
+ event.preventDefault();
203
+ focusCell(index - 1);
204
+ return;
205
+ }
206
+ if (event.key === "ArrowRight") {
207
+ event.preventDefault();
208
+ focusCell(index + 1);
209
+ return;
210
+ }
211
+ if (event.key === "Home") {
212
+ event.preventDefault();
213
+ focusCell(0);
214
+ return;
215
+ }
216
+ if (event.key === "End") {
217
+ event.preventDefault();
218
+ focusCell(resolvedLength - 1);
219
+ }
220
+ },
221
+ [cells, clearAtIndex, focusCell, resolvedLength]
222
+ );
223
+ return /* @__PURE__ */ jsxRuntime.jsxs(
224
+ "div",
225
+ {
226
+ ref,
227
+ id: rootId,
228
+ role: "group",
229
+ "aria-labelledby": label !== void 0 ? labelId : void 0,
230
+ "aria-describedby": describedBy || void 0,
231
+ "aria-invalid": errorMessage !== void 0 ? true : void 0,
232
+ className: chunkZS5756ZC_js.cn(zuiOtpRootBase, className),
233
+ "data-disabled": disabled ? "true" : void 0,
234
+ "data-slot": "otp-input",
235
+ ...rest,
236
+ children: [
237
+ label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelId, className: zuiOtpLabelBase, children: label }),
238
+ hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: zuiOtpHintBase, children: hint }),
239
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: zuiOtpCellsBase, "data-slot": "otp-input-cells", children: cells.map((char, index) => /* @__PURE__ */ jsxRuntime.jsxs(
240
+ "span",
241
+ {
242
+ className: "contents",
243
+ "data-slot": "otp-input-cell-wrapper",
244
+ children: [
245
+ /* @__PURE__ */ jsxRuntime.jsx(
246
+ "input",
247
+ {
248
+ ref: (node) => {
249
+ inputRefs.current[index] = node;
250
+ },
251
+ "aria-label": `Digit ${index + 1} of ${resolvedLength}`,
252
+ autoComplete: index === 0 ? "one-time-code" : "off",
253
+ autoFocus: autoFocus && index === 0,
254
+ className: chunkZS5756ZC_js.cn(
255
+ otpInputCellVariants({ appearance, size }),
256
+ cellClassName
257
+ ),
258
+ "data-slot": "otp-input-cell",
259
+ disabled,
260
+ inputMode: allowedCharacters === "numeric" ? "numeric" : "text",
261
+ maxLength: resolvedLength,
262
+ onChange: (event) => updateAtIndex(index, event.currentTarget.value, false),
263
+ onFocus: (event) => event.currentTarget.select(),
264
+ onKeyDown: (event) => handleKeyDown(event, index),
265
+ onPaste: (event) => handlePaste(event, index),
266
+ pattern: allowedCharacters === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*",
267
+ type: mask ? "password" : "text",
268
+ value: char
269
+ }
270
+ ),
271
+ separatorEvery && separatorEvery > 0 && index < resolvedLength - 1 && (index + 1) % separatorEvery === 0 && /* @__PURE__ */ jsxRuntime.jsx(
272
+ "span",
273
+ {
274
+ "aria-hidden": "true",
275
+ className: zuiOtpSeparatorBase,
276
+ "data-slot": "otp-input-separator"
277
+ }
278
+ )
279
+ ]
280
+ },
281
+ `${rootId}-${index}`
282
+ )) }),
283
+ name !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
284
+ "input",
285
+ {
286
+ type: "hidden",
287
+ name,
288
+ value: sanitizedValue,
289
+ disabled
290
+ }
291
+ ),
292
+ errorMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: zuiOtpErrorBase, children: errorMessage })
293
+ ]
294
+ }
295
+ );
296
+ }
297
+ OTPInput.displayName = "OTPInput";
298
+
299
+ exports.OTPInput = OTPInput;
300
+ exports.otpInputCellVariants = otpInputCellVariants;
301
+ //# sourceMappingURL=otp-input.js.map
302
+ //# sourceMappingURL=otp-input.js.map
package/dist/ui/otp-input.js.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":["cva","useId","useState","useRef","useMemo","useCallback","jsxs","cn","jsx"],"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,GAAuBA,2BAAI,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,cAAcC,WAAA,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,GAAIC,eAAS,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,GAAYC,YAAA,CAAuC,EAAE,CAAA;AAC3D,EAAA,MAAM,KAAA,GAAQC,aAAA;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,GAAcC,iBAAA;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,GAAYA,iBAAA;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,GAAgBA,iBAAA;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,GAAeA,iBAAA;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,GAAcA,iBAAA;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,GAAgBA,iBAAA;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,uBACEC,eAAA;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,EAAWC,mBAAA,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,0BACTC,cAAA,CAAC,GAAA,EAAA,EAAE,IAAI,OAAA,EAAS,SAAA,EAAW,iBACxB,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,QAED,IAAA,KAAS,0BACRA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAI,MAAA,EAAQ,SAAA,EAAW,gBACvB,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBAEFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,EAAiB,WAAA,EAAU,mBACxC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAChBF,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,UAAA;AAAA,YACV,WAAA,EAAU,wBAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAAE,cAAA;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,EAAWD,mBAAA;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/BC,cAAA;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,oBACRA,cAAA;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,0BAChBA,cAAA,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.js","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"]}