@spark-ui/components 17.10.5-beta.0 → 17.11.0

package/dist/input-otp/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/components/form-field`);var i=(0,t.createContext)(null),a=()=>{let e=(0,t.useContext)(i);if(!e)throw Error(`InputOTP components must be used within InputOTP`);return e};(0,e.cva)([`relative`,`inline-flex`,`items-center`,`gap-sm`]);var o=(0,e.cva)([`relative h-[50px] w-sz-40`,`border-sm rounded-md`,`text-center text-display-3 text-on-surface`,`outline-hidden`,`transition-colors`,`flex items-center justify-center`,`data-[active=true]:ring-1`,`data-[active=true]:ring-inset`,`data-[active=true]:ring-l-2`,`data-[active=true]:border-focus`,`data-[active=true]:z-raised ring-focus`,`data-[disabled=true]:cursor-not-allowed`,`data-[disabled=true]:border-outline`,`data-[disabled=true]:bg-on-surface/dim-5`,`data-[disabled=true]:text-on-surface/dim-3`,`data-[readonly=true]:cursor-default`,`data-[readonly=true]:data-[active=false]:border-outline`,`data-[readonly=true]:bg-on-surface/dim-5`,`group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high`],{variants:{intent:{neutral:[`data-[filled=true]:bg-neutral-container bg-surface border-outline`],success:[`border-success bg-success-container text-on-success-container`],alert:[`border-alert bg-alert-container text-on-alert-container`],error:[`border-error bg-error-container text-on-error-container`]}},defaultVariants:{intent:`neutral`}}),s=o,c=({index:e,className:t,...r})=>{let i=a(),s=e??0,c=i.slots[s];if(!c)return null;let{char:l,isActive:u,hasFakeCaret:d}=c,f=!l,p=f&&!d&&i.placeholder,m=s===i.activeIndex;return(0,n.jsxs)(`div`,{className:o({intent:i.intent,className:t}),"data-active":u,"data-disabled":i.disabled,"data-readonly":i.readOnly,"data-filled":!f,"data-focus-target":m,"data-valid":i.intent!==`error`,...r,children:[(0,n.jsx)(`span`,{className:p?`text-on-surface/dim-3`:``,children:i.type===`password`&&l?`•`:l||(!d&&i.placeholder?i.placeholder:``)}),d&&(0,n.jsx)(`span`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,"aria-hidden":`true`,children:(0,n.jsx)(`span`,{className:`bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2`})})]})};c.displayName=`InputOTP.Slot`;var l=`Backspace`,u=`ArrowLeft`,d=`ArrowUp`,f=`ArrowRight`,p=`ArrowDown`,m=`e`,h=({maxLength:e,type:n,value:i,defaultValue:a,onValueChange:o,isValid:s,disabledProp:c,readOnlyProp:h,autoFocus:g,forceUppercase:_,filterKeys:v,pattern:y,placeholder:b,nameProp:x})=>{let S=(0,t.useId)(),C=(0,t.useRef)(null),w=(0,t.useRef)(null),T=(0,r.useFormFieldControl)(),E=T.id??S,D=x??T.name,O=T.disabled??c,k=T.readOnly??h,A=T.isInvalid??!s,j=T.isRequired??!1,M=T.labelId,N=T.description,P=T.state,F=[`success`,`alert`,`error`].includes(P??``)?P:A?`error`:`neutral`,I=i===void 0?a:i,[L,R]=(0,t.useState)(_?I.toUpperCase():I),[z,B]=(0,t.useState)(!1),V=i===void 0?L:i,H=Math.min(V.length,e-1);(0,t.useEffect)(()=>{C.current&&C.current.setSelectionRange(H,H)},[H,V.length,e]);let U=(0,t.useMemo)(()=>Array.from({length:e},(e,t)=>({char:V[t]||``,isActive:t===H&&z,hasFakeCaret:t===H&&!V[t]&&!O&&!k&&z})),[e,V,H,z,O,k]);(0,t.useEffect)(()=>{C.current&&i!==void 0&&(C.current.value=i)},[i]),(0,t.useEffect)(()=>{g&&C.current&&C.current.focus()},[g]);let W=e=>{let t=e;if(_&&(t=t.toUpperCase()),n===`number`&&(t=t.replace(/[^\d]/g,``)),y)try{let e=y;y.startsWith(`^`)||(e=`^${y}$`);let n=new RegExp(e);t=t.split(``).filter(e=>n.test(e)).join(``)}catch(e){console.error(`Invalid pattern provided to InputOTP:`,y,e)}return t};return{uuid:E,inputRef:C,containerRef:w,name:D,disabled:O,readOnly:k,isInvalid:A,isRequired:j,description:N,maxLength:e,intent:F,currentValue:V,activeIndex:H,slots:U,contextValue:{value:V,maxLength:e,slots:U,activeIndex:H,intent:F,disabled:O,readOnly:k,placeholder:b,type:n},handleChange:t=>{if(O||k)return;let n=t.target.value,r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleKeyDown:e=>{if(O||k)return;let t=(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(e.key.toLowerCase());if(v.length>0&&v.includes(e.key)&&!t){e.preventDefault();return}switch(e.key){case l:e.preventDefault();let t=V.length;if(t>0){let e=V.slice(0,t-1);o&&o(e),i===void 0&&R(e);let n=Math.max(0,e.length);C.current&&C.current.setSelectionRange(n,n)}break;case u:case f:e.preventDefault();break;case d:case p:e.preventDefault();break;case m:case`E`:n===`number`&&e.preventDefault();break;default:break}},handleCopy:e=>{O||(e.preventDefault(),V.length>0&&e.clipboardData.setData(`text/plain`,V))},handlePaste:t=>{if(O||k)return;t.preventDefault();let n=t.clipboardData.getData(`text`);if(!n)return;let r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleFocus:()=>{if(B(!0),C.current){let t=Math.min(V.length,e-1);C.current.setSelectionRange(t,t)}},handleBlur:()=>{B(!1)},handleClick:()=>{C.current&&C.current.focus()},labelId:M}},g=e=>{let n=0;return t.Children.forEach(e,e=>{if((0,t.isValidElement)(e)){let t=e.props;e.type===c||e.type?.displayName===`InputOTP.Slot`?n++:t.children&&(n+=g(t.children))}}),n},_=(e,n=0)=>{let r=n;return[t.Children.map(e,e=>{if((0,t.isValidElement)(e)){let n=e.props;if(e.type===c||e.type?.displayName===`InputOTP.Slot`){let i=typeof n.index==`number`?n.index:r++;return(0,t.cloneElement)(e,{...n,index:i})}else if(n.children){let[i,a]=_(n.children,r);return r=a,(0,t.cloneElement)(e,{...e.props,children:i})}}return e}),r]},v=({maxLength:r,type:a=`text`,value:o,defaultValue:s=``,onValueChange:c,isValid:l=!0,disabled:u=!1,readOnly:d=!1,autoFocus:f=!1,autoComplete:p=`off`,forceUppercase:m=!1,filterKeys:v=[`-`,`.`],pattern:y,inputMode:b,placeholder:x=`-`,name:S,className:C,children:w,...T})=>{let E=(0,t.useMemo)(()=>{if(r!==void 0)return r;let e=g(w);return e>0?e:4},[r,w]),D=(0,t.useMemo)(()=>{let[e]=_(w);return e},[w]),{uuid:O,inputRef:k,containerRef:A,name:j,disabled:M,readOnly:N,isInvalid:P,isRequired:F,description:I,currentValue:L,contextValue:R,handleChange:z,handleKeyDown:B,handleCopy:V,handlePaste:H,handleFocus:U,handleBlur:W,handleClick:G,labelId:K}=h({maxLength:E,type:a,value:o,defaultValue:s,onValueChange:c,isValid:l,disabledProp:u,readOnlyProp:d,autoFocus:f,forceUppercase:m,filterKeys:v,pattern:y,placeholder:x,nameProp:S}),q=`aria-label`in T?T[`aria-label`]:void 0,{"aria-label":J,...Y}=T,X=K?{"aria-labelledby":K}:q?{"aria-label":q}:{};return(0,n.jsx)(i.Provider,{value:R,children:(0,n.jsxs)(`div`,{ref:A,"data-spark-component":`input-otp`,role:`group`,...X,...I?{"aria-describedby":I}:{},className:(0,e.cx)(`group gap-md relative inline-flex w-fit items-center default:cursor-text`,{"cursor-not-allowed":M,"cursor-default":N},C),onClick:G,...Y,children:[j&&(0,n.jsx)(`input`,{type:`hidden`,name:j,value:L,required:F,"aria-required":F,"aria-invalid":P,...X}),(0,n.jsx)(`input`,{ref:k,id:O,type:a===`password`?`password`:`text`,value:L,maxLength:E,autoFocus:f,autoComplete:p,disabled:M,readOnly:N,pattern:y,inputMode:b,...X,...I?{"aria-describedby":I}:{},"aria-invalid":P,onChange:z,onKeyDown:B,onCopy:V,onPaste:H,onFocus:U,onBlur:W,className:`bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed`,tabIndex:0}),D]})})};v.displayName=`InputOTP`;var y=({children:e,className:t,...r})=>(0,n.jsx)(`div`,{className:`gap-md flex ${t}`,...r,children:e});y.displayName=`InputOTP.Group`;var b=({className:e,...t})=>(0,n.jsx)(`div`,{className:`text-on-surface/dim-3 flex items-center justify-center ${e||``}`,...t,children:(0,n.jsx)(`div`,{className:`h-sz-4 w-sz-8 bg-outline rounded-full`})});b.displayName=`InputOTP.Separator`;var x=Object.assign(v,{Group:y,Slot:c,Separator:b});x.displayName=`InputOTP`,y.displayName=`InputOTP.Group`,c.displayName=`InputOTP.Slot`,b.displayName=`InputOTP.Separator`,exports.InputOTP=x,exports.inputOTPSlotStyles=o,exports.inputOTPStyles=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/components/form-field`);var i=(0,t.createContext)(null),a=()=>{let e=(0,t.useContext)(i);if(!e)throw Error(`InputOTP components must be used within InputOTP`);return e};(0,e.cva)([`relative`,`inline-flex`,`items-center`,`gap-sm`]);var o=(0,e.cva)([`relative h-[50px] w-sz-40`,`border-sm rounded-md`,`text-center text-display-3 text-on-surface`,`outline-hidden`,`transition-colors`,`flex items-center justify-center`,`data-[active=true]:ring-1`,`data-[active=true]:ring-inset`,`data-[active=true]:ring-l-2`,`data-[active=true]:border-focus`,`data-[active=true]:z-raised ring-focus`,`data-[disabled=true]:cursor-not-allowed`,`data-[disabled=true]:border-outline`,`data-[disabled=true]:bg-on-surface/dim-5`,`data-[disabled=true]:text-on-surface/dim-3`,`data-[readonly=true]:cursor-default`,`data-[readonly=true]:data-[active=false]:border-outline`,`data-[readonly=true]:bg-on-surface/dim-5`,`group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high`],{variants:{intent:{neutral:[`data-[filled=true]:bg-neutral-container bg-surface border-outline`],success:[`border-success bg-success-container text-on-success-container`],alert:[`border-alert bg-alert-container text-on-alert-container`],error:[`border-error bg-error-container text-on-error-container`]}},defaultVariants:{intent:`neutral`}}),s=o,c=({index:e,className:t,...r})=>{let i=a(),s=e??0,c=i.slots[s];if(!c)return null;let{char:l,isActive:u,hasFakeCaret:d}=c,f=!l,p=f&&!d&&i.placeholder,m=s===i.activeIndex;return(0,n.jsxs)(`div`,{className:o({intent:i.intent,className:t}),"data-active":u,"data-disabled":i.disabled,"data-readonly":i.readOnly,"data-filled":!f,"data-focus-target":m,"data-valid":i.intent!==`error`,...r,children:[(0,n.jsx)(`span`,{className:p?`text-on-surface/dim-3`:``,children:i.type===`password`&&l?`•`:l||(!d&&i.placeholder?i.placeholder:``)}),d&&(0,n.jsx)(`span`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,"aria-hidden":`true`,children:(0,n.jsx)(`span`,{className:`bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2`})})]})};c.displayName=`InputOTP.Slot`;var l=`Backspace`,u=`ArrowLeft`,d=`ArrowUp`,f=`ArrowRight`,p=`ArrowDown`,m=`e`,h=({maxLength:e,type:n,value:i,defaultValue:a,onValueChange:o,isValid:s,disabledProp:c,readOnlyProp:h,autoFocus:g,forceUppercase:_,filterKeys:v,pattern:y,placeholder:b,nameProp:x})=>{let S=(0,t.useId)(),C=(0,t.useRef)(null),w=(0,t.useRef)(null),T=(0,r.useFormFieldControl)(),E=T.id??S,D=x??T.name,O=T.disabled??c,k=T.readOnly??h,A=T.isInvalid??!s,j=T.isRequired??!1,M=T.labelId,N=T.description,P=T.state,F=[`success`,`alert`,`error`].includes(P??``)?P:A?`error`:`neutral`,I=i===void 0?a:i,[L,R]=(0,t.useState)(_?I.toUpperCase():I),[z,B]=(0,t.useState)(!1),V=i===void 0?L:i,H=Math.min(V.length,e-1);(0,t.useEffect)(()=>{C.current&&C.current.setSelectionRange(H,H)},[H,V.length,e]);let U=(0,t.useMemo)(()=>Array.from({length:e},(e,t)=>({char:V[t]||``,isActive:t===H&&z,hasFakeCaret:t===H&&!V[t]&&!O&&!k&&z})),[e,V,H,z,O,k]);(0,t.useEffect)(()=>{C.current&&i!==void 0&&(C.current.value=i)},[i]),(0,t.useEffect)(()=>{g&&C.current&&C.current.focus()},[g]);let W=e=>{let t=e;if(_&&(t=t.toUpperCase()),n===`number`&&(t=t.replace(/[^\d]/g,``)),y)try{let e=y;y.startsWith(`^`)||(e=`^${y}$`);let n=new RegExp(e);t=t.split(``).filter(e=>n.test(e)).join(``)}catch(e){console.error(`Invalid pattern provided to InputOTP:`,y,e)}return t};return{uuid:E,inputRef:C,containerRef:w,name:D,disabled:O,readOnly:k,isInvalid:A,isRequired:j,description:N,maxLength:e,intent:F,currentValue:V,activeIndex:H,slots:U,contextValue:{value:V,maxLength:e,slots:U,activeIndex:H,intent:F,disabled:O,readOnly:k,placeholder:b,type:n},handleChange:t=>{if(O||k)return;let n=t.target.value,r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleKeyDown:t=>{if(O||k)return;let r=(t.ctrlKey||t.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.key.toLowerCase());if(v.length>0&&v.includes(t.key)&&!r){t.preventDefault();return}if(t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey&&V.length===e){t.preventDefault();let n=W(t.key);if(n.length===0)return;let r=V.slice(0,e-1)+n;o&&o(r),i===void 0&&R(r);let a=e-1;C.current&&C.current.setSelectionRange(a,a);return}switch(t.key){case l:t.preventDefault();let e=V.length;if(e>0){let t=V.slice(0,e-1);o&&o(t),i===void 0&&R(t);let n=Math.max(0,t.length);C.current&&C.current.setSelectionRange(n,n)}break;case u:case f:t.preventDefault();break;case d:case p:t.preventDefault();break;case m:case`E`:n===`number`&&t.preventDefault();break;default:break}},handleCopy:e=>{O||(e.preventDefault(),V.length>0&&e.clipboardData.setData(`text/plain`,V))},handlePaste:t=>{if(O||k)return;t.preventDefault();let n=t.clipboardData.getData(`text`);if(!n)return;let r=W(n).slice(0,e);o&&o(r),i===void 0&&R(r);let a=Math.min(r.length,e-1);C.current&&C.current.setSelectionRange(a,a)},handleFocus:()=>{if(B(!0),C.current){let t=Math.min(V.length,e-1);C.current.setSelectionRange(t,t)}},handleBlur:()=>{B(!1)},handleClick:()=>{C.current&&C.current.focus()},labelId:M}},g=e=>{let n=0;return t.Children.forEach(e,e=>{if((0,t.isValidElement)(e)){let t=e.props;e.type===c||e.type?.displayName===`InputOTP.Slot`?n++:t.children&&(n+=g(t.children))}}),n},_=(e,n=0)=>{let r=n;return[t.Children.map(e,e=>{if((0,t.isValidElement)(e)){let n=e.props;if(e.type===c||e.type?.displayName===`InputOTP.Slot`){let i=typeof n.index==`number`?n.index:r++;return(0,t.cloneElement)(e,{...n,index:i})}else if(n.children){let[i,a]=_(n.children,r);return r=a,(0,t.cloneElement)(e,{...e.props,children:i})}}return e}),r]},v=({maxLength:r,type:a=`text`,value:o,defaultValue:s=``,onValueChange:c,isValid:l=!0,disabled:u=!1,readOnly:d=!1,autoFocus:f=!1,autoComplete:p=`off`,forceUppercase:m=!1,filterKeys:v=[`-`,`.`],pattern:y,inputMode:b,placeholder:x=`-`,name:S,className:C,children:w,...T})=>{let E=(0,t.useMemo)(()=>{if(r!==void 0)return r;let e=g(w);return e>0?e:4},[r,w]),D=(0,t.useMemo)(()=>{let[e]=_(w);return e},[w]),{uuid:O,inputRef:k,containerRef:A,name:j,disabled:M,readOnly:N,isInvalid:P,isRequired:F,description:I,currentValue:L,contextValue:R,handleChange:z,handleKeyDown:B,handleCopy:V,handlePaste:H,handleFocus:U,handleBlur:W,handleClick:G,labelId:K}=h({maxLength:E,type:a,value:o,defaultValue:s,onValueChange:c,isValid:l,disabledProp:u,readOnlyProp:d,autoFocus:f,forceUppercase:m,filterKeys:v,pattern:y,placeholder:x,nameProp:S}),q=`aria-label`in T?T[`aria-label`]:void 0,{"aria-label":J,...Y}=T,X=K?{"aria-labelledby":K}:q?{"aria-label":q}:{};return(0,n.jsx)(i.Provider,{value:R,children:(0,n.jsxs)(`div`,{ref:A,"data-spark-component":`input-otp`,role:`group`,...X,...I?{"aria-describedby":I}:{},className:(0,e.cx)(`group gap-md relative inline-flex w-fit items-center default:cursor-text`,{"cursor-not-allowed":M,"cursor-default":N},C),onClick:G,...Y,children:[j&&(0,n.jsx)(`input`,{type:`hidden`,name:j,value:L,required:F,"aria-required":F,"aria-invalid":P,...X}),(0,n.jsx)(`input`,{ref:k,id:O,type:a===`password`?`password`:`text`,value:L,maxLength:E,autoFocus:f,autoComplete:p,disabled:M,readOnly:N,pattern:y,inputMode:b,...X,...I?{"aria-describedby":I}:{},"aria-invalid":P,onChange:z,onKeyDown:B,onCopy:V,onPaste:H,onFocus:U,onBlur:W,className:`bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed`,tabIndex:0}),D]})})};v.displayName=`InputOTP`;var y=({children:e,className:t,...r})=>(0,n.jsx)(`div`,{className:`gap-md flex ${t}`,...r,children:e});y.displayName=`InputOTP.Group`;var b=({className:e,...t})=>(0,n.jsx)(`div`,{className:`text-on-surface/dim-3 flex items-center justify-center ${e||``}`,...t,children:(0,n.jsx)(`div`,{className:`h-sz-4 w-sz-8 bg-outline rounded-full`})});b.displayName=`InputOTP.Separator`;var x=Object.assign(v,{Group:y,Slot:c,Separator:b});x.displayName=`InputOTP`,y.displayName=`InputOTP.Group`,c.displayName=`InputOTP.Slot`,b.displayName=`InputOTP.Separator`,exports.InputOTP=x,exports.inputOTPSlotStyles=o,exports.inputOTPStyles=s;
 //# sourceMappingURL=index.js.map

package/dist/input-otp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  readOnly: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n    'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\n/**\n * An individual slot for a single OTP character. Renders a <div> element.\n */\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  const isFocusTarget = index === context.activeIndex\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  readOnlyProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  readOnly: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handleCopy: ClipboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  readOnlyProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\n      e.preventDefault()\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'inputMode'\n> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '-',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n    const DEFAULT_MAX_LENGTH = 4\n\n    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    readOnlyProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          readOnly={readOnly}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * Container for a group of OTP input slots. Renders a <div> element.\n */\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * A visual separator between OTP input groups. Renders a <div> element.\n */\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\n/**\n * An input component for entering one-time passwords or verification codes with individual character slots.\n */\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  readOnly: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n    'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\n/**\n * An individual slot for a single OTP character. Renders a <div> element.\n */\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  const isFocusTarget = index === context.activeIndex\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  readOnlyProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  readOnly: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handleCopy: ClipboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  readOnlyProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\n      e.preventDefault()\n\n      return\n    }\n\n    // Check if user is typing a printable character when input is full\n    const isPrintableCharacter = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey\n    if (isPrintableCharacter && currentValue.length === maxLength) {\n      e.preventDefault()\n\n      // Process the new character through filters\n      const processedChar = processInputValue(e.key)\n\n      // If the character is filtered out, don't do anything\n      if (processedChar.length === 0) {\n        return\n      }\n\n      // Replace the last character with the new one\n      const newValue = currentValue.slice(0, maxLength - 1) + processedChar\n\n      // Call onValueChange callback\n      if (onValueChange) {\n        onValueChange(newValue)\n      }\n\n      // Update state only in uncontrolled mode\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n\n      // Keep cursor at the end\n      const newActiveIndex = maxLength - 1\n      if (inputRef.current) {\n        inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n      }\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'inputMode'\n> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '-',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n    const DEFAULT_MAX_LENGTH = 4\n\n    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    readOnlyProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          readOnly={readOnly}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * Container for a group of OTP input slots. Renders a <div> element.\n */\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * A visual separator between OTP input groups. Renders a <div> element.\n */\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\n/**\n * An input component for entering one-time passwords or verification codes with individual character slots.\n */\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"mappings":"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"}

