@intlayer/design-system 8.4.4 → 8.4.6

package/dist/esm/components/Input/OTPInput.mjs

@@ -1,4 +1,31 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t}from"../Button/Button.mjs";import{createContext as n,useContext as r,useEffect as i,useRef as a,useState as o}from"react";import{cva as s}from"class-variance-authority";import{MinusIcon as c}from"lucide-react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=e=>[setTimeout(e,0),setTimeout(e,10),setTimeout(e,50)],p=(e,t)=>{try{e.insertRule(t)}catch{console.error(`input-otp could not insert CSS rule:`,t)}},m=[`[data-lastpass-icon-root]`,`com-1password-button`,`[data-dashlanecreated]`,`[style$="2147483647 !important;"]`].join(`,`),h=({containerRef:e,inputRef:t,pushPasswordManagerStrategy:n,isFocused:r})=>{let[a,s]=o(!1),[c,l]=o(!1),[u,d]=o(!1),f=n===`none`?!1:(n===`increase-width`||n===`experimental-no-flickering`)&&a&&c,p=()=>{let r=e.current,i=t.current;if(!r||!i||u||n===`none`)return;let a=r,o=a.getBoundingClientRect().left+a.offsetWidth,c=a.getBoundingClientRect().top+a.offsetHeight/2,l=o-18,f=c;document.querySelectorAll(m).length===0&&document.elementFromPoint(l,f)===r||(s(!0),d(!0))};return i(()=>{let t=e.current;if(!t||n===`none`)return;let r=()=>{l(window.innerWidth-t.getBoundingClientRect().right>=40)};r();let i=setInterval(r,1e3);return()=>{clearInterval(i)}},[e,n]),i(()=>{let e=r||document.activeElement===t.current;if(n===`none`||!e)return;let i=setTimeout(p,0),a=setTimeout(p,2e3),o=setTimeout(p,5e3),s=setTimeout(()=>{d(!0)},6e3);return()=>{clearTimeout(i),clearTimeout(a),clearTimeout(o),clearTimeout(s)}},[t,r,n]),{hasPWMBadge:a,willPushPWMBadge:f,PWM_BADGE_SPACE_WIDTH:`40px`}},g=e=>{let t=a(void 0);return i(()=>{t.current=e}),t.current},_=n({}),v=({value:t,onChange:n,maxLength:r,pattern:s,placeholder:c,inputMode:m=`numeric`,onComplete:v,onActiveSlotChange:y,pushPasswordManagerStrategy:b=`increase-width`,pasteTransformer:x,containerClassName:S,noScriptCSSFallback:C=`
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { MinusIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/OTPInput.tsx
+/**
+* This component is a fork of https://github.com/guilhermerodz/input-otp
+*/
+const syncTimeouts = (cb) => {
+	return [
+		setTimeout(cb, 0),
+		setTimeout(cb, 10),
+		setTimeout(cb, 50)
+	];
+};
+const safeInsertRule = (sheet, rule) => {
+	try {
+		sheet.insertRule(rule);
+	} catch {
+		console.error("input-otp could not insert CSS rule:", rule);
+	}
+};
+const NOSCRIPT_CSS_FALLBACK = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -17,5 +44,450 @@
     --nojs-bg: black !important;
     --nojs-fg: white !important;
   }
