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

package/dist/carousel/index.js

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

package/dist/carousel/index.mjs

@@ -3,7 +3,7 @@ import { cx as x } from "class-variance-authority";
 import { useRef as C, useCallback as S, useEffect as k, useLayoutEffect as R, useState as L, useMemo as ct, useId as lt, createContext as ut, useContext as dt, Children as pt, isValidElement as ft, cloneElement as gt } from "react";
 import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
 import { I as G } from "../Icon-C23-htlD.mjs";
-import { I as J } from "../IconButton-Mv9tO1ZH.mjs";
+import { I as J } from "../IconButton-Bfd-6BAD.mjs";
 import { ArrowVerticalLeft as bt } from "@spark-ui/icons/ArrowVerticalLeft";
 function ht(t) {
   const e = C(/* @__PURE__ */ new Map()), r = C(null), n = C(/* @__PURE__ */ new Map()), o = S(() => (c) => {

package/dist/checkbox/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("@spark-ui/components/form-field"),ee=require("@spark-ui/hooks/use-merge-refs"),N=require("class-variance-authority"),c=require("react"),te=require("@spark-ui/icons/Check"),ae=require("@spark-ui/icons/Minus"),P=require("radix-ui"),ne=require("../Icon-CF0W0LKr.js"),re=require("@spark-ui/internal-utils"),se=require("../label/index.js"),ce=require("@spark-ui/hooks/use-combined-state"),U=c.createContext({}),oe=()=>c.useContext(U),ie=P.Checkbox.CheckboxIndicator,D=a=>e.jsx(ie,{className:"flex size-full items-center justify-center",...a});D.displayName="CheckboxIndicator";const de=N.cva(["size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent","disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0","focus-visible:u-outline","hover:ring-4 hover:cursor-pointer","u-shadow-border-transition"],{variants:{intent:re.makeVariants({main:["text-on-main","hover:ring-main-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main","data-[state=checked]:border-main data-[state=checked]:bg-main"],support:["text-on-support","hover:ring-support-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support","data-[state=checked]:border-support data-[state=checked]:bg-support"],accent:["text-on-accent","hover:ring-accent-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent","data-[state=checked]:border-accent data-[state=checked]:bg-accent"],basic:["text-on-basic","hover:ring-basic-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic","data-[state=checked]:border-basic data-[state=checked]:bg-basic"],success:["text-on-success","hover:ring-success-container","data-[state=unchecked]:border-success","data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success","data-[state=checked]:border-success data-[state=checked]:bg-success"],alert:["text-on-alert","hover:ring-alert-container","data-[state=unchecked]:border-alert","data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert","data-[state=checked]:border-alert data-[state=checked]:bg-alert"],error:["text-on-error","hover:ring-error-container","data-[state=unchecked]:border-error","data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error","data-[state=checked]:border-error data-[state=checked]:bg-error"],info:["text-on-info","hover:ring-info-container","data-[state=unchecked]:border-info","data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info","data-[state=checked]:border-info data-[state=checked]:bg-info"],neutral:["text-on-neutral","hover:ring-neutral-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral","data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"]})},defaultVariants:{intent:"basic"}}),ue=P.Checkbox.Checkbox,O=({className:a,icon:o=e.jsx(te.Check,{}),indeterminateIcon:b=e.jsx(ae.Minus,{}),intent:h,checked:r,ref:d,...i})=>e.jsx(ue,{ref:d,className:de({intent:h,className:a}),checked:r,...i,children:e.jsx(D,{children:e.jsx(ne.Icon,{size:"sm",children:r==="indeterminate"?b:o})})});O.displayName="CheckboxInput";const le=N.cva("grow",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),T=({disabled:a,...o})=>e.jsx(se.Label,{className:le({disabled:a}),...o});T.displayName="CheckboxLabel";const A=":checkbox",X=({id:a,className:o,intent:b,checked:h,value:r,disabled:d,reverse:i=!1,onCheckedChange:p,children:m,ref:M,...G})=>{const k=`${A}-${c.useId()}`,x=a||k,g=`${A}-${c.useId()}`,u=E.useFormFieldControl(),t=oe(),f=c.useRef(null),C=ee.useMergeRefs(M,f),I=({fieldState:n,groupState:s,checkboxIntent:H})=>{const J=n.name??s.name,K=n.isRequired??s.isRequired,Q=n.state??s.state,W=n.isInvalid??s.isInvalid,$=n.id!==s.id,Y=$?n.id:void 0,Z=$?n.description:void 0,S=Q??H??s.intent;return{name:J,isRequired:K,isInvalid:W,id:Y,description:Z,intent:S}},q=r?t.value?.includes(r):h,y=n=>{p?.(n);const s=f.current?.value;s&&t.onCheckedChange&&t.onCheckedChange(n,s)},{id:v,name:V,isInvalid:L,description:z,intent:j,isRequired:l}=I({fieldState:u,groupState:t,checkboxIntent:b}),R=c.useMemo(()=>t?l?!t.value?.length:!1:l,[t,l]),F=m&&e.jsx(T,{disabled:d,htmlFor:v||x,id:g,children:m}),w=e.jsx(O,{ref:C,id:v||x,name:V,value:r,intent:j,checked:q,disabled:d,required:R,"aria-describedby":z,"aria-invalid":L,onCheckedChange:y,"aria-labelledby":m?g:u.labelId,...G}),B=t.reverse||i?e.jsxs(e.Fragment,{children:[F,w]}):e.jsxs(e.Fragment,{children:[w,F]});return e.jsx("div",{"data-spark-component":"checkbox",className:N.cx("gap-md text-body-1 relative flex items-start",o),children:B})};X.displayName="Checkbox";const be=N.cva(["flex"],{variants:{orientation:{vertical:["flex-col","gap-lg"],horizontal:["gap-xl"]}}}),_=({name:a,value:o,defaultValue:b,className:h,intent:r,orientation:d="vertical",onCheckedChange:i,reverse:p=!1,children:m,ref:M,...G})=>{const[k,x]=ce.useCombinedState(o,b),g=E.useFormFieldControl(),u=c.useRef(i),{id:t,labelId:f,description:C,state:I,isInvalid:q,isRequired:y}=g,v=a??g.name,V=c.useMemo(()=>({id:t,name:v,value:k,intent:r,state:I,isInvalid:q,description:C,isRequired:y,reverse:p,onCheckedChange:(z,j)=>{const l=k||[],R=z?[...l,j]:l.filter(F=>F!==j);x(R),u.current&&u.current(R)}}),[t,v,k,r,I,q,C,y,x,p]);return c.useEffect(()=>{u.current=i},[i]),e.jsx(U.Provider,{value:V,children:e.jsx("div",{ref:M,className:be({className:h,orientation:d}),role:"group","aria-labelledby":f,"aria-describedby":C,...G,children:m})})};_.displayName="CheckboxGroup";exports.Checkbox=X;exports.CheckboxGroup=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("@spark-ui/components/form-field"),ee=require("@spark-ui/hooks/use-merge-refs"),N=require("class-variance-authority"),c=require("react"),te=require("@spark-ui/icons/Check"),ae=require("@spark-ui/icons/Minus"),P=require("radix-ui"),ne=require("../Icon-CF0W0LKr.js"),re=require("@spark-ui/internal-utils"),se=require("../label/index.js"),ce=require("@spark-ui/hooks/use-combined-state"),U=c.createContext({}),oe=()=>c.useContext(U),ie=P.Checkbox.CheckboxIndicator,D=a=>e.jsx(ie,{className:"flex size-full items-center justify-center",...a});D.displayName="CheckboxIndicator";const de=N.cva(["size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent","disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0","focus-visible:u-outline","hover:ring-4 hover:cursor-pointer","u-shadow-border-transition"],{variants:{intent:re.makeVariants({main:["text-on-main","hover:ring-main-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main","data-[state=checked]:border-main data-[state=checked]:bg-main"],support:["text-on-support","hover:ring-support-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support","data-[state=checked]:border-support data-[state=checked]:bg-support"],accent:["text-on-accent","hover:ring-accent-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent","data-[state=checked]:border-accent data-[state=checked]:bg-accent"],basic:["text-on-basic","hover:ring-basic-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic","data-[state=checked]:border-basic data-[state=checked]:bg-basic"],success:["text-on-success","hover:ring-success-container","data-[state=unchecked]:border-success","data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success","data-[state=checked]:border-success data-[state=checked]:bg-success"],alert:["text-on-alert","hover:ring-alert-container","data-[state=unchecked]:border-alert","data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert","data-[state=checked]:border-alert data-[state=checked]:bg-alert"],error:["text-on-error","hover:ring-error-container","data-[state=unchecked]:border-error","data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error","data-[state=checked]:border-error data-[state=checked]:bg-error"],info:["text-on-info","hover:ring-info-container","data-[state=unchecked]:border-info","data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info","data-[state=checked]:border-info data-[state=checked]:bg-info"],neutral:["text-on-neutral","hover:ring-neutral-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral","data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"]})},defaultVariants:{intent:"basic"}}),ue=P.Checkbox.Checkbox,O=({className:a,icon:o=e.jsx(te.Check,{}),indeterminateIcon:b=e.jsx(ae.Minus,{}),intent:h,checked:r,ref:d,...i})=>e.jsx(ue,{ref:d,className:de({intent:h,className:a}),checked:r,...i,children:e.jsx(D,{children:e.jsx(ne.Icon,{size:"sm",children:r==="indeterminate"?b:o})})});O.displayName="CheckboxInput";const le=N.cva("grow",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),T=({disabled:a,...o})=>e.jsx(se.Label,{className:le({disabled:a}),...o});T.displayName="CheckboxLabel";const A=":checkbox",X=({id:a,className:o,intent:b,checked:h,value:r,disabled:d,reverse:i=!1,onCheckedChange:v,children:m,ref:M,...G})=>{const k=`${A}-${c.useId()}`,x=a||k,g=`${A}-${c.useId()}`,u=E.useFormFieldControl(),t=oe(),f=c.useRef(null),C=ee.useMergeRefs(M,f),I=({fieldState:n,groupState:s,checkboxIntent:H})=>{const J=n.name??s.name,K=n.isRequired??s.isRequired,Q=n.state??s.state,W=n.isInvalid??s.isInvalid,$=n.id!==s.id,Y=$?n.id:void 0,Z=$?n.description:void 0,S=Q??H??s.intent;return{name:J,isRequired:K,isInvalid:W,id:Y,description:Z,intent:S}},q=r?t.value?.includes(r):h,y=n=>{v?.(n);const s=f.current?.value;s&&t.onCheckedChange&&t.onCheckedChange(n,s)},{id:p,name:V,isInvalid:L,description:z,intent:j,isRequired:l}=I({fieldState:u,groupState:t,checkboxIntent:b}),R=c.useMemo(()=>t?l?!t.value?.length:!1:l,[t,l]),F=m&&e.jsx(T,{disabled:d,htmlFor:p||x,id:g,children:m}),w=e.jsx(O,{ref:C,id:p||x,name:V,value:r,intent:j,checked:q,disabled:d,required:R,"aria-describedby":z,"aria-invalid":L,onCheckedChange:y,"aria-labelledby":m?g:u.labelId,...G}),B=t.reverse||i?e.jsxs(e.Fragment,{children:[F,w]}):e.jsxs(e.Fragment,{children:[w,F]});return e.jsx("span",{"data-spark-component":"checkbox",className:N.cx("gap-md text-body-1 relative flex items-start",o),children:B})};X.displayName="Checkbox";const be=N.cva(["flex"],{variants:{orientation:{vertical:["flex-col","gap-lg"],horizontal:["gap-xl"]}}}),_=({name:a,value:o,defaultValue:b,className:h,intent:r,orientation:d="vertical",onCheckedChange:i,reverse:v=!1,children:m,ref:M,...G})=>{const[k,x]=ce.useCombinedState(o,b),g=E.useFormFieldControl(),u=c.useRef(i),{id:t,labelId:f,description:C,state:I,isInvalid:q,isRequired:y}=g,p=a??g.name,V=c.useMemo(()=>({id:t,name:p,value:k,intent:r,state:I,isInvalid:q,description:C,isRequired:y,reverse:v,onCheckedChange:(z,j)=>{const l=k||[],R=z?[...l,j]:l.filter(F=>F!==j);x(R),u.current&&u.current(R)}}),[t,p,k,r,I,q,C,y,x,v]);return c.useEffect(()=>{u.current=i},[i]),e.jsx(U.Provider,{value:V,children:e.jsx("div",{ref:M,className:be({className:h,orientation:d}),role:"group","aria-labelledby":f,"aria-describedby":C,...G,children:m})})};_.displayName="CheckboxGroup";exports.Checkbox=X;exports.CheckboxGroup=_;
 //# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        basic: [\n          'text-on-basic',\n          'hover:ring-basic-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic',\n          'data-[state=checked]:border-basic data-[state=checked]:bg-basic',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <div\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked ? [...values, changed] : values.filter(val => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext.Provider value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["CheckboxGroupContext","createContext","useCheckboxGroup","useContext","CheckboxIndicatorPrimitive","Checkbox","CheckboxIndicator","props","jsx","checkboxInputStyles","cva","makeVariants","CheckboxPrimitive","CheckboxInput","className","icon","Check","indeterminateIcon","Minus","intent","checked","ref","others","Icon","labelStyles","CheckboxLabel","disabled","Label","ID_PREFIX","idProp","intentProp","checkedProp","value","reverse","onCheckedChange","children","forwardedRef","checkboxId","useId","innerId","innerLabelId","field","useFormFieldControl","group","rootRef","useRef","useMergeRefs","getCheckboxAttributes","fieldState","groupState","checkboxIntent","name","isRequired","state","isInvalid","isFieldEnclosed","id","description","handleCheckedChange","isChecked","rootRefValue","isRequiredAttr","useMemo","checkboxLabel","checkboxInput","content","jsxs","Fragment","cx","checkboxGroupStyles","CheckboxGroup","nameProp","valueProp","defaultValue","orientation","onCheckedChangeProp","setValue","useCombinedState","onCheckedChangeRef","labelId","current","changed","values","modified","val","useEffect"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        basic: [\n          'text-on-basic',\n          'hover:ring-basic-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic',\n          'data-[state=checked]:border-basic data-[state=checked]:bg-basic',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked ? [...values, changed] : values.filter(val => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext.Provider value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["CheckboxGroupContext","createContext","useCheckboxGroup","useContext","CheckboxIndicatorPrimitive","Checkbox","CheckboxIndicator","props","jsx","checkboxInputStyles","cva","makeVariants","CheckboxPrimitive","CheckboxInput","className","icon","Check","indeterminateIcon","Minus","intent","checked","ref","others","Icon","labelStyles","CheckboxLabel","disabled","Label","ID_PREFIX","idProp","intentProp","checkedProp","value","reverse","onCheckedChange","children","forwardedRef","checkboxId","useId","innerId","innerLabelId","field","useFormFieldControl","group","rootRef","useRef","useMergeRefs","getCheckboxAttributes","fieldState","groupState","checkboxIntent","name","isRequired","state","isInvalid","isFieldEnclosed","id","description","handleCheckedChange","isChecked","rootRefValue","isRequiredAttr","useMemo","checkboxLabel","checkboxInput","content","jsxs","Fragment","cx","checkboxGroupStyles","CheckboxGroup","nameProp","valueProp","defaultValue","orientation","onCheckedChangeProp","setValue","useCombinedState","onCheckedChangeRef","labelId","current","changed","values","modified","val","useEffect"],"mappings":"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"}

package/dist/checkbox/index.mjs

@@ -3,8 +3,8 @@ import { useFormFieldControl as D } from "@spark-ui/components/form-field";
 import { useMergeRefs as ae } from "@spark-ui/hooks/use-merge-refs";
 import { cva as V, cx as re } from "class-variance-authority";
 import { createContext as ne, useContext as oe, useId as A, useRef as X, useMemo as _, useEffect as ce } from "react";
-import { Check as ie } from "@spark-ui/icons/Check";
-import { Minus as se } from "@spark-ui/icons/Minus";
+import { Check as se } from "@spark-ui/icons/Check";
+import { Minus as ie } from "@spark-ui/icons/Minus";
 import { Checkbox as B } from "radix-ui";
 import { I as de } from "../Icon-C23-htlD.mjs";
 import { makeVariants as le } from "@spark-ui/internal-utils";
@@ -95,26 +95,26 @@ const ke = V(
       intent: "basic"
     }
   }
-), xe = B.Checkbox, K = ({
+), pe = B.Checkbox, K = ({
   className: a,
-  icon: c = /* @__PURE__ */ e(ie, {}),
-  indeterminateIcon: b = /* @__PURE__ */ e(se, {}),
+  icon: c = /* @__PURE__ */ e(se, {}),
+  indeterminateIcon: b = /* @__PURE__ */ e(ie, {}),
   intent: u,
   checked: n,
-  ref: s,
-  ...i
+  ref: i,
+  ...s
 }) => /* @__PURE__ */ e(
-  xe,
+  pe,
   {
-    ref: s,
+    ref: i,
     className: ke({ intent: u, className: a }),
     checked: n,
-    ...i,
+    ...s,
     children: /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(de, { size: "sm", children: n === "indeterminate" ? b : c }) })
   }
 );
 K.displayName = "CheckboxInput";