package/dist/input-otp/index.mjs

@@ -146,40 +146,50 @@ var b = "Backspace", x = "ArrowLeft", S = "ArrowUp", C = "ArrowRight", w = "Arro
 			let o = Math.min(a.length, e - 1);
 			D.current && D.current.setSelectionRange(o, o);
 		},
-		handleKeyDown: (e) => {
+		handleKeyDown: (r) => {
 			if (M || N) return;
-			let r = (e.ctrlKey || e.metaKey) && [
+			let a = (r.ctrlKey || r.metaKey) && [
 				"a",
 				"c",
 				"v",
 				"x"
-			].includes(e.key.toLowerCase());
-			if (g.length > 0 && g.includes(e.key) && !r) {
-				e.preventDefault();
+			].includes(r.key.toLowerCase());
+			if (g.length > 0 && g.includes(r.key) && !a) {
+				r.preventDefault();
 				return;
 			}
-			switch (e.key) {
+			if (r.key.length === 1 && !r.ctrlKey && !r.metaKey && !r.altKey && G.length === e) {
+				r.preventDefault();
+				let t = J(r.key);
+				if (t.length === 0) return;
+				let a = G.slice(0, e - 1) + t;
+				i && i(a), n === void 0 && H(a);
+				let o = e - 1;
+				D.current && D.current.setSelectionRange(o, o);
+				return;
+			}
+			switch (r.key) {
 				case b:
-					e.preventDefault();
-					let r = G.length;
-					if (r > 0) {
-						let e = G.slice(0, r - 1);
-						i && i(e), n === void 0 && H(e);
-						let t = Math.max(0, e.length);
-						D.current && D.current.setSelectionRange(t, t);
+					r.preventDefault();
+					let e = G.length;
+					if (e > 0) {
+						let t = G.slice(0, e - 1);
+						i && i(t), n === void 0 && H(t);
+						let r = Math.max(0, t.length);
+						D.current && D.current.setSelectionRange(r, r);
 					}
 					break;
 				case x:
 				case C:
-					e.preventDefault();
+					r.preventDefault();
 					break;
 				case S:
 				case w:
-					e.preventDefault();
+					r.preventDefault();
 					break;
 				case T:
 				case "E":
-					t === "number" && e.preventDefault();
+					t === "number" && r.preventDefault();
 					break;
 				default: break;
 			}

package/dist/input-otp/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  readOnly: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n    'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\n/**\n * An individual slot for a single OTP character. Renders a <div> element.\n */\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  const isFocusTarget = index === context.activeIndex\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  readOnlyProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  readOnly: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handleCopy: ClipboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  readOnlyProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\n      e.preventDefault()\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'inputMode'\n> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '-',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n    const DEFAULT_MAX_LENGTH = 4\n\n    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    readOnlyProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          readOnly={readOnly}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * Container for a group of OTP input slots. Renders a <div> element.\n */\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * A visual separator between OTP input groups. Renders a <div> element.\n */\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\n/**\n * An input component for entering one-time passwords or verification codes with individual character slots.\n */\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  readOnly: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n    'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\n/**\n * An individual slot for a single OTP character. Renders a <div> element.\n */\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  const isFocusTarget = index === context.activeIndex\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  readOnlyProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  readOnly: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handleCopy: ClipboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  readOnlyProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\n      e.preventDefault()\n\n      return\n    }\n\n    // Check if user is typing a printable character when input is full\n    const isPrintableCharacter = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey\n    if (isPrintableCharacter && currentValue.length === maxLength) {\n      e.preventDefault()\n\n      // Process the new character through filters\n      const processedChar = processInputValue(e.key)\n\n      // If the character is filtered out, don't do anything\n      if (processedChar.length === 0) {\n        return\n      }\n\n      // Replace the last character with the new one\n      const newValue = currentValue.slice(0, maxLength - 1) + processedChar\n\n      // Call onValueChange callback\n      if (onValueChange) {\n        onValueChange(newValue)\n      }\n\n      // Update state only in uncontrolled mode\n      if (controlledValue === undefined) {\n        setInternalValue(newValue)\n      }\n\n      // Keep cursor at the end\n      const newActiveIndex = maxLength - 1\n      if (inputRef.current) {\n        inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n      }\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'inputMode'\n> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  readOnly: readOnlyProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '-',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n    const DEFAULT_MAX_LENGTH = 4\n\n    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    readOnlyProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          readOnly={readOnly}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * Container for a group of OTP input slots. Renders a <div> element.\n */\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\n/**\n * A visual separator between OTP input groups. Renders a <div> element.\n */\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\n/**\n * An input component for entering one-time passwords or verification codes with individual character slots.\n */\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"mappings":"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"}

package/dist/pagination/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-BaJmiSYq.js`),r=require(`../icon-button-BSVlcyAO.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/ArrowVerticalRight`),c=require(`@spark-ui/icons/ArrowVerticalLeft`),l=require(`@zag-js/pagination`);l=e.t(l);let u=require(`@zag-js/react`),d=require(`@spark-ui/icons/ArrowDoubleLeft`),f=require(`@spark-ui/icons/ArrowDoubleRight`);function p(e,t,n){let r=(n-1)/2,i=Math.max(0,t-r),a=Math.min(e.length,t+r+1);return a-i<n&&(i=Math.max(0,Math.min(i,e.length-n)),a=Math.min(e.length,i+n)),e.slice(i,a)}var m=(0,a.createContext)(null),h=({children:e,count:t,visiblePageItems:n=7,pageSize:r,page:i,onPageChange:s,noEllipsis:c,type:d=`link`})=>{let f=c?1/0:Math.max(0,Math.floor((n-5)/2)),h=(0,a.useId)(),g=(0,u.useMachine)(l.machine,{id:h,count:t,siblingCount:f,pageSize:r,page:i,onPageChange:s,type:d}),_=l.connect(g,u.normalizeProps),v=c?p(_.pages,_.page-1,n):_.pages;return(0,o.jsx)(m.Provider,{value:{type:d,pagination:{..._,pages:v,getFirstPageTriggerProps:()=>({..._.getPrevTriggerProps(),id:`${_.getRootProps().id}:first`,"data-part":`first-page-trigger`,onClick:_.goToFirstPage}),getLastPageTriggerProps:()=>({..._.getNextTriggerProps(),id:`${_.getRootProps().id}:last`,"data-part":`last-page-trigger`,onClick:_.goToLastPage})}},children:e})},g=()=>{let e=(0,a.useContext)(m);if(!e)throw Error(`usePagination must be used within a Pagination provider`);return e},_=({children:e,visiblePageItems:t=5,type:n=`link`,noEllipsis:r=!1,className:i,...a})=>(0,o.jsx)(h,{visiblePageItems:t,noEllipsis:r,type:n,...a,children:(0,o.jsx)(v,{className:i,children:e})}),v=({children:e,className:t})=>{let{pagination:n}=g();return(0,o.jsx)(`nav`,{"data-spark-component":`pagination`,...n.getRootProps(),className:t,children:(0,o.jsx)(`ul`,{className:`gap-md flex flex-wrap`,children:e})})};_.displayName=`Pagination`;var y=({children:e,index:t,className:n,ref:r,...a})=>{let{pagination:s}=g();return(0,o.jsx)(`li`,{children:(0,o.jsx)(`span`,{"data-spark-component":`pagination-ellipsis`,ref:r,...(0,u.mergeProps)(s.getEllipsisProps({index:t}),{className:(0,i.cx)(`flex size-sz-44 items-center justify-center`,n),...a}),children:e||`…`})})};y.displayName=`Pagination.Ellipsis`;var b=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),f=c.getFirstPageTriggerProps(),p=l===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-first-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(d.ArrowDoubleLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};b.displayName=`Pagination.FirstPageTrigger`;function x({children:e,value:t,className:r,href:a,ref:s,...c}){let{pagination:l}=g(),d=l.getItemProps({type:`page`,value:t}),f=(0,u.mergeProps)(d,{"data-spark-component":`pagination-item`,intent:`support`,design:d[`aria-current`]===`page`?`filled`:`contrast`,className:(0,i.cx)(`size-sz-44`,r),...c});return(0,o.jsx)(`li`,{children:a?(0,o.jsx)(n.t,{ref:s,...f,asChild:!0,children:(0,o.jsx)(`a`,{href:a,children:e||t})}):(0,o.jsx)(n.t,{ref:s,...f,children:e||t})})}x.displayName=`Pagination.Item`;var S=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),d=c.getLastPageTriggerProps(),p=l===`link`&&d[`data-disabled`]===``,m=(0,u.mergeProps)(d,{"data-spark-component":`pagination-last-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(f.ArrowDoubleRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};S.displayName=`Pagination.LastPageTrigger`;var C=({children:e,className:n,href:i,ref:a,...c})=>{let{pagination:l,type:d}=g(),f=l.getNextTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-next-trigger`,intent:`support`,design:`contrast`,...c,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(s.ArrowVerticalRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};C.displayName=`Pagination.NextTrigger`;var w=({children:e})=>{let{pagination:t}=g();return e(t)};w.displayName=`Pagination.Pages`;var T=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:l,type:d}=g(),f=l.getPrevTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-prev-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};T.displayName=`Pagination.PrevTrigger`;var E=Object.assign(_,{PrevTrigger:T,NextTrigger:C,Pages:w,Item:x,Ellipsis:y,FirstPageTrigger:b,LastPageTrigger:S});E.displayName=`Pagination`,T.displayName=`Pagination.PrevTrigger`,C.displayName=`Pagination.NextTrigger`,w.displayName=`Pagination.Pages`,x.displayName=`Pagination.Item`,y.displayName=`Pagination.Ellipsis`,b.displayName=`Pagination.FirstPageTrigger`,S.displayName=`Pagination.LastPageTrigger`,exports.Pagination=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-Tv2N8_24.js`),r=require(`../icon-button-CTe0v0g7.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/ArrowVerticalRight`),c=require(`@spark-ui/icons/ArrowVerticalLeft`),l=require(`@zag-js/pagination`);l=e.t(l);let u=require(`@zag-js/react`),d=require(`@spark-ui/icons/ArrowDoubleLeft`),f=require(`@spark-ui/icons/ArrowDoubleRight`);function p(e,t,n){let r=(n-1)/2,i=Math.max(0,t-r),a=Math.min(e.length,t+r+1);return a-i<n&&(i=Math.max(0,Math.min(i,e.length-n)),a=Math.min(e.length,i+n)),e.slice(i,a)}var m=(0,a.createContext)(null),h=({children:e,count:t,visiblePageItems:n=7,pageSize:r,page:i,onPageChange:s,noEllipsis:c,type:d=`link`})=>{let f=c?1/0:Math.max(0,Math.floor((n-5)/2)),h=(0,a.useId)(),g=(0,u.useMachine)(l.machine,{id:h,count:t,siblingCount:f,pageSize:r,page:i,onPageChange:s,type:d}),_=l.connect(g,u.normalizeProps),v=c?p(_.pages,_.page-1,n):_.pages;return(0,o.jsx)(m.Provider,{value:{type:d,pagination:{..._,pages:v,getFirstPageTriggerProps:()=>({..._.getPrevTriggerProps(),id:`${_.getRootProps().id}:first`,"data-part":`first-page-trigger`,onClick:_.goToFirstPage}),getLastPageTriggerProps:()=>({..._.getNextTriggerProps(),id:`${_.getRootProps().id}:last`,"data-part":`last-page-trigger`,onClick:_.goToLastPage})}},children:e})},g=()=>{let e=(0,a.useContext)(m);if(!e)throw Error(`usePagination must be used within a Pagination provider`);return e},_=({children:e,visiblePageItems:t=5,type:n=`link`,noEllipsis:r=!1,className:i,...a})=>(0,o.jsx)(h,{visiblePageItems:t,noEllipsis:r,type:n,...a,children:(0,o.jsx)(v,{className:i,children:e})}),v=({children:e,className:t})=>{let{pagination:n}=g();return(0,o.jsx)(`nav`,{"data-spark-component":`pagination`,...n.getRootProps(),className:t,children:(0,o.jsx)(`ul`,{className:`gap-md flex flex-wrap`,children:e})})};_.displayName=`Pagination`;var y=({children:e,index:t,className:n,ref:r,...a})=>{let{pagination:s}=g();return(0,o.jsx)(`li`,{children:(0,o.jsx)(`span`,{"data-spark-component":`pagination-ellipsis`,ref:r,...(0,u.mergeProps)(s.getEllipsisProps({index:t}),{className:(0,i.cx)(`flex size-sz-44 items-center justify-center`,n),...a}),children:e||`…`})})};y.displayName=`Pagination.Ellipsis`;var b=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),f=c.getFirstPageTriggerProps(),p=l===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-first-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(d.ArrowDoubleLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};b.displayName=`Pagination.FirstPageTrigger`;function x({children:e,value:t,className:r,href:a,ref:s,...c}){let{pagination:l}=g(),d=l.getItemProps({type:`page`,value:t}),f=(0,u.mergeProps)(d,{"data-spark-component":`pagination-item`,intent:`support`,design:d[`aria-current`]===`page`?`filled`:`contrast`,className:(0,i.cx)(`size-sz-44`,r),...c});return(0,o.jsx)(`li`,{children:a?(0,o.jsx)(n.t,{ref:s,...f,asChild:!0,children:(0,o.jsx)(`a`,{href:a,children:e||t})}):(0,o.jsx)(n.t,{ref:s,...f,children:e||t})})}x.displayName=`Pagination.Item`;var S=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:c,type:l}=g(),d=c.getLastPageTriggerProps(),p=l===`link`&&d[`data-disabled`]===``,m=(0,u.mergeProps)(d,{"data-spark-component":`pagination-last-page-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(f.ArrowDoubleRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};S.displayName=`Pagination.LastPageTrigger`;var C=({children:e,className:n,href:i,ref:a,...c})=>{let{pagination:l,type:d}=g(),f=l.getNextTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-next-trigger`,intent:`support`,design:`contrast`,...c,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(s.ArrowVerticalRight,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};C.displayName=`Pagination.NextTrigger`;var w=({children:e})=>{let{pagination:t}=g();return e(t)};w.displayName=`Pagination.Pages`;var T=({children:e,className:n,href:i,ref:a,...s})=>{let{pagination:l,type:d}=g(),f=l.getPrevTriggerProps(),p=d===`link`&&f[`data-disabled`]===``,m=(0,u.mergeProps)(f,{"data-spark-component":`pagination-prev-trigger`,intent:`support`,design:`contrast`,...s,className:n,...p&&{disabled:!0,role:`link`,"aria-disabled":!0}}),h=e||(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalLeft,{})});return(0,o.jsx)(`li`,{children:i?(0,o.jsx)(r.t,{ref:a,...m,asChild:!0,children:(0,o.jsx)(`a`,{href:p?void 0:i,children:h})}):(0,o.jsx)(r.t,{ref:a,...m,children:h})})};T.displayName=`Pagination.PrevTrigger`;var E=Object.assign(_,{PrevTrigger:T,NextTrigger:C,Pages:w,Item:x,Ellipsis:y,FirstPageTrigger:b,LastPageTrigger:S});E.displayName=`Pagination`,T.displayName=`Pagination.PrevTrigger`,C.displayName=`Pagination.NextTrigger`,w.displayName=`Pagination.Pages`,x.displayName=`Pagination.Item`,y.displayName=`Pagination.Ellipsis`,b.displayName=`Pagination.FirstPageTrigger`,S.displayName=`Pagination.LastPageTrigger`,exports.Pagination=E;
 //# sourceMappingURL=index.js.map

package/dist/pagination/index.mjs

@@ -1,6 +1,6 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { t } from "../button-BtuAr9qV.mjs";
-import { t as n } from "../icon-button-XyQSaVPL.mjs";
+import { t } from "../button-CNabSkd_.mjs";
+import { t as n } from "../icon-button-DVbKK2_a.mjs";
 import { cx as r } from "class-variance-authority";
 import { createContext as i, useContext as a, useId as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/popover/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../popover-CsCB_Fgs.js`);exports.Popover=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../popover-q0MDNefk.js`);exports.Popover=e.t;

package/dist/popover/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../popover-CSmCERcL.mjs";
+import { t as e } from "../popover-R1H8ZBP8.mjs";
 export { e as Popover };

package/dist/{popover-CSmCERcL.mjs → popover-R1H8ZBP8.mjs}

@@ -1,5 +1,5 @@
 import { t as e } from "./icon-D05Uqh8_.mjs";
-import { t } from "./icon-button-XyQSaVPL.mjs";
+import { t } from "./icon-button-DVbKK2_a.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { createContext as i, useContext as a, useId as o, useLayoutEffect as s, useState as c } from "react";
 import { Popover as l } from "radix-ui";
@@ -208,4 +208,4 @@ T.displayName = "Popover", _.displayName = "Popover.Anchor", v.displayName = "Po
 //#endregion
 export { T as t };
 
-//# sourceMappingURL=popover-CSmCERcL.mjs.map
+//# sourceMappingURL=popover-R1H8ZBP8.mjs.map