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

package/dist/carousel/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-CYz_Fitz.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`),o=require(`@spark-ui/icons/ArrowVerticalLeft`);function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x.Provider,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-jcPwRD21.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`),o=require(`@spark-ui/icons/ArrowVerticalLeft`);function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x.Provider,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
 //# sourceMappingURL=index.js.map

package/dist/carousel/index.mjs

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { t } from "../icon-button-DpucUC_L.mjs";
+import { t } from "../icon-button-C3RgGf2o.mjs";
 import { cx as n } from "class-variance-authority";
 import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g } from "react/jsx-runtime";

package/dist/circular-meter/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,e.cva)([`focus-visible:u-outline gap-md flex items-center`],{variants:{orientation:{vertical:[`default:flex-col`],horizontal:[`default:flex-row`]}},defaultVariants:{orientation:`vertical`}}),o=(0,t.createContext)(null),s=`:circular-meter`,c=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useCircularMeter must be used within a CircularMeter provider`);return e},l={sm:{diameter:24,strokeWidth:4},md:{diameter:64,strokeWidth:8},lg:{diameter:96,strokeWidth:8},xl:{diameter:128,strokeWidth:8}},u=({className:r,value:s,max:c=100,min:u=0,size:d=`lg`,intent:f=`support`,orientation:p=`vertical`,children:m,ref:h,...g})=>{let[_,v]=(0,t.useState)(),{diameter:y,strokeWidth:b}=l[d],x=y/2-b/2,S=2*Math.PI*x,C=(0,t.useMemo)(()=>({value:s??0,max:c,min:u,intent:f,onLabelId:v,sizeProp:d,orientation:p,size:y,radius:x,circumference:S,strokeWidth:b}),[c,u,s,f,v,d,p,y,x,S,b]);return(0,n.jsx)(o.Provider,{value:C,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`circular-meter`,ref:h,className:(0,e.cx)(a({orientation:p}),r),style:g.style,value:s,max:c,min:u,"aria-labelledby":_,...g,children:m})})};u.displayName=`CircularMeter`;var d=({className:t,children:r,...i})=>{let{orientation:a}=c();return(0,n.jsx)(`div`,{"data-spark-component":`circular-meter-content`,className:(0,e.cx)(`gap-xs flex default:flex-col`,a===`vertical`&&`default:text-center`,t),...i,children:r})};d.displayName=`CircularMeter.Content`;function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=(0,t.createContext)(!1),m=()=>(0,t.useContext)(p),h=(0,e.cva)([],{variants:{intent:{main:[`text-main/dim-4`],support:[`text-support/dim-4`],success:[`text-success/dim-4`],alert:[`text-alert/dim-4`],danger:[`text-error/dim-4`],info:[`text-info/dim-4`]}}}),g=(0,e.cva)([],{variants:{intent:{main:[`text-main`],support:[`text-support`],success:[`text-success`],alert:[`text-alert`],danger:[`text-error`],info:[`text-info`]}}}),_=({className:r,children:a,...o})=>{let{value:s,max:l,min:u,intent:d,size:m,radius:_,circumference:v,strokeWidth:y}=c(),b=v-(s-u)/(l-u)*100/100*v,x=g({intent:d}),S=(0,t.useRef)(null),[C,w]=(0,t.useState)(!1);return f(S,()=>{w(!0)}),(0,n.jsx)(i.Meter.Track,{"data-spark-component":`circular-meter-track`,className:r,...o,children:(0,n.jsx)(p.Provider,{value:!0,children:(0,n.jsxs)(`svg`,{ref:S,width:m,height:m,viewBox:`0 0 ${m} ${m}`,children:[(0,n.jsxs)(`g`,{style:{transform:`rotate(-90deg)`,transformOrigin:`center`},children:[(0,n.jsx)(`circle`,{cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,className:h({intent:d})}),(0,n.jsx)(`circle`,{"data-spark-component":`circular-meter-indicator`,cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,strokeLinecap:`round`,className:(0,e.cx)(x,`ease-standard transition-[stroke-dashoffset] duration-700`,`motion-reduce:transition-none`),style:{strokeDasharray:v,strokeDashoffset:C?b:v}})]}),a&&(0,n.jsx)(`foreignObject`,{x:8,y:8,width:m-16,height:m-16,children:(0,n.jsx)(`div`,{className:`p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center`,style:{width:m-16,height:m-16},children:a})})]})})})};_.displayName=`CircularMeter.Track`;var v=(0,e.cva)([],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[`default:text-on-surface/dim-1`],false:[`default:text-on-surface`]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-small`},{size:`md`,inside:!0,class:`default:text-small `},{size:`lg`,inside:!0,class:`default:text-caption`},{size:`xl`,inside:!0,class:`default:text-body-2`},{size:`sm`,inside:!1,class:`default:text-body-1`},{size:`md`,inside:!1,class:`default:text-body-1`},{size:`lg`,inside:!1,class:`default:text-body-1`},{size:`xl`,inside:!1,class:`default:text-body-1`}],defaultVariants:{size:`lg`,inside:!0}}),y=({id:e,children:a,className:o,ref:l,...u})=>{let d=`${s}-label-${(0,t.useId)()}`,f=e||d,{onLabelId:p,sizeProp:h}=c(),g=m(),_=(0,r.useMergeRefs)(l,(0,t.useCallback)(e=>{p(e?f:void 0)},[f,p]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`circular-meter-label`,id:f,className:v({size:h,inside:g,className:o}),ref:_,...u,children:a})};y.displayName=`CircularMeter.Label`;var b=(0,e.cva)([`default:text-on-surface default:font-bold`],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[],false:[]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-body-2 default:font-bold`},{size:`md`,inside:!0,class:`default:text-body-2 default:font-bold`},{size:`lg`,inside:!0,class:`default:text-body-1 default:font-bold`},{size:`xl`,inside:!0,class:`default:text-display-3`},{size:`sm`,inside:!1,class:`default:text-body-1 default:font-bold`},{size:`md`,inside:!1,class:`default:text-headline-2`},{size:`lg`,inside:!1,class:`default:text-headline-2`},{size:`xl`,inside:!1,class:`default:text-display-3`}],defaultVariants:{size:`lg`,inside:!0}}),x=({className:e,children:t,...r})=>{let{sizeProp:a}=c(),o=m();return(0,n.jsx)(i.Meter.Value,{"data-spark-component":`circular-meter-value`,className:b({size:a,inside:o,className:e}),...r,children:t})};x.displayName=`CircularMeter.Value`;var S=Object.assign(u,{Content:d,Label:y,Track:_,Value:x});S.displayName=`CircularMeter`,d.displayName=`CircularMeter.Content`,y.displayName=`CircularMeter.Label`,_.displayName=`CircularMeter.Track`,x.displayName=`CircularMeter.Value`,exports.CircularMeter=S;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,e.cva)([`focus-visible:u-outline gap-md flex items-center`],{variants:{orientation:{vertical:[`default:flex-col`],horizontal:[`default:flex-row`]}},defaultVariants:{orientation:`vertical`}}),o=(0,t.createContext)(null),s=`:circular-meter`,c=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useCircularMeter must be used within a CircularMeter provider`);return e},l={sm:{diameter:24,strokeWidth:4},md:{diameter:64,strokeWidth:8},lg:{diameter:96,strokeWidth:8},xl:{diameter:128,strokeWidth:8}},u=({className:r,value:s,max:c=100,min:u=0,size:d=`lg`,intent:f=`support`,orientation:p=`vertical`,children:m,ref:h,...g})=>{let[_,v]=(0,t.useState)(),{diameter:y,strokeWidth:b}=l[d],x=y/2-b/2,S=2*Math.PI*x,C=(0,t.useMemo)(()=>({value:s??0,max:c,min:u,intent:f,onLabelId:v,sizeProp:d,orientation:p,size:y,radius:x,circumference:S,strokeWidth:b}),[c,u,s,f,v,d,p,y,x,S,b]);return(0,n.jsx)(o.Provider,{value:C,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`circular-meter`,ref:h,className:(0,e.cx)(a({orientation:p}),r),style:g.style,value:s,max:c,min:u,"aria-labelledby":_,...g,children:m})})};u.displayName=`CircularMeter`;var d=({className:t,children:r,...i})=>{let{orientation:a}=c();return(0,n.jsx)(`div`,{"data-spark-component":`circular-meter-content`,className:(0,e.cx)(`gap-xs flex default:flex-col`,a===`vertical`&&`default:text-center`,t),...i,children:r})};d.displayName=`CircularMeter.Content`;function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=(0,t.createContext)(!1),m=()=>(0,t.useContext)(p),h=(0,e.cva)([],{variants:{intent:{main:[`text-main/dim-4`],support:[`text-support/dim-4`],success:[`text-success/dim-4`],alert:[`text-alert/dim-4`],danger:[`text-error/dim-4`],info:[`text-info/dim-4`]}}}),g=(0,e.cva)([],{variants:{intent:{main:[`text-main`],support:[`text-support`],success:[`text-success`],alert:[`text-alert`],danger:[`text-error`],info:[`text-info`]}}}),_=({className:r,children:a,...o})=>{let{value:s,max:l,min:u,intent:d,size:m,radius:_,circumference:v,strokeWidth:y}=c(),b=v-(s-u)/(l-u)*100/100*v,x=g({intent:d}),S=(0,t.useRef)(null),[C,w]=(0,t.useState)(!1);return f(S,()=>{w(!0)}),(0,n.jsx)(i.Meter.Track,{"data-spark-component":`circular-meter-track`,className:r,...o,children:(0,n.jsx)(p.Provider,{value:!0,children:(0,n.jsxs)(`svg`,{ref:S,width:m,height:m,viewBox:`0 0 ${m} ${m}`,children:[(0,n.jsxs)(`g`,{style:{transform:`rotate(-90deg)`,transformOrigin:`center`},children:[(0,n.jsx)(`circle`,{cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,className:h({intent:d})}),(0,n.jsx)(`circle`,{"data-spark-component":`circular-meter-indicator`,cx:m/2,cy:m/2,r:_,fill:`none`,stroke:`currentColor`,strokeWidth:y,strokeLinecap:`round`,className:(0,e.cx)(x,`ease-standard transition-[stroke-dashoffset] duration-700`,`motion-reduce:transition-none`),style:{strokeDasharray:v,strokeDashoffset:C?b:v}})]}),a&&(0,n.jsx)(`foreignObject`,{x:8,y:8,width:m-16,height:m-16,children:(0,n.jsx)(`div`,{className:`p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center`,style:{width:m-16,height:m-16},children:a})})]})})})};_.displayName=`CircularMeter.Track`;var v=(0,e.cva)([],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[`default:text-on-surface/dim-1`],false:[`default:text-on-surface`]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-small`},{size:`md`,inside:!0,class:`default:text-small `},{size:`lg`,inside:!0,class:`default:text-caption`},{size:`xl`,inside:!0,class:`default:text-body-2`},{size:`sm`,inside:!1,class:`default:text-body-1`},{size:`md`,inside:!1,class:`default:text-body-1`},{size:`lg`,inside:!1,class:`default:text-body-1`},{size:`xl`,inside:!1,class:`default:text-body-1`}],defaultVariants:{size:`lg`,inside:!0}}),y=({id:e,children:a,className:o,ref:l,...u})=>{let d=`${s}-label-${(0,t.useId)()}`,f=e||d,{onLabelId:p,sizeProp:h}=c(),g=m(),_=(0,r.useMergeRefs)(l,(0,t.useCallback)(e=>{p(e?f:void 0)},[f,p]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`circular-meter-label`,id:f,className:v({size:h,inside:g,className:o}),ref:_,...u,children:a})};y.displayName=`CircularMeter.Label`;var b=(0,e.cva)([`default:text-on-surface`],{variants:{size:{sm:``,md:``,lg:``,xl:``},inside:{true:[],false:[]}},compoundVariants:[{size:`sm`,inside:!0,class:`default:text-body-2-highlight`},{size:`md`,inside:!0,class:`default:text-body-2-highlight`},{size:`lg`,inside:!0,class:`default:text-body-1-highlight`},{size:`xl`,inside:!0,class:`default:text-display-3`},{size:`sm`,inside:!1,class:`default:text-body-1-highlight`},{size:`md`,inside:!1,class:`default:text-headline-2`},{size:`lg`,inside:!1,class:`default:text-headline-2`},{size:`xl`,inside:!1,class:`default:text-display-3`}],defaultVariants:{size:`lg`,inside:!0}}),x=({className:e,children:t,...r})=>{let{sizeProp:a}=c(),o=m();return(0,n.jsx)(i.Meter.Value,{"data-spark-component":`circular-meter-value`,className:b({size:a,inside:o,className:e}),...r,children:t})};x.displayName=`CircularMeter.Value`;var S=Object.assign(u,{Content:d,Label:y,Track:_,Value:x});S.displayName=`CircularMeter`,d.displayName=`CircularMeter.Content`,y.displayName=`CircularMeter.Label`,_.displayName=`CircularMeter.Track`,x.displayName=`CircularMeter.Value`,exports.CircularMeter=S;
 //# sourceMappingURL=index.js.map

package/dist/circular-meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext.Provider>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext.Provider value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext.Provider>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface default:font-bold'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'md', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'lg', inside: true, class: 'default:text-body-1 default:font-bold' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1 default:font-bold' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext.Provider>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext.Provider value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext.Provider>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'md', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'lg', inside: true, class: 'default:text-body-1-highlight' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1-highlight' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}

package/dist/circular-meter/index.mjs

@@ -273,7 +273,7 @@ var D = e([], {
 O.displayName = "CircularMeter.Label";
 //#endregion
 //#region src/circular-meter/CircularMeterValue.tsx
-var k = e(["default:text-on-surface default:font-bold"], {
+var k = e(["default:text-on-surface"], {
 	variants: {
 		size: {
 			sm: "",
@@ -290,17 +290,17 @@ var k = e(["default:text-on-surface default:font-bold"], {
 		{
 			size: "sm",
 			inside: !0,
-			class: "default:text-body-2 default:font-bold"
+			class: "default:text-body-2-highlight"
 		},
 		{
 			size: "md",
 			inside: !0,
-			class: "default:text-body-2 default:font-bold"
+			class: "default:text-body-2-highlight"
 		},
 		{
 			size: "lg",
 			inside: !0,
-			class: "default:text-body-1 default:font-bold"
+			class: "default:text-body-1-highlight"
 		},
 		{
 			size: "xl",
@@ -310,7 +310,7 @@ var k = e(["default:text-on-surface default:font-bold"], {
 		{
 			size: "sm",
 			inside: !1,
-			class: "default:text-body-1 default:font-bold"
+			class: "default:text-body-1-highlight"
 		},
 		{
 			size: "md",

package/dist/circular-meter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext.Provider>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext.Provider value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext.Provider>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface default:font-bold'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'md', inside: true, class: 'default:text-body-2 default:font-bold' },\n    { size: 'lg', inside: true, class: 'default:text-body-1 default:font-bold' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1 default:font-bold' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/circular-meter/CircularMeter.styles.ts","../../src/circular-meter/CircularMeterContext.tsx","../../src/circular-meter/CircularMeter.tsx","../../src/circular-meter/CircularMeterContent.tsx","../../src/circular-meter/useIntersectionAnimation.ts","../../src/circular-meter/CircularMeterTrack.tsx","../../src/circular-meter/CircularMeterLabel.tsx","../../src/circular-meter/CircularMeterValue.tsx","../../src/circular-meter/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const circularMeterStyles = cva(['focus-visible:u-outline gap-md flex items-center'], {\n  variants: {\n    orientation: {\n      vertical: ['default:flex-col'],\n      horizontal: ['default:flex-row'],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport type CircularMeterStylesProps = VariantProps<typeof circularMeterStyles>\n","import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { CircularMeterSize } from './CircularMeter'\n\nexport interface CircularMeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  /**\n   * Size variant of the circular meter.\n   */\n  sizeProp: CircularMeterSize\n  /**\n   * Orientation of the circular meter.\n   */\n  orientation: 'vertical' | 'horizontal'\n  /**\n   * Diameter of the SVG circle in pixels.\n   */\n  size: number\n  /**\n   * Radius of the SVG circle in pixels.\n   */\n  radius: number\n  /**\n   * Circumference of the SVG circle in pixels.\n   */\n  circumference: number\n  /**\n   * Stroke width of the SVG circle in pixels.\n   */\n  strokeWidth: number\n}\n\nexport const CircularMeterContext = createContext<CircularMeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':circular-meter'\n\nexport const useCircularMeter = () => {\n  const context = useContext(CircularMeterContext)\n\n  if (!context) {\n    throw new Error('useCircularMeter must be used within a CircularMeter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterIndicatorStylesProps } from '../meter/MeterTrack.styles'\nimport { circularMeterStyles, CircularMeterStylesProps } from './CircularMeter.styles'\nimport { CircularMeterContext } from './CircularMeterContext'\n\nexport type CircularMeterSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst CIRCULAR_METER_SIZE_CONFIG: Record<\n  CircularMeterSize,\n  { diameter: number; strokeWidth: number }\n> = {\n  sm: { diameter: 24, strokeWidth: 4 },\n  md: { diameter: 64, strokeWidth: 8 },\n  lg: { diameter: 96, strokeWidth: 8 },\n  xl: { diameter: 128, strokeWidth: 8 },\n}\n\nexport interface CircularMeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'>,\n    CircularMeterStylesProps {\n  /**\n   * Size of the circle.\n   *\n   * - `sm`: 24px diameter, 4px stroke width\n   * - `md`: 64px diameter, 8px stroke width\n   * - `lg`: 96px diameter, 8px stroke width\n   * - `xl`: 128px diameter, 8px stroke width\n   *\n   * Defaults to `md`.\n   */\n  size?: CircularMeterSize\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Orientation of the circular meter.\n   *\n   * - `vertical`: Elements are stacked vertically (default)\n   * - `horizontal`: Elements are arranged horizontally\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const CircularMeter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  size: sizeProp = 'lg',\n  intent = 'support',\n  orientation = 'vertical',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<CircularMeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const { diameter: size, strokeWidth } = CIRCULAR_METER_SIZE_CONFIG[sizeProp]\n\n  const radius = size / 2 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      onLabelId: setLabelId,\n      sizeProp,\n      orientation: orientation,\n      size,\n      radius,\n      circumference,\n      strokeWidth,\n    }\n  }, [\n    max,\n    min,\n    value,\n    intent,\n    setLabelId,\n    sizeProp,\n    orientation,\n    size,\n    radius,\n    circumference,\n    strokeWidth,\n  ])\n\n  return (\n    <CircularMeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"circular-meter\"\n        ref={ref}\n        className={cx(circularMeterStyles({ orientation }), className)}\n        style={others.style}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </CircularMeterContext.Provider>\n  )\n}\n\nCircularMeter.displayName = 'CircularMeter'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\n\nexport type CircularMeterContentProps = ComponentProps<'div'> & PropsWithChildren\n\nexport const CircularMeterContent = ({\n  className,\n  children,\n  ...others\n}: CircularMeterContentProps) => {\n  const { orientation } = useCircularMeter()\n\n  return (\n    <div\n      data-spark-component=\"circular-meter-content\"\n      className={cx(\n        'gap-xs flex default:flex-col',\n        orientation === 'vertical' && 'default:text-center',\n        className\n      )}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nCircularMeterContent.displayName = 'CircularMeter.Content'\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva, cx } from 'class-variance-authority'\nimport {\n  ComponentProps,\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nconst CircularMeterTrackContext = createContext<boolean>(false)\n\nexport const useCircularMeterTrack = () => {\n  return useContext(CircularMeterTrackContext)\n}\n\nexport type CircularMeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'> &\n  PropsWithChildren\n\nconst circularMeterTrackStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main/dim-4'],\n      support: ['text-support/dim-4'],\n      success: ['text-success/dim-4'],\n      alert: ['text-alert/dim-4'],\n      danger: ['text-error/dim-4'],\n      info: ['text-info/dim-4'],\n    },\n  },\n})\n\nconst circularMeterIndicatorStyles = cva([], {\n  variants: {\n    intent: {\n      main: ['text-main'],\n      support: ['text-support'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      danger: ['text-error'],\n      info: ['text-info'],\n    },\n  },\n})\n\nexport const CircularMeterTrack = ({ className, children, ...others }: CircularMeterTrackProps) => {\n  const { value, max, min, intent, size, radius, circumference, strokeWidth } = useCircularMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const offset = circumference - (percentage / 100) * circumference\n\n  const intentClasses = circularMeterIndicatorStyles({ intent })\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(svgRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track data-spark-component=\"circular-meter-track\" className={className} {...others}>\n      <CircularMeterTrackContext.Provider value={true}>\n        <svg ref={svgRef} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n          <g style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}>\n            <circle\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              className={circularMeterTrackStyles({ intent })}\n            />\n            <circle\n              data-spark-component=\"circular-meter-indicator\"\n              cx={size / 2}\n              cy={size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              className={cx(\n                intentClasses,\n                'ease-standard transition-[stroke-dashoffset] duration-700',\n                'motion-reduce:transition-none'\n              )}\n              style={\n                {\n                  strokeDasharray: circumference,\n                  // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes\n                  strokeDashoffset: hasAnimated ? offset : circumference,\n                } as React.CSSProperties\n              }\n            />\n          </g>\n          {children && (\n            <foreignObject x={8} y={8} width={size - 16} height={size - 16}>\n              <div\n                className=\"p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center\"\n                style={{ width: size - 16, height: size - 16 }}\n              >\n                {children}\n              </div>\n            </foreignObject>\n          )}\n        </svg>\n      </CircularMeterTrackContext.Provider>\n    </BaseMeter.Track>\n  )\n}\n\nCircularMeterTrack.displayName = 'CircularMeter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nconst labelStyles = cva([], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: ['default:text-on-surface/dim-1'],\n      false: ['default:text-on-surface'],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-small' },\n    { size: 'md', inside: true, class: 'default:text-small ' },\n    { size: 'lg', inside: true, class: 'default:text-caption' },\n    { size: 'xl', inside: true, class: 'default:text-body-2' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1' },\n    { size: 'md', inside: false, class: 'default:text-body-1' },\n    { size: 'lg', inside: false, class: 'default:text-body-1' },\n    { size: 'xl', inside: false, class: 'default:text-body-1' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterLabel = ({\n  id: idProp,\n  children,\n  className,\n  ref: forwardedRef,\n  ...others\n}: CircularMeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId, sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"circular-meter-label\"\n      id={id}\n      className={labelStyles({ size: sizeProp, inside: isInside, className })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nCircularMeterLabel.displayName = 'CircularMeter.Label'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useCircularMeter } from './CircularMeterContext'\nimport { useCircularMeterTrack } from './CircularMeterTrack'\n\nexport type CircularMeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nconst valueStyles = cva(['default:text-on-surface'], {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n    inside: {\n      true: [],\n      false: [],\n    },\n  },\n  compoundVariants: [\n    // Inside the track\n    { size: 'sm', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'md', inside: true, class: 'default:text-body-2-highlight' },\n    { size: 'lg', inside: true, class: 'default:text-body-1-highlight' },\n    { size: 'xl', inside: true, class: 'default:text-display-3' },\n    // Outside the track\n    { size: 'sm', inside: false, class: 'default:text-body-1-highlight' },\n    { size: 'md', inside: false, class: 'default:text-headline-2' },\n    { size: 'lg', inside: false, class: 'default:text-headline-2' },\n    { size: 'xl', inside: false, class: 'default:text-display-3' },\n  ],\n  defaultVariants: {\n    size: 'lg',\n    inside: true,\n  },\n})\n\nexport const CircularMeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<CircularMeterValueProps>) => {\n  const { sizeProp } = useCircularMeter()\n  const isInside = useCircularMeterTrack()\n\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"circular-meter-value\"\n      className={valueStyles({ size: sizeProp, inside: isInside, className })}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nCircularMeterValue.displayName = 'CircularMeter.Value'\n","import { CircularMeter as Root } from './CircularMeter'\nimport { CircularMeterContent } from './CircularMeterContent'\nimport { CircularMeterLabel } from './CircularMeterLabel'\nimport { CircularMeterTrack } from './CircularMeterTrack'\nimport { CircularMeterValue } from './CircularMeterValue'\n\n/**\n * A circular progress indicator that displays a value within a defined range.\n */\nexport const CircularMeter: typeof Root & {\n  Content: typeof CircularMeterContent\n  Label: typeof CircularMeterLabel\n  Track: typeof CircularMeterTrack\n  Value: typeof CircularMeterValue\n} = Object.assign(Root, {\n  Content: CircularMeterContent,\n  Label: CircularMeterLabel,\n  Track: CircularMeterTrack,\n  Value: CircularMeterValue,\n})\n\nCircularMeter.displayName = 'CircularMeter'\nCircularMeterContent.displayName = 'CircularMeter.Content'\nCircularMeterLabel.displayName = 'CircularMeter.Label'\nCircularMeterTrack.displayName = 'CircularMeter.Track'\nCircularMeterValue.displayName = 'CircularMeter.Value'\n\nexport { type CircularMeterProps } from './CircularMeter'\nexport { type CircularMeterContentProps } from './CircularMeterContent'\nexport { type CircularMeterLabelProps } from './CircularMeterLabel'\nexport { type CircularMeterTrackProps } from './CircularMeterTrack'\nexport { type CircularMeterValueProps } from './CircularMeterValue'\n"],"mappings":"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"}

package/dist/combobox/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../spinner-DFUoYvmm.js`),r=require(`../icon-button-CYz_Fitz.js`),i=require(`../popover-CrKp_TKk.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/ArrowHorizontalDown`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/components/form-field`),d=require(`@spark-ui/icons/Check`),f=require(`@spark-ui/hooks/use-combined-state`),p=require(`downshift`),m=require(`@spark-ui/icons/DeleteOutline`);function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{A(e),L&&V(D(R,e||``))},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E.Provider,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F.Provider,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B.Provider,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=c.hasPopover?c.isOpen:!0,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-lg px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../spinner-DFUoYvmm.js`),r=require(`../icon-button-jcPwRD21.js`),i=require(`../popover-ayPbAw59.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/ArrowHorizontalDown`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/components/form-field`),d=require(`@spark-ui/icons/Check`),f=require(`@spark-ui/hooks/use-combined-state`),p=require(`downshift`),m=require(`@spark-ui/icons/DeleteOutline`);function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{A(e),L&&V(D(R,e||``))},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E.Provider,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F.Provider,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B.Provider,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=c.hasPopover?c.isOpen:!0,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-lg px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
 //# sourceMappingURL=index.js.map

package/dist/combobox/index.mjs

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

package/dist/dialog/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(`../DialogContent.styles-CAhJtUud.js`),n=require(`../icon-button-CYz_Fitz.js`),r=require(`../useRenderSlot-C4UVWhDN.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/hooks/use-scroll-overflow`),l=require(`@spark-ui/icons/Close`),u=require(`@base-ui/react/dialog`);var d=(0,a.createContext)(null),f=({children:e,withFade:t=!1})=>{let[n,r]=(0,a.useState)(!1);return(0,o.jsx)(d.Provider,{value:{isFullScreen:n,setIsFullScreen:r,withFade:t},children:e})},p=()=>{let e=(0,a.useContext)(d);if(!e)throw Error(`useDialog must be used within a Dialog provider`);return e},m=({withFade:e=!1,onOpenChange:t,...n})=>{let r=t?(e,n)=>{t(e)}:void 0;return(0,o.jsx)(f,{withFade:e,children:(0,o.jsx)(u.Dialog.Root,{"data-spark-component":`dialog`,onOpenChange:r,...n})})};m.createHandle=u.Dialog.createHandle,m.displayName=`Dialog.Root`;var h=({children:e,className:t,inset:n=!1,ref:r,...l})=>{let u=(0,a.useRef)(null),d=(0,s.useMergeRefs)(r,u),{withFade:f}=p(),{overflow:m}=(0,c.useScrollOverflow)(u);return(0,o.jsx)(`div`,{"data-spark-component":`dialog-body`,ref:d,className:(0,i.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!n},t),style:{...f&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};h.displayName=`Dialog.Body`;var g=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Close,{"data-spark-component":`dialog-close`,render:n,...t})},_=({"aria-label":t,className:r,size:a=`md`,intent:s=`neutral`,design:c=`ghost`,children:u=(0,o.jsx)(l.Close,{}),ref:d,...f})=>(0,o.jsx)(g,{"data-spark-component":`dialog-close-button`,"data-part":`close`,ref:d,className:(0,i.cx)([`absolute`,`top-md`,`right-xl`],r),asChild:!0,...f,children:(0,o.jsx)(n.t,{intent:s,size:a,design:c,"aria-label":t,children:(0,o.jsx)(e.t,{children:u})})}),v=Object.assign(_,{id:`CloseButton`});_.displayName=`Dialog.CloseButton`;var y=({className:e,isNarrow:n=!1,size:r=`md`,ref:s,...c})=>{let{setIsFullScreen:l}=p();return(0,a.useEffect)(()=>(r===`fullscreen`&&l(!0),()=>l(!1)),[l,r]),(0,o.jsx)(u.Dialog.Popup,{ref:s,"data-spark-component":`dialog-content`,role:`dialog`,className:a=>(0,i.cx)(t.t({isNarrow:n,size:r,className:typeof e==`function`?e(a):e})),...c})};y.displayName=`Dialog.Content`;var b=e=>(0,o.jsx)(u.Dialog.Description,{"data-spark-component":`dialog-description`,...e});b.displayName=`Dialog.Description`;var x=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`footer`,{"data-spark-component":`dialog-footer`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});x.displayName=`Dialog.Footer`;var S=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`header`,{"data-spark-component":`dialog-header`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,o.jsx)(u.Dialog.Backdrop,{"data-spark-component":`dialog-overlay`,className:t=>(0,i.cx)(`z-overlay size-screen fixed inset-0`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Dialog.Overlay`;var w=({className:e,...t})=>(0,o.jsx)(u.Dialog.Portal,{"data-spark-component":`dialog-portal`,className:(0,i.cx)(e,`z-modal absolute`),...t});w.displayName=`Dialog.Portal`;var T=({className:e,ref:t,...n})=>(0,o.jsx)(u.Dialog.Title,{"data-spark-component":`dialog-title`,ref:t,className:(0,i.cx)(`text-headline-1 text-on-surface`,`group-has-data-[part=close]:pr-3xl`,e),...n});T.displayName=`Dialog.Title`;var E=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Trigger,{"data-spark-component":`dialog-trigger`,render:n,...t})};E.displayName=`Dialog.Trigger`;var D=Object.assign(m,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:v,Title:T,Description:b});D.displayName=`Dialog`,exports.Dialog=D;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../DialogContent.styles-CAhJtUud.js`),n=require(`../icon-button-jcPwRD21.js`),r=require(`../useRenderSlot-C4UVWhDN.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/hooks/use-scroll-overflow`),l=require(`@spark-ui/icons/Close`),u=require(`@base-ui/react/dialog`);var d=(0,a.createContext)(null),f=({children:e,withFade:t=!1})=>{let[n,r]=(0,a.useState)(!1);return(0,o.jsx)(d.Provider,{value:{isFullScreen:n,setIsFullScreen:r,withFade:t},children:e})},p=()=>{let e=(0,a.useContext)(d);if(!e)throw Error(`useDialog must be used within a Dialog provider`);return e},m=({withFade:e=!1,onOpenChange:t,...n})=>{let r=t?(e,n)=>{t(e)}:void 0;return(0,o.jsx)(f,{withFade:e,children:(0,o.jsx)(u.Dialog.Root,{"data-spark-component":`dialog`,onOpenChange:r,...n})})};m.createHandle=u.Dialog.createHandle,m.displayName=`Dialog.Root`;var h=({children:e,className:t,inset:n=!1,ref:r,...l})=>{let u=(0,a.useRef)(null),d=(0,s.useMergeRefs)(r,u),{withFade:f}=p(),{overflow:m}=(0,c.useScrollOverflow)(u);return(0,o.jsx)(`div`,{"data-spark-component":`dialog-body`,ref:d,className:(0,i.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!n},t),style:{...f&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};h.displayName=`Dialog.Body`;var g=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Close,{"data-spark-component":`dialog-close`,render:n,...t})},_=({"aria-label":t,className:r,size:a=`md`,intent:s=`neutral`,design:c=`ghost`,children:u=(0,o.jsx)(l.Close,{}),ref:d,...f})=>(0,o.jsx)(g,{"data-spark-component":`dialog-close-button`,"data-part":`close`,ref:d,className:(0,i.cx)([`absolute`,`top-md`,`right-xl`],r),asChild:!0,...f,children:(0,o.jsx)(n.t,{intent:s,size:a,design:c,"aria-label":t,children:(0,o.jsx)(e.t,{children:u})})}),v=Object.assign(_,{id:`CloseButton`});_.displayName=`Dialog.CloseButton`;var y=({className:e,isNarrow:n=!1,size:r=`md`,ref:s,...c})=>{let{setIsFullScreen:l}=p();return(0,a.useEffect)(()=>(r===`fullscreen`&&l(!0),()=>l(!1)),[l,r]),(0,o.jsx)(u.Dialog.Popup,{ref:s,"data-spark-component":`dialog-content`,role:`dialog`,className:a=>(0,i.cx)(t.t({isNarrow:n,size:r,className:typeof e==`function`?e(a):e})),...c})};y.displayName=`Dialog.Content`;var b=e=>(0,o.jsx)(u.Dialog.Description,{"data-spark-component":`dialog-description`,...e});b.displayName=`Dialog.Description`;var x=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`footer`,{"data-spark-component":`dialog-footer`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});x.displayName=`Dialog.Footer`;var S=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`header`,{"data-spark-component":`dialog-header`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,o.jsx)(u.Dialog.Backdrop,{"data-spark-component":`dialog-overlay`,className:t=>(0,i.cx)(`z-overlay size-screen fixed inset-0`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Dialog.Overlay`;var w=({className:e,...t})=>(0,o.jsx)(u.Dialog.Portal,{"data-spark-component":`dialog-portal`,className:(0,i.cx)(e,`z-modal absolute`),...t});w.displayName=`Dialog.Portal`;var T=({className:e,ref:t,...n})=>(0,o.jsx)(u.Dialog.Title,{"data-spark-component":`dialog-title`,ref:t,className:(0,i.cx)(`text-headline-1 text-on-surface`,`group-has-data-[part=close]:pr-3xl`,e),...n});T.displayName=`Dialog.Title`;var E=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Trigger,{"data-spark-component":`dialog-trigger`,render:n,...t})};E.displayName=`Dialog.Trigger`;var D=Object.assign(m,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:v,Title:T,Description:b});D.displayName=`Dialog`,exports.Dialog=D;
 //# sourceMappingURL=index.js.map

