import { cn } from "./index3.js";
import { Lt, jt } from "./index394.js";
import { Minus } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/ui/input-otp.tsx
/** biome-ignore-all lint/a11y/useFocusableInteractive: OTP slots are visual-only; focus is managed by the parent OTPInput from input-otp library */
/** biome-ignore-all lint/a11y/useAriaPropsForRole: InputOTPSeparator uses role="separator" which is valid without additional ARIA props per WAI-ARIA spec */
/** biome-ignore-all lint/a11y/useSemanticElements: OTP component architecture requires custom div-based slots for styling; accessibility handled by input-otp library */
var InputOTP = React.forwardRef(({ className, containerClassName, "aria-label": ariaLabel = "One-time password", ...props }, ref) => {
	return /* @__PURE__ */ jsx(Lt, {
		ref,
		"data-slot": "input-otp",
		containerClassName: cn("flex items-center has-disabled:opacity-50", containerClassName),
		spellCheck: false,
		"aria-label": ariaLabel,
		className: cn("disabled:cursor-not-allowed", className),
		...props
	});
});
var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => {
	return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "input-otp-group",
		className: cn("group/otp-group has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-xl has-aria-invalid:ring-[3px] flex items-center", className),
		...props
	});
});
var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
	const { char, hasFakeCaret, isActive } = React.useContext(jt)?.slots[index] ?? {};
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "input-otp-slot",
		"data-active": isActive,
		"data-filled": !!char || void 0,
		className: cn("dark:bg-input/30 border-input text-sm shadow-xs outline-none relative flex items-center justify-center size-11", "rounded-xl border", "transition-[color,border-color,box-shadow,opacity] duration-200 ease-out", "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:ring-[3px] data-[active=true]:z-10", "data-[filled]:animate-[delight-slot-fill_200ms_ease-out] motion-reduce:animate-none", "data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive", "group-[]/otp-group:rounded-none group-[]/otp-group:border-y group-[]/otp-group:border-r group-[]/otp-group:border-l-0", "group-[]/otp-group:first:rounded-l-xl group-[]/otp-group:first:border-l", "group-[]/otp-group:last:rounded-r-xl", className),
		...props,
		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
			className: "pointer-events-none absolute inset-0 flex items-center justify-center animate-[delight-fade-in_150ms_ease-out] motion-reduce:animate-none",
			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink motion-reduce:animate-none bg-foreground h-4 w-px duration-1000" })
		})]
	});
});
var InputOTPSeparator = React.forwardRef(({ ...props }, ref) => {
	return /* @__PURE__ */ jsx("div", {
		ref,
		"data-slot": "input-otp-separator",
		className: "[&_svg:not([class*='size-'])]:size-4 flex items-center",
		role: "separator",
		...props,
		children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" })
	});
});
InputOTP.displayName = "InputOTP";
InputOTPGroup.displayName = "InputOTPGroup";
InputOTPSlot.displayName = "InputOTPSlot";
InputOTPSeparator.displayName = "InputOTPSeparator";
//#endregion
export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

//# sourceMappingURL=index395.js.map