@spark-ui/components 17.9.0-beta.0 → 17.9.0-beta.1

package/dist/dropdown/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../popover-CrKp_TKk.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/components/form-field`),l=require(`@spark-ui/icons/Check`),u=require(`downshift`);var d=({itemsMap:e,defaultValue:t,value:n,onValueChange:r,open:i,onOpenChange:a,defaultOpen:o,multiple:s,id:c,labelId:l})=>{let d=[...e.values()],f=(0,u.useMultipleSelection)({selectedItems:n!=null&&s?d.filter(e=>s?n.includes(e.value):n===e.value):void 0,initialSelectedItems:t!=null&&s?d.filter(e=>s?t.includes(e.value):t===e.value):void 0,onSelectedItemsChange:({selectedItems:e})=>{e!=null&&s&&r?.(e.map(e=>e.value))}});return{...(0,u.useSelect)({items:d,isItemDisabled:e=>e.disabled,itemToString:e=>e?e.text:``,id:c,labelId:l,isOpen:i,onIsOpenChange:({isOpen:e})=>{e!=null&&a?.(e)},initialIsOpen:o??!1,stateReducer:(e,{changes:t,type:n})=>{if(!s)return t;let{selectedItems:r,removeSelectedItem:i,addSelectedItem:a}=f;switch(n){case u.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:case u.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:case u.useSelect.stateChangeTypes.ItemClick:return t.selectedItem!=null&&(r.some(e=>e.value===t.selectedItem?.value)?i(t.selectedItem):a(t.selectedItem)),{...t,isOpen:!0,highlightedIndex:e.highlightedIndex};default:return t}},selectedItem:n!=null&&!s?e.get(n)||null:void 0,initialSelectedItem:(t!=null||n!=null)&&!s?e.get(t)||null:void 0,onSelectedItemChange:({selectedItem:e})=>{e?.value!=null&&!s&&r?.(e?.value)},scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}}),...f,selectedItems:[...new Set(f.selectedItems)]}};function f(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var p=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},m=(e,t)=>{let n=p(e,t);return n===void 0?void 0:e.get(n)},h=e=>e?e.type.displayName:``,g=(e,t=[])=>(i.Children.forEach(e,e=>{if((0,i.isValidElement)(e)){if(h(e)===`Dropdown.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:_(n.children)})}e.props.children&&g(e.props.children,t)}}),t),_=(e,t=``)=>typeof e==`string`?e:(i.Children.forEach(e,e=>{(0,i.isValidElement)(e)&&(h(e)===`Dropdown.ItemText`&&(t=e.props.children),e.props.children&&_(e.props.children,t))}),t),v=e=>{let t=new Map;return g(e).forEach(e=>{t.set(e.value,e)}),t},y=(e,t)=>i.Children.toArray(e).some(e=>(0,i.isValidElement)(e)?h(e)===t?!0:e.props.children?y(e.props.children,t):!1:!1),b=(0,i.createContext)(null),x=`:dropdown`,S=({children:e,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f=!1,disabled:p=!1,readOnly:h=!1,state:g})=>{let[_,S]=(0,i.useState)(v(e)),[C,w]=(0,i.useState)(y(e,`Dropdown.Popover`)),[T,E]=(0,i.useState)(`mouse`),D=(0,c.useFormFieldControl)(),O=D.state||g,k=`${x}-label-${(0,i.useId)()}`,A=`${x}-input-${(0,i.useId)()}`,j=D.id||A,M=D.labelId||k,N=D.disabled??p,P=D.readOnly??h,F=d({itemsMap:_,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f,id:j,labelId:M});(0,i.useEffect)(()=>{let t=v(e),n=[..._.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&S(t)},[e]);let[I,L]=C?[n.t,{open:!0}]:[i.Fragment,{}];return(0,a.jsx)(b.Provider,{value:{multiple:f,disabled:N,readOnly:P,...F,itemsMap:_,highlightedItem:m(_,F.highlightedIndex),hasPopover:C,setHasPopover:w,state:O,lastInteractionType:T,setLastInteractionType:E},children:(0,a.jsx)(I,{...L,children:e})})},C=()=>{let e=(0,i.useContext)(b);if(!e)throw Error(`useDropdownContext must be used within a Dropdown provider`);return e},w=({children:e,...t})=>(0,a.jsx)(S,{...t,children:e});w.displayName=`Dropdown`;var T=({className:e,ref:t})=>(0,a.jsx)(`div`,{ref:t,className:(0,r.cx)(`my-md border-b-sm border-outline`,e)});T.displayName=`Dropdown.Divider`;var E=(0,i.createContext)(null),D=({children:e})=>{let t=`${x}-group-label-${(0,i.useId)()}`;return(0,a.jsx)(E.Provider,{value:{labelId:t},children:e})},O=()=>{let e=(0,i.useContext)(E);if(!e)throw Error(`useDropdownGroupContext must be used within a DropdownGroup provider`);return e},k=({children:e,ref:t,...n})=>(0,a.jsx)(D,{children:(0,a.jsx)(A,{ref:t,...n,children:e})}),A=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i,className:(0,r.cx)(t),children:e})};k.displayName=`Dropdown.Group`;var j=(0,i.createContext)(null),M=({value:e,disabled:t=!1,children:n})=>{let{multiple:r,itemsMap:o,selectedItem:s,selectedItems:c}=C(),[l,u]=(0,i.useState)(void 0),d=f(o,e),p={disabled:t,value:e,text:_(n)},m=r?c.some(t=>t.value===e):s?.value===e;return(0,a.jsx)(j.Provider,{value:{textId:l,setTextId:u,isSelected:m,itemData:p,index:d,disabled:t},children:n})},N=()=>{let e=(0,i.useContext)(j);if(!e)throw Error(`useDropdownItemContext must be used within a DropdownItem provider`);return e},P=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,a.jsx)(M,{value:r,disabled:i,children:(0,a.jsx)(I,{ref:t,...n,children:e})})},F=(0,r.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),I=({className:e,disabled:t=!1,value:n,children:i,ref:o})=>{let{getItemProps:c,highlightedItem:l,lastInteractionType:u}=C(),{textId:d,index:f,itemData:p,isSelected:m}=N(),h=l?.value===n,{ref:g,..._}=c({item:p,index:f});return(0,a.jsx)(`li`,{ref:(0,s.useMergeRefs)(o,g),className:(0,r.cx)(F({selected:m,disabled:t,highlighted:h,interactionType:u,className:e})),..._,"aria-selected":m,"aria-labelledby":d,children:i},n)};P.displayName=`Dropdown.Item`;var L=({className:e,children:n,label:i,ref:o})=>{let{disabled:s,isSelected:c}=N(),u=n||(0,a.jsx)(t.t,{size:`sm`,children:(0,a.jsx)(l.Check,{"aria-label":i})});return(0,a.jsx)(`span`,{ref:o,className:(0,r.cx)(`min-h-sz-16 min-w-sz-16 flex`,s&&`opacity-dim-3`,e),children:c&&u})};L.displayName=`Dropdown.ItemIndicator`;var R=({children:e,className:t,ref:n,...o})=>{let{isOpen:c,getMenuProps:l,hasPopover:u,setLastInteractionType:d}=C(),{ref:f,...p}=l({onMouseMove:()=>{d(`mouse`)}}),m=(0,i.useRef)(null),h=(0,s.useMergeRefs)(n,f,m);return(0,i.useLayoutEffect)(()=>{u&&m.current&&m.current.parentElement&&(m.current.parentElement.style.pointerEvents=c?``:`none`,m.current.style.pointerEvents=c?``:`none`)},[c,u]),(0,a.jsx)(`ul`,{ref:h,className:(0,r.cx)(t,`flex flex-col`,c?`pointer-events-auto! block`:`pointer-events-none invisible absolute max-h-0 min-h-0 overflow-hidden opacity-0`,u&&c&&`p-lg`),...o,...p,"data-spark-component":`dropdown-items`,children:e})};R.displayName=`Dropdown.Items`;var z=({children:e,ref:t})=>{let n=`${x}-item-text-${(0,i.useId)()}`,{setTextId:o}=N();return(0,i.useEffect)(()=>(o(n),()=>o(void 0))),(0,a.jsx)(`span`,{id:n,className:(0,r.cx)(`inline`),ref:t,children:e})};z.displayName=`Dropdown.ItemText`;var B=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,id:i,className:(0,r.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e})};B.displayName=`Dropdown.Label`;var V=({children:e})=>(0,a.jsx)(t.t,{size:`sm`,className:`shrink-0`,children:e});V.displayName=`Dropdown.LeadingIcon`;var H=({children:e,matchTriggerWidth:t=!0,sideOffset:o=4,className:s,elevation:c=`dropdown`,ref:l,...u})=>{let d=C();return(0,i.useEffect)(()=>(d.setHasPopover(!0),()=>d.setHasPopover(!1)),[]),(0,a.jsx)(n.t.Content,{ref:l,inset:!0,asChild:!0,matchTriggerWidth:t,elevation:c,className:(0,r.cx)(`relative`,s),sideOffset:o,onOpenAutoFocus:e=>{e.preventDefault()},...u,"data-spark-component":`dropdown-popover`,children:e})};H.displayName=`Dropdown.Popover`;var U=({children:e,...t})=>(0,a.jsx)(n.t.Portal,{...t,children:e});U.displayName=`Dropdown.Portal`;var W=(0,r.cva)([`flex w-full items-center justify-between`,`min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg`,`text-body-1`,`ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus`],{variants:{state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`},readOnly:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`}]}),G=({"aria-label":c,children:l,className:u,ref:d})=>{let{getToggleButtonProps:f,getDropdownProps:p,getLabelProps:m,hasPopover:h,disabled:g,readOnly:_,state:v,setLastInteractionType:y,isOpen:b}=C(),[x,S]=h?[n.t.Trigger,{asChild:!0}]:[i.Fragment,{}],{ref:w,...T}=f({...p(),onKeyDown:e=>{y(`keyboard`),e.key===`Escape`&&b&&e.stopPropagation()}}),E=T[`aria-expanded`],D=(0,s.useMergeRefs)(d,w);return(0,a.jsxs)(a.Fragment,{children:[c&&(0,a.jsx)(e.VisuallyHidden,{children:(0,a.jsx)(`label`,{...m(),children:c})}),(0,a.jsx)(x,{...S,children:(0,a.jsxs)(`button`,{type:`button`,ref:D,disabled:g||_,className:W({className:u,state:v,disabled:g,readOnly:_}),...T,"data-spark-component":`dropdown-trigger`,children:[(0,a.jsx)(`span`,{className:`gap-md flex items-center justify-start`,children:l}),(0,a.jsx)(t.t,{className:(0,r.cx)(`ml-md shrink-0 rotate-0 transition duration-100 ease-in`,{"rotate-180":E}),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})})]})};G.displayName=`Dropdown.Trigger`;var K=({children:e,className:t,placeholder:n,ref:i})=>{let{selectedItem:o,multiple:s,selectedItems:c}=C(),l=!!(s?c.length:o),u=s?c[0]?.text:o?.text,d=c.length>1?`, +${c.length-1}`:``;return(0,a.jsxs)(`span`,{ref:i,className:(0,r.cx)(`flex shrink items-center text-left`,t),children:[(0,a.jsx)(`span`,{className:(0,r.cx)(`line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis`,!l&&`text-on-surface/dim-1`),children:l?e||u:n}),d&&(0,a.jsx)(`span`,{children:d})]})};K.displayName=`Dropdown.Value`;var q=Object.assign(w,{Group:k,Item:P,Items:R,ItemText:z,ItemIndicator:L,Label:B,Popover:H,Divider:T,Trigger:G,Value:K,LeadingIcon:V,Portal:U});q.displayName=`Dropdown`,k.displayName=`Dropdown.Group`,R.displayName=`Dropdown.Items`,P.displayName=`Dropdown.Item`,z.displayName=`Dropdown.ItemText`,L.displayName=`Dropdown.ItemIndicator`,B.displayName=`Dropdown.Label`,H.displayName=`Dropdown.Popover`,T.displayName=`Dropdown.Divider`,G.displayName=`Dropdown.Trigger`,K.displayName=`Dropdown.Value`,V.displayName=`Dropdown.LeadingIcon`,U.displayName=`Dropdown.Portal`,exports.Dropdown=q,exports.DropdownProvider=S,exports.useDropdownContext=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../popover-ayPbAw59.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/components/form-field`),l=require(`@spark-ui/icons/Check`),u=require(`downshift`);var d=({itemsMap:e,defaultValue:t,value:n,onValueChange:r,open:i,onOpenChange:a,defaultOpen:o,multiple:s,id:c,labelId:l})=>{let d=[...e.values()],f=(0,u.useMultipleSelection)({selectedItems:n!=null&&s?d.filter(e=>s?n.includes(e.value):n===e.value):void 0,initialSelectedItems:t!=null&&s?d.filter(e=>s?t.includes(e.value):t===e.value):void 0,onSelectedItemsChange:({selectedItems:e})=>{e!=null&&s&&r?.(e.map(e=>e.value))}});return{...(0,u.useSelect)({items:d,isItemDisabled:e=>e.disabled,itemToString:e=>e?e.text:``,id:c,labelId:l,isOpen:i,onIsOpenChange:({isOpen:e})=>{e!=null&&a?.(e)},initialIsOpen:o??!1,stateReducer:(e,{changes:t,type:n})=>{if(!s)return t;let{selectedItems:r,removeSelectedItem:i,addSelectedItem:a}=f;switch(n){case u.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:case u.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:case u.useSelect.stateChangeTypes.ItemClick:return t.selectedItem!=null&&(r.some(e=>e.value===t.selectedItem?.value)?i(t.selectedItem):a(t.selectedItem)),{...t,isOpen:!0,highlightedIndex:e.highlightedIndex};default:return t}},selectedItem:n!=null&&!s?e.get(n)||null:void 0,initialSelectedItem:(t!=null||n!=null)&&!s?e.get(t)||null:void 0,onSelectedItemChange:({selectedItem:e})=>{e?.value!=null&&!s&&r?.(e?.value)},scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}}),...f,selectedItems:[...new Set(f.selectedItems)]}};function f(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var p=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},m=(e,t)=>{let n=p(e,t);return n===void 0?void 0:e.get(n)},h=e=>e?e.type.displayName:``,g=(e,t=[])=>(i.Children.forEach(e,e=>{if((0,i.isValidElement)(e)){if(h(e)===`Dropdown.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:_(n.children)})}e.props.children&&g(e.props.children,t)}}),t),_=(e,t=``)=>typeof e==`string`?e:(i.Children.forEach(e,e=>{(0,i.isValidElement)(e)&&(h(e)===`Dropdown.ItemText`&&(t=e.props.children),e.props.children&&_(e.props.children,t))}),t),v=e=>{let t=new Map;return g(e).forEach(e=>{t.set(e.value,e)}),t},y=(e,t)=>i.Children.toArray(e).some(e=>(0,i.isValidElement)(e)?h(e)===t?!0:e.props.children?y(e.props.children,t):!1:!1),b=(0,i.createContext)(null),x=`:dropdown`,S=({children:e,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f=!1,disabled:p=!1,readOnly:h=!1,state:g})=>{let[_,S]=(0,i.useState)(v(e)),[C,w]=(0,i.useState)(y(e,`Dropdown.Popover`)),[T,E]=(0,i.useState)(`mouse`),D=(0,c.useFormFieldControl)(),O=D.state||g,k=`${x}-label-${(0,i.useId)()}`,A=`${x}-input-${(0,i.useId)()}`,j=D.id||A,M=D.labelId||k,N=D.disabled??p,P=D.readOnly??h,F=d({itemsMap:_,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f,id:j,labelId:M});(0,i.useEffect)(()=>{let t=v(e),n=[..._.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&S(t)},[e]);let[I,L]=C?[n.t,{open:!0}]:[i.Fragment,{}];return(0,a.jsx)(b.Provider,{value:{multiple:f,disabled:N,readOnly:P,...F,itemsMap:_,highlightedItem:m(_,F.highlightedIndex),hasPopover:C,setHasPopover:w,state:O,lastInteractionType:T,setLastInteractionType:E},children:(0,a.jsx)(I,{...L,children:e})})},C=()=>{let e=(0,i.useContext)(b);if(!e)throw Error(`useDropdownContext must be used within a Dropdown provider`);return e},w=({children:e,...t})=>(0,a.jsx)(S,{...t,children:e});w.displayName=`Dropdown`;var T=({className:e,ref:t})=>(0,a.jsx)(`div`,{ref:t,className:(0,r.cx)(`my-md border-b-sm border-outline`,e)});T.displayName=`Dropdown.Divider`;var E=(0,i.createContext)(null),D=({children:e})=>{let t=`${x}-group-label-${(0,i.useId)()}`;return(0,a.jsx)(E.Provider,{value:{labelId:t},children:e})},O=()=>{let e=(0,i.useContext)(E);if(!e)throw Error(`useDropdownGroupContext must be used within a DropdownGroup provider`);return e},k=({children:e,ref:t,...n})=>(0,a.jsx)(D,{children:(0,a.jsx)(A,{ref:t,...n,children:e})}),A=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i,className:(0,r.cx)(t),children:e})};k.displayName=`Dropdown.Group`;var j=(0,i.createContext)(null),M=({value:e,disabled:t=!1,children:n})=>{let{multiple:r,itemsMap:o,selectedItem:s,selectedItems:c}=C(),[l,u]=(0,i.useState)(void 0),d=f(o,e),p={disabled:t,value:e,text:_(n)},m=r?c.some(t=>t.value===e):s?.value===e;return(0,a.jsx)(j.Provider,{value:{textId:l,setTextId:u,isSelected:m,itemData:p,index:d,disabled:t},children:n})},N=()=>{let e=(0,i.useContext)(j);if(!e)throw Error(`useDropdownItemContext must be used within a DropdownItem provider`);return e},P=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,a.jsx)(M,{value:r,disabled:i,children:(0,a.jsx)(I,{ref:t,...n,children:e})})},F=(0,r.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),I=({className:e,disabled:t=!1,value:n,children:i,ref:o})=>{let{getItemProps:c,highlightedItem:l,lastInteractionType:u}=C(),{textId:d,index:f,itemData:p,isSelected:m}=N(),h=l?.value===n,{ref:g,..._}=c({item:p,index:f});return(0,a.jsx)(`li`,{ref:(0,s.useMergeRefs)(o,g),className:(0,r.cx)(F({selected:m,disabled:t,highlighted:h,interactionType:u,className:e})),..._,"aria-selected":m,"aria-labelledby":d,children:i},n)};P.displayName=`Dropdown.Item`;var L=({className:e,children:n,label:i,ref:o})=>{let{disabled:s,isSelected:c}=N(),u=n||(0,a.jsx)(t.t,{size:`sm`,children:(0,a.jsx)(l.Check,{"aria-label":i})});return(0,a.jsx)(`span`,{ref:o,className:(0,r.cx)(`min-h-sz-16 min-w-sz-16 flex`,s&&`opacity-dim-3`,e),children:c&&u})};L.displayName=`Dropdown.ItemIndicator`;var R=({children:e,className:t,ref:n,...o})=>{let{isOpen:c,getMenuProps:l,hasPopover:u,setLastInteractionType:d}=C(),{ref:f,...p}=l({onMouseMove:()=>{d(`mouse`)}}),m=(0,i.useRef)(null),h=(0,s.useMergeRefs)(n,f,m);return(0,i.useLayoutEffect)(()=>{u&&m.current&&m.current.parentElement&&(m.current.parentElement.style.pointerEvents=c?``:`none`,m.current.style.pointerEvents=c?``:`none`)},[c,u]),(0,a.jsx)(`ul`,{ref:h,className:(0,r.cx)(t,`flex flex-col`,c?`pointer-events-auto! block`:`pointer-events-none invisible absolute max-h-0 min-h-0 overflow-hidden opacity-0`,u&&c&&`p-lg`),...o,...p,"data-spark-component":`dropdown-items`,children:e})};R.displayName=`Dropdown.Items`;var z=({children:e,ref:t})=>{let n=`${x}-item-text-${(0,i.useId)()}`,{setTextId:o}=N();return(0,i.useEffect)(()=>(o(n),()=>o(void 0))),(0,a.jsx)(`span`,{id:n,className:(0,r.cx)(`inline`),ref:t,children:e})};z.displayName=`Dropdown.ItemText`;var B=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,id:i,className:(0,r.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e})};B.displayName=`Dropdown.Label`;var V=({children:e})=>(0,a.jsx)(t.t,{size:`sm`,className:`shrink-0`,children:e});V.displayName=`Dropdown.LeadingIcon`;var H=({children:e,matchTriggerWidth:t=!0,sideOffset:o=4,className:s,elevation:c=`dropdown`,ref:l,...u})=>{let d=C();return(0,i.useEffect)(()=>(d.setHasPopover(!0),()=>d.setHasPopover(!1)),[]),(0,a.jsx)(n.t.Content,{ref:l,inset:!0,asChild:!0,matchTriggerWidth:t,elevation:c,className:(0,r.cx)(`relative`,s),sideOffset:o,onOpenAutoFocus:e=>{e.preventDefault()},...u,"data-spark-component":`dropdown-popover`,children:e})};H.displayName=`Dropdown.Popover`;var U=({children:e,...t})=>(0,a.jsx)(n.t.Portal,{...t,children:e});U.displayName=`Dropdown.Portal`;var W=(0,r.cva)([`flex w-full items-center justify-between`,`min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg`,`text-body-1`,`ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus`],{variants:{state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`},readOnly:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`}]}),G=({"aria-label":c,children:l,className:u,ref:d})=>{let{getToggleButtonProps:f,getDropdownProps:p,getLabelProps:m,hasPopover:h,disabled:g,readOnly:_,state:v,setLastInteractionType:y,isOpen:b}=C(),[x,S]=h?[n.t.Trigger,{asChild:!0}]:[i.Fragment,{}],{ref:w,...T}=f({...p(),onKeyDown:e=>{y(`keyboard`),e.key===`Escape`&&b&&e.stopPropagation()}}),E=T[`aria-expanded`],D=(0,s.useMergeRefs)(d,w);return(0,a.jsxs)(a.Fragment,{children:[c&&(0,a.jsx)(e.VisuallyHidden,{children:(0,a.jsx)(`label`,{...m(),children:c})}),(0,a.jsx)(x,{...S,children:(0,a.jsxs)(`button`,{type:`button`,ref:D,disabled:g||_,className:W({className:u,state:v,disabled:g,readOnly:_}),...T,"data-spark-component":`dropdown-trigger`,children:[(0,a.jsx)(`span`,{className:`gap-md flex items-center justify-start`,children:l}),(0,a.jsx)(t.t,{className:(0,r.cx)(`ml-md shrink-0 rotate-0 transition duration-100 ease-in`,{"rotate-180":E}),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})})]})};G.displayName=`Dropdown.Trigger`;var K=({children:e,className:t,placeholder:n,ref:i})=>{let{selectedItem:o,multiple:s,selectedItems:c}=C(),l=!!(s?c.length:o),u=s?c[0]?.text:o?.text,d=c.length>1?`, +${c.length-1}`:``;return(0,a.jsxs)(`span`,{ref:i,className:(0,r.cx)(`flex shrink items-center text-left`,t),children:[(0,a.jsx)(`span`,{className:(0,r.cx)(`line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis`,!l&&`text-on-surface/dim-1`),children:l?e||u:n}),d&&(0,a.jsx)(`span`,{children:d})]})};K.displayName=`Dropdown.Value`;var q=Object.assign(w,{Group:k,Item:P,Items:R,ItemText:z,ItemIndicator:L,Label:B,Popover:H,Divider:T,Trigger:G,Value:K,LeadingIcon:V,Portal:U});q.displayName=`Dropdown`,k.displayName=`Dropdown.Group`,R.displayName=`Dropdown.Items`,P.displayName=`Dropdown.Item`,z.displayName=`Dropdown.ItemText`,L.displayName=`Dropdown.ItemIndicator`,B.displayName=`Dropdown.Label`,H.displayName=`Dropdown.Popover`,T.displayName=`Dropdown.Divider`,G.displayName=`Dropdown.Trigger`,K.displayName=`Dropdown.Value`,V.displayName=`Dropdown.LeadingIcon`,U.displayName=`Dropdown.Portal`,exports.Dropdown=q,exports.DropdownProvider=S,exports.useDropdownContext=C;
 //# sourceMappingURL=index.js.map

package/dist/dropdown/index.mjs

@@ -1,6 +1,6 @@
 import { VisuallyHidden as e } from "../visually-hidden/index.mjs";
 import { t } from "../icon-D05Uqh8_.mjs";
-import { t as n } from "../popover-DsBY8eYl.mjs";
+import { t as n } from "../popover-DKa4WOQV.mjs";
 import { cva as r, cx as i } from "class-variance-authority";
 import { Children as a, Fragment as o, createContext as s, isValidElement as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";

package/dist/file-upload/index.js

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

package/dist/file-upload/index.mjs

@@ -1,8 +1,8 @@
 import { Slot as e } from "../slot/index.mjs";
 import { t } from "../icon-D05Uqh8_.mjs";
-import { n, t as r } from "../button-C6nlNPdv.mjs";
-import { t as i } from "../icon-button-DpucUC_L.mjs";
-import { t as a } from "../progress-C3w4PmxY.mjs";
+import { n, t as r } from "../button-BFQ3w9CA.mjs";
+import { t as i } from "../icon-button-C3RgGf2o.mjs";
+import { t as a } from "../progress-C-Zs94G2.mjs";
 import { cx as o } from "class-variance-authority";
 import { createContext as s, createElement as c, useCallback as l, useContext as u, useEffect as d, useId as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";

package/dist/form-field/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../form-field-1sKqNg7F.js`);exports.FormField=e.t,exports.useFormFieldControl=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../form-field-CYGgse45.js`);exports.FormField=e.t,exports.useFormFieldControl=e.n;

package/dist/form-field/index.mjs

@@ -1,2 +1,2 @@
-import { n as e, t } from "../form-field-OhKW7u5I.mjs";
+import { n as e, t } from "../form-field-CV5dzt-I.mjs";
 export { t as FormField, e as useFormFieldControl };

package/dist/{form-field-OhKW7u5I.mjs → form-field-CV5dzt-I.mjs}

@@ -204,7 +204,7 @@ var N = ({ htmlFor: e, className: n, children: o, requiredIndicator: s = /* @__P
 		id: g,
 		"data-spark-component": "form-field-label",
 		htmlFor: c ? void 0 : e || d.id,
-		className: a("default:font-bold", n, f ? "text-on-surface/dim-3  pointer-events-none" : void 0),
+		className: a("default:font-medium", n, f ? "text-on-surface/dim-3  pointer-events-none" : void 0),
 		asChild: c,
 		...u,
 		children: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, { children: o }), _ && s] })
@@ -238,4 +238,4 @@ F.displayName = "FormField", N.displayName = "FormField.Label", A.displayName =
 //#endregion
 export { O as n, F as t };
 
-//# sourceMappingURL=form-field-OhKW7u5I.mjs.map
+//# sourceMappingURL=form-field-CV5dzt-I.mjs.map

package/dist/{form-field-OhKW7u5I.mjs.map → form-field-CV5dzt-I.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-OhKW7u5I.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-bold',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}
+{"version":3,"file":"form-field-CV5dzt-I.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/{form-field-1sKqNg7F.js → form-field-CYGgse45.js}

@@ -1,2 +1,2 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-BCSEss4U.js`),r=require(`./FormFieldRequiredIndicator-CEB8Ez-q.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`default:text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-description`,className:(0,i.cx)(`text-on-surface/dim-1 text-body-2`,e),...n});x.displayName=`FormField.Description`;var S=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});S.displayName=`FormField.ErrorMessage`;var C=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});C.displayName=`FormField.HelperMessage`;var w=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:l?void 0:t||p.id,className:(0,i.cx)(`default:font-bold`,a,m?`text-on-surface/dim-3  pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};w.displayName=`FormField.Label`;var T=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});T.displayName=`FormField.SuccessMessage`;var E=Object.assign(m,{Label:w,Description:x,Control:b,StateMessage:g,SuccessMessage:T,AlertMessage:_,ErrorMessage:S,HelperMessage:C,RequiredIndicator:r.t,CharactersCount:v});E.displayName=`FormField`,w.displayName=`FormField.Label`,x.displayName=`FormField.Description`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,T.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,S.displayName=`FormField.ErrorMessage`,C.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
-//# sourceMappingURL=form-field-1sKqNg7F.js.map
+require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-BCSEss4U.js`),r=require(`./FormFieldRequiredIndicator-CEB8Ez-q.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`default:text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-description`,className:(0,i.cx)(`text-on-surface/dim-1 text-body-2`,e),...n});x.displayName=`FormField.Description`;var S=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});S.displayName=`FormField.ErrorMessage`;var C=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});C.displayName=`FormField.HelperMessage`;var w=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:l?void 0:t||p.id,className:(0,i.cx)(`default:font-medium`,a,m?`text-on-surface/dim-3  pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};w.displayName=`FormField.Label`;var T=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});T.displayName=`FormField.SuccessMessage`;var E=Object.assign(m,{Label:w,Description:x,Control:b,StateMessage:g,SuccessMessage:T,AlertMessage:_,ErrorMessage:S,HelperMessage:C,RequiredIndicator:r.t,CharactersCount:v});E.displayName=`FormField`,w.displayName=`FormField.Label`,x.displayName=`FormField.Description`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,T.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,S.displayName=`FormField.ErrorMessage`,C.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
+//# sourceMappingURL=form-field-CYGgse45.js.map

package/dist/{form-field-1sKqNg7F.js.map → form-field-CYGgse45.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field-1sKqNg7F.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-bold',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}
+{"version":3,"file":"form-field-CYGgse45.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/icon-button/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../icon-button-CYz_Fitz.js`);exports.IconButton=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../icon-button-jcPwRD21.js`);exports.IconButton=e.t;

package/dist/icon-button/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../icon-button-DpucUC_L.mjs";
+import { t as e } from "../icon-button-C3RgGf2o.mjs";
 export { e as IconButton };

package/dist/{icon-button-DpucUC_L.mjs → icon-button-C3RgGf2o.mjs}

@@ -1,4 +1,4 @@
-import { t as e } from "./button-C6nlNPdv.mjs";
+import { t as e } from "./button-BFQ3w9CA.mjs";
 import { cva as t } from "class-variance-authority";
 import { jsx as n } from "react/jsx-runtime";
 import { makeVariants as r } from "@spark-ui/internal-utils";
@@ -25,4 +25,4 @@ a.displayName = "IconButton";
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=icon-button-DpucUC_L.mjs.map
+//# sourceMappingURL=icon-button-C3RgGf2o.mjs.map

package/dist/{icon-button-DpucUC_L.mjs.map → icon-button-C3RgGf2o.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-DpucUC_L.mjs","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAIA,IAAa,IAAmB,EAAI,CAAC,YAAY,EAAE,EACjD,UAAU,EAIR,MAAM,EAAyC;CAC7C,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,iBAAiB;CACvB,CAAC,EACH,EACF,CAAC,ECFW,KAAc,EACzB,YAAS,UACT,cAAW,IACX,YAAS,QACT,WAAQ,WACR,UAAO,MACP,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAiB;EAAE;EAAM;EAAW,CAAC;CACxC;CACE;CACF;CACD;CACD;CACN,GAAI;CACJ,CAAA;AAIN,EAAW,cAAc"}
+{"version":3,"file":"icon-button-C3RgGf2o.mjs","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAIA,IAAa,IAAmB,EAAI,CAAC,YAAY,EAAE,EACjD,UAAU,EAIR,MAAM,EAAyC;CAC7C,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,iBAAiB;CACvB,CAAC,EACH,EACF,CAAC,ECFW,KAAc,EACzB,YAAS,UACT,cAAW,IACX,YAAS,QACT,WAAQ,WACR,UAAO,MACP,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAiB;EAAE;EAAM;EAAW,CAAC;CACxC;CACE;CACF;CACD;CACD;CACN,GAAI;CACJ,CAAA;AAIN,EAAW,cAAc"}

package/dist/{icon-button-CYz_Fitz.js → icon-button-jcPwRD21.js}

@@ -1,2 +1,2 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./button-B-sMnDc_.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/internal-utils`);var i=(0,t.cva)([`pl-0 pr-0`],{variants:{size:(0,r.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({design:t=`filled`,disabled:r=!1,intent:a=`main`,shape:o=`rounded`,size:s=`md`,className:c,ref:l,...u})=>(0,n.jsx)(e.t,{"data-spark-component":`icon-button`,ref:l,className:i({size:s,className:c}),design:t,disabled:r,intent:a,shape:o,size:s,...u});a.displayName=`IconButton`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
-//# sourceMappingURL=icon-button-CYz_Fitz.js.map
+require(`./chunk-C91j1N6u.js`);const e=require(`./button-3F9Xrf4E.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/internal-utils`);var i=(0,t.cva)([`pl-0 pr-0`],{variants:{size:(0,r.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({design:t=`filled`,disabled:r=!1,intent:a=`main`,shape:o=`rounded`,size:s=`md`,className:c,ref:l,...u})=>(0,n.jsx)(e.t,{"data-spark-component":`icon-button`,ref:l,className:i({size:s,className:c}),design:t,disabled:r,intent:a,shape:o,size:s,...u});a.displayName=`IconButton`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=icon-button-jcPwRD21.js.map

package/dist/{icon-button-CYz_Fitz.js.map → icon-button-jcPwRD21.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-CYz_Fitz.js","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"sLAIA,IAAa,GAAA,EAAA,EAAA,KAAuB,CAAC,YAAY,CAAE,CACjD,SAAU,CAIR,MAAA,EAAA,EAAA,cAA+C,CAC7C,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,iBAAiB,CACvB,CAAC,CACH,CACF,CAAC,CCFW,GAAc,CACzB,SAAS,SACT,WAAW,GACX,SAAS,OACT,QAAQ,UACR,OAAO,KACP,YACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,uBAAqB,cAChB,MACL,UAAW,EAAiB,CAAE,OAAM,YAAW,CAAC,CACxC,SACE,WACF,SACD,QACD,OACN,GAAI,EACJ,CAAA,CAIN,EAAW,YAAc"}
+{"version":3,"file":"icon-button-jcPwRD21.js","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button component that contains only an icon without text label.\n */\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"sLAIA,IAAa,GAAA,EAAA,EAAA,KAAuB,CAAC,YAAY,CAAE,CACjD,SAAU,CAIR,MAAA,EAAA,EAAA,cAA+C,CAC7C,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,iBAAiB,CACvB,CAAC,CACH,CACF,CAAC,CCFW,GAAc,CACzB,SAAS,SACT,WAAW,GACX,SAAS,OACT,QAAQ,UACR,OAAO,KACP,YACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,uBAAqB,cAChB,MACL,UAAW,EAAiB,CAAE,OAAM,YAAW,CAAC,CACxC,SACE,WACF,SACD,QACD,OACN,GAAI,EACJ,CAAA,CAIN,EAAW,YAAc"}

package/dist/kbd/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`react/jsx-runtime`);var t=({className:t,ref:n,...r})=>(0,e.jsx)(`kbd`,{"data-spark-component":`kbd`,ref:n,className:[`border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap`,t].join(` `),...r});exports.Kbd=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`react/jsx-runtime`);var t=({className:t,ref:n,...r})=>(0,e.jsx)(`kbd`,{"data-spark-component":`kbd`,ref:n,className:[`border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-medium whitespace-nowrap`,t].join(` `),...r});exports.Kbd=t;
 //# sourceMappingURL=index.js.map

package/dist/kbd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A component that displays keyboard keys or shortcuts in a styled format.\n */\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":"sIASA,IAAa,GAAO,CAAE,YAAW,MAAK,GAAG,MAErC,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,MAChB,MACL,UAAW,CACT,gJACA,EACD,CAAC,KAAK,IAAI,CACX,GAAI,EACJ,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A component that displays keyboard keys or shortcuts in a styled format.\n */\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-medium whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":"sIASA,IAAa,GAAO,CAAE,YAAW,MAAK,GAAG,MAErC,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,MAChB,MACL,UAAW,CACT,kJACA,EACD,CAAC,KAAK,IAAI,CACX,GAAI,EACJ,CAAA"}

package/dist/kbd/index.mjs

@@ -3,7 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
 var t = ({ className: t, ref: n, ...r }) => /* @__PURE__ */ e("kbd", {
 	"data-spark-component": "kbd",
 	ref: n,
-	className: ["border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap", t].join(" "),
+	className: ["border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-medium whitespace-nowrap", t].join(" "),
 	...r
 });
 //#endregion

package/dist/kbd/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A component that displays keyboard keys or shortcuts in a styled format.\n */\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;AASA,IAAa,KAAO,EAAE,cAAW,QAAK,GAAG,QAErC,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,WAAW,CACT,iJACA,EACD,CAAC,KAAK,IAAI;CACX,GAAI;CACJ,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A component that displays keyboard keys or shortcuts in a styled format.\n */\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-medium whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;AASA,IAAa,KAAO,EAAE,cAAW,QAAK,GAAG,QAErC,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,WAAW,CACT,mJACA,EACD,CAAC,KAAK,IAAI;CACX,GAAI;CACJ,CAAA"}

package/dist/meter/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,t.createContext)(null),o=`:meter`,s=()=>{let e=(0,t.useContext)(a);if(!e)throw Error(`useMeter must be used within a Meter provider`);return e},c=({className:r,value:o,max:s=100,min:c=0,shape:l=`rounded`,intent:u=`support`,children:d,ref:f,...p})=>{let[m,h]=(0,t.useState)(),g=(0,t.useMemo)(()=>({value:o??0,max:s,min:c,intent:u,shape:l,onLabelId:h}),[s,c,o,u,l,h]);return(0,n.jsx)(a.Provider,{value:g,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`meter`,ref:f,className:(0,e.cx)(`gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]`,r),value:o,max:s,min:c,"aria-labelledby":m,...p,children:d})})};c.displayName=`Meter`;var l=({id:e,children:a,ref:c,...l})=>{let u=`${o}-label-${(0,t.useId)()}`,d=e||u,{onLabelId:f}=s(),p=(0,r.useMergeRefs)(c,(0,t.useCallback)(e=>{f(e?d:void 0)},[d,f]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`meter-label`,id:d,className:`default:text-body-1 text-on-surface default:font-bold`,ref:p,...l,children:a})};l.displayName=`Meter.Label`;var u=(0,e.cva)([`relative col-span-2`,`h-sz-8 w-full`,`transform-gpu overflow-hidden`,`bg-on-background/dim-4`]),d=(0,e.cva)([`size-full`,`ease-standard transition-[width] duration-700`,`motion-reduce:transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],success:[`bg-success`],alert:[`bg-alert`],danger:[`bg-error`],info:[`bg-info`]},shape:{square:[],rounded:[`rounded-sm`]}}});function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=({className:r,...a})=>{let{value:o,max:c,min:l,intent:p,shape:m}=s(),h=(o-l)/(c-l)*100,g=(0,t.useRef)(null),[_,v]=(0,t.useState)(!1);return f(g,()=>{v(!0)}),(0,n.jsx)(i.Meter.Track,{ref:g,"data-spark-component":`meter-track`,className:(0,e.cx)(u(),{"rounded-sm":m===`rounded`},r),...a,children:(0,n.jsx)(i.Meter.Indicator,{"data-spark-component":`meter-indicator`,className:d({intent:p,shape:m}),style:{width:_?`${h}%`:`0%`}})})};p.displayName=`Meter.Track`;var m=({className:t,children:r,...a})=>(0,n.jsx)(i.Meter.Value,{"data-spark-component":`meter-value`,className:(0,e.cx)(`default:text-body-1 text-on-surface`,`col-start-2 text-right`,t),...a,children:r});m.displayName=`Meter.Value`;var h=Object.assign(c,{Label:l,Track:p,Value:m});h.displayName=`Meter`,l.displayName=`Meter.Label`,p.displayName=`Meter.Track`,m.displayName=`Meter.Value`,exports.Meter=h;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,t.createContext)(null),o=`:meter`,s=()=>{let e=(0,t.useContext)(a);if(!e)throw Error(`useMeter must be used within a Meter provider`);return e},c=({className:r,value:o,max:s=100,min:c=0,shape:l=`rounded`,intent:u=`support`,children:d,ref:f,...p})=>{let[m,h]=(0,t.useState)(),g=(0,t.useMemo)(()=>({value:o??0,max:s,min:c,intent:u,shape:l,onLabelId:h}),[s,c,o,u,l,h]);return(0,n.jsx)(a.Provider,{value:g,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`meter`,ref:f,className:(0,e.cx)(`gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]`,r),value:o,max:s,min:c,"aria-labelledby":m,...p,children:d})})};c.displayName=`Meter`;var l=({id:e,children:a,ref:c,...l})=>{let u=`${o}-label-${(0,t.useId)()}`,d=e||u,{onLabelId:f}=s(),p=(0,r.useMergeRefs)(c,(0,t.useCallback)(e=>{f(e?d:void 0)},[d,f]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`meter-label`,id:d,className:`default:text-body-1-highlight text-on-surface`,ref:p,...l,children:a})};l.displayName=`Meter.Label`;var u=(0,e.cva)([`relative col-span-2`,`h-sz-8 w-full`,`transform-gpu overflow-hidden`,`bg-on-background/dim-4`]),d=(0,e.cva)([`size-full`,`ease-standard transition-[width] duration-700`,`motion-reduce:transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],success:[`bg-success`],alert:[`bg-alert`],danger:[`bg-error`],info:[`bg-info`]},shape:{square:[],rounded:[`rounded-sm`]}}});function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=({className:r,...a})=>{let{value:o,max:c,min:l,intent:p,shape:m}=s(),h=(o-l)/(c-l)*100,g=(0,t.useRef)(null),[_,v]=(0,t.useState)(!1);return f(g,()=>{v(!0)}),(0,n.jsx)(i.Meter.Track,{ref:g,"data-spark-component":`meter-track`,className:(0,e.cx)(u(),{"rounded-sm":m===`rounded`},r),...a,children:(0,n.jsx)(i.Meter.Indicator,{"data-spark-component":`meter-indicator`,className:d({intent:p,shape:m}),style:{width:_?`${h}%`:`0%`}})})};p.displayName=`Meter.Track`;var m=({className:t,children:r,...a})=>(0,n.jsx)(i.Meter.Value,{"data-spark-component":`meter-value`,className:(0,e.cx)(`default:text-body-1 text-on-surface`,`col-start-2 text-right`,t),...a,children:r});m.displayName=`Meter.Value`;var h=Object.assign(c,{Label:l,Track:p,Value:m});h.displayName=`Meter`,l.displayName=`Meter.Label`,p.displayName=`Meter.Track`,m.displayName=`Meter.Value`,exports.Meter=h;
 //# sourceMappingURL=index.js.map