@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
51 lines (50 loc) • 2.74 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { OTPInput, OTPInputContext } from "input-otp";
import { MinusIcon } from "lucide-react";
import { cn } from "../../lib/utils.js";
function InputOTP({ className, containerClassName, ...props }) {
return /*#__PURE__*/ jsx(OTPInput, {
"data-slot": "input-otp",
containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
className: cn("disabled:cursor-not-allowed", className),
...props
});
}
function InputOTPGroup({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "input-otp-group",
className: cn("flex items-center", className),
...props
});
}
function InputOTPSlot({ index, className, ...props }) {
const inputOTPContext = useContext(OTPInputContext);
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
return /*#__PURE__*/ jsxs("div", {
"data-slot": "input-otp-slot",
"data-active": isActive,
className: cn("data-[active=true]:border-neutral-950 data-[active=true]:ring-neutral-950/50 data-[active=true]:aria-invalid:ring-red-500/20 dark:data-[active=true]:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 data-[active=true]:aria-invalid:border-red-500 dark:bg-neutral-200/30 border-neutral-200 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] dark:data-[active=true]:border-neutral-300 dark:data-[active=true]:ring-neutral-300/50 dark:data-[active=true]:aria-invalid:ring-red-900/20 dark:dark:data-[active=true]:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 dark:data-[active=true]:aria-invalid:border-red-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800", 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: "animate-caret-blink bg-neutral-950 h-4 w-px duration-1000 dark:bg-neutral-50"
})
})
]
});
}
function InputOTPSeparator({ ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "input-otp-separator",
role: "separator",
...props,
children: /*#__PURE__*/ jsx(MinusIcon, {})
});
}
export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
//# sourceMappingURL=input-otp.js.map