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.tsx92
1 files changed, 46 insertions, 46 deletions
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
index 0d2cc002..ec71f96a 100644
--- a/apps/web/src/components/ui/input-otp.tsx
+++ b/apps/web/src/components/ui/input-otp.tsx
@@ -4,71 +4,71 @@ import * as React from "react";
import { OTPInput, OTPInputContext } from "input-otp";
import { Minus } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn } from "@/utils/ui";
const InputOTP = React.forwardRef<
- React.ElementRef<typeof OTPInput>,
- React.ComponentPropsWithoutRef<typeof OTPInput>
+ 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}
- />
+ <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">
+ React.ElementRef<"div">,
+ React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
- <div
- ref={ref}
- className={cn("flex items-center flex-1 gap-2", className)}
- {...props}
- />
+ <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 }
+ React.ElementRef<"div">,
+ React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
- const inputOTPContext = React.useContext(OTPInputContext);
- const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+ const inputOTPContext = React.useContext(OTPInputContext);
+ const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
- return (
- <div
- ref={ref}
- className={cn(
- "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
- isActive && "z-10 ring-1 ring-ring",
- className
- )}
- {...props}
- >
- {char}
- {hasFakeCaret && (
- <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
- <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
- </div>
- )}
- </div>
- );
+ 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">
+ React.ElementRef<"div">,
+ React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
- <div ref={ref} role="separator" {...props}>
- <Minus />
- </div>
+ <div ref={ref} role="separator" {...props}>
+ <Minus />
+ </div>
));
InputOTPSeparator.displayName = "InputOTPSeparator";