@spark-ui/components 16.2.3 → 17.0.1-beta.0

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),G=require("@spark-ui/hooks/use-combined-state"),f=require("class-variance-authority"),u=require("react"),Q=require("../form-field/index.js"),W=require("@spark-ui/icons/StarFill"),X=require("@spark-ui/icons/StarOutline"),V=require("../Icon-CF0W0LKr.js"),Y=f.cx("[&_>_div]:peer-hover:w-0!"),Z=f.cva(["peer after:inset-0 group relative after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:f.cx(Y,"cursor-pointer transition-all duration-200 scale-100","hover:scale-150 focus-visible:scale-150","[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),H=f.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-1"},design:{filled:["text-main-variant","group-[[data-part=star][data-hovered]]:text-main-variant-hovered"],outlined:["text-on-surface/dim-3"]}}}),ee=({value:e,size:t,disabled:r,readOnly:o,checked:i=!1,ariaLabel:l,ariaLabelledBy:c,tabIndex:I,onClick:v,onKeyDown:h,onMouseEnter:k,children:w,ref:p})=>{const g=!r&&!o,[j,y]=u.useState(!1),C=R=>{v?.(R),g&&y(!0)},S=()=>y(!1);return n.jsxs("div",{ref:p,role:"radio","aria-checked":i,"aria-label":l,"aria-labelledby":c,tabIndex:I,"data-spark-component":"rating-star","data-part":"star",...g&&j&&{"data-suppress-scale":""},className:Z({gap:t==="lg"?"md":"sm",disabled:r,readOnly:o}),onClick:C,onKeyDown:h,onMouseEnter:k,onMouseLeave:S,onMouseMove:S,children:[n.jsx("div",{className:f.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:n.jsx(V.Icon,{className:H({size:t,design:"filled"}),children:n.jsx(W.StarFill,{})})}),n.jsx(V.Icon,{className:H({size:t,design:"outlined"}),children:n.jsx(X.StarOutline,{})}),w]})};function ae({value:e,index:t}){if(e===void 0)return 0;const r=t+1;return e>=r?1:0}function te(e,t){const r=e.slice(0,t),o=e.slice(t);return[r,o]}const re=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function se(e,t,r,o){return i=>{if(o)switch(i.key){case"ArrowRight":case"ArrowDown":i.preventDefault();const l=Math.min(4,e+1);r(l+1),t.current[l]?.focus();break;case"ArrowLeft":case"ArrowUp":i.preventDefault();const c=Math.max(0,e-1);r(c+1),t.current[c]?.focus();break;case" ":i.preventDefault(),r(e+1);break}}}function ne(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}const oe=({defaultValue:e,value:t,onValueChange:r,disabled:o,readOnly:i,required:l,name:c,id:I,"aria-label":v,getStarLabel:h,ref:k,...w})=>{const{labelId:p,isInvalid:g,isRequired:j,description:y,name:C,disabled:S,readOnly:R}=Q.useFormFieldControl(),d=u.useRef([]),N=u.useId(),[D,O]=u.useState(null),[K,q]=G.useCombinedState(t,e,r),x=re(K??0),F=o??S,$=i??R,L=l!==void 0?l:j,E=c??C,m=!(F||$),A=h!==void 0||v!==void 0,_=D!==null?D+1:x;function J(s){if(!m)return;const a=s+1;q(a),d.current[s]?.focus()}const P=u.useCallback(s=>se(s,d,q,m),[m,q]);function T({currentTarget:s}){const a=d.current.findIndex(b=>b===s);O(a>=0?a:null);const[M,U]=te(d.current,a+1);M.forEach(b=>b?.setAttribute("data-hovered","")),U.forEach(b=>b?.removeAttribute("data-hovered"))}const z=u.useCallback(s=>a=>{d.current[s]=a},[]);function B(){O(null),d.current.forEach(s=>s?.removeAttribute("data-hovered"))}return n.jsxs("div",{ref:k,id:I,role:"radiogroup","aria-label":v,"aria-labelledby":p,"aria-invalid":g,"aria-required":L,"aria-describedby":y,className:"relative inline-flex","data-spark-component":"rating",...w,onMouseLeave:B,children:[E!==void 0&&n.jsx("input",{type:"hidden",name:E,value:x,"aria-hidden":!0,"data-part":"input"}),n.jsx("div",{className:f.cx("gap-x-md","flex"),children:Array.from({length:5}).map((s,a)=>n.jsx(ee,{ref:z(a),disabled:F,readOnly:$,size:"lg",value:ae({index:a,value:_}),checked:x===a+1,ariaLabel:A?h?.(a)??`${v} ${a+1}`:void 0,ariaLabelledBy:!A&&p?`${p} ${N}-star-${a+1}`:void 0,tabIndex:m?ne(a,x):-1,onClick:()=>J(a),onKeyDown:P(a),onMouseEnter:M=>m&&T(M),children:!A&&n.jsx("span",{id:`${N}-star-${a+1}`,className:"sr-only",children:a+1})},a))})]})};exports.Rating=oe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),G=require("@spark-ui/hooks/use-combined-state"),f=require("class-variance-authority"),u=require("react"),Q=require("../form-field/index.js"),W=require("@spark-ui/icons/StarFill"),X=require("@spark-ui/icons/StarOutline"),V=require("../Icon-C-cNTnzd.js"),Y=f.cx("[&_>_div]:peer-hover:w-0!"),Z=f.cva(["peer after:inset-0 group relative after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:f.cx(Y,"cursor-pointer transition-all duration-200 scale-100","hover:scale-150 focus-visible:scale-150","[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),H=f.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-1"},design:{filled:["text-main-variant","group-[[data-part=star][data-hovered]]:text-main-variant-hovered"],outlined:["text-on-surface/dim-3"]}}}),ee=({value:e,size:t,disabled:r,readOnly:o,checked:i=!1,ariaLabel:l,ariaLabelledBy:c,tabIndex:I,onClick:v,onKeyDown:h,onMouseEnter:k,children:w,ref:p})=>{const g=!r&&!o,[j,y]=u.useState(!1),C=R=>{v?.(R),g&&y(!0)},S=()=>y(!1);return n.jsxs("div",{ref:p,role:"radio","aria-checked":i,"aria-label":l,"aria-labelledby":c,tabIndex:I,"data-spark-component":"rating-star","data-part":"star",...g&&j&&{"data-suppress-scale":""},className:Z({gap:t==="lg"?"md":"sm",disabled:r,readOnly:o}),onClick:C,onKeyDown:h,onMouseEnter:k,onMouseLeave:S,onMouseMove:S,children:[n.jsx("div",{className:f.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:n.jsx(V.Icon,{className:H({size:t,design:"filled"}),children:n.jsx(W.StarFill,{})})}),n.jsx(V.Icon,{className:H({size:t,design:"outlined"}),children:n.jsx(X.StarOutline,{})}),w]})};function ae({value:e,index:t}){if(e===void 0)return 0;const r=t+1;return e>=r?1:0}function te(e,t){const r=e.slice(0,t),o=e.slice(t);return[r,o]}const re=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function se(e,t,r,o){return i=>{if(o)switch(i.key){case"ArrowRight":case"ArrowDown":i.preventDefault();const l=Math.min(4,e+1);r(l+1),t.current[l]?.focus();break;case"ArrowLeft":case"ArrowUp":i.preventDefault();const c=Math.max(0,e-1);r(c+1),t.current[c]?.focus();break;case" ":i.preventDefault(),r(e+1);break}}}function ne(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}const oe=({defaultValue:e,value:t,onValueChange:r,disabled:o,readOnly:i,required:l,name:c,id:I,"aria-label":v,getStarLabel:h,ref:k,...w})=>{const{labelId:p,isInvalid:g,isRequired:j,description:y,name:C,disabled:S,readOnly:R}=Q.useFormFieldControl(),d=u.useRef([]),N=u.useId(),[D,O]=u.useState(null),[K,q]=G.useCombinedState(t,e,r),x=re(K??0),F=o??S,$=i??R,L=l!==void 0?l:j,E=c??C,m=!(F||$),A=h!==void 0||v!==void 0,_=D!==null?D+1:x;function J(s){if(!m)return;const a=s+1;q(a),d.current[s]?.focus()}const P=u.useCallback(s=>se(s,d,q,m),[m,q]);function T({currentTarget:s}){const a=d.current.findIndex(b=>b===s);O(a>=0?a:null);const[M,U]=te(d.current,a+1);M.forEach(b=>b?.setAttribute("data-hovered","")),U.forEach(b=>b?.removeAttribute("data-hovered"))}const z=u.useCallback(s=>a=>{d.current[s]=a},[]);function B(){O(null),d.current.forEach(s=>s?.removeAttribute("data-hovered"))}return n.jsxs("div",{ref:k,id:I,role:"radiogroup","aria-label":v,"aria-labelledby":p,"aria-invalid":g,"aria-required":L,"aria-describedby":y,className:"relative inline-flex","data-spark-component":"rating",...w,onMouseLeave:B,children:[E!==void 0&&n.jsx("input",{type:"hidden",name:E,value:x,"aria-hidden":!0,"data-part":"input"}),n.jsx("div",{className:f.cx("gap-x-md","flex"),children:Array.from({length:5}).map((s,a)=>n.jsx(ee,{ref:z(a),disabled:F,readOnly:$,size:"lg",value:ae({index:a,value:_}),checked:x===a+1,ariaLabel:A?h?.(a)??`${v} ${a+1}`:void 0,ariaLabelledBy:!A&&p?`${p} ${N}-star-${a+1}`:void 0,tabIndex:m?ne(a,x):-1,onClick:()=>J(a),onKeyDown:P(a),onMouseEnter:M=>m&&T(M),children:!A&&n.jsx("span",{id:`${N}-star-${a+1}`,className:"sr-only",children:a+1})},a))})]})};exports.Rating=oe;
 //# sourceMappingURL=index.js.map

