input-otp

1import type { DynamicProps, InputProps, RootProps } from "@corvu/otp-field";
2import OtpField from "@corvu/otp-field";
3 
4import { cn } from "~/lib/utils.ts";
5import IconMinus from "~icons/lucide/minus";
6 
7import type { Component, ComponentProps, ValidComponent } from "solid-js";
8import { mergeProps, Show, splitProps } from "solid-js";
9 
10export const REGEXP_ONLY_DIGITS = "^\\d*$";
11export const REGEXP_ONLY_CHARS = "^[a-zA-Z]*$";
12export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]*$";
13 
14type InputOTPProps<T extends ValidComponent = "div"> = RootProps<T> & {
15  class?: string;
16};
17 
18const InputOTP = <T extends ValidComponent = "div">(
19  props: DynamicProps<T, InputOTPProps<T>>,
20) => {
21  const [local, others] = splitProps(props as InputOTPProps, ["class"]);
22  return (
23    <OtpField
24      class={cn(
25        "gap-2 flex items-center has-disabled:opacity-50",
26        local.class,
27      )}
28      {...others}
29    />
30  );
31};
32 
33type InputOTPInputProps<T extends ValidComponent = "input"> = InputProps<T> & {
34  class?: string;
35};
36 
37const InputOTPInput = <T extends ValidComponent = "input">(
38  rawProps: DynamicProps<T, InputOTPInputProps<T>>,
39) => {
40  // corvu defaults `pattern` to digits-only; shadcn accepts any character
41  // unless a pattern is given, so opt out of the primitive's default.
42  const props = mergeProps({ pattern: null }, rawProps as InputOTPInputProps);
43  const [local, others] = splitProps(props, ["class"]);
44  return (
45    <OtpField.Input
46      data-slot="input-otp"
47      class={cn("disabled:cursor-not-allowed", local.class)}
48      {...others}
49    />
50  );
51};
52 
53const InputOTPGroup: Component<ComponentProps<"div">> = (props) => {
54  const [local, others] = splitProps(props, ["class"]);
55  return (
56    <div
57      data-slot="input-otp-group"
58      class={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center", local.class)}
59      {...others}
60    />
61  );
62};
63 
64const InputOTPSlot: Component<ComponentProps<"div"> & { index: number }> = (
65  props,
66) => {
67  const [local, others] = splitProps(props, ["class", "index"]);
68  const context = OtpField.useContext();
69  const char = () => context.value()[local.index];
70  const isActive = () => context.activeSlots().includes(local.index);
71  const showFakeCaret = () =>
72    context.value().length === local.index && context.isInserting();
73 
74  return (
75    <div
76      data-slot="input-otp-slot"
77      data-active={isActive()}
78// … truncated