@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)!
52 lines (51 loc) • 3.72 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_input_otp_9f71df26__ from "input-otp";
import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from "lucide-react";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
function InputOTP({ className, containerClassName, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_input_otp_9f71df26__.OTPInput, {
"data-slot": "input-otp",
containerClassName: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("disabled:cursor-not-allowed", className),
...props
});
}
function InputOTPGroup({ className, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-slot": "input-otp-group",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex items-center", className),
...props
});
}
function InputOTPSlot({ index, className, ...props }) {
const inputOTPContext = __WEBPACK_EXTERNAL_MODULE_react__.useContext(__WEBPACK_EXTERNAL_MODULE_input_otp_9f71df26__.OTPInputContext);
const slot = inputOTPContext.slots[index];
const { char, hasFakeCaret, isActive } = slot || {};
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
"data-slot": "input-otp-slot",
"data-active": isActive,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("border-neutral-200 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 relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-2xs transition-all outline-hidden first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px] dark:border-neutral-800 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", className),
...props,
children: [
char,
hasFakeCaret && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "pointer-events-none absolute inset-0 flex items-center justify-center",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "animate-caret-blink bg-neutral-950 h-4 w-px duration-1000 dark:bg-neutral-50"
})
})
]
});
}
function InputOTPSeparator({ ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-slot": "input-otp-separator",
role: "separator",
...props,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.MinusIcon, {})
});
}
export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
//# sourceMappingURL=input-otp.js.map