package/dist/rating/index.mjs

@@ -5,7 +5,7 @@ import { useState as _, useRef as Y, useId as Z, useCallback as j } from "react"
 import { useFormFieldControl as ee } from "../form-field/index.mjs";
 import { StarFill as ae } from "@spark-ui/icons/StarFill";
 import { StarOutline as te } from "@spark-ui/icons/StarOutline";
-import { I as q } from "../Icon-C23-htlD.mjs";
+import { I as q } from "../Icon-BO327oHU.mjs";
 const re = S("[&_>_div]:peer-hover:w-0!"), se = L(["peer after:inset-0 group relative after:block after:absolute"], {
   variants: {
     disabled: {

package/dist/rating-display/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),N=require("../Slot-DQ8z2zsy.js"),D=require("react"),c=require("class-variance-authority"),V=require("@spark-ui/icons/StarFill"),j=require("@spark-ui/icons/StarOutline"),f=require("../Icon-CF0W0LKr.js"),v=D.createContext(null),b=({value:t,size:a,count:n,children:e})=>s.jsx(v.Provider,{value:{value:t,size:a,count:n},children:e}),p=()=>{const t=D.useContext(v);if(!t)throw new Error("RatingDisplay compound components must be used within RatingDisplay.");return t},S=({value:t=0,size:a="md",count:n,asChild:e=!1,ref:r,children:i,...o})=>{const u=t??0,l=e?N.Slot:"div";return s.jsx(b,{value:u,size:a,count:n,children:s.jsx(l,{ref:r,className:"gap-x-sm relative inline-flex items-center","data-spark-component":"rating-display",...o,children:i})})};S.displayName="RatingDisplay";const h=c.cva("text-on-surface/dim-1",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),m=({className:t,children:a,...n})=>{const{count:e,size:r}=p();if(e===void 0)return null;const i=typeof a=="function"?a(e):a??e;return s.jsxs("span",{className:h({size:r??"md",className:t}),...n,children:["(",i,")"]})};m.displayName="RatingDisplay.Count";const z=c.cva(["relative block after:absolute after:block after:inset-0"],{variants:{gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},defaultVariants:{gap:"sm"}}),x=c.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-3"},design:{filled:["text-main-variant"],outlined:["text-on-surface/dim-3"]}}}),C=({value:t,size:a})=>s.jsxs("div",{"data-spark-component":"rating-display-star","data-part":"star",className:z({gap:a==="lg"?"md":"sm"}),children:[s.jsx("div",{className:c.cx("z-raised absolute overflow-hidden"),style:{width:t*100+"%"},children:s.jsx(f.Icon,{className:x({size:a,design:"filled"}),children:s.jsx(V.StarFill,{})})}),s.jsx(f.Icon,{className:x({size:a,design:"outlined"}),children:s.jsx(j.StarOutline,{})})]});function w(t){return Math.round(t/.5)*.5}function k(t){const a=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(a,{minimumFractionDigits:0,maximumFractionDigits:1}).format(t)}function q({value:t,index:a}){if(t===void 0)return 0;const n=a+1,e=w(t);return Math.ceil(e)<n?0:e>=n?1:.5}function I(t){return t===void 0||t<1?0:t<4?.5:1}const g=({size:t,variant:a="default",getFillMode:n})=>{const{value:e,size:r}=p(),i=t??r,o=l=>n?n({index:l,value:e}):a==="single-star"?I(e):q({index:l,value:e}),u=a==="single-star"?[o(0)]:Array.from({length:5},(l,d)=>o(d));return s.jsx("div",{"data-spark-component":"rating-display-stars",className:c.cx(i==="lg"?"gap-x-md":"gap-x-sm","flex"),children:u.map((l,d)=>s.jsx(C,{size:i,value:l},d))})};g.displayName="RatingDisplay.Stars";const F=c.cva("text-on-surface font-bold",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),y=({className:t,children:a,...n})=>{const{value:e,size:r}=p(),i=k(e),o=typeof a=="function"?a(i,e):a??i;return s.jsx("span",{"data-spark-component":"rating-display-value",className:F({size:r??"md",className:t}),...n,children:o})};y.displayName="RatingDisplay.Value";const R=Object.assign(S,{Stars:g,Value:y,Count:m});R.displayName="RatingDisplay";g.displayName="RatingDisplay.Stars";y.displayName="RatingDisplay.Value";m.displayName="RatingDisplay.Count";exports.RatingDisplay=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),N=require("../Slot-DQ8z2zsy.js"),D=require("react"),c=require("class-variance-authority"),V=require("@spark-ui/icons/StarFill"),j=require("@spark-ui/icons/StarOutline"),f=require("../Icon-C-cNTnzd.js"),v=D.createContext(null),b=({value:t,size:a,count:n,children:e})=>s.jsx(v.Provider,{value:{value:t,size:a,count:n},children:e}),p=()=>{const t=D.useContext(v);if(!t)throw new Error("RatingDisplay compound components must be used within RatingDisplay.");return t},S=({value:t=0,size:a="md",count:n,asChild:e=!1,ref:r,children:i,...o})=>{const u=t??0,l=e?N.Slot:"div";return s.jsx(b,{value:u,size:a,count:n,children:s.jsx(l,{ref:r,className:"gap-x-sm relative inline-flex items-center","data-spark-component":"rating-display",...o,children:i})})};S.displayName="RatingDisplay";const h=c.cva("text-on-surface/dim-1",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),m=({className:t,children:a,...n})=>{const{count:e,size:r}=p();if(e===void 0)return null;const i=typeof a=="function"?a(e):a??e;return s.jsxs("span",{className:h({size:r??"md",className:t}),...n,children:["(",i,")"]})};m.displayName="RatingDisplay.Count";const z=c.cva(["relative block after:absolute after:block after:inset-0"],{variants:{gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},defaultVariants:{gap:"sm"}}),x=c.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-3"},design:{filled:["text-main-variant"],outlined:["text-on-surface/dim-3"]}}}),C=({value:t,size:a})=>s.jsxs("div",{"data-spark-component":"rating-display-star","data-part":"star",className:z({gap:a==="lg"?"md":"sm"}),children:[s.jsx("div",{className:c.cx("z-raised absolute overflow-hidden"),style:{width:t*100+"%"},children:s.jsx(f.Icon,{className:x({size:a,design:"filled"}),children:s.jsx(V.StarFill,{})})}),s.jsx(f.Icon,{className:x({size:a,design:"outlined"}),children:s.jsx(j.StarOutline,{})})]});function w(t){return Math.round(t/.5)*.5}function k(t){const a=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(a,{minimumFractionDigits:0,maximumFractionDigits:1}).format(t)}function q({value:t,index:a}){if(t===void 0)return 0;const n=a+1,e=w(t);return Math.ceil(e)<n?0:e>=n?1:.5}function I(t){return t===void 0||t<1?0:t<4?.5:1}const g=({size:t,variant:a="default",getFillMode:n})=>{const{value:e,size:r}=p(),i=t??r,o=l=>n?n({index:l,value:e}):a==="single-star"?I(e):q({index:l,value:e}),u=a==="single-star"?[o(0)]:Array.from({length:5},(l,d)=>o(d));return s.jsx("div",{"data-spark-component":"rating-display-stars",className:c.cx(i==="lg"?"gap-x-md":"gap-x-sm","flex"),children:u.map((l,d)=>s.jsx(C,{size:i,value:l},d))})};g.displayName="RatingDisplay.Stars";const F=c.cva("text-on-surface font-bold",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),y=({className:t,children:a,...n})=>{const{value:e,size:r}=p(),i=k(e),o=typeof a=="function"?a(i,e):a??i;return s.jsx("span",{"data-spark-component":"rating-display-value",className:F({size:r??"md",className:t}),...n,children:o})};y.displayName="RatingDisplay.Value";const R=Object.assign(S,{Stars:g,Value:y,Count:m});R.displayName="RatingDisplay";g.displayName="RatingDisplay.Stars";y.displayName="RatingDisplay.Value";m.displayName="RatingDisplay.Count";exports.RatingDisplay=R;
 //# sourceMappingURL=index.js.map

