{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"application-reset-password-email-otp-reset","type":"registry:block","title":"Email OTP Reset","files":[{"path":"components/blocks/application/reset-password/email-otp-reset.tsx","content":"\"use client\";\n\nimport * as React from 'react';\n\nimport {\n  ArrowRightIcon,\n  EyeIcon,\n  EyeOffIcon,\n  LockIcon,\n  MailIcon,\n  RefreshCwIcon,\n} from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\n\nexport default function EmailOTPReset() {\n  const [activeStep, setActiveStep] = React.useState<\n    'email' | 'otp' | 'password' | 'success'\n  >('email');\n  const [email, setEmail] = React.useState('');\n  const [emailValue, setEmailValue] = React.useState('');\n  const [otpValue, setOtpValue] = React.useState('');\n  const [passwordValue, setPasswordValue] = React.useState('');\n  const [confirmPasswordValue, setConfirmPasswordValue] = React.useState('');\n  const [countdown, setCountdown] = React.useState(0);\n  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);\n  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =\n    React.useState(false);\n\n  // Initialize countdown timer\n  React.useEffect(() => {\n    if (countdown > 0) {\n      const timer = setTimeout(() => {\n        setCountdown(countdown - 1);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n  }, [countdown]);\n\n  function onSubmitEmail(e: React.FormEvent) {\n    e.preventDefault();\n    setEmail(emailValue);\n    setActiveStep('otp');\n    setCountdown(60);\n  }\n\n  function onSubmitOTP(e: React.FormEvent) {\n    e.preventDefault();\n    setActiveStep('password');\n  }\n\n  function onSubmitPassword(e: React.FormEvent) {\n    e.preventDefault();\n    setActiveStep('success');\n  }\n\n  function resendOTP() {\n    setCountdown(60);\n  }\n\n  const togglePasswordVisibility = () => {\n    setIsPasswordVisible(!isPasswordVisible);\n  };\n\n  const toggleConfirmPasswordVisibility = () => {\n    setIsConfirmPasswordVisible(!isConfirmPasswordVisible);\n  };\n\n  return (\n    <div className=\"container mx-auto px-4 py-12 md:px-6 md:py-16\">\n      <div className=\"flex flex-col gap-8 lg:flex-row lg:gap-12\">\n        {/* Left side: Illustration + Text */}\n        <div className=\"flex flex-col justify-center lg:w-1/2\">\n          <h2 className=\"mb-2 text-3xl font-bold tracking-tight\">\n            Account Recovery\n          </h2>\n          <p className=\"text-muted-foreground mb-6\">\n            Securely reset your password in three simple steps. We&apos;ll send\n            you a one-time password to verify your email, then you can set a new\n            password for your account.\n          </p>\n          <div className=\"space-y-4\">\n            <div className=\"flex gap-3\">\n              <div className=\"bg-primary text-primary-foreground flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium\">\n                1\n              </div>\n              <div>\n                <h3 className=\"font-medium\">Verify Email</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  Enter your account email\n                </p>\n              </div>\n            </div>\n            <div className=\"flex gap-3\">\n              <div className=\"bg-primary/20 text-primary flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium\">\n                2\n              </div>\n              <div>\n                <h3 className=\"font-medium\">Enter OTP</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  Enter the 6-digit code sent to your email\n                </p>\n              </div>\n            </div>\n            <div className=\"flex gap-3\">\n              <div className=\"bg-primary/20 text-primary flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium\">\n                3\n              </div>\n              <div>\n                <h3 className=\"font-medium\">New Password</h3>\n                <p className=\"text-muted-foreground text-sm\">\n                  Create a new secure password\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Right side: Form */}\n        <div className=\"lg:w-1/2\">\n          <Card className=\"border-2\">\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <div>\n                  <CardTitle className=\"text-2xl\">Reset Password</CardTitle>\n                  <CardDescription>\n                    Secure your account with a new password\n                  </CardDescription>\n                </div>\n                <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                  <LockIcon className=\"text-primary h-5 w-5\" />\n                </div>\n              </div>\n              <Separator className=\"mt-6\" />\n            </CardHeader>\n\n            <CardContent>\n              {activeStep === 'email' && (\n                <form onSubmit={onSubmitEmail} className=\"space-y-4\">\n                  <Alert className=\"mb-6 bg-blue-50 text-blue-800 dark:bg-blue-900 dark:text-blue-300\">\n                    <AlertDescription>\n                      Enter the email address associated with your account.\n                      We&apos;ll send you a verification code.\n                    </AlertDescription>\n                  </Alert>\n\n                  <FieldGroup>\n                    <Field>\n                      <FieldLabel htmlFor=\"email\">Email Address</FieldLabel>\n                      <div className=\"relative\">\n                        <Input\n                          id=\"email\"\n                          placeholder=\"name@example.com\"\n                          type=\"email\"\n                          className=\"pl-10\"\n                          value={emailValue}\n                          onChange={(e) => setEmailValue(e.target.value)}\n                        />\n                        <MailIcon className=\"text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2\" />\n                      </div>\n                    </Field>\n                  </FieldGroup>\n                  <Button type=\"submit\" className=\"w-full\">\n                    Send Verification Code{' '}\n                    <ArrowRightIcon className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </form>\n              )}\n\n              {activeStep === 'otp' && (\n                <form onSubmit={onSubmitOTP} className=\"space-y-4\">\n                  <Alert className=\"mb-6\">\n                    <AlertDescription>\n                      We&apos;ve sent a 6-digit verification code to{' '}\n                      <span className=\"font-medium\">{email}</span>. Please\n                      check your inbox and spam folder.\n                    </AlertDescription>\n                  </Alert>\n\n                  <FieldGroup>\n                    <Field>\n                      <FieldLabel htmlFor=\"otp\">Verification Code</FieldLabel>\n                      <Input\n                        id=\"otp\"\n                        placeholder=\"123456\"\n                        maxLength={6}\n                        className=\"text-center text-lg tracking-widest\"\n                        value={otpValue}\n                        onChange={(e) => setOtpValue(e.target.value)}\n                      />\n                      <FieldDescription>\n                        Enter the 6-digit code we sent to your email\n                      </FieldDescription>\n                    </Field>\n                  </FieldGroup>\n\n                  <Button type=\"submit\" className=\"w-full\">\n                    Verify Code\n                  </Button>\n\n                  <div className=\"text-center\">\n                    <p className=\"text-muted-foreground text-sm\">\n                      Didn&apos;t receive the code?{' '}\n                      {countdown > 0 ? (\n                        <span>Resend in {countdown}s</span>\n                      ) : (\n                        <Button\n                          variant=\"link\"\n                          className=\"h-auto p-0 text-sm\"\n                          onClick={resendOTP}\n                        >\n                          Resend code{' '}\n                          <RefreshCwIcon className=\"ml-1 h-3 w-3\" />\n                        </Button>\n                      )}\n                    </p>\n                  </div>\n                </form>\n              )}\n\n              {activeStep === 'password' && (\n                <form onSubmit={onSubmitPassword} className=\"space-y-4\">\n                  <div className=\"text-muted-foreground mb-4 text-sm\">\n                    Create a strong password with a mix of letters, numbers,\n                    and symbols.\n                  </div>\n\n                  <FieldGroup>\n                    <Field>\n                      <FieldLabel htmlFor=\"password\">New Password</FieldLabel>\n                      <div className=\"relative\">\n                        <Input\n                          id=\"password\"\n                          placeholder=\"••••••••\"\n                          type={isPasswordVisible ? 'text' : 'password'}\n                          value={passwordValue}\n                          onChange={(e) => setPasswordValue(e.target.value)}\n                        />\n                        <Button\n                          type=\"button\"\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className=\"text-muted-foreground absolute top-0 right-0 h-full px-3 py-2\"\n                          onClick={togglePasswordVisibility}\n                        >\n                          {isPasswordVisible ? (\n                            <EyeOffIcon className=\"h-4 w-4\" />\n                          ) : (\n                            <EyeIcon className=\"h-4 w-4\" />\n                          )}\n                          <span className=\"sr-only\">\n                            Toggle password visibility\n                          </span>\n                        </Button>\n                      </div>\n                      <FieldDescription>\n                        Must have at least 8 characters with uppercase,\n                        lowercase, and number\n                      </FieldDescription>\n                    </Field>\n\n                    <Field>\n                      <FieldLabel htmlFor=\"confirmPassword\">Confirm Password</FieldLabel>\n                      <div className=\"relative\">\n                        <Input\n                          id=\"confirmPassword\"\n                          placeholder=\"••••••••\"\n                          type={isConfirmPasswordVisible ? 'text' : 'password'}\n                          value={confirmPasswordValue}\n                          onChange={(e) => setConfirmPasswordValue(e.target.value)}\n                        />\n                        <Button\n                          type=\"button\"\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className=\"text-muted-foreground absolute top-0 right-0 h-full px-3 py-2\"\n                          onClick={toggleConfirmPasswordVisibility}\n                        >\n                          {isConfirmPasswordVisible ? (\n                            <EyeOffIcon className=\"h-4 w-4\" />\n                          ) : (\n                            <EyeIcon className=\"h-4 w-4\" />\n                          )}\n                          <span className=\"sr-only\">\n                            Toggle confirm password visibility\n                          </span>\n                        </Button>\n                      </div>\n                    </Field>\n                  </FieldGroup>\n\n                  <Button type=\"submit\" className=\"w-full\">\n                    Reset Password\n                  </Button>\n                </form>\n              )}\n\n              {activeStep === 'success' && (\n                <div className=\"space-y-6 py-4 text-center\">\n                  <div className=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100\">\n                    <svg\n                      className=\"h-8 w-8 text-green-600\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M5 13l4 4L19 7\"\n                      />\n                    </svg>\n                  </div>\n                  <div>\n                    <h3 className=\"text-xl font-medium\">\n                      Password Reset Successful\n                    </h3>\n                    <p className=\"text-muted-foreground mt-2\">\n                      Your password has been updated successfully. You can now\n                      login with your new credentials.\n                    </p>\n                  </div>\n                  <Button asChild className=\"w-full\">\n                    <a href=\"#\">Sign in</a>\n                  </Button>\n                </div>\n              )}\n            </CardContent>\n\n            <CardFooter className=\"flex justify-center border-t p-6\">\n              {activeStep !== 'success' && (\n                <p className=\"text-muted-foreground text-sm\">\n                  Remember your password?{' '}\n                  <a href=\"#\" className=\"text-primary font-medium\">\n                    Sign in\n                  </a>\n                </p>\n              )}\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/application/reset-password/email-otp-reset.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/field.tsx","content":"\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n","type":"registry:ui","target":"components/ui/field.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/separator.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px \",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","type":"registry:ui","target":"components/ui/separator.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/alert.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n","type":"registry:ui","target":"components/ui/alert.tsx"}],"description":"A reset password form that emails a one time code, then prompts users to enter the OTP digits before setting a new password. Use for secure email recovery.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}