@spark-ui/components 16.0.3 → 16.1.1-beta.0

package/dist/file-upload/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),me=require("@spark-ui/components/form-field"),f=require("react"),pe=require("@spark-ui/hooks/use-combined-state"),ge=require("@spark-ui/icons/CvOutline"),ve=require("@spark-ui/icons/FilePdfOutline"),xe=require("@spark-ui/icons/ImageOutline"),Fe=require("@spark-ui/icons/PlayOutline"),w=require("class-variance-authority"),H=require("../Icon-CF0W0LKr.js"),be=require("../progress/index.js"),se=require("@spark-ui/icons/Close"),ae=require("../IconButton-D3g86WpZ.js"),he=require("@spark-ui/icons/WarningOutline"),ne=require("../Button-B6rA3-e5.js"),ye=require("../Slot-DQ8z2zsy.js"),T={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_INVALID_TYPE:"FILE_INVALID_TYPE",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",FILE_INVALID:"FILE_INVALID",FILE_EXISTS:"FILE_EXISTS"};function ie(t,r){return r?r.split(",").map(e=>e.trim()).some(e=>{if(e.includes("/")){if(e.endsWith("/*")){const c=e.slice(0,-2);return t.type.startsWith(c+"/")}return t.type===e}if(e.startsWith(".")){const c=e.toLowerCase();return t.name.toLowerCase().endsWith(c)}const l="."+e.toLowerCase();return t.name.toLowerCase().endsWith(l)}):!0}function Ie(t,r,n,e){const l=e||le();return r!==void 0&&t.size<r?{valid:!1,error:`File "${t.name}" is too small. Minimum size is ${B(r,l)}.`}:n!==void 0&&t.size>n?{valid:!1,error:`File "${t.name}" is too large. Maximum size is ${B(n,l)}.`}:{valid:!0}}function le(){return typeof navigator<"u"&&navigator.language?navigator.language:"en"}function B(t,r){const n=r||le();let e=n;if(n.length===2&&(e=n==="fr"?"fr-FR":"en-US"),t===0)return new Intl.NumberFormat(e,{style:"unit",unit:"byte",unitDisplay:"long",minimumFractionDigits:0,maximumFractionDigits:0}).format(0);const l=1024,d=Math.floor(Math.log(t)/Math.log(l)),a=["byte","kilobyte","megabyte","gigabyte"][d]||"byte",o=t/Math.pow(l,d),i=d===0?"long":"short";return new Intl.NumberFormat(e,{style:"unit",unit:a,unitDisplay:i,minimumFractionDigits:0,maximumFractionDigits:2}).format(o)}function je(t){const r=t.type.toLowerCase(),n=t.name.toLowerCase();return r.startsWith("image/")||/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(n)?f.createElement(xe.ImageOutline):r==="application/pdf"||n.endsWith(".pdf")?f.createElement(ve.FilePdfOutline):r.startsWith("video/")||/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(n)?f.createElement(Fe.PlayOutline):f.createElement(ge.CvOutline)}function Re(t){if(!t)return!1;if(t.tabIndex>=0)return!0;const n=String(t.contentEditable)==="true";return t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLAnchorElement&&!!t.href||n}function oe(t,r){for(const n of t)if(Re(n))return n;return r.current?r.current:null}function Le({defaultValue:t=[],value:r,onFileAccept:n,onFileReject:e,onFileChange:l,multiple:d=!0,accept:c,maxFiles:a,maxFileSize:o,minFileSize:i,disabled:p=!1,readOnly:v=!1,locale:E}){const m=E||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),[N,g]=pe.useCombinedState(r,t),u=N??[],I=g,[b,x]=f.useState([]),U=O=>{if(p||v)return;x([]);const D=[],k=(R,L)=>L.some(y=>y.name===R.name&&y.size===R.size),h=(R,L)=>{const y=D.find(A=>A.file.name===R.name&&A.file.size===R.size);y?y.errors.includes(L)||y.errors.push(L):D.push({file:R,errors:[L]})};I(R=>{const L=R??[],y=a!==void 0?a-L.length:void 0;y!==void 0&&y<=0&&O.forEach(F=>{h(F,T.TOO_MANY_FILES)});let A=O;c&&(O.filter(_=>!ie(_,c)).forEach(_=>{h(_,T.FILE_INVALID_TYPE)}),A=O.filter(_=>ie(_,c)));let $=A;(i!==void 0||o!==void 0)&&($=A.filter(F=>Ie(F,i,o,m).valid?!0:(o!==void 0&&F.size>o?h(F,T.FILE_TOO_LARGE):i!==void 0&&F.size<i?h(F,T.FILE_TOO_SMALL):h(F,T.FILE_INVALID),!1)));const Y=new Map,P=$.filter(F=>{const _=`${F.name}-${F.size}`;return k(F,L)||Y.has(_)?(h(F,T.FILE_EXISTS),!1):(Y.set(_,F),!0)});let C=d?P:P.slice(0,1);y!==void 0&&(y<=0?C=[]:C.length>y&&(C.forEach(F=>{h(F,T.TOO_MANY_FILES)}),C=[]));const re=d?[...L,...C]:C,V=[...D];return x(V),C.length>0&&n&&n({files:C}),V.length>0&&e&&e({files:V}),l&&l({acceptedFiles:re,rejectedFiles:V}),re})},z=O=>{p||v||I(D=>{const h=(D??[]).filter((L,y)=>y!==O);let R=b;return a!==void 0&&h.length<a&&(R=b.filter(L=>!L.errors.includes(T.TOO_MANY_FILES)),x(R)),l&&l({acceptedFiles:h,rejectedFiles:R}),h})},j=()=>{p||v||(I([]),x([]),l&&l({acceptedFiles:[],rejectedFiles:[]}))},W=O=>{p||v||x(D=>D.filter((k,h)=>h!==O))},S=()=>{x([])},M=a!==void 0&&u.length>=a;return{files:u,rejectedFiles:b,addFiles:U,removeFile:z,removeRejectedFile:W,clearFiles:j,clearRejectedFiles:S,maxFilesReached:M}}const ce=f.createContext(null),Ee=":file-upload",de=({asChild:t=!1,children:r,defaultValue:n=[],value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a=!0,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:E=!1,readOnly:m=!1,locale:N})=>{const g=me.useFormFieldControl(),u=f.useId(),I=g.id||`${Ee}-${u}`,b=g.name,x=f.useRef(null),U=f.useRef(null),z=f.useRef(null),j=f.useRef([]),W=f.useRef([]),S=g.disabled??E,M=g.readOnly??m,{files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:L,clearRejectedFiles:y,maxFilesReached:A}=Le({defaultValue:n,value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:S,readOnly:M,locale:N}),$=()=>{L(),j.current=[]},Y=()=>{y(),W.current=[]};return s.jsx(ce.Provider,{value:{inputRef:x,files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:$,clearRejectedFiles:Y,triggerRef:U,dropzoneRef:z,deleteButtonRefs:j,rejectedFileDeleteButtonRefs:W,multiple:a,maxFiles:i,maxFilesReached:A,disabled:S,readOnly:M,locale:N||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),description:g.description,isInvalid:g.isInvalid,isRequired:g.isRequired},children:s.jsxs("div",{className:"relative",children:[r,s.jsx("input",{ref:x,type:"file",tabIndex:-1,id:I,multiple:a,name:b,accept:o,disabled:S,readOnly:M&&!S,required:g.isRequired,"aria-invalid":g.isInvalid,"aria-describedby":g.description,"aria-label":g.labelId?void 0:"Upload files",className:"sr-only",onChange:P=>{if(P.target.files&&!S&&!M){k(Array.from(P.target.files));try{P.target.value=""}catch{}}}})]})})};de.displayName="FileUpload";const q=()=>{const t=f.useContext(ce);if(!t)throw Error("useFileUploadContext must be used within a FileUpload provider");return t},X=({className:t,file:r,onClick:n,...e})=>{const{removeFile:l,triggerRef:d,dropzoneRef:c,deleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,files:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.name===r.name&&u.size===r.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-item-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};X.displayName="FileUpload.ItemDeleteTrigger";const K=({className:t,file:r,uploadProgress:n,deleteButtonAriaLabel:e,progressAriaLabel:l,...d})=>{const{locale:c}=q(),[a,o]=f.useState(n!==void 0);f.useEffect(()=>{o(n!==void 0)},[n]);const i=f.useCallback(()=>{o(!1)},[]);return s.jsxs("li",{"data-spark-component":"file-upload-accepted-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full",t),...d,children:[s.jsx("div",{className:"size-sz-36 bg-support-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",children:je(r)})}),s.jsxs("div",{className:"gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.size,c)}),a&&n!==void 0&&s.jsx("div",{className:"absolute bottom-0 left-0 w-full",children:s.jsx(be.Progress,{value:n,max:100,"aria-label":l,onComplete:i})})]}),s.jsx(X,{"aria-label":e,file:r})]})};K.displayName="FileUpload.AcceptedFile";const J=({children:t})=>{const{files:r=[],rejectedFiles:n=[],locale:e}=q();return s.jsx(s.Fragment,{children:t({acceptedFiles:r,rejectedFiles:n,formatFileSize:B,locale:e})})};J.displayName="FileUpload.Context";const ue=f.createContext(!1),Ne=()=>f.useContext(ue);function Q({children:t,className:r,unstyled:n=!1}){const e=q(),l=f.useRef(null);if(!e)throw new Error("FileUploadDropzone must be used inside <FileUpload>");const d=i=>{if(i.preventDefault(),i.stopPropagation(),i.currentTarget.setAttribute("data-drag-over","false"),e.disabled||e.readOnly)return;const p=i.dataTransfer.files;let v=[];p&&(v=Array.isArray(p)?[...p]:Array.from(p)),v.length>0&&e.addFiles(v)},c=()=>{!e.disabled&&!e.readOnly&&e.inputRef.current?.click()},a=i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),!e.disabled&&!e.readOnly&&e.inputRef.current?.click())},o=e.disabled||e.readOnly;return s.jsx(ue.Provider,{value:!0,children:s.jsx("div",{ref:i=>{l.current=i,e.dropzoneRef&&(e.dropzoneRef.current=i)},role:"button",tabIndex:o?-1:0,"aria-disabled":e.disabled?!0:void 0,"aria-describedby":e.description,"aria-invalid":e.isInvalid,"aria-required":e.isRequired,onClick:c,onKeyDown:a,onDrop:d,onDragOver:i=>{i.preventDefault()},className:n?r:w.cx("default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed","gap-lg flex flex-col items-center justify-center text-center","default:p-xl","transition-colors duration-200",!o&&"default:hover:bg-surface-hovered","data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",e.disabled&&"cursor-not-allowed opacity-50",e.readOnly&&!e.disabled&&"cursor-default",r),onDragEnter:i=>{o||i.currentTarget.setAttribute("data-drag-over","true")},onDragLeave:i=>{i.currentTarget.setAttribute("data-drag-over","false")},children:t})})}Q.displayName="FileUploadDropzone";const Z=({className:t,file:r,fallback:n="📄",...e})=>{const[l,d]=f.useState(!1),[c,a]=f.useState(!1),o=r.type.startsWith("image/"),i=o?URL.createObjectURL(r):null;return f.useEffect(()=>()=>{i&&URL.revokeObjectURL(i)},[i]),!o||l?s.jsx("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container flex items-center justify-center rounded-md",t),...e,children:n}):s.jsxs("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container overflow-hidden",t),...e,children:[s.jsx("img",{src:i,alt:r.name,className:w.cx("size-full object-cover",!c&&"opacity-0"),onLoad:()=>a(!0),onError:()=>d(!0)}),!c&&s.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:n})]})};Z.displayName="FileUpload.PreviewImage";const G=({className:t,rejectedFile:r,onClick:n,...e})=>{const{removeRejectedFile:l,triggerRef:d,dropzoneRef:c,rejectedFileDeleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,rejectedFiles:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.file.name===r.file.name&&u.file.size===r.file.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-rejected-file-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};G.displayName="FileUpload.RejectedFileDeleteTrigger";const ee=({className:t,rejectedFile:r,renderError:n,deleteButtonAriaLabel:e,...l})=>{const{locale:d}=q();return s.jsxs("li",{"data-spark-component":"file-upload-rejected-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full","border-error border-md",t),...l,children:[s.jsx("div",{className:"size-sz-36 bg-error-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",className:"text-error",children:s.jsx(he.WarningOutline,{})})}),s.jsx("div",{className:"min-w-0 flex-1",children:s.jsxs("div",{className:"gap-md flex flex-col",children:[s.jsxs("div",{className:"gap-md flex flex-row items-center justify-between",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.file.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.file.size,d)})]}),s.jsx("div",{className:"gap-xs flex flex-col",children:r.errors.map((c,a)=>s.jsx("div",{className:"text-caption text-error","data-error-code":c,children:n(c)},a))})]})}),s.jsx(G,{"aria-label":e,rejectedFile:r})]})};ee.displayName="FileUpload.RejectedFile";const te=({className:t,children:r,asChild:n=!1,unstyled:e=!1,design:l="filled",intent:d="basic",size:c="md",shape:a="rounded",ref:o,...i})=>{const{inputRef:p,triggerRef:v,disabled:E,readOnly:m,description:N,isInvalid:g,isRequired:u}=q(),I=Ne(),b=j=>{j.stopPropagation(),j.preventDefault(),!E&&!m&&p.current?.click()},x=j=>{v&&(v.current=j),o&&(typeof o=="function"?o(j):o.current=j)};let U,z;if(I){U="span";const j=e?t:ne.buttonStyles({design:l,intent:d,size:c,shape:a,disabled:E||m,className:t});z={ref:x,"data-spark-component":"file-upload-trigger",className:j}}else{const j=e?"button":ne.Button;U=n?ye.Slot:j,z={ref:x,type:"button",design:l,intent:d,size:c,shape:a,"data-spark-component":"file-upload-trigger",className:w.cx(t),disabled:E||m,onClick:b,"aria-describedby":N,"aria-invalid":g,"aria-required":u,...i}}return s.jsx(U,{...z,children:r})};te.displayName="FileUpload.Trigger";const fe=Object.assign(de,{Trigger:te,Dropzone:Q,Context:J,AcceptedFile:K,RejectedFile:ee,PreviewImage:Z,ItemDeleteTrigger:X,RejectedFileDeleteTrigger:G});fe.displayName="FileUpload";te.displayName="FileUpload.Trigger";Q.displayName="FileUpload.Dropzone";J.displayName="FileUpload.Context";X.displayName="FileUpload.ItemDeleteTrigger";Z.displayName="FileUpload.PreviewImage";K.displayName="FileUpload.AcceptedFile";ee.displayName="FileUpload.RejectedFile";G.displayName="FileUpload.RejectedFileDeleteTrigger";exports.FILE_UPLOAD_ERRORS=T;exports.FileUpload=fe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),me=require("@spark-ui/components/form-field"),f=require("react"),pe=require("@spark-ui/hooks/use-combined-state"),ge=require("@spark-ui/icons/CvOutline"),ve=require("@spark-ui/icons/FilePdfOutline"),xe=require("@spark-ui/icons/ImageOutline"),Fe=require("@spark-ui/icons/PlayOutline"),w=require("class-variance-authority"),H=require("../Icon-CF0W0LKr.js"),be=require("../progress/index.js"),se=require("@spark-ui/icons/Close"),ae=require("../IconButton-D5fk89W-.js"),he=require("@spark-ui/icons/WarningOutline"),ne=require("../Button-BIAkZTRR.js"),ye=require("../Slot-DQ8z2zsy.js"),T={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_INVALID_TYPE:"FILE_INVALID_TYPE",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",FILE_INVALID:"FILE_INVALID",FILE_EXISTS:"FILE_EXISTS"};function ie(t,r){return r?r.split(",").map(e=>e.trim()).some(e=>{if(e.includes("/")){if(e.endsWith("/*")){const c=e.slice(0,-2);return t.type.startsWith(c+"/")}return t.type===e}if(e.startsWith(".")){const c=e.toLowerCase();return t.name.toLowerCase().endsWith(c)}const l="."+e.toLowerCase();return t.name.toLowerCase().endsWith(l)}):!0}function Ie(t,r,n,e){const l=e||le();return r!==void 0&&t.size<r?{valid:!1,error:`File "${t.name}" is too small. Minimum size is ${B(r,l)}.`}:n!==void 0&&t.size>n?{valid:!1,error:`File "${t.name}" is too large. Maximum size is ${B(n,l)}.`}:{valid:!0}}function le(){return typeof navigator<"u"&&navigator.language?navigator.language:"en"}function B(t,r){const n=r||le();let e=n;if(n.length===2&&(e=n==="fr"?"fr-FR":"en-US"),t===0)return new Intl.NumberFormat(e,{style:"unit",unit:"byte",unitDisplay:"long",minimumFractionDigits:0,maximumFractionDigits:0}).format(0);const l=1024,d=Math.floor(Math.log(t)/Math.log(l)),a=["byte","kilobyte","megabyte","gigabyte"][d]||"byte",o=t/Math.pow(l,d),i=d===0?"long":"short";return new Intl.NumberFormat(e,{style:"unit",unit:a,unitDisplay:i,minimumFractionDigits:0,maximumFractionDigits:2}).format(o)}function je(t){const r=t.type.toLowerCase(),n=t.name.toLowerCase();return r.startsWith("image/")||/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(n)?f.createElement(xe.ImageOutline):r==="application/pdf"||n.endsWith(".pdf")?f.createElement(ve.FilePdfOutline):r.startsWith("video/")||/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(n)?f.createElement(Fe.PlayOutline):f.createElement(ge.CvOutline)}function Re(t){if(!t)return!1;if(t.tabIndex>=0)return!0;const n=String(t.contentEditable)==="true";return t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLAnchorElement&&!!t.href||n}function oe(t,r){for(const n of t)if(Re(n))return n;return r.current?r.current:null}function Le({defaultValue:t=[],value:r,onFileAccept:n,onFileReject:e,onFileChange:l,multiple:d=!0,accept:c,maxFiles:a,maxFileSize:o,minFileSize:i,disabled:p=!1,readOnly:v=!1,locale:E}){const m=E||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),[N,g]=pe.useCombinedState(r,t),u=N??[],I=g,[b,x]=f.useState([]),U=O=>{if(p||v)return;x([]);const D=[],k=(R,L)=>L.some(y=>y.name===R.name&&y.size===R.size),h=(R,L)=>{const y=D.find(A=>A.file.name===R.name&&A.file.size===R.size);y?y.errors.includes(L)||y.errors.push(L):D.push({file:R,errors:[L]})};I(R=>{const L=R??[],y=a!==void 0?a-L.length:void 0;y!==void 0&&y<=0&&O.forEach(F=>{h(F,T.TOO_MANY_FILES)});let A=O;c&&(O.filter(_=>!ie(_,c)).forEach(_=>{h(_,T.FILE_INVALID_TYPE)}),A=O.filter(_=>ie(_,c)));let $=A;(i!==void 0||o!==void 0)&&($=A.filter(F=>Ie(F,i,o,m).valid?!0:(o!==void 0&&F.size>o?h(F,T.FILE_TOO_LARGE):i!==void 0&&F.size<i?h(F,T.FILE_TOO_SMALL):h(F,T.FILE_INVALID),!1)));const Y=new Map,P=$.filter(F=>{const _=`${F.name}-${F.size}`;return k(F,L)||Y.has(_)?(h(F,T.FILE_EXISTS),!1):(Y.set(_,F),!0)});let C=d?P:P.slice(0,1);y!==void 0&&(y<=0?C=[]:C.length>y&&(C.forEach(F=>{h(F,T.TOO_MANY_FILES)}),C=[]));const re=d?[...L,...C]:C,V=[...D];return x(V),C.length>0&&n&&n({files:C}),V.length>0&&e&&e({files:V}),l&&l({acceptedFiles:re,rejectedFiles:V}),re})},z=O=>{p||v||I(D=>{const h=(D??[]).filter((L,y)=>y!==O);let R=b;return a!==void 0&&h.length<a&&(R=b.filter(L=>!L.errors.includes(T.TOO_MANY_FILES)),x(R)),l&&l({acceptedFiles:h,rejectedFiles:R}),h})},j=()=>{p||v||(I([]),x([]),l&&l({acceptedFiles:[],rejectedFiles:[]}))},W=O=>{p||v||x(D=>D.filter((k,h)=>h!==O))},S=()=>{x([])},M=a!==void 0&&u.length>=a;return{files:u,rejectedFiles:b,addFiles:U,removeFile:z,removeRejectedFile:W,clearFiles:j,clearRejectedFiles:S,maxFilesReached:M}}const ce=f.createContext(null),Ee=":file-upload",de=({asChild:t=!1,children:r,defaultValue:n=[],value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a=!0,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:E=!1,readOnly:m=!1,locale:N})=>{const g=me.useFormFieldControl(),u=f.useId(),I=g.id||`${Ee}-${u}`,b=g.name,x=f.useRef(null),U=f.useRef(null),z=f.useRef(null),j=f.useRef([]),W=f.useRef([]),S=g.disabled??E,M=g.readOnly??m,{files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:L,clearRejectedFiles:y,maxFilesReached:A}=Le({defaultValue:n,value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:S,readOnly:M,locale:N}),$=()=>{L(),j.current=[]},Y=()=>{y(),W.current=[]};return s.jsx(ce.Provider,{value:{inputRef:x,files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:$,clearRejectedFiles:Y,triggerRef:U,dropzoneRef:z,deleteButtonRefs:j,rejectedFileDeleteButtonRefs:W,multiple:a,maxFiles:i,maxFilesReached:A,disabled:S,readOnly:M,locale:N||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),description:g.description,isInvalid:g.isInvalid,isRequired:g.isRequired},children:s.jsxs("div",{className:"relative",children:[r,s.jsx("input",{ref:x,type:"file",tabIndex:-1,id:I,multiple:a,name:b,accept:o,disabled:S,readOnly:M&&!S,required:g.isRequired,"aria-invalid":g.isInvalid,"aria-describedby":g.description,"aria-label":g.labelId?void 0:"Upload files",className:"sr-only",onChange:P=>{if(P.target.files&&!S&&!M){k(Array.from(P.target.files));try{P.target.value=""}catch{}}}})]})})};de.displayName="FileUpload";const q=()=>{const t=f.useContext(ce);if(!t)throw Error("useFileUploadContext must be used within a FileUpload provider");return t},X=({className:t,file:r,onClick:n,...e})=>{const{removeFile:l,triggerRef:d,dropzoneRef:c,deleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,files:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.name===r.name&&u.size===r.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-item-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};X.displayName="FileUpload.ItemDeleteTrigger";const K=({className:t,file:r,uploadProgress:n,deleteButtonAriaLabel:e,progressAriaLabel:l,...d})=>{const{locale:c}=q(),[a,o]=f.useState(n!==void 0);f.useEffect(()=>{o(n!==void 0)},[n]);const i=f.useCallback(()=>{o(!1)},[]);return s.jsxs("li",{"data-spark-component":"file-upload-accepted-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full",t),...d,children:[s.jsx("div",{className:"size-sz-36 bg-support-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",children:je(r)})}),s.jsxs("div",{className:"gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.size,c)}),a&&n!==void 0&&s.jsx("div",{className:"absolute bottom-0 left-0 w-full",children:s.jsx(be.Progress,{value:n,max:100,"aria-label":l,onComplete:i})})]}),s.jsx(X,{"aria-label":e,file:r})]})};K.displayName="FileUpload.AcceptedFile";const J=({children:t})=>{const{files:r=[],rejectedFiles:n=[],locale:e}=q();return s.jsx(s.Fragment,{children:t({acceptedFiles:r,rejectedFiles:n,formatFileSize:B,locale:e})})};J.displayName="FileUpload.Context";const ue=f.createContext(!1),Ne=()=>f.useContext(ue);function Q({children:t,className:r,unstyled:n=!1}){const e=q(),l=f.useRef(null);if(!e)throw new Error("FileUploadDropzone must be used inside <FileUpload>");const d=i=>{if(i.preventDefault(),i.stopPropagation(),i.currentTarget.setAttribute("data-drag-over","false"),e.disabled||e.readOnly)return;const p=i.dataTransfer.files;let v=[];p&&(v=Array.isArray(p)?[...p]:Array.from(p)),v.length>0&&e.addFiles(v)},c=()=>{!e.disabled&&!e.readOnly&&e.inputRef.current?.click()},a=i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),!e.disabled&&!e.readOnly&&e.inputRef.current?.click())},o=e.disabled||e.readOnly;return s.jsx(ue.Provider,{value:!0,children:s.jsx("div",{ref:i=>{l.current=i,e.dropzoneRef&&(e.dropzoneRef.current=i)},role:"button",tabIndex:o?-1:0,"aria-disabled":e.disabled?!0:void 0,"aria-describedby":e.description,"aria-invalid":e.isInvalid,"aria-required":e.isRequired,onClick:c,onKeyDown:a,onDrop:d,onDragOver:i=>{i.preventDefault()},className:n?r:w.cx("default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed","gap-lg flex flex-col items-center justify-center text-center","default:p-xl","transition-colors duration-200",!o&&"default:hover:bg-surface-hovered","data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",e.disabled&&"cursor-not-allowed opacity-50",e.readOnly&&!e.disabled&&"cursor-default",r),onDragEnter:i=>{o||i.currentTarget.setAttribute("data-drag-over","true")},onDragLeave:i=>{i.currentTarget.setAttribute("data-drag-over","false")},children:t})})}Q.displayName="FileUploadDropzone";const Z=({className:t,file:r,fallback:n="📄",...e})=>{const[l,d]=f.useState(!1),[c,a]=f.useState(!1),o=r.type.startsWith("image/"),i=o?URL.createObjectURL(r):null;return f.useEffect(()=>()=>{i&&URL.revokeObjectURL(i)},[i]),!o||l?s.jsx("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container flex items-center justify-center rounded-md",t),...e,children:n}):s.jsxs("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container overflow-hidden",t),...e,children:[s.jsx("img",{src:i,alt:r.name,className:w.cx("size-full object-cover",!c&&"opacity-0"),onLoad:()=>a(!0),onError:()=>d(!0)}),!c&&s.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:n})]})};Z.displayName="FileUpload.PreviewImage";const G=({className:t,rejectedFile:r,onClick:n,...e})=>{const{removeRejectedFile:l,triggerRef:d,dropzoneRef:c,rejectedFileDeleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,rejectedFiles:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.file.name===r.file.name&&u.file.size===r.file.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-rejected-file-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(H.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};G.displayName="FileUpload.RejectedFileDeleteTrigger";const ee=({className:t,rejectedFile:r,renderError:n,deleteButtonAriaLabel:e,...l})=>{const{locale:d}=q();return s.jsxs("li",{"data-spark-component":"file-upload-rejected-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full","border-error border-md",t),...l,children:[s.jsx("div",{className:"size-sz-36 bg-error-container flex items-center justify-center rounded-md",children:s.jsx(H.Icon,{size:"md",className:"text-error",children:s.jsx(he.WarningOutline,{})})}),s.jsx("div",{className:"min-w-0 flex-1",children:s.jsxs("div",{className:"gap-md flex flex-col",children:[s.jsxs("div",{className:"gap-md flex flex-row items-center justify-between",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.file.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.file.size,d)})]}),s.jsx("div",{className:"gap-xs flex flex-col",children:r.errors.map((c,a)=>s.jsx("div",{className:"text-caption text-error","data-error-code":c,children:n(c)},a))})]})}),s.jsx(G,{"aria-label":e,rejectedFile:r})]})};ee.displayName="FileUpload.RejectedFile";const te=({className:t,children:r,asChild:n=!1,unstyled:e=!1,design:l="filled",intent:d="basic",size:c="md",shape:a="rounded",ref:o,...i})=>{const{inputRef:p,triggerRef:v,disabled:E,readOnly:m,description:N,isInvalid:g,isRequired:u}=q(),I=Ne(),b=j=>{j.stopPropagation(),j.preventDefault(),!E&&!m&&p.current?.click()},x=j=>{v&&(v.current=j),o&&(typeof o=="function"?o(j):o.current=j)};let U,z;if(I){U="span";const j=e?t:ne.buttonStyles({design:l,intent:d,size:c,shape:a,disabled:E||m,className:t});z={ref:x,"data-spark-component":"file-upload-trigger",className:j}}else{const j=e?"button":ne.Button;U=n?ye.Slot:j,z={ref:x,type:"button",design:l,intent:d,size:c,shape:a,"data-spark-component":"file-upload-trigger",className:w.cx(t),disabled:E||m,onClick:b,"aria-describedby":N,"aria-invalid":g,"aria-required":u,...i}}return s.jsx(U,{...z,children:r})};te.displayName="FileUpload.Trigger";const fe=Object.assign(de,{Trigger:te,Dropzone:Q,Context:J,AcceptedFile:K,RejectedFile:ee,PreviewImage:Z,ItemDeleteTrigger:X,RejectedFileDeleteTrigger:G});fe.displayName="FileUpload";te.displayName="FileUpload.Trigger";Q.displayName="FileUpload.Dropzone";J.displayName="FileUpload.Context";X.displayName="FileUpload.ItemDeleteTrigger";Z.displayName="FileUpload.PreviewImage";K.displayName="FileUpload.AcceptedFile";ee.displayName="FileUpload.RejectedFile";G.displayName="FileUpload.RejectedFileDeleteTrigger";exports.FILE_UPLOAD_ERRORS=T;exports.FileUpload=fe;
 //# sourceMappingURL=index.js.map

package/dist/file-upload/index.mjs

@@ -7,13 +7,13 @@ import { FilePdfOutline as Le } from "@spark-ui/icons/FilePdfOutline";
 import { ImageOutline as Ne } from "@spark-ui/icons/ImageOutline";
 import { PlayOutline as xe } from "@spark-ui/icons/PlayOutline";
 import { cx as _ } from "class-variance-authority";
-import { I as K } from "../Icon-Ck-dhfLd.mjs";
+import { I as K } from "../Icon-C23-htlD.mjs";
 import { Progress as Ee } from "../progress/index.mjs";
 import { Close as ce } from "@spark-ui/icons/Close";
-import { I as ue } from "../IconButton-C62-axzv.mjs";
+import { I as ue } from "../IconButton-Mv9tO1ZH.mjs";
 import { WarningOutline as je } from "@spark-ui/icons/WarningOutline";
-import { b as Te, B as De } from "../Button-C3C0aixy.mjs";
-import { a as Oe } from "../Slot-D2Bbf8Gw.mjs";
+import { b as Te, B as De } from "../Button-DggC4GFM.mjs";
+import { S as Oe } from "../Slot-DLY1rJrG.mjs";
 const O = {
   /**
    * Exceeds the maxFiles limit

package/dist/form-field/index.mjs

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as N, Fragment as H } from "react/jsx-runtime";
 import { cx as c } from "class-variance-authority";
 import { createContext as D, useContext as L, useId as I, useState as P, useCallback as q, useMemo as W, useEffect as z } from "react";
-import { a as X, S as _ } from "../Slot-D2Bbf8Gw.mjs";
+import { S as X, a as _ } from "../Slot-DLY1rJrG.mjs";
 import { AlertOutline as B } from "@spark-ui/icons/AlertOutline";
 import { Check as G } from "@spark-ui/icons/Check";
 import { WarningOutline as J } from "@spark-ui/icons/WarningOutline";
-import { I as M } from "../Icon-Ck-dhfLd.mjs";
+import { I as M } from "../Icon-C23-htlD.mjs";
 import { Label as K } from "../label/index.mjs";
 import { F as y } from "../FormFieldRequiredIndicator-DTnCGiX2.mjs";
 const C = D(null), x = ":form-field", b = () => {

package/dist/icon/index.mjs

@@ -1,4 +1,4 @@
-import { I } from "../Icon-Ck-dhfLd.mjs";
+import { I } from "../Icon-C23-htlD.mjs";
 export {
   I as Icon
 };

package/dist/icon-button/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../IconButton-D3g86WpZ.js");exports.IconButton=t.IconButton;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../IconButton-D5fk89W-.js");exports.IconButton=t.IconButton;
 //# sourceMappingURL=index.js.map

package/dist/icon-button/index.mjs

@@ -1,4 +1,4 @@
-import { I as n } from "../IconButton-C62-axzv.mjs";
+import { I as n } from "../IconButton-Mv9tO1ZH.mjs";
 export {
   n as IconButton
 };

package/dist/input/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("class-variance-authority"),_=require("../Icon-CF0W0LKr.js"),d=require("react"),$=require("@spark-ui/components/form-field"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-DQ8z2zsy.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,A]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),N=$.useFormFieldControl(),O=N.state??t,m=N.disabled||!!o,x=N.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),T=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),A(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),A(""),I.current.focus()},[A]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:T,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,T,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[T&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! mr-[-1px] rounded-l-lg"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! ml-[-1px] rounded-r-lg"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-lg"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-lg"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:A,hasLeadingIcon:N,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},T=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!A,hasLeadingIcon:!!N,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:T,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("class-variance-authority"),_=require("../Icon-CF0W0LKr.js"),d=require("react"),$=require("@spark-ui/components/form-field"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-DQ8z2zsy.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,A]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),N=$.useFormFieldControl(),O=N.state??t,m=N.disabled||!!o,x=N.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),T=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),A(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),A(""),I.current.focus()},[A]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:T,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,T,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[T&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-full",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! -mr-px rounded-l-full"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-full",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! -ml-px rounded-r-full"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-full"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-full"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:A,hasLeadingIcon:N,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},T=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!A,hasLeadingIcon:!!N,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:T,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
 //# sourceMappingURL=index.js.map

package/dist/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/input/InputGroupContext.ts","../../src/input/InputClearButton.tsx","../../src/input/InputGroup.styles.ts","../../src/input/InputGroup.tsx","../../src/input/InputAddon.styles.ts","../../src/input/InputAddon.tsx","../../src/input/InputLeadingAddon.tsx","../../src/input/InputIcon.tsx","../../src/input/InputLeadingIcon.tsx","../../src/input/InputTrailingAddon.tsx","../../src/input/InputTrailingIcon.tsx","../../src/input/Input.styles.ts","../../src/input/Input.tsx","../../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-lg'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-lg'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"names":["InputGroupContext","createContext","useInputGroup","useContext","Root","className","tabIndex","onClick","inline","ref","others","onClear","hasTrailingIcon","handleClick","event","jsx","cx","Icon","DeleteOutline","InputClearButton","inputGroupStyles","cva","InputGroup","childrenProp","stateProp","disabledProp","readOnlyProp","forwardedRef","getElementId","element","findElement","values","children","child","Children","isValidElement","input","props","inputRef","useRef","onClearRef","useMergeRefs","value","onChange","useCombinedState","field","useFormFieldControl","state","disabled","readOnly","leadingAddon","leadingIcon","clearButton","trailingIcon","trailingAddon","hasLeadingAddon","hasTrailingAddon","hasLeadingIcon","hasClearButton","handleChange","handleClear","useCallback","current","useMemo","useEffect","inputRefValue","jsxs","cloneElement","inputAddonStyles","InputAddon","asChildProp","isRawText","asChild","Component","Slot","design","isInactive","InputLeadingAddon","InputIcon","intent","InputLeadingIcon","InputTrailingAddon","InputTrailingIcon","inputStyles","onValueChange","onKeyDown","group","id","name","isInvalid","isRequired","description","handleKeyDown","Input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/input/InputGroupContext.ts","../../src/input/InputClearButton.tsx","../../src/input/InputGroup.styles.ts","../../src/input/InputGroup.tsx","../../src/input/InputAddon.styles.ts","../../src/input/InputAddon.tsx","../../src/input/InputLeadingAddon.tsx","../../src/input/InputIcon.tsx","../../src/input/InputLeadingIcon.tsx","../../src/input/InputTrailingAddon.tsx","../../src/input/InputTrailingIcon.tsx","../../src/input/Input.styles.ts","../../src/input/Input.tsx","../../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! -mr-px rounded-l-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! -ml-px rounded-r-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-full'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-full'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"names":["InputGroupContext","createContext","useInputGroup","useContext","Root","className","tabIndex","onClick","inline","ref","others","onClear","hasTrailingIcon","handleClick","event","jsx","cx","Icon","DeleteOutline","InputClearButton","inputGroupStyles","cva","InputGroup","childrenProp","stateProp","disabledProp","readOnlyProp","forwardedRef","getElementId","element","findElement","values","children","child","Children","isValidElement","input","props","inputRef","useRef","onClearRef","useMergeRefs","value","onChange","useCombinedState","field","useFormFieldControl","state","disabled","readOnly","leadingAddon","leadingIcon","clearButton","trailingIcon","trailingAddon","hasLeadingAddon","hasTrailingAddon","hasLeadingIcon","hasClearButton","handleChange","handleClear","useCallback","current","useMemo","useEffect","inputRefValue","jsxs","cloneElement","inputAddonStyles","InputAddon","asChildProp","isRawText","asChild","Component","Slot","design","isInactive","InputLeadingAddon","InputIcon","intent","InputLeadingIcon","InputTrailingAddon","InputTrailingIcon","inputStyles","onValueChange","onKeyDown","group","id","name","isInvalid","isRequired","description","handleKeyDown","Input"],"mappings":"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"}

package/dist/input/index.mjs

@@ -1,12 +1,12 @@
 import { jsx as l, jsxs as F } from "react/jsx-runtime";
 import { DeleteOutline as le } from "@spark-ui/icons/DeleteOutline";
-import { cx as g, cva as E } from "class-variance-authority";
-import { I as K } from "../Icon-Ck-dhfLd.mjs";
+import { cx as g, cva as S } from "class-variance-authority";
+import { I as K } from "../Icon-C23-htlD.mjs";
 import { createContext as ie, useContext as de, Children as P, isValidElement as ue, useRef as M, useCallback as ce, useMemo as pe, useEffect as fe, cloneElement as ge } from "react";
 import { useFormFieldControl as H } from "@spark-ui/components/form-field";
 import { useCombinedState as me } from "@spark-ui/hooks/use-combined-state";
 import { useMergeRefs as he } from "@spark-ui/hooks/use-merge-refs";
-import { a as J } from "../Slot-D2Bbf8Gw.mjs";
+import { S as J } from "../Slot-DLY1rJrG.mjs";
 const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
   className: n,
   tabIndex: e = -1,
@@ -42,7 +42,7 @@ const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
   id: "ClearButton"
 });
 U.displayName = "InputGroup.ClearButton";
-const Ie = E(["relative inline-flex w-full"], {
+const Ie = S(["relative inline-flex w-full"], {
   variants: {
     /**
      * When `true`, prevents the user from interacting.
@@ -145,7 +145,7 @@ const Ie = E(["relative inline-flex w-full"], {
   ) });
 };
 X.displayName = "InputGroup";
-const be = E(
+const be = S(
   [
     "overflow-hidden",
     "border-sm",
@@ -209,7 +209,7 @@ const be = E(
       intent: "neutral"
     }
   }
-), S = ({
+), E = ({
   asChild: n,
   className: e,
   children: t,
@@ -236,14 +236,14 @@ const be = E(
     }
   );
 };
-S.displayName = "InputGroup.Addon";
+E.displayName = "InputGroup.Addon";
 const Y = ({ className: n, ref: e, ...t }) => {
   const { disabled: r, readOnly: o } = v();
-  return /* @__PURE__ */ l("div", { className: g("rounded-l-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
-    S,
+  return /* @__PURE__ */ l("div", { className: g("rounded-l-full", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
+    E,
     {
       ref: e,
-      className: g(n, "rounded-r-0! mr-[-1px] rounded-l-lg"),
+      className: g(n, "rounded-r-0! -mr-px rounded-l-full"),
       ...t
     }
   ) });
@@ -275,11 +275,11 @@ R.id = "LeadingIcon";
 R.displayName = "InputGroup.LeadingIcon";
 const ee = ({ className: n, ref: e, ...t }) => {
   const { disabled: r, readOnly: o } = v();
-  return /* @__PURE__ */ l("div", { className: g("rounded-r-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
-    S,
+  return /* @__PURE__ */ l("div", { className: g("rounded-r-full", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
+    E,
     {
       ref: e,
-      className: g(n, "rounded-l-0! ml-[-1px] rounded-r-lg"),
+      className: g(n, "rounded-l-0! -ml-px rounded-r-full"),
       ...t
     }
   ) });
@@ -290,7 +290,7 @@ ee.displayName = "InputGroup.TrailingAddon";
 const j = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "right-lg text-body-1"), ...e });
 j.id = "TrailingIcon";
 j.displayName = "InputGroup.TrailingIcon";
-const ye = E(
+const ye = S(
   [
     "relative",
     "border-sm",
@@ -329,14 +329,14 @@ const ye = E(
        */
       hasLeadingAddon: {
         true: ["rounded-l-0"],
-        false: ["rounded-l-lg"]
+        false: ["rounded-l-full"]
       },
       /**
        * Sets if there is an addon after the input text.
        */
       hasTrailingAddon: {
         true: ["rounded-r-0"],
-        false: ["rounded-r-lg"]
+        false: ["rounded-r-full"]
       },
       /**
        * Sets if there is an icon before the input text.