laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
62 lines (61 loc) • 1.97 kB
JavaScript
"use client";
import { jsx as a, jsxs as c } from "react/jsx-runtime";
import * as u from "react";
import { OTPInput as l, OTPInputContext as p } from "../../node_modules/input-otp/dist/index.js";
import { cn as r } from "../../lib/utils.js";
function b({
className: t,
containerClassName: e,
...i
}) {
return /* @__PURE__ */ a(
l,
{
"data-slot": "input-otp",
containerClassName: r(
"flex items-center gap-2 has-disabled:opacity-50",
e
),
className: r("disabled:cursor-not-allowed", t),
...i
}
);
}
function x({ className: t, ...e }) {
return /* @__PURE__ */ a(
"div",
{
"data-slot": "input-otp-group",
className: r("flex items-center", t),
...e
}
);
}
function g({
index: t,
className: e,
...i
}) {
const n = u.useContext(p), { char: d, hasFakeCaret: s, isActive: o } = (n == null ? void 0 : n.slots[t]) ?? {};
return /* @__PURE__ */ c(
"div",
{
"data-slot": "input-otp-slot",
"data-active": o,
className: r(
"data-[active=true]:border-d-ring data-[active=true]:ring-d-ring/50 data-[active=true]:aria-invalid:ring-d-destructive/20 dark:data-[active=true]:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive data-[active=true]:aria-invalid:border-d-destructive dark:bg-d-input/30 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: [
d,
s && /* @__PURE__ */ a("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
]
}
);
}
export {
b as InputOTP,
x as InputOTPGroup,
g as InputOTPSlot
};