laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
62 lines (61 loc) • 1.87 kB
JavaScript
"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
};