-const pe = V("grow", {
+const xe = V("grow", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -124,7 +124,7 @@ const pe = V("grow", {
   defaultVariants: {
     disabled: !1
   }
-}), O = ({ disabled: a, ...c }) => /* @__PURE__ */ e(be, { className: pe({ disabled: a }), ...c });
+}), O = ({ disabled: a, ...c }) => /* @__PURE__ */ e(be, { className: xe({ disabled: a }), ...c });
 O.displayName = "CheckboxLabel";
 const P = ":checkbox", fe = ({
   id: a,
@@ -132,14 +132,14 @@ const P = ":checkbox", fe = ({
   intent: b,
   checked: u,
   value: n,
-  disabled: s,
-  reverse: i = !1,
+  disabled: i,
+  reverse: s = !1,
   onCheckedChange: g,
   children: h,
   ref: F,
   ...z
 }) => {
-  const m = `${P}-${A()}`, k = a || m, x = `${P}-${A()}`, d = D(), t = he(), v = X(null), p = ae(F, v), C = ({
+  const m = `${P}-${A()}`, k = a || m, p = `${P}-${A()}`, d = D(), t = he(), v = X(null), x = ae(F, v), C = ({
     fieldState: r,
     groupState: o,
     checkboxIntent: T
@@ -161,24 +161,24 @@ const P = ":checkbox", fe = ({
     fieldState: d,
     groupState: t,
     checkboxIntent: b
-  }), N = _(() => t ? l ? !t.value?.length : !1 : l, [t, l]), q = h && /* @__PURE__ */ e(O, { disabled: s, htmlFor: f || k, id: x, children: h }), j = /* @__PURE__ */ e(
+  }), N = _(() => t ? l ? !t.value?.length : !1 : l, [t, l]), q = h && /* @__PURE__ */ e(O, { disabled: i, htmlFor: f || k, id: p, children: h }), j = /* @__PURE__ */ e(
     K,
     {
-      ref: p,
+      ref: x,
       id: f || k,
       name: G,
       value: n,
       intent: R,
       checked: I,
-      disabled: s,
+      disabled: i,
       required: N,
       "aria-describedby": L,
       "aria-invalid": $,
       onCheckedChange: y,
-      "aria-labelledby": h ? x : d.labelId,
+      "aria-labelledby": h ? p : d.labelId,
       ...z
     }
-  ), Q = t.reverse || i ? /* @__PURE__ */ E(M, { children: [
+  ), Q = t.reverse || s ? /* @__PURE__ */ E(M, { children: [
     q,
     j
   ] }) : /* @__PURE__ */ E(M, { children: [
@@ -186,7 +186,7 @@ const P = ":checkbox", fe = ({
     q
   ] });
   return /* @__PURE__ */ e(
-    "div",
+    "span",
     {
       "data-spark-component": "checkbox",
       className: re("gap-md text-body-1 relative flex items-start", c),
@@ -211,38 +211,38 @@ const ge = V(["flex"], {
   defaultValue: b,
   className: u,
   intent: n,
-  orientation: s = "vertical",
-  onCheckedChange: i,
+  orientation: i = "vertical",
+  onCheckedChange: s,
   reverse: g = !1,
   children: h,
   ref: F,
   ...z
 }) => {
-  const [m, k] = ue(c, b), x = D(), d = X(i), { id: t, labelId: v, description: p, state: C, isInvalid: I, isRequired: y } = x, f = a ?? x.name, G = _(() => ({
+  const [m, k] = ue(c, b), p = D(), d = X(s), { id: t, labelId: v, description: x, state: C, isInvalid: I, isRequired: y } = p, f = a ?? p.name, G = _(() => ({
     id: t,
     name: f,
     value: m,
     intent: n,
     state: C,
     isInvalid: I,
-    description: p,
+    description: x,
     isRequired: y,
     reverse: g,
     onCheckedChange: (L, R) => {
       const l = m || [], N = L ? [...l, R] : l.filter((q) => q !== R);
       k(N), d.current && d.current(N);
     }
-  }), [t, f, m, n, C, I, p, y, k, g]);
+  }), [t, f, m, n, C, I, x, y, k, g]);
   return ce(() => {
-    d.current = i;
-  }, [i]), /* @__PURE__ */ e(H.Provider, { value: G, children: /* @__PURE__ */ e(
+    d.current = s;
+  }, [s]), /* @__PURE__ */ e(H.Provider, { value: G, children: /* @__PURE__ */ e(
     "div",
     {
       ref: F,
-      className: ge({ className: u, orientation: s }),
+      className: ge({ className: u, orientation: i }),
       role: "group",
       "aria-labelledby": v,
-      "aria-describedby": p,
+      "aria-describedby": x,
       ...z,
       children: h
     }

package/dist/checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        basic: [\n          'text-on-basic',\n          'hover:ring-basic-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic',\n          'data-[state=checked]:border-basic data-[state=checked]:bg-basic',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <div\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked ? [...values, changed] : values.filter(val => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext.Provider value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["CheckboxGroupContext","createContext","useCheckboxGroup","useContext","CheckboxIndicatorPrimitive","Checkbox","CheckboxIndicator","props","jsx","checkboxInputStyles","cva","makeVariants","CheckboxPrimitive","CheckboxInput","className","icon","Check","indeterminateIcon","Minus","intent","checked","ref","others","Icon","labelStyles","CheckboxLabel","disabled","Label","ID_PREFIX","idProp","intentProp","checkedProp","value","reverse","onCheckedChange","children","forwardedRef","checkboxId","useId","innerId","innerLabelId","field","useFormFieldControl","group","rootRef","useRef","useMergeRefs","getCheckboxAttributes","fieldState","groupState","checkboxIntent","name","isRequired","state","isInvalid","isFieldEnclosed","id","description","handleCheckedChange","isChecked","rootRefValue","isRequiredAttr","useMemo","checkboxLabel","checkboxInput","content","jsxs","Fragment","cx","checkboxGroupStyles","CheckboxGroup","nameProp","valueProp","defaultValue","orientation","onCheckedChangeProp","setValue","useCombinedState","onCheckedChangeRef","labelId","current","changed","values","modified","val","useEffect"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        basic: [\n          'text-on-basic',\n          'hover:ring-basic-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic',\n          'data-[state=checked]:border-basic data-[state=checked]:bg-basic',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked ? [...values, changed] : values.filter(val => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext.Provider value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["CheckboxGroupContext","createContext","useCheckboxGroup","useContext","CheckboxIndicatorPrimitive","Checkbox","CheckboxIndicator","props","jsx","checkboxInputStyles","cva","makeVariants","CheckboxPrimitive","CheckboxInput","className","icon","Check","indeterminateIcon","Minus","intent","checked","ref","others","Icon","labelStyles","CheckboxLabel","disabled","Label","ID_PREFIX","idProp","intentProp","checkedProp","value","reverse","onCheckedChange","children","forwardedRef","checkboxId","useId","innerId","innerLabelId","field","useFormFieldControl","group","rootRef","useRef","useMergeRefs","getCheckboxAttributes","fieldState","groupState","checkboxIntent","name","isRequired","state","isInvalid","isFieldEnclosed","id","description","handleCheckedChange","isChecked","rootRefValue","isRequiredAttr","useMemo","checkboxLabel","checkboxInput","content","jsxs","Fragment","cx","checkboxGroupStyles","CheckboxGroup","nameProp","valueProp","defaultValue","orientation","onCheckedChangeProp","setValue","useCombinedState","onCheckedChangeRef","labelId","current","changed","values","modified","val","useEffect"],"mappings":"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"}

package/dist/chip/index.js

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