package/dist/dialog/index.mjs

@@ -1,6 +1,6 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
 import { t } from "../DialogContent.styles-BSxCCi-u.mjs";
-import { t as n } from "../icon-button-DpucUC_L.mjs";
+import { t as n } from "../icon-button-C3RgGf2o.mjs";
 import { t as r } from "../useRenderSlot-DKIwoqpO.mjs";
 import { cx as i } from "class-variance-authority";
 import { createContext as a, useContext as o, useEffect as s, useRef as c, useState as l } from "react";

package/dist/drawer/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-CYz_Fitz.js`),n=require(`../useRenderSlot-C4UVWhDN.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/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/dialog`);var u=(0,i.createContext)(null),d=({children:e,withFade:t=!1})=>(0,a.jsx)(u.Provider,{value:{withFade:t},children:e}),f=()=>{let e=(0,i.useContext)(u);if(!e)throw Error(`useDrawer must be used within a Drawer provider`);return e},p=({onOpenChange:e,withFade:t=!1,...n})=>{let r=e?(t,n)=>{e(t)}:void 0;return(0,a.jsx)(d,{withFade:t,children:(0,a.jsx)(l.Dialog.Root,{"data-spark-component":`drawer`,onOpenChange:r,...n})})};p.displayName=`Drawer.Root`;var m=(0,r.cva)([`grow`,`overflow-y-auto`,`outline-hidden`,`focus-visible:u-outline`],{variants:{inset:{true:``,false:`px-xl py-lg`}},defaultVariants:{inset:!1}}),h=({children:e,inset:t=!1,className:n,ref:r,...c})=>{let l=(0,i.useRef)(null),u=(0,o.useMergeRefs)(r,l),{withFade:d}=f(),{overflow:p}=(0,s.useScrollOverflow)(l);return(0,a.jsx)(`div`,{"data-spark-component":`drawer-body`,ref:u,className:m({inset:t,className:n}),style:{...d&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${p.top?`0px`:`44px`} + ${p.bottom?`0px`:`44px`})`,maskPosition:`0 ${p.top?`0px`:`-44px`}`}},...c,children:e})};h.displayName=`Drawer.Body`;var g=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Close,{"data-spark-component":`drawer-close`,render:r,...t})};g.displayName=`Drawer.Close`;var _=({"aria-label":n,className:i,size:o=`md`,intent:s=`neutral`,design:l=`ghost`,children:u=(0,a.jsx)(c.Close,{}),ref:d,...f})=>(0,a.jsx)(g,{"data-spark-component":`drawer-close-button`,ref:d,className:(0,r.cx)([`absolute`,`top-sm`,`right-xl`],i),asChild:!0,...f,children:(0,a.jsx)(t.t,{intent:s,size:o,design:l,"aria-label":n,children:(0,a.jsx)(e.t,{children:u})})});_.displayName=`Drawer.CloseButton`;var v=(0,r.cva)([`fixed z-modal flex flex-col bg-surface shadow-md`,`data-open:animation-duration-400 data-closed:animation-duration-200`,`data-nested-dialog-open:after:pointer-events-none`,`after:bg-transparent`,`after:transition-all`,`after:duration-200`,`data-nested-dialog-open:after:inset-0`,`data-nested-dialog-open:after:absolute`,`data-nested-dialog-open:after:rounded-[inherit]`,`data-nested-dialog-open:after:bg-overlay/dim-3`],{variants:{size:{sm:``,md:``,lg:``,fluid:``,fullscreen:`h-screen w-screen`},side:{right:[`inset-y-0 right-0`,`data-open:animate-slide-in-right `,`data-closed:animate-slide-out-right`],left:[`inset-y-0 left-0`,`data-open:animate-slide-in-left`,`data-closed:animate-slide-out-left`],top:[`top-0 left-0`,`w-screen`,`data-open:animate-slide-in-top`,`data-closed:animate-slide-out-top`],bottom:[`bottom-0 left-0`,`w-screen`,`data-open:animate-slide-in-bottom`,`data-closed:animate-slide-out-bottom`]}},compoundVariants:[{side:[`right`,`left`],size:`sm`,class:[`w-sz-480`,`max-w-full`]},{side:[`right`,`left`],size:`md`,class:[`w-sz-672`,`max-w-full`]},{side:[`right`,`left`],size:`lg`,class:[`w-sz-864`,`max-w-full`]},{side:[`left`,`right`],size:`fluid`,class:[`w-auto`,`max-w-full`]},{side:[`top`,`bottom`],size:`sm`,class:[`h-sz-480`,`max-h-full`]},{side:[`top`,`bottom`],size:`md`,class:[`h-sz-672`,`max-h-full`]},{side:[`top`,`bottom`],size:`lg`,class:[`h-sz-864`,`max-h-full`]},{side:[`top`,`bottom`],size:`fluid`,class:[`h-auto`,`max-h-full`]}],defaultVariants:{side:`right`,size:`md`}}),y=({className:e,size:t=`md`,side:n=`right`,ref:i,...o})=>(0,a.jsx)(l.Dialog.Popup,{ref:i,"data-spark-component":`drawer-content`,role:`dialog`,className:i=>(0,r.cx)(v({size:t,side:n,className:typeof e==`function`?e(i):e})),...o});y.displayName=`Drawer.Content`;var b=e=>(0,a.jsx)(l.Dialog.Description,{"data-spark-component":`drawer-description`,...e});b.displayName=`Drawer.Description`;var x=({className:e,ref:t,...n})=>(0,a.jsx)(`footer`,{"data-spark-component":`drawer-footer`,ref:t,className:(0,r.cx)([`px-xl`,`py-lg`],e),...n});x.displayName=`Drawer.Footer`;var S=({children:e,className:t,ref:n,...i})=>(0,a.jsx)(`header`,{"data-spark-component":`drawer-header`,ref:n,className:(0,r.cx)([`px-xl`,`py-lg`],t),...i,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,a.jsx)(l.Dialog.Backdrop,{"data-spark-component":`drawer-overlay`,className:t=>(0,r.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Drawer.Overlay`;var w=({className:e,...t})=>(0,a.jsx)(l.Dialog.Portal,{"data-spark-component":`drawer-portal`,className:(0,r.cx)(e,`z-modal absolute`),...t});w.displayName=`Drawer.Portal`;var T=({className:e,...t})=>(0,a.jsx)(l.Dialog.Title,{"data-spark-component":`drawer-title`,className:(0,r.cx)(`text-headline-2 text-on-surface`,e),...t});T.displayName=`Drawer.Title`;var E=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Trigger,{"data-spark-component":`drawer-trigger`,render:r,...t})};E.displayName=`Drawer.Trigger`;var D=Object.assign(p,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:_,Title:T,Description:b});D.displayName=`Drawer`,E.displayName=`Drawer.Trigger`,w.displayName=`Drawer.Portal`,C.displayName=`Drawer.Overlay`,y.displayName=`Drawer.Content`,S.displayName=`Drawer.Header`,h.displayName=`Drawer.Body`,x.displayName=`Drawer.Footer`,g.displayName=`Drawer.Close`,_.displayName=`Drawer.CloseButton`,T.displayName=`Drawer.Title`,b.displayName=`Drawer.Description`,exports.Drawer=D;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-jcPwRD21.js`),n=require(`../useRenderSlot-C4UVWhDN.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/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/dialog`);var u=(0,i.createContext)(null),d=({children:e,withFade:t=!1})=>(0,a.jsx)(u.Provider,{value:{withFade:t},children:e}),f=()=>{let e=(0,i.useContext)(u);if(!e)throw Error(`useDrawer must be used within a Drawer provider`);return e},p=({onOpenChange:e,withFade:t=!1,...n})=>{let r=e?(t,n)=>{e(t)}:void 0;return(0,a.jsx)(d,{withFade:t,children:(0,a.jsx)(l.Dialog.Root,{"data-spark-component":`drawer`,onOpenChange:r,...n})})};p.displayName=`Drawer.Root`;var m=(0,r.cva)([`grow`,`overflow-y-auto`,`outline-hidden`,`focus-visible:u-outline`],{variants:{inset:{true:``,false:`px-xl py-lg`}},defaultVariants:{inset:!1}}),h=({children:e,inset:t=!1,className:n,ref:r,...c})=>{let l=(0,i.useRef)(null),u=(0,o.useMergeRefs)(r,l),{withFade:d}=f(),{overflow:p}=(0,s.useScrollOverflow)(l);return(0,a.jsx)(`div`,{"data-spark-component":`drawer-body`,ref:u,className:m({inset:t,className:n}),style:{...d&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${p.top?`0px`:`44px`} + ${p.bottom?`0px`:`44px`})`,maskPosition:`0 ${p.top?`0px`:`-44px`}`}},...c,children:e})};h.displayName=`Drawer.Body`;var g=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Close,{"data-spark-component":`drawer-close`,render:r,...t})};g.displayName=`Drawer.Close`;var _=({"aria-label":n,className:i,size:o=`md`,intent:s=`neutral`,design:l=`ghost`,children:u=(0,a.jsx)(c.Close,{}),ref:d,...f})=>(0,a.jsx)(g,{"data-spark-component":`drawer-close-button`,ref:d,className:(0,r.cx)([`absolute`,`top-sm`,`right-xl`],i),asChild:!0,...f,children:(0,a.jsx)(t.t,{intent:s,size:o,design:l,"aria-label":n,children:(0,a.jsx)(e.t,{children:u})})});_.displayName=`Drawer.CloseButton`;var v=(0,r.cva)([`fixed z-modal flex flex-col bg-surface shadow-md`,`data-open:animation-duration-400 data-closed:animation-duration-200`,`data-nested-dialog-open:after:pointer-events-none`,`after:bg-transparent`,`after:transition-all`,`after:duration-200`,`data-nested-dialog-open:after:inset-0`,`data-nested-dialog-open:after:absolute`,`data-nested-dialog-open:after:rounded-[inherit]`,`data-nested-dialog-open:after:bg-overlay/dim-3`],{variants:{size:{sm:``,md:``,lg:``,fluid:``,fullscreen:`h-screen w-screen`},side:{right:[`inset-y-0 right-0`,`data-open:animate-slide-in-right `,`data-closed:animate-slide-out-right`],left:[`inset-y-0 left-0`,`data-open:animate-slide-in-left`,`data-closed:animate-slide-out-left`],top:[`top-0 left-0`,`w-screen`,`data-open:animate-slide-in-top`,`data-closed:animate-slide-out-top`],bottom:[`bottom-0 left-0`,`w-screen`,`data-open:animate-slide-in-bottom`,`data-closed:animate-slide-out-bottom`]}},compoundVariants:[{side:[`right`,`left`],size:`sm`,class:[`w-sz-480`,`max-w-full`]},{side:[`right`,`left`],size:`md`,class:[`w-sz-672`,`max-w-full`]},{side:[`right`,`left`],size:`lg`,class:[`w-sz-864`,`max-w-full`]},{side:[`left`,`right`],size:`fluid`,class:[`w-auto`,`max-w-full`]},{side:[`top`,`bottom`],size:`sm`,class:[`h-sz-480`,`max-h-full`]},{side:[`top`,`bottom`],size:`md`,class:[`h-sz-672`,`max-h-full`]},{side:[`top`,`bottom`],size:`lg`,class:[`h-sz-864`,`max-h-full`]},{side:[`top`,`bottom`],size:`fluid`,class:[`h-auto`,`max-h-full`]}],defaultVariants:{side:`right`,size:`md`}}),y=({className:e,size:t=`md`,side:n=`right`,ref:i,...o})=>(0,a.jsx)(l.Dialog.Popup,{ref:i,"data-spark-component":`drawer-content`,role:`dialog`,className:i=>(0,r.cx)(v({size:t,side:n,className:typeof e==`function`?e(i):e})),...o});y.displayName=`Drawer.Content`;var b=e=>(0,a.jsx)(l.Dialog.Description,{"data-spark-component":`drawer-description`,...e});b.displayName=`Drawer.Description`;var x=({className:e,ref:t,...n})=>(0,a.jsx)(`footer`,{"data-spark-component":`drawer-footer`,ref:t,className:(0,r.cx)([`px-xl`,`py-lg`],e),...n});x.displayName=`Drawer.Footer`;var S=({children:e,className:t,ref:n,...i})=>(0,a.jsx)(`header`,{"data-spark-component":`drawer-header`,ref:n,className:(0,r.cx)([`px-xl`,`py-lg`],t),...i,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,a.jsx)(l.Dialog.Backdrop,{"data-spark-component":`drawer-overlay`,className:t=>(0,r.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Drawer.Overlay`;var w=({className:e,...t})=>(0,a.jsx)(l.Dialog.Portal,{"data-spark-component":`drawer-portal`,className:(0,r.cx)(e,`z-modal absolute`),...t});w.displayName=`Drawer.Portal`;var T=({className:e,...t})=>(0,a.jsx)(l.Dialog.Title,{"data-spark-component":`drawer-title`,className:(0,r.cx)(`text-headline-2 text-on-surface`,e),...t});T.displayName=`Drawer.Title`;var E=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Trigger,{"data-spark-component":`drawer-trigger`,render:r,...t})};E.displayName=`Drawer.Trigger`;var D=Object.assign(p,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:_,Title:T,Description:b});D.displayName=`Drawer`,E.displayName=`Drawer.Trigger`,w.displayName=`Drawer.Portal`,C.displayName=`Drawer.Overlay`,y.displayName=`Drawer.Content`,S.displayName=`Drawer.Header`,h.displayName=`Drawer.Body`,x.displayName=`Drawer.Footer`,g.displayName=`Drawer.Close`,_.displayName=`Drawer.CloseButton`,T.displayName=`Drawer.Title`,b.displayName=`Drawer.Description`,exports.Drawer=D;
 //# sourceMappingURL=index.js.map

package/dist/drawer/index.mjs

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { t } from "../icon-button-DpucUC_L.mjs";
+import { t } from "../icon-button-C3RgGf2o.mjs";
 import { t as n } from "../useRenderSlot-DKIwoqpO.mjs";
 import { cva as r, cx as i } from "class-variance-authority";
 import { createContext as a, useContext as o, useRef as s } from "react";