-}`,render:w,children:T,...E})=>{let[D,ee]=o(typeof E.defaultValue==`string`?E.defaultValue:``),O=t??D,k=g(O),A=e=>{n?.(e),ee(e)},j=s===void 0?null:typeof s==`string`?new RegExp(s):s,M=a(null),N=a(null),P=a({value:O,onChange:A,isIOS:typeof window<`u`&&window?.CSS?.supports?.(`-webkit-touch-callout`,`none`)}),F=a({prev:[M.current?.selectionStart??null,M.current?.selectionEnd??null,M.current?.selectionDirection??`none`]});i(()=>{let e=M.current,t=N.current;if(!e||!t)return;P.current.value!==e.value&&P.current.onChange(e.value),F.current.prev=[e.selectionStart,e.selectionEnd,e.selectionDirection??`none`];let n=()=>{if(document.activeElement!==e){V(null),U(null),G(null);return}let t=e.selectionStart,n=e.selectionEnd,r=e.selectionDirection,i=e.maxLength,a=e.value,o=F.current.prev,s=-1,c=-1,l=r??`none`;if(a.length!==0&&t!==null&&n!==null){let e=t===n,r=t===a.length&&a.length<i;if(e&&!r){let e=t;if(e===0)s=0,c=1,l=`forward`;else if(e===i)s=e-1,c=e,l=`backward`;else if(i>1&&a.length>1){let t=0;if(o[0]!==null&&o[1]!==null){l=e<o[1]?`backward`:`forward`;let n=o[0]===o[1]&&o[0]<i;l===`backward`&&!n&&(t=-1)}s=t+e,c=t+e+1}}s!==-1&&c!==-1&&s!==c&&M.current?.setSelectionRange(s,c,l)}let u=s===-1?t:s,d=c===-1?n:c,f=l;G(t!==null&&n!==null?t===n?t:u:null),V(u),U(d),F.current.prev=[u,d,f]};if(document.addEventListener(`selectionchange`,n,{capture:!0}),n(),document.activeElement===e&&z(!0),!document.getElementById(`input-otp-style`)){let e=document.createElement(`style`);if(e.id=`input-otp-style`,document.head.appendChild(e),e.sheet){let t=`background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;`;p(e.sheet,`[data-input-otp]::selection { background: transparent !important; color: transparent !important; }`),p(e.sheet,`[data-input-otp]:autofill { ${t} }`),p(e.sheet,`[data-input-otp]:-webkit-autofill { ${t} }`),p(e.sheet,`@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`),p(e.sheet,`[data-input-otp] + * { pointer-events: all !important; }`)}}let r=()=>{t&&t.style.setProperty(`--root-height`,`${e.clientHeight}px`)};r();let i=new ResizeObserver(r);return i.observe(e),()=>{document.removeEventListener(`selectionchange`,n,{capture:!0}),i.disconnect()}},[]);let[I,L]=o(!1),[R,z]=o(!1),[B,V]=o(null),[H,U]=o(null),[W,G]=o(null);i(()=>{f(()=>{M.current?.dispatchEvent(new Event(`input`));let e=M.current?.selectionStart??null,t=M.current?.selectionEnd??null,n=M.current?.selectionDirection??`none`;e!==null&&t!==null&&(V(e),U(t),G(e),F.current.prev=[e,t,n])})},[O,R]),i(()=>{k!==void 0&&O!==k&&k.length<r&&O.length===r&&v?.(O)},[r,v,k,O]);let K=a(null);i(()=>{let e=R&&W!==null?W:null;e!==K.current&&(K.current=e,y?.(e))},[R,W,y]);let q=h({containerRef:N,inputRef:M,pushPasswordManagerStrategy:b,isFocused:R}),J=e=>{let t=e.currentTarget.value.slice(0,r);if(t.length>0&&j&&!j.test(t)){e.preventDefault();return}typeof k==`string`&&t.length<k.length&&document.dispatchEvent(new Event(`selectionchange`)),A(t)},Y=()=>{if(M.current){let e=Math.min(M.current.value.length,r-1),t=M.current.value.length;M.current?.setSelectionRange(e,t),V(e),U(t)}z(!0)},X=e=>{let t=M.current;if(!x&&(!P.current.isIOS||!e.clipboardData||!t))return;let n=e.clipboardData.getData(`text/plain`),i=x?x(n):n;e.preventDefault();let a=M.current?.selectionStart,o=M.current?.selectionEnd,s=(a===o?O.slice(0,a??0)+i+O.slice(a??0):O.slice(0,a??0)+i+O.slice(o??0)).slice(0,r);if(!(s.length>0&&j&&!j.test(s))&&t){t.value=s,A(s);let e=Math.min(s.length,r-1),n=s.length;t.setSelectionRange(e,n),V(e),U(n)}},Z={width:q.willPushPWMBadge?`calc(100% + ${q.PWM_BADGE_SPACE_WIDTH})`:`100%`,clipPath:q.willPushPWMBadge?`inset(0 ${q.PWM_BADGE_SPACE_WIDTH} 0 0)`:void 0,fontSize:`var(--root-height)`},Q=u(`input`,{autoComplete:E.autoComplete||`one-time-code`,...E,"data-input-otp":!0,"data-input-otp-placeholder-shown":O.length===0||void 0,"data-input-otp-mss":B,"data-input-otp-mse":H,inputMode:m,pattern:j?.source,"aria-placeholder":c,className:`pointer-events-auto absolute inset-0 -z-10 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none`,style:Z,maxLength:r,value:O,ref:M,onPaste:e=>{X(e),E.onPaste?.(e)},onChange:J,onMouseOver:e=>{L(!0),E.onMouseOver?.(e)},onMouseLeave:e=>{L(!1),E.onMouseLeave?.(e)},onKeyDown:e=>{(e.key===`ArrowLeft`||e.key===`ArrowRight`)&&requestAnimationFrame(()=>{let e=M.current;if(e&&document.activeElement===e){let t=e.selectionStart,n=e.selectionEnd;t!==null&&n!==null&&G(t)}}),E.onKeyDown?.(e)},onFocus:e=>{Y(),E.onFocus?.(e)},onBlur:e=>{z(!1),E.onBlur?.(e)}}),$={slots:Array.from({length:r}).map((e,t)=>{let n=R&&B!==null&&H!==null&&(B===H&&t===B||t>=B&&t<H),r=O[t]===void 0?null:O[t];return{char:r,placeholderChar:O[0]===void 0?c?.[t]??null:null,isActive:n,hasFakeCaret:n&&r===null}}),isFocused:R,isHovering:!E.disabled&&I,setSelection:e=>{let t=M.current;if(!t||E.disabled)return;let n=Math.max(0,Math.min(e,r-1));document.activeElement!==t&&t.focus();let i=O[n]!==void 0,a=n,o=i?n+1:n;t.setSelectionRange(a,o),V(a),U(o),z(!0)}},te=w===void 0?u(_.Provider,{value:$,children:T}):w($);return d(l,{children:[C!==null&&u(`noscript`,{children:u(`style`,{children:C})}),d(`div`,{ref:N,className:e(`relative`,E.disabled?`cursor-default`:`cursor-text`,S),children:[te,u(`div`,{className:`absolute inset-0`,children:Q})]})]})},y=s(`block text-center`,{variants:{size:{sm:`h-4 w-3 text-sm`,md:`h-5 w-4 text-base`,lg:`h-6 w-5 text-lg`,xl:`h-7 w-6 text-xl`}},defaultVariants:{size:`md`}}),b=({className:t,render:n,...r})=>u(v,{containerClassName:`relative flex items-center gap-2 has-disabled:opacity-50`,className:e(`disabled:cursor-not-allowed`,t),render:n,...r}),x=({className:t,...n})=>u(`div`,{className:e(`z-10 flex items-center gap-3`,t),...n}),S=({index:n,className:i,onClick:a,onKeyDown:o,...s})=>{let c=r(_),{char:l,isActive:d}=c?.slots[n]??{},{setSelection:f}=c??{};return u(t,{isSelected:d,variant:`input`,color:`custom`,tabIndex:-1,className:e(`relative z-10 px-2!`,d&&`ring-4!`,i),onClick:e=>{f?.(n),a?.(e)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f?.(n)),o?.(e)},label:null,...s,children:u(`span`,{className:`relative z-10 flex h-6 w-4 items-center justify-center`,children:l})})},C=e=>u(`div`,{"aria-hidden":!0,className:`z-0 table h-0.5 w-3 rounded-full bg-border text-text/50`,...e,children:u(c,{})}),w=e=>u(`div`,{"data-indicator":!0,className:`absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none`,...e});export{w as InputIndicator,b as InputOTP,x as InputOTPGroup,C as InputOTPSeparator,S as InputOTPSlot,v as OTPInput,_ as OTPInputContext,y as inputSlotVariants,h as usePasswordManagerBadge,g as usePrevious};
+}`;
+const PWM_BADGE_MARGIN_RIGHT = 18;
+const PWM_BADGE_SPACE_WIDTH_PX = 40;
+const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
+const PASSWORD_MANAGERS_SELECTORS = [
+	"[data-lastpass-icon-root]",
+	"com-1password-button",
+	"[data-dashlanecreated]",
+	"[style$=\"2147483647 !important;\"]"
+].join(",");
+const usePasswordManagerBadge = ({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused }) => {
+	/** Password managers have a badge
+	*  and I'll use this state to push them
+	*  outside the input */
+	const [hasPWMBadge, setHasPWMBadge] = useState(false);
+	const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);
+	const [done, setDone] = useState(false);
+	const willPushPWMBadge = pushPasswordManagerStrategy === "none" ? false : (pushPasswordManagerStrategy === "increase-width" || pushPasswordManagerStrategy === "experimental-no-flickering") && hasPWMBadge && hasPWMBadgeSpace;
+	const trackPWMBadge = () => {
+		const container = containerRef.current;
+		const input = inputRef.current;
+		if (!container || !input || done || pushPasswordManagerStrategy === "none") return;
+		const elementToCompare = container;
+		const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
+		const centereredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
+		const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
+		const y = centereredY;
+		if (document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS).length === 0) {
+			if (document.elementFromPoint(x, y) === container) return;
+		}
+		setHasPWMBadge(true);
+		setDone(true);
+	};
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || pushPasswordManagerStrategy === "none") return;
+		const checkHasSpace = () => {
+			setHasPWMBadgeSpace(window.innerWidth - container.getBoundingClientRect().right >= PWM_BADGE_SPACE_WIDTH_PX);
+		};
+		checkHasSpace();
+		const interval = setInterval(checkHasSpace, 1e3);
+		return () => {
+			clearInterval(interval);
+		};
+	}, [containerRef, pushPasswordManagerStrategy]);
+	useEffect(() => {
+		const _isFocused = isFocused || document.activeElement === inputRef.current;
+		if (pushPasswordManagerStrategy === "none" || !_isFocused) return;
+		const t1 = setTimeout(trackPWMBadge, 0);
+		const t2 = setTimeout(trackPWMBadge, 2e3);
+		const t3 = setTimeout(trackPWMBadge, 5e3);
+		const t4 = setTimeout(() => {
+			setDone(true);
+		}, 6e3);
+		return () => {
+			clearTimeout(t1);
+			clearTimeout(t2);
+			clearTimeout(t3);
+			clearTimeout(t4);
+		};
+	}, [
+		inputRef,
+		isFocused,
+		pushPasswordManagerStrategy
+	]);
+	return {
+		hasPWMBadge,
+		willPushPWMBadge,
+		PWM_BADGE_SPACE_WIDTH
+	};
+};
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+const OTPInputContext = createContext({});
+const OTPInput = ({ value: uncheckedValue, onChange: uncheckedOnChange, maxLength, pattern, placeholder, inputMode = "numeric", onComplete, onActiveSlotChange, pushPasswordManagerStrategy = "increase-width", pasteTransformer, containerClassName, noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK, render, children, ...props }) => {
+	const [internalValue, setInternalValue] = useState(typeof props.defaultValue === "string" ? props.defaultValue : "");
+	const value = uncheckedValue ?? internalValue;
+	const previousValue = usePrevious(value);
+	const onChange = (newValue) => {
+		uncheckedOnChange?.(newValue);
+		setInternalValue(newValue);
+	};
+	const regexp = pattern !== void 0 ? typeof pattern === "string" ? new RegExp(pattern) : pattern : null;
+	/** useRef */
+	const inputRef = useRef(null);
+	const containerRef = useRef(null);
+	const initialLoadRef = useRef({
+		value,
+		onChange,
+		isIOS: typeof window !== "undefined" && window?.CSS?.supports?.("-webkit-touch-callout", "none")
+	});
+	const inputMetadataRef = useRef({ prev: [
+		inputRef.current?.selectionStart ?? null,
+		inputRef.current?.selectionEnd ?? null,
+		inputRef.current?.selectionDirection ?? "none"
+	] });
+	useEffect(() => {
+		const input = inputRef.current;
+		const container = containerRef.current;
+		if (!input || !container) return;
+		if (initialLoadRef.current.value !== input.value) initialLoadRef.current.onChange(input.value);
+		inputMetadataRef.current.prev = [
+			input.selectionStart,
+			input.selectionEnd,
+			input.selectionDirection ?? "none"
+		];
+		const onDocumentSelectionChange = () => {
+			if (document.activeElement !== input) {
+				setMirrorSelectionStart(null);
+				setMirrorSelectionEnd(null);
+				setActualCaretPosition(null);
+				return;
+			}
+			const selectionStart = input.selectionStart;
+			const selectionEnd = input.selectionEnd;
+			const selectionDirection = input.selectionDirection;
+			const maxLength = input.maxLength;
+			const value = input.value;
+			const previousSelection = inputMetadataRef.current.prev;
+			let calculatedStart = -1;
+			let calculatedEnd = -1;
+			let calculatedDirection = selectionDirection ?? "none";
+			if (value.length !== 0 && selectionStart !== null && selectionEnd !== null) {
+				const isSingleCaret = selectionStart === selectionEnd;
+				const isInsertMode = selectionStart === value.length && value.length < maxLength;
+				if (isSingleCaret && !isInsertMode) {
+					const caretPosition = selectionStart;
+					if (caretPosition === 0) {
+						calculatedStart = 0;
+						calculatedEnd = 1;
+						calculatedDirection = "forward";
+					} else if (caretPosition === maxLength) {
+						calculatedStart = caretPosition - 1;
+						calculatedEnd = caretPosition;
+						calculatedDirection = "backward";
+					} else if (maxLength > 1 && value.length > 1) {
+						let offset = 0;
+						if (previousSelection[0] !== null && previousSelection[1] !== null) {
+							calculatedDirection = caretPosition < previousSelection[1] ? "backward" : "forward";
+							const wasPreviouslyInserting = previousSelection[0] === previousSelection[1] && previousSelection[0] < maxLength;
+							if (calculatedDirection === "backward" && !wasPreviouslyInserting) offset = -1;
+						}
+						calculatedStart = offset + caretPosition;
+						calculatedEnd = offset + caretPosition + 1;
+					}
+				}
+				if (calculatedStart !== -1 && calculatedEnd !== -1 && calculatedStart !== calculatedEnd) inputRef.current?.setSelectionRange(calculatedStart, calculatedEnd, calculatedDirection);
+			}
+			const finalSelectionStart = calculatedStart !== -1 ? calculatedStart : selectionStart;
+			const finalSelectionEnd = calculatedEnd !== -1 ? calculatedEnd : selectionEnd;
+			const finalDirection = calculatedDirection;
+			if (selectionStart !== null && selectionEnd !== null) if (selectionStart === selectionEnd) setActualCaretPosition(selectionStart);
+			else setActualCaretPosition(finalSelectionStart);
+			else setActualCaretPosition(null);
+			setMirrorSelectionStart(finalSelectionStart);
+			setMirrorSelectionEnd(finalSelectionEnd);
+			inputMetadataRef.current.prev = [
+				finalSelectionStart,
+				finalSelectionEnd,
+				finalDirection
+			];
+		};
+		document.addEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
+		onDocumentSelectionChange();
+		if (document.activeElement === input) setIsFocused(true);
+		if (!document.getElementById("input-otp-style")) {
+			const styleEl = document.createElement("style");
+			styleEl.id = "input-otp-style";
+			document.head.appendChild(styleEl);
+			if (styleEl.sheet) {
+				const autofillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+				safeInsertRule(styleEl.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }");
+				safeInsertRule(styleEl.sheet, `[data-input-otp]:autofill { ${autofillStyles} }`);
+				safeInsertRule(styleEl.sheet, `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`);
+				safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
+				safeInsertRule(styleEl.sheet, `[data-input-otp] + * { pointer-events: all !important; }`);
+			}
+		}
+		const updateRootHeight = () => {
+			if (container) container.style.setProperty("--root-height", `${input.clientHeight}px`);
+		};
+		updateRootHeight();
+		const resizeObserver = new ResizeObserver(updateRootHeight);
+		resizeObserver.observe(input);
+		return () => {
+			document.removeEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
+			resizeObserver.disconnect();
+		};
+	}, []);
+	/** Mirrors for UI rendering purpose only */
+	const [isHoveringInput, setIsHoveringInput] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const [mirrorSelectionStart, setMirrorSelectionStart] = useState(null);
+	const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState(null);
+	const [actualCaretPosition, setActualCaretPosition] = useState(null);
+	/** Effects */
+	useEffect(() => {
+		syncTimeouts(() => {
+			inputRef.current?.dispatchEvent(new Event("input"));
+			const s = inputRef.current?.selectionStart ?? null;
+			const e = inputRef.current?.selectionEnd ?? null;
+			const dir = inputRef.current?.selectionDirection ?? "none";
+			if (s !== null && e !== null) {
+				setMirrorSelectionStart(s);
+				setMirrorSelectionEnd(e);
+				setActualCaretPosition(s);
+				inputMetadataRef.current.prev = [
+					s,
+					e,
+					dir
+				];
+			}
+		});
+	}, [value, isFocused]);
+	useEffect(() => {
+		if (previousValue === void 0) return;
+		if (value !== previousValue && previousValue.length < maxLength && value.length === maxLength) onComplete?.(value);
+	}, [
+		maxLength,
+		onComplete,
+		previousValue,
+		value
+	]);
+	const previousActiveSlot = useRef(null);
+	useEffect(() => {
+		const activeSlotIndex = isFocused && actualCaretPosition !== null ? actualCaretPosition : null;
+		if (activeSlotIndex !== previousActiveSlot.current) {
+			previousActiveSlot.current = activeSlotIndex;
+			onActiveSlotChange?.(activeSlotIndex);
+		}
+	}, [
+		isFocused,
+		actualCaretPosition,
+		onActiveSlotChange
+	]);
+	const pwmb = usePasswordManagerBadge({
+		containerRef,
+		inputRef,
+		pushPasswordManagerStrategy,
+		isFocused
+	});
+	/** Event handlers */
+	const _changeListener = (e) => {
+		const newValue = e.currentTarget.value.slice(0, maxLength);
+		if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
+			e.preventDefault();
+			return;
+		}
+		if (typeof previousValue === "string" && newValue.length < previousValue.length) document.dispatchEvent(new Event("selectionchange"));
+		onChange(newValue);
+	};
+	const _focusListener = () => {
+		if (inputRef.current) {
+			const start = Math.min(inputRef.current.value.length, maxLength - 1);
+			const end = inputRef.current.value.length;
+			inputRef.current?.setSelectionRange(start, end);
+			setMirrorSelectionStart(start);
+			setMirrorSelectionEnd(end);
+		}
+		setIsFocused(true);
+	};
+	const _pasteListener = (e) => {
+		const input = inputRef.current;
+		if (!pasteTransformer && (!initialLoadRef.current.isIOS || !e.clipboardData || !input)) return;
+		const _content = e.clipboardData.getData("text/plain");
+		const content = pasteTransformer ? pasteTransformer(_content) : _content;
+		e.preventDefault();
+		const start = inputRef.current?.selectionStart;
+		const end = inputRef.current?.selectionEnd;
+		const newValue = (start !== end ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) : value.slice(0, start ?? 0) + content + value.slice(start ?? 0)).slice(0, maxLength);
+		if (newValue.length > 0 && regexp && !regexp.test(newValue)) return;
+		if (input) {
+			input.value = newValue;
+			onChange(newValue);
+			const _start = Math.min(newValue.length, maxLength - 1);
+			const _end = newValue.length;
+			input.setSelectionRange(_start, _end);
+			setMirrorSelectionStart(_start);
+			setMirrorSelectionEnd(_end);
+		}
+	};
+	/** Styles - dynamic styles that can't be converted to Tailwind */
+	const dynamicInputStyle = {
+		width: pwmb.willPushPWMBadge ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})` : "100%",
+		clipPath: pwmb.willPushPWMBadge ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
+		fontSize: "var(--root-height)"
+	};
+	/** Rendering */
+	const renderedInput = /* @__PURE__ */ jsx("input", {
+		autoComplete: props.autoComplete || "one-time-code",
+		...props,
+		"data-input-otp": true,
+		"data-input-otp-placeholder-shown": value.length === 0 || void 0,
+		"data-input-otp-mss": mirrorSelectionStart,
+		"data-input-otp-mse": mirrorSelectionEnd,
+		inputMode,
+		pattern: regexp?.source,
+		"aria-placeholder": placeholder,
+		className: "pointer-events-auto absolute inset-0 -z-10 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none",
+		style: dynamicInputStyle,
+		maxLength,
+		value,
+		ref: inputRef,
+		onPaste: (e) => {
+			_pasteListener(e);
+			props.onPaste?.(e);
+		},
+		onChange: _changeListener,
+		onMouseOver: (e) => {
+			setIsHoveringInput(true);
+			props.onMouseOver?.(e);
+		},
+		onMouseLeave: (e) => {
+			setIsHoveringInput(false);
+			props.onMouseLeave?.(e);
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") requestAnimationFrame(() => {
+				const input = inputRef.current;
+				if (input && document.activeElement === input) {
+					const s = input.selectionStart;
+					const end = input.selectionEnd;
+					if (s !== null && end !== null) setActualCaretPosition(s);
+				}
+			});
+			props.onKeyDown?.(e);
+		},
+		onFocus: (e) => {
+			_focusListener();
+			props.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setIsFocused(false);
+			props.onBlur?.(e);
+		}
+	});
+	const setSelection = (index) => {
+		const input = inputRef.current;
+		if (!input || props.disabled) return;
+		const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));
+		if (document.activeElement !== input) input.focus();
+		const hasChar = value[clampedIndex] !== void 0;
+		const start = clampedIndex;
+		const end = hasChar ? clampedIndex + 1 : clampedIndex;
+		input.setSelectionRange(start, end);
+		setMirrorSelectionStart(start);
+		setMirrorSelectionEnd(end);
+		setIsFocused(true);
+	};
+	const contextValue = {
+		slots: Array.from({ length: maxLength }).map((_, slotIdx) => {
+			const isActive = isFocused && mirrorSelectionStart !== null && mirrorSelectionEnd !== null && (mirrorSelectionStart === mirrorSelectionEnd && slotIdx === mirrorSelectionStart || slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd);
+			const char = value[slotIdx] !== void 0 ? value[slotIdx] : null;
+			return {
+				char,
+				placeholderChar: value[0] !== void 0 ? null : placeholder?.[slotIdx] ?? null,
+				isActive,
+				hasFakeCaret: isActive && char === null
+			};
+		}),
+		isFocused,
+		isHovering: !props.disabled && isHoveringInput,
+		setSelection
+	};
+	const renderedChildren = render !== void 0 ? render(contextValue) : /* @__PURE__ */ jsx(OTPInputContext.Provider, {
+		value: contextValue,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [noScriptCSSFallback !== null && /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("style", { children: noScriptCSSFallback }) }), /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cn("relative", props.disabled ? "cursor-default" : "cursor-text", containerClassName),
+		children: [renderedChildren, /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0",
+			children: renderedInput
+		})]
+	})] });
+};
+const inputSlotVariants = cva("block text-center", {
+	variants: { size: {
+		sm: "h-4 w-3 text-sm",
+		md: "h-5 w-4 text-base",
+		lg: "h-6 w-5 text-lg",
+		xl: "h-7 w-6 text-xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+const InputOTP = ({ className, render, ...props }) => /* @__PURE__ */ jsx(OTPInput, {
+	containerClassName: "relative flex items-center gap-2 has-disabled:opacity-50",
+	className: cn("disabled:cursor-not-allowed", className),
+	render,
+	...props
+});
+const InputOTPGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("z-10 flex items-center gap-3", className),
+	...props
+});
+const InputOTPSlot = ({ index, className, onClick, onKeyDown, ...props }) => {
+	const inputOTPContext = useContext(OTPInputContext);
+	const { char, isActive } = inputOTPContext?.slots[index] ?? {};
+	const { setSelection } = inputOTPContext ?? {};
+	const handleClick = (e) => {
+		setSelection?.(index);
+		onClick?.(e);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			setSelection?.(index);
+		}
+		onKeyDown?.(e);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		isSelected: isActive,
+		variant: "input",
+		color: "custom",
+		tabIndex: -1,
+		className: cn("relative z-10 px-2!", isActive && "ring-4!", className),
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		label: null,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "relative z-10 flex h-6 w-4 items-center justify-center",
+			children: char
+		})
+	});
+};
+const InputOTPSeparator = (props) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": true,
+	className: "z-0 table h-0.5 w-3 rounded-full bg-border text-text/50",
+	...props,
+	children: /* @__PURE__ */ jsx(MinusIcon, {})
+});
+const InputIndicator = (props) => /* @__PURE__ */ jsx("div", {
+	"data-indicator": true,
+	className: "absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none",
+	...props
+});
+
+//#endregion
+export { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, OTPInput, OTPInputContext, inputSlotVariants, usePasswordManagerBadge, usePrevious };
 //# sourceMappingURL=OTPInput.mjs.map