LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-07 04:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate UI components to React 19

Browse Source
This commit is contained in:
Bereket Engida
2025-03-04 20:29:25 +03:00
parent 232f565cb7
commit 210c20eb65
42 changed files with 2456 additions and 2031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
demo/nextjs/components/ui/input-otp.tsx
View File

@@ -6,34 +6,45 @@ import { OTPInput, OTPInputContext } from "input-otp";
import { cn } from "@/lib/utils";
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName,
)}
className={cn("disabled:cursor-not-allowed", className)}
{...props}
/>
));
const InputOTP = (
{
ref,
className,
containerClassName,
...props
}: React.ComponentPropsWithoutRef<typeof OTPInput> & {
ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
}
) => (<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 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 items-center", className)} {...props} />
));
const InputOTPGroup = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<"div"> & {
ref: React.RefObject<React.ElementRef<"div">>;
}
) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />);
InputOTPGroup.displayName = "InputOTPGroup";
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
const InputOTPSlot = (
{
ref,
index,
className,
...props
}
) => {
const inputOTPContext = React.useContext(OTPInputContext);
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
@@ -55,17 +66,19 @@ const InputOTPSlot = React.forwardRef<
)}
</div>
);
});
};
InputOTPSlot.displayName = "InputOTPSlot";
const InputOTPSeparator = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
<DashIcon />
</div>
));
const InputOTPSeparator = (
{
ref,
...props
}: React.ComponentPropsWithoutRef<"div"> & {
ref: React.RefObject<React.ElementRef<"div">>;
}
) => (<div ref={ref} role="separator" {...props}>
<DashIcon />
</div>);
InputOTPSeparator.displayName = "InputOTPSeparator";
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };