summaryrefslogtreecommitdiff
path: root/apps/web/src/components/ui/input-otp.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components/ui/input-otp.tsx')
-rw-r--r--apps/web/src/components/ui/input-otp.tsx75
1 files changed, 0 insertions, 75 deletions
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
deleted file mode 100644
index ec71f96a..00000000
--- a/apps/web/src/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-
-import { cn } from "@/utils/ui";
-
-const InputOTP = React.forwardRef<
- React.ElementRef<typeof OTPInput>,
- React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
- <OTPInput
- ref={ref}
- containerClassName={cn(
- "flex items-center justify-between gap-2 w-full has-disabled:opacity-50",
- containerClassName,
- )}
- className={cn("disabled:cursor-not-allowed", className)}
- {...props}
- />
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
- <div
- ref={ref}
- className={cn("flex flex-1 items-center gap-2", className)}
- {...props}
- />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
- const inputOTPContext = React.useContext(OTPInputContext);
- const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-
- return (
- <div
- ref={ref}
- className={cn(
- "border-input relative flex aspect-square min-w-[36px] flex-1 items-center justify-center border text-lg shadow-xs first:rounded-l-md first:border-l last:rounded-r-md",
- isActive && "ring-ring z-10 ring-1",
- className,
- )}
- {...props}
- >
- {char}
- {hasFakeCaret && (
- <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
- <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
- </div>
- )}
- </div>
- );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
- <div ref={ref} role="separator" {...props}>
- <Minus />
- </div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };