{"version":3,"sources":["../../../components/ui/input-otp.tsx"],"sourcesContent":["\"use client\";\nimport * as React from 'react';\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../utils/ui';\nimport { MinusIcon } from 'lucide-react';\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}\n      spellCheck={false}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        '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',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;;AACA,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAG1C,SAAS,iBAAiB;AAE1B,SAAS,SAAS,IAMf;AANe,eAChB;AAAA;AAAA,IACA;AAAA,EATF,IAOkB,IAGb,kBAHa,IAGb;AAAA,IAFH;AAAA,IACA;AAAA;AAKA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAoB,GAAG,0DAA0D,kBAAkB;AAAA,MACnG,YAAY;AAAA,MACZ,WAAW,GAAG,+BAA+B,SAAS;AAAA,OAClD;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc,IAAsD;AAAtD,eAAE,YAzBzB,IAyBuB,IAAgB,kBAAhB,IAAgB,CAAd;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa,IAMnB;AANmB,eACpB;AAAA;AAAA,IACA;AAAA,EAxCF,IAsCsB,IAGjB,kBAHiB,IAGjB;AAAA,IAFH;AAAA,IACA;AAAA;AAxCF,MAAAA;AA6CE,QAAM,kBAAwB,iBAAW,eAAe;AACxD,QAAM,EAAE,MAAM,cAAc,SAAS,KAAIA,MAAA,mDAAiB,MAAM,WAAvB,OAAAA,MAAiC,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,IAEH;AAAA,IACA,gBACC,oCAAC,SAAI,WAAU,2EACb,oCAAC,SAAI,WAAU,4DAA2D,CAC5E;AAAA,EAEJ;AAEJ;AAEA,SAAS,kBAAkB,IAA2C;AAA3C,MAAK,kBAAL,IAAK;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAK;AAAA,OACD;AAAA,IAEJ,oCAAC,eAAU;AAAA,EACb;AAEJ;","names":["_a"]}