@spark-ui/components 17.11.1 → 17.11.3

package/dist/chip/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/internal-utils`),o=require(`@spark-ui/hooks/use-combined-state`),s=require(`emulate-tab`),c=require(`@spark-ui/icons/Close`);var l=[{design:`outlined`,intent:`main`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{design:`outlined`,intent:`support`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{design:`outlined`,intent:`success`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{design:`outlined`,intent:`danger`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{design:`outlined`,intent:`info`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{design:`outlined`,intent:`neutral`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{design:`outlined`,intent:`surface`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`outlined`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-md)-var(--border-width-sm))]`])},{design:`outlined`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-md)-var(--border-width-sm))]`])}],u=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`enabled:hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`,`aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`enabled:hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`,`aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`enabled:hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`,`aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`enabled:hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`,`aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`enabled:hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`,`aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`enabled:hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`,`aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`enabled:hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`,`aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`enabled:hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`,`aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1`,`text-on-neutral-container`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface/dim-1`,`enabled:hover:bg-surface-hovered/dim-1`,`enabled:active:bg-surface-hovered/dim-1`,`focus-visible:bg-surface-hovered/dim-1`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-on-surface/dim-1`])},{design:`tinted`,hasClearButton:!1,class:(0,a.tw)([`px-md`])},{design:`tinted`,hasClearButton:!0,class:(0,a.tw)([`pl-md`])}],d=[{intent:`main`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{intent:`support`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{intent:`success`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{intent:`danger`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{intent:`info`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{intent:`neutral`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{intent:`surface`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`dashed`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-md)-var(--border-width-sm))]`])},{design:`dashed`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-md)-var(--border-width-sm))]`])}],f=(0,n.cva)([`box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular`,`focus-visible:u-outline`,`ease-out duration-150`],{variants:{design:(0,a.makeVariants)({outlined:[`bg-transparent border-sm border-solid border-current`],tinted:[``],dashed:[`bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high`]}),intent:(0,a.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`]},hasClearButton:{true:[],false:[]}},compoundVariants:[...l,...u,...d],defaultVariants:{design:`outlined`,intent:`support`}}),p=(0,r.createContext)({}),m=()=>(0,r.useContext)(p)||{},h=e=>e?e.type.displayName:``,g=e=>(...t)=>r.Children.toArray(e).filter(r.isValidElement).find(e=>{let n=h(e);return t.includes(n||``)}),_=({onClick:t,asChild:n,pressed:r,defaultPressed:a,disabled:c,value:l,defaultValue:u,children:d,onClear:f})=>{let[p,m]=(0,o.useCombinedState)(r,a),[h]=(0,o.useCombinedState)(l,u),_=g(d),v=_(`Chip.LeadingIcon`),y=_(`Chip.TrailingIcon`),b=_(`Chip.Content`),x=_(`Chip.ClearButton`),S=(t||p)!==void 0,C=[v,b,x].every(e=>e===void 0)?(0,i.jsx)(`span`,{className:`inline-block grow truncate`,children:d}):(0,i.jsxs)(i.Fragment,{children:[v,b,v===void 0?y:null,x]}),w=e=>{x&&!c&&[`Delete`,`Backspace`].includes(e.key)&&f&&(f(),e.key===`Delete`&&(0,s.emulateTab)(),e.key===`Backspace`&&s.emulateTab.backwards())};return S?{Element:n?e.Slot:`button`,chipProps:{type:`button`,...p!==void 0&&{"aria-pressed":p,"data-state":p?`on`:`off`},onClick:e=>{p!==void 0&&m(!p),t&&t(e,{pressed:p,value:h})},onKeyDown:w,disabled:c,children:C},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}:{Element:n?e.Slot:`div`,chipProps:{"aria-disabled":c,children:C,onKeyDown:w},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}},v=({design:e=`outlined`,disabled:t,children:n,intent:r=`support`,defaultPressed:a,pressed:o,asChild:s,className:c,onClick:l,onClear:u,ref:d,...m})=>{let{Element:h,chipProps:{children:g,...v},compoundElements:y}=_({asChild:s,pressed:o,defaultPressed:a,onClick:l,disabled:!!t,value:m.value,defaultValue:m.defaultValue,children:n,onClear:u}),{clearButton:b}=y;return(0,i.jsx)(p,{value:{disabled:t,design:e,intent:r,onClear:u},children:(0,i.jsx)(h,{ref:d,className:f({className:c,design:e,disabled:t,intent:r,hasClearButton:!!b}),...v,...m,"data-spark-component":`chip`,children:g})})};v.displayName=`Chip`;var y=(0,n.cva)([`ml-md flex h-full items-center justify-center focus-visible:outline-hidden`],{variants:{disabled:{false:[`cursor-pointer`],true:[`cursor-not-allowed`]},isBordered:{false:[`pr-md`],true:[`pr-[7px]`]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:`outlined`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`outlined`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`tinted`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`tinted`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`dashed`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`dashed`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])}]}),b=(0,n.cva)([`rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm`,`focus-visible:u-outline`],{variants:{disabled:{true:[`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),x=({children:e=(0,i.jsx)(t.t,{children:(0,i.jsx)(c.Close,{})}),tabIndex:n=0,label:a,ref:o})=>{let{design:s,disabled:l,onClear:u}=m(),d=(0,r.useCallback)(e=>{e.stopPropagation(),!l&&u&&u(e)},[l,u]);return(0,i.jsx)(`span`,{className:y({isBordered:[`outline`,`dashed`].includes(`${s}`),disabled:!!l,design:s}),onClick:d,ref:o,children:(0,i.jsx)(`button`,{tabIndex:n,type:`button`,disabled:!!l,className:b({disabled:l}),"aria-label":a,children:e&&(0,r.cloneElement)(e,{ariaLabel:a})})})};x.displayName=`Chip.ClearButton`;var S=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`inline-block grow truncate`,t),ref:r,children:e});S.displayName=`Chip.Content`;var C=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`flex h-full items-center justify-center`,t),ref:r,children:e});C.displayName=`Chip.Icon`;var w=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`mr-sm`,e),ref:t,...r});w.displayName=`Chip.LeadingIcon`;var T=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`ml-md`,e),ref:t,...r});T.displayName=`Chip.TrailingIcon`;var E=Object.assign(v,{Content:S,LeadingIcon:w,TrailingIcon:T,ClearButton:x});E.displayName=`Chip`,E.ClearButton.displayName=`Chip.ClearButton`,E.Content.displayName=`Chip.Content`,E.LeadingIcon.displayName=`Chip.LeadingIcon`,E.TrailingIcon.displayName=`Chip.TrailingIcon`,exports.Chip=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/internal-utils`),o=require(`@spark-ui/hooks/use-combined-state`),s=require(`emulate-tab`),c=require(`@spark-ui/icons/Close`);var l=[{design:`outlined`,intent:`main`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{design:`outlined`,intent:`support`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{design:`outlined`,intent:`success`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{design:`outlined`,intent:`danger`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{design:`outlined`,intent:`info`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{design:`outlined`,intent:`neutral`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{design:`outlined`,intent:`surface`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`outlined`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-md)-var(--border-width-sm))]`])},{design:`outlined`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-md)-var(--border-width-sm))]`])}],u=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`enabled:hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`,`aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`enabled:hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`,`aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`enabled:hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`,`aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`enabled:hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`,`aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`enabled:hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`,`aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`enabled:hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`,`aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`enabled:hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`,`aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`enabled:hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`,`aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1`,`text-on-neutral-container`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface/dim-1`,`enabled:hover:bg-surface-hovered/dim-1`,`enabled:active:bg-surface-hovered/dim-1`,`focus-visible:bg-surface-hovered/dim-1`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-on-surface/dim-1`])},{design:`tinted`,hasClearButton:!1,class:(0,a.tw)([`px-md`])},{design:`tinted`,hasClearButton:!0,class:(0,a.tw)([`pl-md`])}],d=[{intent:`main`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{intent:`support`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{intent:`success`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{intent:`danger`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{intent:`info`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{intent:`neutral`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{intent:`surface`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`dashed`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-md)-var(--border-width-sm))]`])},{design:`dashed`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-md)-var(--border-width-sm))]`])}],f=(0,n.cva)([`box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular`,`focus-visible:u-outline`,`ease-out duration-150`],{variants:{design:(0,a.makeVariants)({outlined:[`bg-transparent border-sm border-solid border-current`],tinted:[``],dashed:[`bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high`]}),intent:(0,a.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`]},hasClearButton:{true:[],false:[]}},compoundVariants:[...l,...u,...d],defaultVariants:{design:`outlined`,intent:`support`}}),p=(0,r.createContext)({}),m=()=>(0,r.useContext)(p)||{},h=e=>e?e.type.displayName:``,g=e=>(...t)=>r.Children.toArray(e).filter(r.isValidElement).find(e=>{let n=h(e);return t.includes(n||``)}),_=({onClick:t,asChild:n,pressed:r,defaultPressed:a,disabled:c,value:l,defaultValue:u,children:d,onClear:f})=>{let[p,m]=(0,o.useCombinedState)(r,a),[h]=(0,o.useCombinedState)(l,u),_=g(d),v=_(`Chip.LeadingIcon`),y=_(`Chip.TrailingIcon`),b=_(`Chip.Content`),x=_(`Chip.ClearButton`),S=(t||p)!==void 0,C=[v,b,x].every(e=>e===void 0)?(0,i.jsx)(`span`,{className:`inline-block grow truncate`,children:d}):(0,i.jsxs)(i.Fragment,{children:[v,b,v===void 0?y:null,x]}),w=e=>{x&&!c&&[`Delete`,`Backspace`].includes(e.key)&&f&&(f(),e.key===`Delete`&&(0,s.emulateTab)(),e.key===`Backspace`&&s.emulateTab.backwards())};return S?{Element:n?e.Slot:`button`,chipProps:{type:`button`,...p!==void 0&&{"aria-pressed":p,"data-state":p?`on`:`off`},onClick:e=>{p!==void 0&&m(!p),t&&t(e,{pressed:p,value:h})},onKeyDown:w,disabled:c,children:C},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}:{Element:n?e.Slot:`div`,chipProps:{"aria-disabled":c,children:C,onKeyDown:w},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}},v=({design:e=`outlined`,disabled:t,children:n,intent:r=`support`,defaultPressed:a,pressed:o,asChild:s,className:c,onClick:l,onClear:u,ref:d,...m})=>{let{Element:h,chipProps:{children:g,...v},compoundElements:y}=_({asChild:s,pressed:o,defaultPressed:a,onClick:l,disabled:!!t,value:m.value,defaultValue:m.defaultValue,children:n,onClear:u}),{clearButton:b}=y;return(0,i.jsx)(p,{value:{disabled:t,design:e,intent:r,onClear:u},children:(0,i.jsx)(h,{ref:d,className:f({className:c,design:e,disabled:t,intent:r,hasClearButton:!!b}),...v,...m,"data-spark-component":`chip`,children:g})})};v.displayName=`Chip`;var y=(0,n.cva)([`ml-md flex h-full items-center justify-center focus-visible:outline-hidden`],{variants:{disabled:{false:[`cursor-pointer`],true:[`cursor-not-allowed`]},isBordered:{false:[`pr-md`],true:[`pr-[7px]`]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:`outlined`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`outlined`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`tinted`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`tinted`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`dashed`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`dashed`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])}]}),b=(0,n.cva)([`rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm`,`focus-visible:u-outline`],{variants:{disabled:{true:[`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),x=({children:e=(0,i.jsx)(t.t,{children:(0,i.jsx)(c.Close,{})}),tabIndex:n=0,label:a,ref:o})=>{let{design:s,disabled:l,onClear:u}=m(),d=(0,r.useCallback)(e=>{e.stopPropagation(),!l&&u&&u(e)},[l,u]);return(0,i.jsx)(`span`,{className:y({isBordered:[`outline`,`dashed`].includes(`${s}`),disabled:!!l,design:s}),onClick:d,ref:o,children:(0,i.jsx)(`button`,{tabIndex:n,type:`button`,disabled:!!l,className:b({disabled:l}),"aria-label":a,children:e&&(0,r.cloneElement)(e,{ariaLabel:a})})})};x.displayName=`Chip.ClearButton`;var S=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`inline-block grow truncate`,t),ref:r,children:e});S.displayName=`Chip.Content`;var C=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`flex h-full items-center justify-center`,t),ref:r,children:e});C.displayName=`Chip.Icon`;var w=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`mr-sm`,e),ref:t,...r});w.displayName=`Chip.LeadingIcon`;var T=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`ml-md`,e),ref:t,...r});T.displayName=`Chip.TrailingIcon`;var E=Object.assign(v,{Content:S,LeadingIcon:w,TrailingIcon:T,ClearButton:x});E.displayName=`Chip`,E.ClearButton.displayName=`Chip.ClearButton`,E.Content.displayName=`Chip.Content`,E.LeadingIcon.displayName=`Chip.LeadingIcon`,E.TrailingIcon.displayName=`Chip.TrailingIcon`,exports.Chip=E;
 //# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":"sZAEA,IAAa,EAAmB,CAE9B,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,mCACA,8HACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,+BACA,gCACA,+BACA,2HACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,OACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,WACR,OAAQ,UACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,qGACA,eACD,CAAC,CACH,CAED,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACD,CACE,OAAQ,WACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,sDAAsD,CAAC,CACnE,CACF,CCjHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,4CACA,6CACA,4CACA,gGACA,2BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,2CACA,4CACA,2CACA,6FACA,0BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,0CACA,2CACA,0CACA,0FACA,yBACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,6CACA,8CACA,6CACA,mGACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mBACA,yCACA,0CACA,yCACA,qGACA,wBACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACD,CACE,OAAQ,SACR,eAAgB,GAChB,OAAA,EAAA,EAAA,IAAU,CAAC,QAAQ,CAAC,CACrB,CACF,CCzHY,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,8BACA,+BACA,8BACA,wHACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,kCACA,iCACA,iIACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,gCACA,iCACA,gCACA,8HACA,cACD,CAAC,CACH,CACD,CA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"}

