skyroc-ui/dist/components/input-otp/InputOTP.js

A modern React UI component library built on Radix UI and Tailwind CSS

import InputOTPGroup_default from "./InputOTPGroup.js";
import InputOTPSeparator_default from "./InputOTPSeparator.js";
import InputOTPSlot_default from "./InputOTPSlot.js";
import InputOtpRoot_default from "./InputOtpRoot.js";
import { Fragment, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/input-otp/InputOTP.tsx
const InputOTP = forwardRef((props, ref) => {
	const { className, classNames, inputCount = 6, mask, separator, size,...rest } = props;
	const isSeparator = Boolean(separator);
	return /* @__PURE__ */ jsx(InputOtpRoot_default, {
		className: className || classNames?.root,
		maxLength: inputCount,
		ref,
		...rest,
		children: /* @__PURE__ */ jsx(InputOTPGroup_default, {
			className: classNames?.group,
			separate: isSeparator,
			size,
			children: Array.from({ length: inputCount }).map((_, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputOTPSlot_default, {
				className: classNames?.input,
				index,
				mask,
				separate: isSeparator,
				size
			}), isSeparator && index !== inputCount - 1 && /* @__PURE__ */ jsx(InputOTPSeparator_default, {
				className: classNames?.separator,
				size,
				children: separator
			})] }, String(index)))
		})
	});
});
InputOTP.displayName = "InputOTP";
var InputOTP_default = InputOTP;

//#endregion
export { InputOTP_default as default };