package/dist/rating-display/index.mjs

@@ -4,7 +4,7 @@ import { createContext as V, useContext as z } from "react";
 import { cva as c, cx as v } from "class-variance-authority";
 import { StarFill as b } from "@spark-ui/icons/StarFill";
 import { StarOutline as h } from "@spark-ui/icons/StarOutline";
-import { I as y } from "../Icon-C23-htlD.mjs";
+import { I as y } from "../Icon-BO327oHU.mjs";
 const R = V(null), C = ({
   value: t,
   size: a,

package/dist/scrolling-list/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),T=require("@spark-ui/hooks/use-scroll-overflow"),p=require("class-variance-authority"),l=require("react"),O=require("react-snap-carousel"),V=require("../Slot-DQ8z2zsy.js"),z=require("@spark-ui/icons/ArrowVerticalRight"),w=require("../Icon-CF0W0LKr.js"),S=require("../IconButton-D3g86WpZ.js"),D=require("@spark-ui/icons/ArrowVerticalLeft"),$=require("../Button-B6rA3-e5.js"),v=l.createContext(null),P=({snapType:s="none",snapStop:n="normal",scrollBehavior:e="smooth",loop:r=!1,gap:t=16,withFade:i=!1,scrollPadding:a=0,children:c,className:f,...d})=>{const o=l.useRef(null),g=l.useRef(null),h=O.useSnapCarousel(),{overflow:j,refresh:b}=T.useScrollOverflow(o,{precisionTreshold:1}),{activePageIndex:A,pages:q,refresh:m}=h,x=q[A],E=x?[x[0]+1,x[x.length-1]+1]:[0,0],y=l.useCallback(()=>{m&&o.current&&setTimeout(()=>{m()},0)},[m]);l.useEffect(()=>{y()},[c,y]),l.useLayoutEffect(()=>{o.current&&requestAnimationFrame(()=>{b()})},[c,b]);const F={...h,snapType:s,snapStop:n,skipKeyboardNavigation:()=>{g.current?.focus()},scrollBehavior:e,visibleItemsRange:E,loop:r,gap:t,withFade:i,scrollPadding:a,scrollAreaRef:o,overflow:j};return u.jsxs(v.Provider,{value:F,children:[u.jsx("div",{"data-spark-component":"scrolling-list",className:p.cx("gap-lg group/scrolling-list relative flex flex-col default:w-full",f),...d,children:c}),u.jsx("span",{ref:g,className:"size-0 overflow-hidden",tabIndex:-1})]})};P.displayName="ScrollingList";const L=({children:s,visibility:n="always",className:e,...r})=>u.jsx("div",{"data-spark-component":"scrolling-list-controls",className:p.cx("default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",e),style:{"--scrolling-list-controls-opacity":n==="hover"?"0":"1"},"data-orientation":"horizontal",...r,children:s});L.displayName="ScrollingList.Controls";function K(s,n){const[e,r]=l.useState(!1);return l.useEffect(()=>{const t=c=>{r(!0);const f=c.target,d=n.current;if(f&&d){const o=f.getBoundingClientRect(),g=d.getBoundingClientRect();o.left>=g.left&&o.right<=g.right&&o.top>=g.top&&o.bottom<=g.bottom||f.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}},i=c=>{s.current&&!s.current.contains(c.relatedTarget)&&r(!1)},a=s.current;return a&&(a.addEventListener("focusin",t),a.addEventListener("focusout",i)),()=>{a&&(a.removeEventListener("focusin",t),a.removeEventListener("focusout",i))}},[s,n]),e}const I=({asChild:s=!1,children:n,index:e=0,className:r="",...t})=>{const i=l.useContext(v),a=l.useRef(null),c=i.snapPointIndexes.has(e);K(a,i.scrollAreaRef);const f=s?V.Slot:"div";return u.jsx(f,{"data-spark-component":"scrolling-list-item",role:"listitem",ref:a,className:p.cx("default:w-auto default:shrink-0",{"snap-start":c,"snap-normal":c&&i.snapStop==="normal","snap-always":c&&i.snapStop==="always"},r),...t,children:n})};I.displayName="ScrollingList.Item";function H(...s){return n=>{s.forEach(e=>{typeof e=="function"?e(n):e&&typeof e=="object"&&"current"in e&&(e.current=n)})}}const N=({children:s,ref:n,className:e="",...r})=>{const t=l.useContext(v),i={mandatory:"x mandatory",proximity:"x proximity",none:"none"},a=o=>{!t.loop&&!t.hasPrevPage||(o.preventDefault(),t.goTo(t.hasPrevPage?t.activePageIndex-1:t.pages.length-1,{behavior:t.scrollBehavior}))},c=o=>{!t.loop&&!t.hasNextPage||(o.preventDefault(),t.goTo(t.hasNextPage?t.activePageIndex+1:0,{behavior:t.scrollBehavior}))},f=o=>{o.key==="ArrowLeft"&&a(o),o.key==="ArrowRight"&&c(o)},d={scrollSnapType:i[t.snapType],scrollPaddingInline:"var(--scrolling-list-px)","--scrolling-list-px":`${t.scrollPadding}px`,"--scrolling-list-gap":`${t.gap}px`,...t.withFade&&{maskImage:"linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`calc(100% + ${t.overflow.left?"0px":"44px"} + ${t.overflow.right?"0px":"44px"}) 100%`,maskPosition:`${t.overflow.left?"0px":"-44px"} 0`}};return u.jsx("div",{"data-spark-component":"scrolling-list-items",id:"scrolling-list-items",role:"list",className:p.cx("relative transition-all duration-300","u-no-scrollbar overflow-x-auto scroll-smooth","w-full gap-(--scrolling-list-gap) default:flex default:flex-row","focus-visible:u-outline",e),ref:H(t.scrollAreaRef,t.scrollRef,n),style:d,onKeyDown:f,...r,children:l.Children.map(s,(o,g)=>l.isValidElement(o)?l.cloneElement(o,{index:g}):o)})};N.displayName="ScrollingList.Items";const k=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{e.hasNextPage?e.next({behavior:e.scrollBehavior}):e.goTo(0,{behavior:e.scrollBehavior})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.right;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-next-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(z.ArrowVerticalRight,{})})})};k.displayName="ScrollingList.NextButton";const B=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{e.activePageIndex===0&&(e.scrollAreaRef.current?.scrollLeft||0)>0?e.goTo(0,{behavior:e.scrollBehavior}):e.hasPrevPage?e.prev({behavior:e.scrollBehavior}):e.goTo(e.pages.length-1,{behavior:e.scrollBehavior})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.left;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-prev-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(D.ArrowVerticalLeft,{})})})};B.displayName="ScrollingList.PrevButton";const C=({children:s,...n})=>{const e=l.useContext(v);return u.jsx($.Button,{type:"button",design:"tinted",intent:"surface",tabIndex:0,className:p.cx("z-raised absolute top-1/2 left-0 -translate-y-1/2","not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0"),onClick:e.skipKeyboardNavigation,...n,children:s})};C.displayName="ScrollingList.SkipButton";const R=Object.assign(P,{Controls:L,NextButton:k,PrevButton:B,Item:I,Items:N,SkipButton:C});R.displayName="ScrollingList";exports.ScrollingList=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),T=require("@spark-ui/hooks/use-scroll-overflow"),p=require("class-variance-authority"),l=require("react"),O=require("react-snap-carousel"),V=require("../Slot-DQ8z2zsy.js"),z=require("@spark-ui/icons/ArrowVerticalRight"),w=require("../Icon-C-cNTnzd.js"),S=require("../IconButton-JFDGiOOn.js"),D=require("@spark-ui/icons/ArrowVerticalLeft"),$=require("../Button-CXL2NOrq.js"),v=l.createContext(null),P=({snapType:s="none",snapStop:n="normal",scrollBehavior:e="smooth",loop:r=!1,gap:t=16,withFade:i=!1,scrollPadding:a=0,children:c,className:f,...d})=>{const o=l.useRef(null),g=l.useRef(null),h=O.useSnapCarousel(),{overflow:j,refresh:b}=T.useScrollOverflow(o,{precisionTreshold:1}),{activePageIndex:A,pages:q,refresh:m}=h,x=q[A],E=x?[x[0]+1,x[x.length-1]+1]:[0,0],y=l.useCallback(()=>{m&&o.current&&setTimeout(()=>{m()},0)},[m]);l.useEffect(()=>{y()},[c,y]),l.useLayoutEffect(()=>{o.current&&requestAnimationFrame(()=>{b()})},[c,b]);const F={...h,snapType:s,snapStop:n,skipKeyboardNavigation:()=>{g.current?.focus()},scrollBehavior:e,visibleItemsRange:E,loop:r,gap:t,withFade:i,scrollPadding:a,scrollAreaRef:o,overflow:j};return u.jsxs(v.Provider,{value:F,children:[u.jsx("div",{"data-spark-component":"scrolling-list",className:p.cx("gap-lg group/scrolling-list relative flex flex-col default:w-full",f),...d,children:c}),u.jsx("span",{ref:g,className:"size-0 overflow-hidden",tabIndex:-1})]})};P.displayName="ScrollingList";const L=({children:s,visibility:n="always",className:e,...r})=>u.jsx("div",{"data-spark-component":"scrolling-list-controls",className:p.cx("default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden",e),style:{"--scrolling-list-controls-opacity":n==="hover"?"0":"1"},"data-orientation":"horizontal",...r,children:s});L.displayName="ScrollingList.Controls";function K(s,n){const[e,r]=l.useState(!1);return l.useEffect(()=>{const t=c=>{r(!0);const f=c.target,d=n.current;if(f&&d){const o=f.getBoundingClientRect(),g=d.getBoundingClientRect();o.left>=g.left&&o.right<=g.right&&o.top>=g.top&&o.bottom<=g.bottom||f.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}},i=c=>{s.current&&!s.current.contains(c.relatedTarget)&&r(!1)},a=s.current;return a&&(a.addEventListener("focusin",t),a.addEventListener("focusout",i)),()=>{a&&(a.removeEventListener("focusin",t),a.removeEventListener("focusout",i))}},[s,n]),e}const I=({asChild:s=!1,children:n,index:e=0,className:r="",...t})=>{const i=l.useContext(v),a=l.useRef(null),c=i.snapPointIndexes.has(e);K(a,i.scrollAreaRef);const f=s?V.Slot:"div";return u.jsx(f,{"data-spark-component":"scrolling-list-item",role:"listitem",ref:a,className:p.cx("default:w-auto default:shrink-0",{"snap-start":c,"snap-normal":c&&i.snapStop==="normal","snap-always":c&&i.snapStop==="always"},r),...t,children:n})};I.displayName="ScrollingList.Item";function H(...s){return n=>{s.forEach(e=>{typeof e=="function"?e(n):e&&typeof e=="object"&&"current"in e&&(e.current=n)})}}const N=({children:s,ref:n,className:e="",...r})=>{const t=l.useContext(v),i={mandatory:"x mandatory",proximity:"x proximity",none:"none"},a=o=>{!t.loop&&!t.hasPrevPage||(o.preventDefault(),t.goTo(t.hasPrevPage?t.activePageIndex-1:t.pages.length-1,{behavior:t.scrollBehavior}))},c=o=>{!t.loop&&!t.hasNextPage||(o.preventDefault(),t.goTo(t.hasNextPage?t.activePageIndex+1:0,{behavior:t.scrollBehavior}))},f=o=>{o.key==="ArrowLeft"&&a(o),o.key==="ArrowRight"&&c(o)},d={scrollSnapType:i[t.snapType],scrollPaddingInline:"var(--scrolling-list-px)","--scrolling-list-px":`${t.scrollPadding}px`,"--scrolling-list-gap":`${t.gap}px`,...t.withFade&&{maskImage:"linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`calc(100% + ${t.overflow.left?"0px":"44px"} + ${t.overflow.right?"0px":"44px"}) 100%`,maskPosition:`${t.overflow.left?"0px":"-44px"} 0`}};return u.jsx("div",{"data-spark-component":"scrolling-list-items",id:"scrolling-list-items",role:"list",className:p.cx("relative transition-all duration-300","u-no-scrollbar overflow-x-auto scroll-smooth","w-full gap-(--scrolling-list-gap) default:flex default:flex-row","focus-visible:u-outline",e),ref:H(t.scrollAreaRef,t.scrollRef,n),style:d,onKeyDown:f,...r,children:l.Children.map(s,(o,g)=>l.isValidElement(o)?l.cloneElement(o,{index:g}):o)})};N.displayName="ScrollingList.Items";const k=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{e.hasNextPage?e.next({behavior:e.scrollBehavior}):e.goTo(0,{behavior:e.scrollBehavior})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.right;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-next-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(z.ArrowVerticalRight,{})})})};k.displayName="ScrollingList.NextButton";const B=({"aria-label":s,...n})=>{const e=l.useContext(v),r=()=>{e.activePageIndex===0&&(e.scrollAreaRef.current?.scrollLeft||0)>0?e.goTo(0,{behavior:e.scrollBehavior}):e.hasPrevPage?e.prev({behavior:e.scrollBehavior}):e.goTo(e.pages.length-1,{behavior:e.scrollBehavior})},i=!(e.overflow.left||e.overflow.right)||!e.loop&&!e.overflow.left;return u.jsx(S.IconButton,{"data-spark-component":"scrolling-list-prev-button",size:"sm",intent:"surface",design:"filled",className:p.cx("pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible","group-hover/scrolling-list:opacity-none focus-visible:opacity-none"),onClick:r,disabled:i,"aria-label":s,"aria-controls":"scrolling-list-items",...n,children:u.jsx(w.Icon,{children:u.jsx(D.ArrowVerticalLeft,{})})})};B.displayName="ScrollingList.PrevButton";const C=({children:s,...n})=>{const e=l.useContext(v);return u.jsx($.Button,{type:"button",design:"tinted",intent:"surface",tabIndex:0,className:p.cx("z-raised absolute top-1/2 left-0 -translate-y-1/2","not-focus-visible:pointer-events-none not-focus-visible:size-0 not-focus-visible:opacity-0"),onClick:e.skipKeyboardNavigation,...n,children:s})};C.displayName="ScrollingList.SkipButton";const R=Object.assign(P,{Controls:L,NextButton:k,PrevButton:B,Item:I,Items:N,SkipButton:C});R.displayName="ScrollingList";exports.ScrollingList=R;
 //# sourceMappingURL=index.js.map

