"use client";
import { jsx as r, jsxs as u } from "react/jsx-runtime";
import { OTPInput as c, OTPInputContext as l } from "../../node_modules/input-otp/dist/index.js";
import * as p from "react";
import { cn as a } from "../../lib/utils.js";
function x({
  className: t,
  containerClassName: e,
  ...i
}) {
  return /* @__PURE__ */ r(
    c,
    {
      "data-slot": "input-otp",
      containerClassName: a(
        "flex items-center gap-2 has-disabled:opacity-50",
        e
      ),
      className: a("disabled:cursor-not-allowed", t),
      ...i
    }
  );
}
function b({ className: t, ...e }) {
  return /* @__PURE__ */ r(
    "div",
    {
      "data-slot": "input-otp-group",
      className: a("flex items-center", t),
      ...e
    }
  );
}
function g({
  index: t,
  className: e,
  ...i
}) {
  const n = p.useContext(l), { char: s, hasFakeCaret: o, isActive: d } = n?.slots[t] ?? {};
  return /* @__PURE__ */ u(
    "div",
    {
      "data-slot": "input-otp-slot",
      "data-active": d,
      className: a(
        "data-[active=true]:border-d-ring data-[active=true]:ring-d-ring/50 data-[active=true]:aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive data-[active=true]:aria-invalid:border-d-destructive border-d-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
        e
      ),
      ...i,
      children: [
        s,
        o && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
      ]
    }
  );
}
export {
  x as InputOTP,
  b as InputOTPGroup,
  g as InputOTPSlot
};
