OTP Field

1
import type { DynamicProps, RootProps } from "@corvu/otp-field";
2
import type { Component, ComponentProps, ValidComponent } from "solid-js";
3

4
import { Show, splitProps } from "solid-js";
5
import OtpField from "@corvu/otp-field";
6
import DotIcon from "lucide-solid/icons/dot";
7

8
import { cn } from "~/lib/utils";
9

10
export const REGEXP_ONLY_DIGITS = "^\\d*$";
11
export const REGEXP_ONLY_CHARS = "^[a-zA-Z]*$";
12
export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]*$";
13

14
type OTPFieldProps<T extends ValidComponent = "div"> = RootProps<T> & {
15
  class?: string;
16
};
17

18
const OTPField = <T extends ValidComponent = "div">(
19
  props: DynamicProps<T, OTPFieldProps<T>>,
20
) => {
21
  const [local, others] = splitProps(props as OTPFieldProps, ["class"]);
22
  return (
23
    <OtpField
24
      data-slot="otp-field"
25
      class={cn(
26
        "flex items-center gap-2 disabled:cursor-not-allowed has-[:disabled]:opacity-50",
27
        local.class,
28
      )}
29
      {...others}
30
    />
31
  );
32
};
33

34
const OTPFieldInput = OtpField.Input;
35

36
const OTPFieldGroup: Component<ComponentProps<"div">> = (props) => {
37
  const [local, others] = splitProps(props, ["class"]);
38
  return <div class={cn("flex items-center", local.class)} {...others} />;
39
};
40

41
const OTPFieldSlot: Component<ComponentProps<"div"> & { index: number }> = (
42
  props,
43
) => {
44
  const [local, others] = splitProps(props, ["class", "index"]);
45
  const context = OtpField.useContext();
46
  const char = () => context.value()[local.index];
47
  const showFakeCaret = () =>
48
    context.value().length === local.index && context.isInserting();
49

50
  return (
51
    <div
52
      data-slot="otp-field-slot"
53
      class={cn(
54
        "group relative flex size-10 items-center justify-center border-y border-r-2 border-border text-sm first:rounded-l-base first:border-l-2 last:rounded-r-base",
55
        local.class,
56
      )}
57
      {...others}
58
    >
59
      <div
60
        class={cn(
61
          "absolute inset-0 z-10 transition-all group-first:rounded-l-base group-last:rounded-r-base",
62
          context.activeSlots().includes(local.index) &&
63
            "ring-2 ring-primary ring-offset-background",
64
        )}
65
      />
66
      {char()}
67
      <Show when={showFakeCaret()}>
68
        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
69
          <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
70
        </div>
71
      </Show>
72
    </div>
73
  );
74
};
75

76
const OTPFieldSeparator: Component<ComponentProps<"div">> = (props) => {
77
  return (
78
    <div data-slot="otp-field-separator" {...props}>
79
      <DotIcon class="size-6" />
80
    </div>
81
  );
82
};
83

84
export {
85
  OTPField,
86
  OTPFieldInput,
87
  OTPFieldGroup,
88
  OTPFieldSlot,
89
  OTPFieldSeparator,
90
};