package/dist/chip/index.mjs

@@ -349,7 +349,7 @@ var v = [
 		class: m(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
 	}
 ], x = n([
-	"box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular",
+	"box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular",
 	"focus-visible:u-outline",
 	"ease-out duration-150"
 ], {

package/dist/chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-button text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/chip/variants/outlined.ts","../../src/chip/variants/tinted.ts","../../src/chip/variants/dashed.ts","../../src/chip/Chip.styles.tsx","../../src/chip/useChipContext.tsx","../../src/chip/useChipElement.tsx","../../src/chip/Chip.tsx","../../src/chip/ChipClearButton.styles.tsx","../../src/chip/ChipClearButton.tsx","../../src/chip/ChipContent.tsx","../../src/chip/ChipIcon.tsx","../../src/chip/ChipLeadingIcon.tsx","../../src/chip/ChipTrailingIcon.tsx","../../src/chip/index.ts"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  /** Intents **/\n  {\n    design: 'outlined',\n    intent: 'main',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'support',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'success',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'danger',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'info',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'neutral',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    design: 'outlined',\n    intent: 'surface',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'outlined',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'outlined',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'enabled:hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n      'aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1',\n      'text-on-main-container',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'enabled:hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n      'aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1',\n      'text-on-support-container',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'enabled:hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n      'aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1',\n      'text-on-accent-container',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'enabled:hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n      'aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1',\n      'text-on-success-container',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'enabled:hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n      'aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1',\n      'text-on-alert-container',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'enabled:hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n      'aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1',\n      'text-on-error-container',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'enabled:hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n      'aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1',\n      'text-on-info-container',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'enabled:hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n      'aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1',\n      'text-on-neutral-container',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface/dim-1',\n      'enabled:hover:bg-surface-hovered/dim-1',\n      'enabled:active:bg-surface-hovered/dim-1',\n      'focus-visible:bg-surface-hovered/dim-1',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-on-surface/dim-1',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'tinted',\n    hasClearButton: false,\n    class: tw(['px-md']),\n  },\n  {\n    design: 'tinted',\n    hasClearButton: true,\n    class: tw(['pl-md']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const dashedVariants = [\n  /** Intents **/\n  {\n    intent: 'main',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'dashed',\n    class: tw([\n      'enabled:hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered',\n      'text-surface',\n    ]),\n  },\n  /** Spacings **/\n  {\n    design: 'dashed',\n    hasClearButton: false,\n    class: tw(['px-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n  {\n    design: 'dashed',\n    hasClearButton: true,\n    class: tw(['pl-[calc(var(--spacing-md)-var(--border-width-sm))]']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { dashedVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const chipStyles = cva(\n  [\n    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular',\n    'focus-visible:u-outline',\n    'ease-out duration-150',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the chip.\n       *\n       * - `filled`: Chip will be plain.\n       *\n       * - `outlined`: Chip will be transparent with an outline.\n       *\n       * - `tinted`: Chip will be filled but using a lighter color scheme.\n       *\n       * - `dashed`: Chip will be transparent with an outline dashed.\n       */\n      design: makeVariants<'design', ['outlined', 'tinted', 'dashed']>({\n        outlined: ['bg-transparent border-sm border-solid border-current'],\n        tinted: [''],\n        dashed: [\n          'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',\n        ],\n      }),\n      /**\n       * Color scheme of the chip.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n      /**\n       * Disable the chip, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n      },\n      hasClearButton: {\n        true: [],\n        false: [],\n      },\n      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'\n    },\n    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'support',\n    },\n  }\n)\n\nexport type ChipStylesProps = VariantProps<typeof chipStyles>\n","import { createContext, useContext } from 'react'\n\nimport { type ChipProps } from './Chip'\n\nexport type ChipsContextType = Pick<ChipProps, 'disabled' | 'design' | 'intent' | 'onClear'>\n\nexport const ChipContext = createContext<ChipsContextType>({} as ChipsContextType)\nexport const useChipContext = () => useContext(ChipContext) || {}\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { emulateTab } from 'emulate-tab'\nimport {\n  Children,\n  ElementType,\n  FC,\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from 'react'\n\nimport { Slot } from '../slot'\n\ninterface ReturnedValue {\n  Element:\n    | ForwardRefExoticComponent<\n        HTMLAttributes<HTMLElement> & {\n          children?: ReactNode\n        } & RefAttributes<HTMLElement>\n      >\n    | ElementType\n  chipProps:\n    | {\n        type: 'button'\n        'aria-pressed'?: boolean\n        'data-state'?: 'on' | 'off'\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        'aria-disabled'?: boolean\n        children: ReactNode\n        onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n      }\n  compoundElements: {\n    leadingIcon: ReactNode\n    trailingIcon: ReactNode\n    content: ReactNode\n    clearButton: ReactNode\n  }\n}\n\nconst getDisplayName = (element?: ReactElement) => {\n  return element ? (element.type as FC).displayName : ''\n}\n\nconst findElement =\n  (children: ReactNode) =>\n  (...values: string[]) => {\n    const validChildren = Children.toArray(children).filter(isValidElement)\n\n    return validChildren.find(child => {\n      const displayName = getDisplayName(child)\n\n      return values.includes(displayName || '')\n    })\n  }\n\nexport const useChipElement = ({\n  onClick,\n  asChild,\n  pressed,\n  defaultPressed,\n  disabled,\n  value,\n  defaultValue,\n  children,\n  onClear,\n}: {\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: string | number | readonly string[] }\n  ) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void\n  asChild?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  value?: string | number | readonly string[]\n  defaultValue?: string | number | readonly string[]\n  disabled?: boolean\n  children?: ReactNode\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n}): ReturnedValue => {\n  const [isPressed, setIsPressed] = useCombinedState<boolean | undefined>(pressed, defaultPressed)\n  const [innerValue] = useCombinedState<string | number | readonly string[] | undefined>(\n    value,\n    defaultValue\n  )\n\n  const findChipElement = findElement(children)\n\n  const leadingIcon = findChipElement('Chip.LeadingIcon')\n  const trailingIcon = findChipElement('Chip.TrailingIcon')\n  const content = findChipElement('Chip.Content')\n  const clearButton = findChipElement('Chip.ClearButton')\n\n  const isButton = (onClick || isPressed) !== undefined\n\n  const formattedChildren = [leadingIcon, content, clearButton].every(\n    element => element === undefined\n  ) ? (\n    <span className=\"inline-block grow truncate\">{children}</span>\n  ) : (\n    <>\n      {leadingIcon}\n      {content}\n      {leadingIcon === undefined ? trailingIcon : null}\n      {clearButton}\n    </>\n  )\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {\n    if (!!clearButton && !disabled && ['Delete', 'Backspace'].includes(event.key)) {\n      if (onClear) {\n        onClear()\n        event.key === 'Delete' && emulateTab()\n        event.key === 'Backspace' && emulateTab.backwards()\n      }\n    }\n  }\n\n  if (isButton) {\n    return {\n      Element: asChild ? Slot : 'button',\n      chipProps: {\n        type: 'button',\n        ...(isPressed !== undefined && {\n          'aria-pressed': isPressed,\n          'data-state': isPressed ? 'on' : 'off',\n        }),\n        onClick: (event: MouseEvent<HTMLButtonElement>): void => {\n          isPressed !== undefined && setIsPressed(!isPressed)\n          onClick && onClick(event, { pressed: isPressed as boolean, value: innerValue })\n        },\n        onKeyDown,\n        disabled,\n        children: formattedChildren,\n      },\n      compoundElements: {\n        leadingIcon,\n        trailingIcon,\n        content,\n        clearButton,\n      },\n    }\n  }\n\n  return {\n    Element: asChild ? Slot : 'div',\n    chipProps: {\n      'aria-disabled': disabled,\n      children: formattedChildren,\n      onKeyDown,\n    },\n    compoundElements: {\n      leadingIcon,\n      trailingIcon,\n      content,\n      clearButton,\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, MouseEvent, Ref } from 'react'\n\nimport { chipStyles, type ChipStylesProps } from './Chip.styles'\nimport { ChipContext } from './useChipContext'\nimport { useChipElement } from './useChipElement'\n\ntype ChipPrimitiveProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'disabled' | 'type'>\n\nexport interface ChipProps extends ChipPrimitiveProps, Omit<ChipStylesProps, 'hasClearButton'> {\n  /**\n   * Configures a toggleButton aria-pressed initial value\n   */\n  defaultPressed?: boolean\n  /**\n   * Configures a toggleButton aria-pressed value\n   */\n  pressed?: boolean\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Event handler fired each clicking event\n   */\n  onClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    args: { pressed: boolean; value?: number | string | readonly string[] }\n  ) => void\n  /**\n   * Clear chip handler\n   */\n  onClear?: (event?: MouseEvent<HTMLButtonElement>) => void\n  ref?: Ref<HTMLButtonElement | HTMLDivElement>\n}\n\nexport const Chip = ({\n  design = 'outlined',\n  disabled,\n  children,\n  intent = 'support',\n  defaultPressed,\n  pressed,\n  asChild,\n  className,\n  onClick,\n  onClear,\n  ref: forwardedRef,\n  ...otherProps\n}: ChipProps) => {\n  const {\n    Element: ChipElement,\n    chipProps: { children: formattedChildren, ...chipProps },\n    compoundElements,\n  } = useChipElement({\n    asChild,\n    pressed,\n    defaultPressed,\n    onClick,\n    disabled: !!disabled,\n    value: otherProps.value,\n    defaultValue: otherProps.defaultValue,\n    children,\n    onClear,\n  })\n\n  const { clearButton } = compoundElements\n\n  return (\n    <ChipContext value={{ disabled, design, intent, onClear }}>\n      <ChipElement\n        ref={forwardedRef}\n        className={chipStyles({\n          className,\n          design,\n          disabled,\n          intent,\n          hasClearButton: !!clearButton,\n        })}\n        {...{\n          ...chipProps,\n          ...otherProps,\n        }}\n        data-spark-component=\"chip\"\n      >\n        {formattedChildren}\n      </ChipElement>\n    </ChipContext>\n  )\n}\n\nChip.displayName = 'Chip'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const chipClearButtonWrapperStyles = cva(\n  ['ml-md flex h-full items-center justify-center focus-visible:outline-hidden'],\n  {\n    variants: {\n      disabled: {\n        false: ['cursor-pointer'],\n        true: ['cursor-not-allowed'],\n      },\n      isBordered: {\n        false: ['pr-md'],\n        true: ['pr-[7px]'],\n      },\n      design: {\n        outlined: [],\n        tinted: [],\n        dashed: [],\n      },\n    },\n    compoundVariants: [\n      {\n        design: 'outlined',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'outlined',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'tinted',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'tinted',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n      {\n        design: 'dashed',\n        disabled: false,\n        class: tw(['hover:opacity-dim-1']),\n      },\n      {\n        design: 'dashed',\n        disabled: true,\n        class: tw(['opacity-dim-3']),\n      },\n    ],\n  }\n)\n\nexport const chipClearButtonStyles = cva(\n  ['rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm', 'focus-visible:u-outline'],\n  {\n    variants: {\n      disabled: {\n        true: ['cursor-not-allowed'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n    },\n  }\n)\n\nexport type ChipClearButtonStylesProps = VariantProps<typeof chipClearButtonWrapperStyles>\n","import { Close } from '@spark-ui/icons/Close'\nimport {\n  cloneElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  ReactElement,\n  Ref,\n  useCallback,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  chipClearButtonStyles,\n  type ChipClearButtonStylesProps,\n  chipClearButtonWrapperStyles,\n} from './ChipClearButton.styles'\nimport { useChipContext } from './useChipContext'\n\nexport interface ChipClearButtonProps\n  extends ComponentPropsWithoutRef<'span'>, ChipClearButtonStylesProps {\n  label: string\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * A button to remove or clear the chip. Renders a <button> element wrapped in a <span>.\n */\nexport const ChipClearButton = ({\n  children = (\n    <Icon>\n      <Close />\n    </Icon>\n  ),\n  tabIndex = 0,\n  label,\n  ref: forwardedRef,\n}: ChipClearButtonProps) => {\n  const { design, disabled, onClear } = useChipContext()\n\n  const onClearHandler = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation()\n      !disabled && onClear && onClear(event)\n    },\n    [disabled, onClear]\n  )\n\n  return (\n    <span\n      className={chipClearButtonWrapperStyles({\n        isBordered: ['outline', 'dashed'].includes(`${design}`),\n        disabled: !!disabled,\n        design,\n      })}\n      onClick={onClearHandler}\n      ref={forwardedRef}\n    >\n      <button\n        tabIndex={tabIndex}\n        type=\"button\"\n        disabled={!!disabled}\n        className={chipClearButtonStyles({ disabled })}\n        aria-label={label}\n      >\n        {children && cloneElement(children as ReactElement<HTMLElement>, { ariaLabel: label })}\n      </button>\n    </span>\n  )\n}\n\nChipClearButton.displayName = 'Chip.ClearButton'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipContentProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * The main text content of the chip. Renders a <span> element.\n */\nexport const ChipContent = ({ children, className, ref: forwardedRef }: ChipContentProps) => {\n  return (\n    <span className={cx('inline-block grow truncate', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipContent.displayName = 'Chip.Content'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport type ChipIconProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const ChipIcon = ({ children, className, ref: forwardedRef }: ChipIconProps) => {\n  return (\n    <span className={cx('flex h-full items-center justify-center', className)} ref={forwardedRef}>\n      {children}\n    </span>\n  )\n}\n\nChipIcon.displayName = 'Chip.Icon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipLeadingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the start of the chip. Renders a <span> element.\n */\nexport const ChipLeadingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipLeadingIconProps) => (\n  <ChipIcon className={cx('mr-sm', className)} ref={forwardedRef} {...props} />\n)\n\nChipLeadingIcon.displayName = 'Chip.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { ChipIcon, type ChipIconProps } from './ChipIcon'\n\nexport type ChipTrailingIconProps = ChipIconProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * An icon displayed at the end of the chip. Renders a <span> element.\n */\nexport const ChipTrailingIcon = ({\n  className,\n  ref: forwardedRef,\n  ...props\n}: ChipTrailingIconProps) => (\n  <ChipIcon className={cx('ml-md', className)} ref={forwardedRef} {...props} />\n)\n\nChipTrailingIcon.displayName = 'Chip.TrailingIcon'\n","import { Chip as Root } from './Chip'\nimport { ChipClearButton } from './ChipClearButton'\nimport { ChipContent } from './ChipContent'\nimport { ChipLeadingIcon } from './ChipLeadingIcon'\nimport { ChipTrailingIcon } from './ChipTrailingIcon'\n\n/**\n * A compact, interactive element used for input, filtering, or representing attributes.\n */\nexport const Chip: typeof Root & {\n  Content: typeof ChipContent\n  LeadingIcon: typeof ChipLeadingIcon\n  TrailingIcon: typeof ChipTrailingIcon\n  ClearButton: typeof ChipClearButton\n} = Object.assign(Root, {\n  Content: ChipContent,\n  LeadingIcon: ChipLeadingIcon,\n  TrailingIcon: ChipTrailingIcon,\n  ClearButton: ChipClearButton,\n})\n\nChip.displayName = 'Chip'\nChip.ClearButton.displayName = 'Chip.ClearButton'\nChip.Content.displayName = 'Chip.Content'\nChip.LeadingIcon.displayName = 'Chip.LeadingIcon'\nChip.TrailingIcon.displayName = 'Chip.TrailingIcon'\n\nexport { type ChipClearButtonProps } from './ChipClearButton'\nexport { type ChipContentProps } from './ChipContent'\nexport { type ChipLeadingIconProps } from './ChipLeadingIcon'\nexport { type ChipTrailingIconProps } from './ChipTrailingIcon'\n"],"mappings":";;;;;;;;;;AAEA,IAAa,IAAmB;CAE9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,sDAAsD,CAAC;EACnE;CACF,ECjHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACD;EACE,QAAQ;EACR,gBAAgB;EAChB,OAAO,EAAG,CAAC,QAAQ,CAAC;EACrB;CACF,ECzHY,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EA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"}

