OTP Field

1import type { Component, ComponentProps, ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import type { DynamicProps, RootProps } from "@corvu/otp-field"
5import OtpField from "@corvu/otp-field"
6 
7import { cn } from "~/lib/utils"
8 
9export const REGEXP_ONLY_DIGITS = "^\\d*$"
10export const REGEXP_ONLY_CHARS = "^[a-zA-Z]*$"
11export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]*$"
12 
13type OTPFieldProps<T extends ValidComponent = "div"> = RootProps<T> & { class?: string }
14 
15const OTPField = <T extends ValidComponent = "div">(props: DynamicProps<T, OTPFieldProps<T>>) => {
16  const [local, others] = splitProps(props as OTPFieldProps, ["class"])
17  return (
18    <OtpField
19      class={cn(
20        "flex items-center gap-2 disabled:cursor-not-allowed has-[:disabled]:opacity-50",
21        local.class
22      )}
23      {...others}
24    />
25  )
26}
27 
28const OTPFieldInput = OtpField.Input
29 
30const OTPFieldGroup: Component<ComponentProps<"div">> = (props) => {
31  const [local, others] = splitProps(props, ["class"])
32  return <div class={cn("flex items-center", local.class)} {...others} />
33}
34 
35const OTPFieldSlot: Component<ComponentProps<"div"> & { index: number }> = (props) => {
36  const [local, others] = splitProps(props, ["class", "index"])
37  const context = OtpField.useContext()
38  const char = () => context.value()[local.index]
39  const showFakeCaret = () => context.value().length === local.index && context.isInserting()
40 
41  return (
42    <div
43      class={cn(
44        "group relative flex size-10 items-center justify-center border-y border-r border-input text-sm first:rounded-l-md first:border-l last:rounded-r-md",
45        local.class
46      )}
47      {...others}
48    >
49      <div
50        class={cn(
51          "absolute inset-0 z-10 transition-all group-first:rounded-l-md group-last:rounded-r-md",
52          context.activeSlots().includes(local.index) && "ring-2 ring-ring ring-offset-background"
53        )}
54      />
55      {char()}
56      <Show when={showFakeCaret()}>
57        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
58          <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
59        </div>
60      </Show>
61    </div>
62  )
63}
64 
65const OTPFieldSeparator: Component<ComponentProps<"div">> = (props) => {
66  return (
67    <div {...props}>
68      <svg
69        xmlns="http://www.w3.org/2000/svg"
70        viewBox="0 0 24 24"
71        fill="none"
72        stroke="currentColor"
73        stroke-width="2"
74// … truncated