"use client";
import { OTPInput, OTPInputContext } from 'input-otp';
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var InputOTP = React.forwardRef(
  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
    OTPInput,
    {
      ref,
      containerClassName: cn(
        "flex items-center gap-[var(--gap-sm,0.5rem)] has-[:disabled]:opacity-50",
        containerClassName
      ),
      className: cn(
        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
        className
      ),
      ...props
    }
  )
);
InputOTP.displayName = "InputOTP";
var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
InputOTPGroup.displayName = "InputOTPGroup";
var InputOTPSlot = React.forwardRef(
  ({ index, className, ...props }, ref) => {
    const inputOTPContext = React.useContext(OTPInputContext);
    const slot = inputOTPContext.slots[index];
    const char = slot?.char ?? null;
    const hasFakeCaret = slot?.hasFakeCaret ?? false;
    const isActive = slot?.isActive ?? false;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] items-center justify-center border-y border-r border-input text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
          "inset-ring-1 inset-ring-foreground/[0.06]",
          "first:rounded-l-md first:border-l last:rounded-r-md",
          isActive && "z-10 ring-2 ring-ring ring-offset-2 ring-offset-background",
          className
        ),
        ...props,
        children: [
          char,
          hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-pulse bg-foreground duration-1000" }) })
        ]
      }
    );
  }
);
InputOTPSlot.displayName = "InputOTPSlot";
var InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    className: "h-2 w-2 text-muted-foreground",
    "aria-hidden": "true",
    children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" })
  }
) }));
InputOTPSeparator.displayName = "InputOTPSeparator";

export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
//# sourceMappingURL=input-otp.js.map
//# sourceMappingURL=input-otp.js.map