package/dist/scrolling-list/index.mjs

@@ -5,10 +5,10 @@ import { createContext as $, useRef as b, useCallback as j, useEffect as S, useL
 import { useSnapCarousel as J } from "react-snap-carousel";
 import { S as M } from "../Slot-DLY1rJrG.mjs";
 import { ArrowVerticalRight as Q } from "@spark-ui/icons/ArrowVerticalRight";
-import { I as P } from "../Icon-C23-htlD.mjs";
-import { I as L } from "../IconButton-Bfd-6BAD.mjs";
+import { I as P } from "../Icon-BO327oHU.mjs";
+import { I as L } from "../IconButton-CP4JbWsI.mjs";
 import { ArrowVerticalLeft as U } from "@spark-ui/icons/ArrowVerticalLeft";
-import { B as X } from "../Button-DPncfbbM.mjs";
+import { B as X } from "../Button-CcIRizse.mjs";
 const d = $(
   null
 ), N = ({

package/dist/segmented-gauge/SegmentedGauge.d.ts

@@ -23,7 +23,7 @@ export interface SegmentedGaugeProps {
     /**
      * Intent of the gauge - predefined color intent
      */
-    intent?: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    intent?: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
     /**
      * Custom color for the gauge (hex, CSS variable, etc.)
      */

package/dist/segmented-gauge/SegmentedGaugeContext.d.ts

@@ -5,7 +5,7 @@ export interface SegmentedGaugeContextValue {
     segments: number;
     currentIndex: number;
     size: 'sm' | 'md';
-    intent: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    intent: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
     customColor?: string;
     labelId: string;
     gaugeId: string;

package/dist/segmented-gauge/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("class-variance-authority"),d=require("react"),C=d.createContext(null),I=()=>{const e=d.useContext(C);if(!e)throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");return e},h=({className:e,children:a,ref:t,id:r,...c})=>{const{labelId:n}=I();return s.jsx("span",{"data-spark-component":"segmented-gauge-label","data-testid":"segmented-gauge-label",ref:t,id:r||n,className:p.cx("default:text-on-surface default:text-body-2",e),...c,children:a})};h.displayName="SegmentedGauge.Label";const G=({index:e=0,className:a,children:t,ref:r,...c})=>{const{size:n,intent:g,customColor:o,currentIndex:m}=I(),i=m!==-1&&e<=m,x=m!==-1&&e===m,S=d.useMemo(()=>{if(o)return o;switch(g){case"main":return"var(--color-main)";case"support":return"var(--color-support)";case"basic":return"var(--color-basic)";case"accent":return"var(--color-accent)";case"success":return"var(--color-success)";case"alert":return"var(--color-alert)";case"danger":return"var(--color-error)";case"info":return"var(--color-info)";case"neutral":return"var(--color-neutral)";default:return"var(--color-neutral)"}},[g,o]),j=p.cx("border-outline relative rounded-full",{"h-sz-8 w-sz-24":n==="sm","h-sz-12 w-sz-36":n==="md","default:bg-[var(--gauge-color)]":i,"border-sm bg-surface":!i},a),u=p.cx("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2","default:bg-surface default:rounded-full","border-[var(--gauge-color)]",{"size-sz-12 border-md":n==="sm","size-sz-20 border-lg":n==="md"});return s.jsxs("div",{"data-spark-component":"segmented-gauge-segment","data-testid":"segmented-gauge-segment","data-active":i,"data-current":x,ref:r,style:{"--gauge-color":S},className:j,...c,children:[t,x&&s.jsx("div",{className:u,"aria-hidden":"true"})]})};G.displayName="SegmentedGauge.Segment";const y=({className:e,children:a,ref:t,...r})=>s.jsx("div",{"data-spark-component":"segmented-gauge-track",ref:t,className:p.cx("gap-sm relative flex rounded-full",e),...r,children:a});y.displayName="SegmentedGauge.Track";const A=(e,a,t,r)=>{if(e==null)return-1;const c=Math.max(a,Math.min(t,e)),g=(t-a)/(r-1),o=(c-a)/g;return Math.max(0,Math.min(r-1,Math.round(o)))},z=({value:e,min:a,max:t,description:r,size:c="md",intent:n="neutral",customColor:g,id:o,"aria-label":m,className:i,ref:x,children:S,...j})=>{const u=t-a+1,l=d.useMemo(()=>A(e,a,t,u),[e,a,t,u]),v=d.useId(),k=d.useId(),f=o||k,N=d.useMemo(()=>Array.from({length:u},(T,b)=>({isActive:l!==-1&&b<=l,isCurrent:l!==-1&&b===l})),[u,l]),w=d.useMemo(()=>({value:e,min:a,max:t,segments:u,currentIndex:l,size:c,intent:n,customColor:g,labelId:v,gaugeId:f}),[e,a,t,u,l,c,n,g,v,f]),L=e!=null?{role:"meter","aria-valuenow":e,"aria-valuemin":a,"aria-valuemax":t}:{role:"status"};return s.jsx(C.Provider,{value:w,children:s.jsx("div",{id:f,"data-spark-component":"segmented-gauge",ref:x,className:p.cx("gap-md flex flex-wrap items-center",i),...L,"aria-labelledby":o?`${f}-label`:void 0,"aria-label":o?void 0:m,"aria-describedby":v,...j,children:S?S({segments:N,currentIndex:l}):s.jsxs(s.Fragment,{children:[s.jsx(y,{children:N.map((T,b)=>s.jsx(G,{index:b},b))}),r&&s.jsx(h,{id:v,children:r})]})})})};z.displayName="SegmentedGauge";const M=Object.assign(z,{Track:y,Segment:G,Label:h});M.displayName="SegmentedGauge";y.displayName="SegmentedGauge.Track";G.displayName="SegmentedGauge.Segment";h.displayName="SegmentedGauge.Label";exports.SegmentedGauge=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("class-variance-authority"),d=require("react"),C=d.createContext(null),I=()=>{const e=d.useContext(C);if(!e)throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");return e},h=({className:e,children:a,ref:t,id:r,...c})=>{const{labelId:n}=I();return s.jsx("span",{"data-spark-component":"segmented-gauge-label","data-testid":"segmented-gauge-label",ref:t,id:r||n,className:p.cx("default:text-on-surface default:text-body-2",e),...c,children:a})};h.displayName="SegmentedGauge.Label";const G=({index:e=0,className:a,children:t,ref:r,...c})=>{const{size:n,intent:g,customColor:o,currentIndex:m}=I(),i=m!==-1&&e<=m,x=m!==-1&&e===m,S=d.useMemo(()=>{if(o)return o;switch(g){case"main":return"var(--color-main)";case"support":return"var(--color-support)";case"accent":return"var(--color-accent)";case"success":return"var(--color-success)";case"alert":return"var(--color-alert)";case"danger":return"var(--color-error)";case"info":return"var(--color-info)";case"neutral":return"var(--color-neutral)";default:return"var(--color-neutral)"}},[g,o]),j=p.cx("border-outline relative rounded-full",{"h-sz-8 w-sz-24":n==="sm","h-sz-12 w-sz-36":n==="md","default:bg-[var(--gauge-color)]":i,"border-sm bg-surface":!i},a),u=p.cx("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2","default:bg-surface default:rounded-full","border-[var(--gauge-color)]",{"size-sz-12 border-md":n==="sm","size-sz-20 border-lg":n==="md"});return s.jsxs("div",{"data-spark-component":"segmented-gauge-segment","data-testid":"segmented-gauge-segment","data-active":i,"data-current":x,ref:r,style:{"--gauge-color":S},className:j,...c,children:[t,x&&s.jsx("div",{className:u,"aria-hidden":"true"})]})};G.displayName="SegmentedGauge.Segment";const y=({className:e,children:a,ref:t,...r})=>s.jsx("div",{"data-spark-component":"segmented-gauge-track",ref:t,className:p.cx("gap-sm relative flex rounded-full",e),...r,children:a});y.displayName="SegmentedGauge.Track";const A=(e,a,t,r)=>{if(e==null)return-1;const c=Math.max(a,Math.min(t,e)),g=(t-a)/(r-1),o=(c-a)/g;return Math.max(0,Math.min(r-1,Math.round(o)))},z=({value:e,min:a,max:t,description:r,size:c="md",intent:n="neutral",customColor:g,id:o,"aria-label":m,className:i,ref:x,children:S,...j})=>{const u=t-a+1,l=d.useMemo(()=>A(e,a,t,u),[e,a,t,u]),f=d.useId(),k=d.useId(),v=o||k,N=d.useMemo(()=>Array.from({length:u},(T,b)=>({isActive:l!==-1&&b<=l,isCurrent:l!==-1&&b===l})),[u,l]),w=d.useMemo(()=>({value:e,min:a,max:t,segments:u,currentIndex:l,size:c,intent:n,customColor:g,labelId:f,gaugeId:v}),[e,a,t,u,l,c,n,g,f,v]),L=e!=null?{role:"meter","aria-valuenow":e,"aria-valuemin":a,"aria-valuemax":t}:{role:"status"};return s.jsx(C.Provider,{value:w,children:s.jsx("div",{id:v,"data-spark-component":"segmented-gauge",ref:x,className:p.cx("gap-md flex flex-wrap items-center",i),...L,"aria-labelledby":o?`${v}-label`:void 0,"aria-label":o?void 0:m,"aria-describedby":f,...j,children:S?S({segments:N,currentIndex:l}):s.jsxs(s.Fragment,{children:[s.jsx(y,{children:N.map((T,b)=>s.jsx(G,{index:b},b))}),r&&s.jsx(h,{id:f,children:r})]})})})};z.displayName="SegmentedGauge";const M=Object.assign(z,{Track:y,Segment:G,Label:h});M.displayName="SegmentedGauge";y.displayName="SegmentedGauge.Track";G.displayName="SegmentedGauge.Segment";h.displayName="SegmentedGauge.Label";exports.SegmentedGauge=M;
 //# sourceMappingURL=index.js.map

package/dist/segmented-gauge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'basic':\n        return 'var(--color-basic)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}

package/dist/segmented-gauge/index.mjs

@@ -1,4 +1,4 @@
-import { jsx as d, jsxs as I, Fragment as P } from "react/jsx-runtime";
+import { jsx as c, jsxs as I, Fragment as P } from "react/jsx-runtime";
 import { cx as p } from "class-variance-authority";
 import { createContext as V, useContext as _, useMemo as h, useId as z } from "react";
 const k = V(null), w = () => {
@@ -14,7 +14,7 @@ const k = V(null), w = () => {
   ...o
 }) => {
   const { labelId: n } = w();
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "span",
     {
       "data-spark-component": "segmented-gauge-label",
@@ -43,8 +43,6 @@ const x = ({
         return "var(--color-main)";
       case "support":
         return "var(--color-support)";
-      case "basic":
-        return "var(--color-basic)";
       case "accent":
         return "var(--color-accent)";
       case "success":
@@ -93,7 +91,7 @@ const x = ({
       ...o,
       children: [
         t,
-        b && /* @__PURE__ */ d("div", { className: l, "aria-hidden": "true" })
+        b && /* @__PURE__ */ c("div", { className: l, "aria-hidden": "true" })
       ]
     }
   );
@@ -104,7 +102,7 @@ const y = ({
   children: a,
   ref: t,
   ...r
-}) => /* @__PURE__ */ d(
+}) => /* @__PURE__ */ c(
   "div",
   {
     "data-spark-component": "segmented-gauge-track",
@@ -135,26 +133,26 @@ const $ = (e, a, t, r) => {
   children: f,
   ...N
 }) => {
-  const l = t - a + 1, c = h(
+  const l = t - a + 1, d = h(
     () => $(e, a, t, l),
     [e, a, t, l]
   ), v = z(), L = z(), S = s || L, C = h(() => Array.from({ length: l }, (A, i) => ({
-    isActive: c !== -1 && i <= c,
-    isCurrent: c !== -1 && i === c
-  })), [l, c]), T = h(
+    isActive: d !== -1 && i <= d,
+    isCurrent: d !== -1 && i === d
+  })), [l, d]), T = h(
     () => ({
       value: e,
       min: a,
       max: t,
       segments: l,
-      currentIndex: c,
+      currentIndex: d,
       size: o,
       intent: n,
       customColor: u,
       labelId: v,
       gaugeId: S
     }),
-    [e, a, t, l, c, o, n, u, v, S]
+    [e, a, t, l, d, o, n, u, v, S]
   ), j = e != null ? {
     role: "meter",
     "aria-valuenow": e,
@@ -163,7 +161,7 @@ const $ = (e, a, t, r) => {
   } : {
     role: "status"
   };
-  return /* @__PURE__ */ d(k.Provider, { value: T, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(k.Provider, { value: T, children: /* @__PURE__ */ c(
     "div",
     {
       id: S,
@@ -177,10 +175,10 @@ const $ = (e, a, t, r) => {
       ...N,
       children: f ? f({
         segments: C,
-        currentIndex: c
+        currentIndex: d
       }) : /* @__PURE__ */ I(P, { children: [
-        /* @__PURE__ */ d(y, { children: C.map((A, i) => /* @__PURE__ */ d(x, { index: i }, i)) }),
-        r && /* @__PURE__ */ d(G, { id: v, children: r })
+        /* @__PURE__ */ c(y, { children: C.map((A, i) => /* @__PURE__ */ c(x, { index: i }, i)) }),
+        r && /* @__PURE__ */ c(G, { id: v, children: r })
       ] })
     }
   ) });

package/dist/segmented-gauge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'basic':\n        return 'var(--color-basic)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?: 'main' | 'support' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex flex-wrap items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\n          <>\n            <SegmentedGaugeTrack>\n              {segmentsData.map((_, index) => (\n                <SegmentedGaugeSegment key={index} index={index} />\n              ))}\n            </SegmentedGaugeTrack>\n\n            {description && (\n              <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n            )}\n          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}

package/dist/select/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ae=require("@spark-ui/components/form-field"),ne=require("@spark-ui/hooks/use-combined-state"),r=require("react"),f=require("class-variance-authority"),M=require("../Icon-CF0W0LKr.js"),oe=require("@spark-ui/icons/ArrowHorizontalDown"),ce=e=>t=>r.Children.toArray(e).filter(r.isValidElement).find(l=>C(l)?.includes(t)),C=e=>e?e.type.displayName:"",T=(e,t=[])=>(r.Children.forEach(e,s=>{if(r.isValidElement(s)){if(C(s)==="Select.Item"||C(s)==="Select.Placeholder"){const l=s.props;t.push({value:l.value,disabled:!!l.disabled,text:l.children})}s.props.children&&T(s.props.children,t)}}),t),F=e=>{const t=new Map;return T(e).forEach(s=>{t.set(s.value,s)}),t},D=r.createContext(null),ie=":select",R=({children:e,defaultValue:t,value:s,onValueChange:l,disabled:o=!1,readOnly:c=!1,state:i,itemsComponent:n,name:d,required:x})=>{const[h,b]=ne.useCombinedState(s,t,l),[S,y]=r.useState(void 0),[m,v]=r.useState(F(n)),[I,p]=r.useState(),_=m.entries().next()?.value?.[1],B=typeof h=="string"?m.get(h):_,J=s!=null,u=ae.useFormFieldControl(),K=u.state||i,Q=`${ie}-field-${r.useId()}`,W=u.id||Q,Y=u.labelId,Z=u.disabled??o,ee=u.readOnly??c,te=u.name??d,se=!!(u.isRequired??x);return r.useEffect(()=>{const V=F(n),k=[...m.values()],N=[...V.values()];(k.length!==N.length||k.some((z,A)=>{const le=z.value!==N[A]?.value,re=z.text!==N[A]?.text;return le||re}))&&v(V)},[e]),a.jsx(D.Provider,{value:{disabled:Z,readOnly:ee,itemsMap:m,state:K,itemsComponent:n,selectedItem:B,setValue:b,isControlled:J,onValueChange:l,ariaLabel:I,setAriaLabel:p,fieldId:W,fieldLabelId:Y,name:te,required:se,placeholder:S,setPlaceholder:y},children:e})},g=()=>{const e=r.useContext(D);if(!e)throw Error("useSelectContext must be used within a Select provider");return e},$=({children:e,...t})=>{const s=ce(e),l=s("Trigger"),o=s("Items");return a.jsx(R,{...t,itemsComponent:o,children:l})};$.displayName="Select";const H=r.createContext(null),de=({children:e})=>{const[t,s]=r.useState("");return a.jsx(H.Provider,{value:{groupLabel:t,setGroupLabel:s},children:e})},U=()=>{const e=r.useContext(H);if(!e)throw Error("useSelectGroupContext must be used within a SelectGroup provider");return e},j=({children:e,ref:t,...s})=>a.jsx(de,{children:a.jsx(ue,{ref:t,...s,children:e})}),ue=({children:e,className:t,ref:s})=>{const{groupLabel:l}=U();return a.jsx("optgroup",{"data-spark-component":"select-group",ref:s,className:f.cx(t),label:l,children:e})};j.displayName="Select.Group";const w=({disabled:e=!1,value:t,children:s,ref:l})=>a.jsx("option",{"data-spark-component":"select-item",ref:l,value:t,disabled:e,children:s},t);w.displayName="Select.Item";const me=f.cva(["absolute left-0 top-0 size-full rounded-lg opacity-0","min-h-sz-44","ring-1 outline-hidden ring-inset focus:ring-2"],{variants:{state:{undefined:"ring-outline focus:ring-outline-high",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"cursor-not-allowed"},readOnly:{true:"cursor-default"}},compoundVariants:[{disabled:!1,state:void 0,class:"hover:ring-outline-high"}]}),P=({children:e,className:t,ref:s,...l})=>{const{state:o,disabled:c,readOnly:i,ariaLabel:n,fieldLabelId:d,isControlled:x,onValueChange:h,selectedItem:b,setValue:S,name:y,required:m,fieldId:v}=g(),I=p=>{x?(p.preventDefault(),h?.(p.target.value)):S(p.target.value)};return a.jsx("select",{"data-spark-component":"select-items",ref:s,disabled:c||i,name:y,required:m,"aria-labelledby":d,...n&&{"aria-label":n},className:me({className:t,state:o,disabled:c,readOnly:i}),value:b?.value,onChange:I,id:v,...l,children:e})};P.displayName="Select.Items";const L=({children:e})=>{const{setGroupLabel:t}=U();return r.useEffect(()=>{t(e)},[e]),null};L.displayName="Select.Label";const E=({children:e})=>a.jsx(M.Icon,{size:"sm",className:"shrink-0",children:e});E.displayName="Select.LeadingIcon";const O=({disabled:e=!1,children:t,ref:s})=>{const{setPlaceholder:l}=g();return r.useEffect(()=>{l(t)},[t]),a.jsx("option",{"data-spark-component":"select-placeholder",ref:s,value:"",disabled:e,children:t},"placeholder")};O.displayName="Select.Placeholder";const pe=f.cva(["relative flex w-full items-center justify-between","min-h-sz-44 rounded-lg px-lg","text-body-1","ring-1 outline-hidden ring-inset focus-within:ring-focus"],{variants:{state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{false:"focus-within:ring-2"},readOnly:{true:""}},compoundVariants:[{readOnly:!1,disabled:!1,class:"bg-surface text-on-surface"},{readOnly:!0,class:"bg-on-surface/dim-5 text-on-surface cursor-default"},{disabled:!0,class:["bg-on-surface/dim-5 text-on-surface/dim-3","cursor-not-allowed"]},{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"}]}),q=({"aria-label":e,children:t,className:s,ref:l})=>{const{disabled:o,readOnly:c,state:i,setAriaLabel:n,itemsComponent:d}=g();return r.useEffect(()=>{e&&n(e)},[e]),a.jsxs("div",{"data-spark-component":"select-trigger",ref:l,className:pe({className:s,state:i,disabled:o,readOnly:c}),children:[a.jsx("span",{className:"gap-md flex items-center justify-start",children:t}),a.jsx(M.Icon,{className:"ml-md shrink-0",size:"sm",children:a.jsx(oe.ArrowHorizontalDown,{})}),d]})};q.displayName="Select.Trigger";const G=({children:e,className:t,placeholder:s,ref:l})=>{const{selectedItem:o,placeholder:c,disabled:i}=g(),n=o?.value==null,d=s||c;return a.jsx("span",{role:"presentation","data-spark-component":"select-value",ref:l,className:f.cx("flex shrink items-center text-left",t),children:a.jsx("span",{className:f.cx("line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",n&&!i&&"text-on-surface/dim-1"),children:n?d:e||o?.text})})};G.displayName="Select.Value";const X=Object.assign($,{Group:j,Item:w,Items:P,Placeholder:O,Label:L,Trigger:q,Value:G,LeadingIcon:E});X.displayName="Select";j.displayName="Select.Group";P.displayName="Select.Items";w.displayName="Select.Item";O.displayName="Select.Placeholder";L.displayName="Select.Label";q.displayName="Select.Trigger";G.displayName="Select.Value";E.displayName="Select.LeadingIcon";exports.Select=X;exports.SelectProvider=R;exports.useSelectContext=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ae=require("@spark-ui/components/form-field"),ne=require("@spark-ui/hooks/use-combined-state"),r=require("react"),f=require("class-variance-authority"),M=require("../Icon-C-cNTnzd.js"),oe=require("@spark-ui/icons/ArrowHorizontalDown"),ce=e=>t=>r.Children.toArray(e).filter(r.isValidElement).find(l=>C(l)?.includes(t)),C=e=>e?e.type.displayName:"",T=(e,t=[])=>(r.Children.forEach(e,s=>{if(r.isValidElement(s)){if(C(s)==="Select.Item"||C(s)==="Select.Placeholder"){const l=s.props;t.push({value:l.value,disabled:!!l.disabled,text:l.children})}s.props.children&&T(s.props.children,t)}}),t),F=e=>{const t=new Map;return T(e).forEach(s=>{t.set(s.value,s)}),t},D=r.createContext(null),ie=":select",R=({children:e,defaultValue:t,value:s,onValueChange:l,disabled:o=!1,readOnly:c=!1,state:i,itemsComponent:n,name:d,required:x})=>{const[h,b]=ne.useCombinedState(s,t,l),[S,y]=r.useState(void 0),[m,v]=r.useState(F(n)),[I,p]=r.useState(),_=m.entries().next()?.value?.[1],B=typeof h=="string"?m.get(h):_,J=s!=null,u=ae.useFormFieldControl(),K=u.state||i,Q=`${ie}-field-${r.useId()}`,W=u.id||Q,Y=u.labelId,Z=u.disabled??o,ee=u.readOnly??c,te=u.name??d,se=!!(u.isRequired??x);return r.useEffect(()=>{const V=F(n),k=[...m.values()],N=[...V.values()];(k.length!==N.length||k.some((z,A)=>{const le=z.value!==N[A]?.value,re=z.text!==N[A]?.text;return le||re}))&&v(V)},[e]),a.jsx(D.Provider,{value:{disabled:Z,readOnly:ee,itemsMap:m,state:K,itemsComponent:n,selectedItem:B,setValue:b,isControlled:J,onValueChange:l,ariaLabel:I,setAriaLabel:p,fieldId:W,fieldLabelId:Y,name:te,required:se,placeholder:S,setPlaceholder:y},children:e})},g=()=>{const e=r.useContext(D);if(!e)throw Error("useSelectContext must be used within a Select provider");return e},$=({children:e,...t})=>{const s=ce(e),l=s("Trigger"),o=s("Items");return a.jsx(R,{...t,itemsComponent:o,children:l})};$.displayName="Select";const H=r.createContext(null),de=({children:e})=>{const[t,s]=r.useState("");return a.jsx(H.Provider,{value:{groupLabel:t,setGroupLabel:s},children:e})},U=()=>{const e=r.useContext(H);if(!e)throw Error("useSelectGroupContext must be used within a SelectGroup provider");return e},j=({children:e,ref:t,...s})=>a.jsx(de,{children:a.jsx(ue,{ref:t,...s,children:e})}),ue=({children:e,className:t,ref:s})=>{const{groupLabel:l}=U();return a.jsx("optgroup",{"data-spark-component":"select-group",ref:s,className:f.cx(t),label:l,children:e})};j.displayName="Select.Group";const w=({disabled:e=!1,value:t,children:s,ref:l})=>a.jsx("option",{"data-spark-component":"select-item",ref:l,value:t,disabled:e,children:s},t);w.displayName="Select.Item";const me=f.cva(["absolute left-0 top-0 size-full rounded-lg opacity-0","min-h-sz-44","ring-1 outline-hidden ring-inset focus:ring-2"],{variants:{state:{undefined:"ring-outline focus:ring-outline-high",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"cursor-not-allowed"},readOnly:{true:"cursor-default"}},compoundVariants:[{disabled:!1,state:void 0,class:"hover:ring-outline-high"}]}),P=({children:e,className:t,ref:s,...l})=>{const{state:o,disabled:c,readOnly:i,ariaLabel:n,fieldLabelId:d,isControlled:x,onValueChange:h,selectedItem:b,setValue:S,name:y,required:m,fieldId:v}=g(),I=p=>{x?(p.preventDefault(),h?.(p.target.value)):S(p.target.value)};return a.jsx("select",{"data-spark-component":"select-items",ref:s,disabled:c||i,name:y,required:m,"aria-labelledby":d,...n&&{"aria-label":n},className:me({className:t,state:o,disabled:c,readOnly:i}),value:b?.value,onChange:I,id:v,...l,children:e})};P.displayName="Select.Items";const L=({children:e})=>{const{setGroupLabel:t}=U();return r.useEffect(()=>{t(e)},[e]),null};L.displayName="Select.Label";const E=({children:e})=>a.jsx(M.Icon,{size:"sm",className:"shrink-0",children:e});E.displayName="Select.LeadingIcon";const O=({disabled:e=!1,children:t,ref:s})=>{const{setPlaceholder:l}=g();return r.useEffect(()=>{l(t)},[t]),a.jsx("option",{"data-spark-component":"select-placeholder",ref:s,value:"",disabled:e,children:t},"placeholder")};O.displayName="Select.Placeholder";const pe=f.cva(["relative flex w-full items-center justify-between","min-h-sz-44 rounded-full px-lg","text-body-1","ring-1 outline-hidden ring-inset focus-within:ring-focus"],{variants:{state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{false:"focus-within:ring-2"},readOnly:{true:""}},compoundVariants:[{readOnly:!1,disabled:!1,class:"bg-surface text-on-surface"},{readOnly:!0,class:"bg-on-surface/dim-5 text-on-surface cursor-default"},{disabled:!0,class:["bg-on-surface/dim-5 text-on-surface/dim-3","cursor-not-allowed"]},{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"}]}),q=({"aria-label":e,children:t,className:s,ref:l})=>{const{disabled:o,readOnly:c,state:i,setAriaLabel:n,itemsComponent:d}=g();return r.useEffect(()=>{e&&n(e)},[e]),a.jsxs("div",{"data-spark-component":"select-trigger",ref:l,className:pe({className:s,state:i,disabled:o,readOnly:c}),children:[a.jsx("span",{className:"gap-md flex items-center justify-start",children:t}),a.jsx(M.Icon,{className:"ml-md shrink-0",size:"sm",children:a.jsx(oe.ArrowHorizontalDown,{})}),d]})};q.displayName="Select.Trigger";const G=({children:e,className:t,placeholder:s,ref:l})=>{const{selectedItem:o,placeholder:c,disabled:i}=g(),n=o?.value==null,d=s||c;return a.jsx("span",{role:"presentation","data-spark-component":"select-value",ref:l,className:f.cx("flex shrink items-center text-left",t),children:a.jsx("span",{className:f.cx("line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",n&&!i&&"text-on-surface/dim-1"),children:n?d:e||o?.text})})};G.displayName="Select.Value";const X=Object.assign($,{Group:j,Item:w,Items:P,Placeholder:O,Label:L,Trigger:q,Value:G,LeadingIcon:E});X.displayName="Select";j.displayName="Select.Group";P.displayName="Select.Items";w.displayName="Select.Item";O.displayName="Select.Placeholder";L.displayName="Select.Label";q.displayName="Select.Trigger";G.displayName="Select.Value";E.displayName="Select.LeadingIcon";exports.Select=X;exports.SelectProvider=R;exports.useSelectContext=g;
 //# sourceMappingURL=index.js.map