package/dist/input/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../input-DIGSkxbh.js`);exports.Input=e.n,exports.InputGroup=e.t,exports.useInputGroup=e.i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../input-BSCMbnO4.js`);exports.Input=e.n,exports.InputGroup=e.t,exports.useInputGroup=e.i;

package/dist/input/index.mjs

@@ -1,2 +1,2 @@
-import { i as e, n as t, t as n } from "../input-BxuTPD5-.mjs";
+import { i as e, n as t, t as n } from "../input-cKdm2R3n.mjs";
 export { t as Input, n as InputGroup, e as useInputGroup };

package/dist/input-BSCMbnO4.js

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

package/dist/input-BSCMbnO4.js.map

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

package/dist/{input-BxuTPD5-.mjs → input-cKdm2R3n.mjs}

@@ -56,7 +56,7 @@ var C = n(["relative inline-flex w-full"], { variants: {
 		false: "after:hidden"
 	}
 } }), w = ({ className: e, children: t, state: n, disabled: r, readOnly: o, onClear: l, ref: v, ...b }) => {
-	let x = (e) => e ? e.type.id : "", S = (...e) => w.find((t) => e.includes(x(t) || "")), w = i.toArray(t).filter(s), T = S("Input"), E = T?.props || {}, D = f(null), O = f(l), k = h(T?.ref, D), [A, j] = _(E.value, E.defaultValue, E.onValueChange), M = g(), N = M.state ?? n, P = M.disabled || !!r, F = M.readOnly || !!o, I = S("LeadingAddon"), L = S("LeadingIcon"), R = S("ClearButton"), z = S("TrailingIcon"), B = S("TrailingAddon"), V = !!I, H = !!B, U = !!L, W = !!z, G = !!A && !!R && !P && !F, K = (e) => {
+	let x = (e) => e ? e.type.id : "", S = (...e) => w.find((t) => e.includes(x(t) || "")), w = i.toArray(t).filter(s), T = S("Input"), E = T?.props || {}, D = f(null), O = f(l), k = h(T?.props.ref, D), [A, j] = _(E.value, E.defaultValue, E.onValueChange), M = g(), N = M.state ?? n, P = M.disabled || !!r, F = M.readOnly || !!o, I = S("LeadingAddon"), L = S("LeadingIcon"), R = S("ClearButton"), z = S("TrailingIcon"), B = S("TrailingAddon"), V = !!I, H = !!B, U = !!L, W = !!z, G = !!A && !!R && !P && !F, K = (e) => {
 		E.onChange && E.onChange(e), j(e.target.value);
 	}, q = c(() => {
 		O.current && O.current(), j(""), D.current.focus();
@@ -352,4 +352,4 @@ L.displayName = "InputGroup", O.displayName = "InputGroup.LeadingAddon", M.displ
 //#endregion
 export { b as i, I as n, C as r, L as t };
 
-//# sourceMappingURL=input-BxuTPD5-.mjs.map
+//# sourceMappingURL=input-cKdm2R3n.mjs.map

package/dist/input-cKdm2R3n.mjs.map

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

package/dist/stepper/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CTe0v0g7.js`),n=require(`../input-DIGSkxbh.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(h.value??h.defaultValue??null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CTe0v0g7.js`),n=require(`../input-BSCMbnO4.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(h.value??h.defaultValue??null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
 //# sourceMappingURL=index.js.map

package/dist/stepper/index.mjs

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

package/dist/textarea/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-DIGSkxbh.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-[var(--spacing-sz-10)]`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-BSCMbnO4.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-[var(--spacing-sz-10)]`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
 //# sourceMappingURL=index.js.map

package/dist/textarea/index.mjs

@@ -1,4 +1,4 @@
-import { n as e, t } from "../input-BxuTPD5-.mjs";
+import { n as e, t } from "../input-cKdm2R3n.mjs";
 import { cx as n } from "class-variance-authority";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/textarea/TextareaClearButton.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.11.1",
+  "version": "17.11.3",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.11.1",
-    "@spark-ui/icons": "17.11.1",
-    "@spark-ui/internal-utils": "17.11.1",
+    "@spark-ui/hooks": "17.11.3",
+    "@spark-ui/icons": "17.11.3",
+    "@spark-ui/internal-utils": "17.11.3",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.11.1",
+    "@spark-ui/theme-utils": "17.11.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

package/dist/input-BxuTPD5-.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-BxuTPD5-.mjs","names":[],"sources":["../src/input/InputGroupContext.ts","../src/input/InputClearButton.tsx","../src/input/InputGroup.styles.ts","../src/input/InputGroup.tsx","../src/input/InputAddon.styles.ts","../src/input/InputAddon.tsx","../src/input/InputLeadingAddon.tsx","../src/input/InputIcon.tsx","../src/input/InputLeadingIcon.tsx","../src/input/InputTrailingAddon.tsx","../src/input/InputTrailingIcon.tsx","../src/input/Input.styles.ts","../src/input/Input.tsx","../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button to clear the input value. Renders a <button> element. */\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * An addon displayed before the input. Renders a <span> element.\n */\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\n/** An icon displayed before the input text. Renders a <div> element. */\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/** An addon displayed after the input. Renders a <span> element. */\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\n/** An icon displayed after the input text. Renders a <div> element. */\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-input'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-input'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\n/**\n * A text input field that allows users to enter and edit text content.\n */\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\n/**\n * A wrapper component that combines an Input with addons, icons, and interactive elements\n * to create more complex text input patterns like search bars, password fields, or URL inputs.\n */\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"mappings":";;;;;;;;;;AAeA,IAAa,IAAoB,EAAsD,KAAK,EAE/E,UACK,EAAW,EAAkB,IAE3B,EAAE,cAAc,IAAM,ECNpC,KAAQ,EACZ,cACA,cAAW,IACX,YACA,YAAS,IACT,QACA,GAAG,QACwB;CAC3B,IAAM,EAAE,YAAS,uBAAoB,GAAe;AAYpD,QACE,kBAAC,UAAD;EACO;EACL,wBAAqB;EACrB,WAAW,EACT,GACA,gCACA,IAAS,iCAAiC,4BAC1C,iEACA,2CACA,IAAkB,uBAAuB,sBAC1C;EACS;EACV,UAvBsD,MAAS;AAKjE,GAJI,KACF,EAAQ,EAAM,EAGZ,KACF,GAAS;;EAkBT,MAAK;EACL,GAAI;YAEJ,kBAAC,GAAD;GAAM,MAAK;aACT,kBAAC,GAAD,EAAiB,CAAA;GACZ,CAAA;EACA,CAAA;GAIA,IAAmB,OAAO,OAAO,GAAM,EAClD,IAAI,eACL,CAAC;AAEF,EAAK,cAAc;;;AC5DnB,IAAa,IAAmB,EAAI,CAAC,8BAA8B,EAAE,EACnE,UAAU;CAIR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,OAAO;EACR;CAID,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,OAAO;EACR;CACF,EACF,CAAC,ECEW,KAAc,EACzB,cACA,UAAU,GACV,OAAO,GACP,UAAU,GACV,UAAU,GACV,YACA,KAAK,GACL,GAAG,QACqC;CACxC,IAAM,KAAgB,MACb,IAAW,EAAQ,KAA8B,KAAK,IAGzD,KAAe,GAAG,MACf,EAAS,MAAK,MAAS,EAAO,SAAS,EAAa,EAAM,IAAI,GAAG,CAAC,EAGrE,IAAW,EAAS,QAAQ,EAAa,CAAC,OAAO,EAAe,EAChE,IAAQ,EAAY,QAAQ,EAG5B,IAAQ,GAAO,SAAS,EAAE,EAE1B,IAAW,EAAyB,KAAM,EAC1C,IAAa,EAAO,EAAQ,EAC5B,IAAM,EAA+B,GAAO,KAAK,EAAS,EAC1D,CAAC,GAAO,KAAY,EACxB,EAAM,OACN,EAAM,cACN,EAAM,cACP,EAGK,IAAQ,GAAqB,EAC7B,IAAQ,EAAM,SAAS,GACvB,IAAW,EAAM,YAAY,CAAC,CAAC,GAC/B,IAAW,EAAM,YAAY,CAAC,CAAC,GAG/B,IAAe,EAAY,eAAe,EAC1C,IAAc,EAAY,cAAc,EACxC,IAAc,EAAY,cAAc,EACxC,IAAe,EAAY,eAAe,EAC1C,IAAgB,EAAY,gBAAgB,EAG5C,IAAkB,CAAC,CAAC,GACpB,IAAmB,CAAC,CAAC,GACrB,IAAiB,CAAC,CAAC,GACnB,IAAkB,CAAC,CAAC,GACpB,IAAiB,CAAC,CAAC,KAAS,CAAC,CAAC,KAAe,CAAC,KAAY,CAAC,GAE3D,KAAqD,MAAS;AAKlE,EAJI,EAAM,YACR,EAAM,SAAS,EAAM,EAGvB,EAAS,EAAM,OAAO,MAAM;IAGxB,IAAc,QAAkB;AAOpC,EANI,EAAW,WACb,EAAW,SAAS,EAGtB,EAAS,GAAG,EAEZ,EAAS,QAAQ,OAAO;IACvB,CAAC,EAAS,CAAC,EAER,IAAU,SACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;EACV,GACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,SAAgB;AACd,IAAW,UAAU;IACpB,CAAC,EAAQ,CAAC;CAKb,IAAM,IAAgB,EAAS,SAAS;AAExC,QACE,kBAAC,GAAD;EAAmB,OAAO;YACxB,kBAAC,OAAD;GACE,wBAAqB;GACrB,KAAK;GACL,WAAW,EAAiB;IAAE;IAAU;IAAU;IAAW,CAAC;GAC9D,GAAI;aAJN;IAMG,KAAmB;IAEpB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,EAAa,GAAO;OAClB,OAAO,KAAS,KAAiB;OACjC;OACA,cAAc,KAAA;OACd,UAAU;OACX,CAAC;MAEH;MAEA,KAAkB;MAElB;MACG;;IAEL,KAAoB;IACjB;;EACY,CAAA;;AAIxB,EAAW,cAAc;;;AC5KzB,IAAa,IAAmB,EAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EAIR,SAAS,EAAE,OAAO;GAAC;GAAQ;GAAgB;GAAQ,EAAE;EACrD,QAAQ;GACN,SAAS;GACT,OAAO;GACP,OAAO;GACP,SAAS;GACV;EAID,UAAU,EACR,MAAM,CAAC,sCAAsC,EAC9C;EAID,UAAU,EACR,MAAM,CAAC,sBAAsB,EAC9B;EAID,QAAQ;GACN,MAAM;GACN,OAAO;GACP,QAAQ;GACT;EACF;CACD,kBAAkB;EAChB;GACE,UAAU;GACV,UAAU;GACV,QAAQ;GACR,OAAO,CAAC,cAAc,kBAAkB;GACzC;EACD;GACE,UAAU;GACV,QAAQ;GACR,OAAO,CAAC,wBAAwB;GACjC;EACD;GACE,UAAU;GACV,QAAQ,CAAC,SAAS,SAAS;GAC3B,OAAO,CAAC,gBAAgB;GACzB;EACF;CACD,iBAAiB,EACf,QAAQ,WACT;CACF,CACF,ECvDY,KAAc,EACzB,SAAS,GACT,cACA,aACA,QACA,GAAG,QACqC;CACxC,IAAM,EAAE,UAAO,aAAU,gBAAa,GAAe,EAE/C,IAAY,OAAO,KAAa,UAChC,IAAU,CAAC,EAAE,MAAoB,IACjC,IAAQ,IAAY,IAAW,EAAS,KAAK,EAAS;AAW5D,QACE,kBAXgB,KAAW,CAAC,IAAY,IAAO,OAW/C;EACO;EACL,wBAAqB;EACrB,WAAW,EAAiB;GAC1B;GACA,QAAQ;GACR;GACA;GACA;GACA,QAjBA,IAAkB,SAEf,IAAU,UAAU;GAgBxB,CAAC;EACF,GAAK,KAAY,EAAE,UAAU,IAAI;EACjC,GAAI;YAEH;EACS,CAAA;;AAIhB,EAAW,cAAc;;;ACxCzB,IAAM,KAAQ,EAAE,cAAW,QAAK,GAAG,QAAqC;CACtE,IAAM,EAAE,aAAU,gBAAa,GAAe;AAG9C,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,gBAHF,KAAY,IAGmB,wBAAwB,KAAK;YAC3E,kBAAC,GAAD;GACO;GACL,WAAW,EAAG,GAAW,sCAAsC;GAC/D,GAAI;GACJ,CAAA;EACE,CAAA;GAIG,IAAoB,OAAO,OAAO,GAAM,EACnD,IAAI,gBACL,CAAC;AAEF,EAAK,cAAc;;;ACzBnB,IAAa,KAAa,EAAE,cAAW,WAAQ,aAAU,GAAG,QAA6B;CACvF,IAAM,EAAE,aAAU,gBAAa,GAAe;AAG9C,QACE,kBAAC,GAAD;EACE,wBAAqB;EACb;EACR,WAAW,EACT,GACA,oFACA,IAAS,KAAA,IAAY,6CATR,KAAY,IAUZ,kBAAkB,KAAA,EAChC;EACD,GAAI;EAEH;EACI,CAAA;;AAIX,EAAU,cAAc;;;ACrBxB,IAAa,KAAoB,EAAE,cAAW,GAAG,QAC/C,kBAAC,GAAD;CAAW,WAAW,EAAG,GAAW,sBAAsB;CAAE,GAAI;CAAU,CAAA;AAG5E,EAAiB,KAAK,eACtB,EAAiB,cAAc;;;ACD/B,IAAM,KAAQ,EAAE,cAAW,QAAK,GAAG,QAAsC;CACvE,IAAM,EAAE,aAAU,gBAAa,GAAe;AAG9C,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,gBAHF,KAAY,IAGmB,wBAAwB,KAAK;YAC3E,kBAAC,GAAD;GACO;GACL,WAAW,EAAG,GAAW,sCAAsC;GAC/D,GAAI;GACJ,CAAA;EACE,CAAA;GAIG,IAAqB,OAAO,OAAO,GAAM,EACpD,IAAI,iBACL,CAAC;AAEF,EAAK,cAAc;;;ACvBnB,IAAa,KAAqB,EAAE,cAAW,GAAG,QAChD,kBAAC,GAAD;CAAW,WAAW,EAAG,GAAW,uBAAuB;CAAE,GAAI;CAAU,CAAA;AAG7E,EAAkB,KAAK,gBACvB,EAAkB,cAAc;;;ACVhC,IAAa,IAAc,EACzB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EAIR,SAAS;GACP,MAAM,CAAC,cAAc;GACrB,OAAO,CAAC,UAAU;GACnB;EAID,QAAQ;GACN,SAAS,CAAC,kBAAkB,oCAAoC;GAChE,SAAS,CAAC,yBAAyB;GACnC,OAAO,CAAC,uBAAuB;GAC/B,OAAO,CAAC,uBAAuB;GAChC;EAID,iBAAiB;GACf,MAAM,CAAC,cAAc;GACrB,OAAO,CAAC,kBAAkB;GAC3B;EAID,kBAAkB;GAChB,MAAM,CAAC,cAAc;GACrB,OAAO,CAAC,kBAAkB;GAC3B;EAID,gBAAgB;GACd,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EAID,iBAAiB,EAAE,MAAM,IAAI;EAI7B,gBAAgB,EAAE,MAAM,IAAI;EAC7B;CACD,kBAAkB;EAChB;GACE,iBAAiB;GACjB,gBAAgB;GAChB,OAAO;GACR;EACD;GACE,iBAAiB;GACjB,gBAAgB;GAChB,OAAO;GACR;EACD;GACE,iBAAiB;GACjB,gBAAgB;GAChB,OAAO;GACR;EACD;GACE,iBAAiB;GACjB,gBAAgB;GAChB,OAAO;GACR;EACF;CACD,iBAAiB,EACf,QAAQ,WACT;CACF,CACF,EC7EK,KAAQ,EACZ,cACA,aAAU,IACV,kBACA,aACA,cACA,UAAU,GACV,UAAU,GACV,QACA,GAAG,QACa;CAChB,IAAM,IAAQ,GAAqB,EAC7B,IAAQ,GAAe,EAEvB,EAAE,OAAI,SAAM,cAAW,eAAY,mBAAgB,GACnD,EACJ,oBACA,qBACA,mBACA,oBACA,mBACA,eACE,GACE,IAAY,IAAU,IAAO,SAC7B,IAAQ,EAAM,SAAS,EAAM,OAC7B,IAAW,EAAM,YAAY,EAAM,YAAY,GAC/C,IAAW,EAAM,YAAY,EAAM,YAAY;AAsBrD,QACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACD;EACE;EACN,WAAW,EAAY;GACrB;GACA;GACA,QAAQ;GACR,iBAAiB,CAAC,CAAC;GACnB,kBAAkB,CAAC,CAAC;GACpB,gBAAgB,CAAC,CAAC;GAClB,iBAAiB,CAAC,CAAC;GACnB,gBAAgB,CAAC,CAAC;GACnB,CAAC;EACQ;EACA;EACV,UAAU;EACV,oBAAkB;EAClB,gBAAc;EACd,WAzCuD,MAAS;AAKlE,GAJI,KACF,EAAS,EAAM,EAGb,KACF,EAAc,EAAM,OAAO,MAAM;;EAoCjC,YAhC0D,MAAS;AAKrE,GAJI,KACF,EAAU,EAAM,EAGd,KAAkB,KAAW,EAAM,QAAQ,YAC7C,GAAS;;EA2BT,GAAI;EACJ,CAAA;GAOO,IAAQ,OAAO,OAAO,GAAM,EACvC,IAAI,SACL,CAAC;AAEF,EAAK,cAAc;;;ACrFnB,IAAa,IAMT,OAAO,OAAO,GAAM;CACtB,cAAc;CACd,eAAe;CACf,aAAa;CACb,cAAc;CACd,aAAa;CACd,CAAC;AAEF,EAAW,cAAc,cACzB,EAAkB,cAAc,2BAChC,EAAmB,cAAc,4BACjC,EAAiB,cAAc,0BAC/B,EAAkB,cAAc,2BAChC,EAAiB,cAAc"}

package/dist/input-DIGSkxbh.js

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

package/dist/input-DIGSkxbh.js.map

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