@spark-ui/components 17.8.0 → 17.9.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +3 -3
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/{button-B-sMnDc_.js → button-3F9Xrf4E.js} +2 -2
- package/dist/{button-B-sMnDc_.js.map → button-3F9Xrf4E.js.map} +1 -1
- package/dist/{button-C6nlNPdv.mjs → button-BFQ3w9CA.mjs} +2 -2
- package/dist/{button-C6nlNPdv.mjs.map → button-BFQ3w9CA.mjs.map} +1 -1
- package/dist/card/index.js +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.mjs +1 -1
- package/dist/circular-meter/index.js +1 -1
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs +5 -5
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.mjs +2 -2
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +1 -1
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +1 -1
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.mjs +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.mjs +3 -3
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/{form-field-OhKW7u5I.mjs → form-field-CV5dzt-I.mjs} +2 -2
- package/dist/{form-field-OhKW7u5I.mjs.map → form-field-CV5dzt-I.mjs.map} +1 -1
- package/dist/{form-field-1sKqNg7F.js → form-field-CYGgse45.js} +2 -2
- package/dist/{form-field-1sKqNg7F.js.map → form-field-CYGgse45.js.map} +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/{icon-button-DpucUC_L.mjs → icon-button-C3RgGf2o.mjs} +2 -2
- package/dist/{icon-button-DpucUC_L.mjs.map → icon-button-C3RgGf2o.mjs.map} +1 -1
- package/dist/{icon-button-CYz_Fitz.js → icon-button-jcPwRD21.js} +2 -2
- package/dist/{icon-button-CYz_Fitz.js.map → icon-button-jcPwRD21.js.map} +1 -1
- package/dist/kbd/index.js +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/meter/index.js +1 -1
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.mjs +2 -2
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.mjs +1 -1
- package/dist/{popover-DsBY8eYl.mjs → popover-DKa4WOQV.mjs} +2 -2
- package/dist/{popover-DsBY8eYl.mjs.map → popover-DKa4WOQV.mjs.map} +1 -1
- package/dist/{popover-CrKp_TKk.js → popover-ayPbAw59.js} +2 -2
- package/dist/{popover-CrKp_TKk.js.map → popover-ayPbAw59.js.map} +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/{progress-C3w4PmxY.mjs → progress-C-Zs94G2.mjs} +2 -2
- package/dist/{progress-C3w4PmxY.mjs.map → progress-C-Zs94G2.mjs.map} +1 -1
- package/dist/{progress-BjqJSRnK.js → progress-DaQt4olK.js} +2 -2
- package/dist/{progress-BjqJSRnK.js.map → progress-DaQt4olK.js.map} +1 -1
- package/dist/progress-tracker/index.js +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +3 -3
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs +3 -3
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +2 -2
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +2 -2
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +4 -4
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +1 -1
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.mjs +2 -2
- package/package.json +5 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/ArrowVerticalRight`),l=require(`@spark-ui/icons/ArrowVerticalLeft`),u=require(`react-snap-carousel`);var d=(0,a.createContext)(null),f=({snapType:e=`none`,snapStop:t=`normal`,scrollBehavior:n=`smooth`,loop:r=!1,gap:c=16,withFade:l=!1,scrollPadding:f=0,children:p,className:m,...h})=>{let g=(0,a.useRef)(null),_=(0,a.useRef)(null),v=(0,u.useSnapCarousel)(),{overflow:y,refresh:b}=(0,s.useScrollOverflow)(g,{precisionTreshold:1}),{activePageIndex:x,pages:S,refresh:C}=v,w=S[x],T=w?[w[0]+1,w[w.length-1]+1]:[0,0],E=(0,a.useCallback)(()=>{C&&g.current&&setTimeout(()=>{C()},0)},[C]);(0,a.useEffect)(()=>{E()},[p,E]),(0,a.useLayoutEffect)(()=>{g.current&&requestAnimationFrame(()=>{b()})},[p,b]);let D=()=>{_.current?.focus()},O={...v,snapType:e,snapStop:t,skipKeyboardNavigation:D,scrollBehavior:n,visibleItemsRange:T,loop:r,gap:c,withFade:l,scrollPadding:f,scrollAreaRef:g,overflow:y};return(0,o.jsxs)(d.Provider,{value:O,children:[(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list`,className:(0,i.cx)(`gap-lg group/scrolling-list relative flex flex-col default:w-full`,m),...h,children:p}),(0,o.jsx)(`span`,{ref:_,className:`size-0 overflow-hidden`,tabIndex:-1})]})};f.displayName=`ScrollingList`;var p=({children:e,visibility:t=`always`,className:n,...r})=>(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-controls`,className:(0,i.cx)(`default:px-md pointer-events-none absolute inset-0 flex flex-row items-center justify-between overflow-hidden`,n),style:{"--scrolling-list-controls-opacity":t===`hover`?`0`:`1`},"data-orientation":`horizontal`,...r,children:e});p.displayName=`ScrollingList.Controls`;function m(e,t){let[n,r]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let n=e=>{r(!0);let n=e.target,i=t.current;if(n&&i){let e=n.getBoundingClientRect(),t=i.getBoundingClientRect();e.left>=t.left&&e.right<=t.right&&e.top>=t.top&&e.bottom<=t.bottom||n.scrollIntoView({behavior:`smooth`,inline:`center`,block:`nearest`})}},i=t=>{e.current&&!e.current.contains(t.relatedTarget)&&r(!1)},a=e.current;return a&&(a.addEventListener(`focusin`,n),a.addEventListener(`focusout`,i)),()=>{a&&(a.removeEventListener(`focusin`,n),a.removeEventListener(`focusout`,i))}},[e,t]),n}var h=({asChild:t=!1,children:n,index:r=0,className:s=``,...c})=>{let l=(0,a.useContext)(d),u=(0,a.useRef)(null),f=l.snapPointIndexes.has(r);return m(u,l.scrollAreaRef),(0,o.jsx)(t?e.Slot:`div`,{"data-spark-component":`scrolling-list-item`,role:`listitem`,ref:u,className:(0,i.cx)(`default:w-auto default:shrink-0`,{"snap-start":f,"snap-normal":f&&l.snapStop===`normal`,"snap-always":f&&l.snapStop===`always`},s),...c,children:n})};h.displayName=`ScrollingList.Item`;function g(...e){return t=>{e.forEach(e=>{typeof e==`function`?e(t):e&&typeof e==`object`&&`current`in e&&(e.current=t)})}}var _=({children:e,ref:t,className:n=``,...r})=>{let s=(0,a.useContext)(d),c={mandatory:`x mandatory`,proximity:`x proximity`,none:`none`},l=e=>{!s.loop&&!s.hasPrevPage||(e.preventDefault(),s.goTo(s.hasPrevPage?s.activePageIndex-1:s.pages.length-1,{behavior:s.scrollBehavior}))},u=e=>{!s.loop&&!s.hasNextPage||(e.preventDefault(),s.goTo(s.hasNextPage?s.activePageIndex+1:0,{behavior:s.scrollBehavior}))},f=e=>{e.key===`ArrowLeft`&&l(e),e.key===`ArrowRight`&&u(e)},p={scrollSnapType:c[s.snapType],scrollPaddingInline:`var(--scrolling-list-px)`,"--scrolling-list-px":`${s.scrollPadding}px`,"--scrolling-list-gap":`${s.gap}px`,...s.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% + ${s.overflow.left?`0px`:`44px`} + ${s.overflow.right?`0px`:`44px`}) 100%`,maskPosition:`${s.overflow.left?`0px`:`-44px`} 0`}};return(0,o.jsx)(`div`,{"data-spark-component":`scrolling-list-items`,id:`scrolling-list-items`,role:`list`,className:(0,i.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`,n),ref:g(s.scrollAreaRef,s.scrollRef,t),style:p,onKeyDown:f,...r,children:a.Children.map(e,(e,t)=>(0,a.isValidElement)(e)?(0,a.cloneElement)(e,{index:t}):e)})};_.displayName=`ScrollingList.Items`;var v=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),l=()=>{s.hasNextPage?s.next({behavior:s.scrollBehavior}):s.goTo(0,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.right;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-next-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:l,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(c.ArrowVerticalRight,{})})})};v.displayName=`ScrollingList.NextButton`;var y=({"aria-label":e,...n})=>{let s=(0,a.useContext)(d),c=()=>{s.activePageIndex===0&&(s.scrollAreaRef.current?.scrollLeft||0)>0?s.goTo(0,{behavior:s.scrollBehavior}):s.hasPrevPage?s.prev({behavior:s.scrollBehavior}):s.goTo(s.pages.length-1,{behavior:s.scrollBehavior})},u=!(s.overflow.left||s.overflow.right)||!s.loop&&!s.overflow.left;return(0,o.jsx)(r.t,{"data-spark-component":`scrolling-list-prev-button`,size:`sm`,intent:`surface`,design:`filled`,className:(0,i.cx)(`pointer-events-auto opacity-(--scrolling-list-controls-opacity) shadow-sm disabled:invisible`,`group-hover/scrolling-list:opacity-none focus-visible:opacity-none`),onClick:c,disabled:u,"aria-label":e,"aria-controls":`scrolling-list-items`,...n,children:(0,o.jsx)(t.t,{children:(0,o.jsx)(l.ArrowVerticalLeft,{})})})};y.displayName=`ScrollingList.PrevButton`;var b=({children:e,...t})=>{let r=(0,a.useContext)(d);return(0,o.jsx)(n.t,{type:`button`,design:`tinted`,intent:`surface`,tabIndex:0,className:(0,i.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:r.skipKeyboardNavigation,...t,children:e})};b.displayName=`ScrollingList.SkipButton`;var x=Object.assign(f,{Controls:p,NextButton:v,PrevButton:y,Item:h,Items:_,SkipButton:b});x.displayName=`ScrollingList`,exports.ScrollingList=x;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slot as e } from "../slot/index.mjs";
|
|
2
2
|
import { t } from "../icon-D05Uqh8_.mjs";
|
|
3
|
-
import { t as n } from "../button-
|
|
4
|
-
import { t as r } from "../icon-button-
|
|
3
|
+
import { t as n } from "../button-BFQ3w9CA.mjs";
|
|
4
|
+
import { t as r } from "../icon-button-C3RgGf2o.mjs";
|
|
5
5
|
import { cx as i } from "class-variance-authority";
|
|
6
6
|
import { Children as a, cloneElement as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
|
|
7
7
|
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
package/dist/slider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../label-BCSEss4U.js`),n=require(`../FormFieldRequiredIndicator-CEB8Ez-q.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@base-ui/react/slider`);var l=(0,r.cva)([`grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative`,`touch-none select-none`,`data-disabled:cursor-not-allowed data-disabled:opacity-dim-3`]),u=(0,i.createContext)({}),d=()=>(0,i.useContext)(u),f=({intent:e=`support`,children:t,className:n,ref:r,value:o,defaultValue:d,disabled:f,readOnly:p,name:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,...y})=>{let b=(0,s.useFormFieldControl)(),x=b.disabled??f,S=b.readOnly??p,C=b.name??m,[w,T]=(0,i.useState)(b.labelId),[E,D]=(0,i.useState)(0),O=(0,i.useRef)(null),k=(0,i.useRef)(null),A=(0,i.useCallback)(e=>{T(e)},[]),j=(0,i.useCallback)(()=>(D(e=>e+1),()=>D(e=>e-1)),[]);return(0,a.jsx)(u.Provider,{value:{intent:e,min:_,max:v,fieldLabelId:b.labelId||w,fieldId:b.id,onLabelId:A,hasValueInThumb:E>0,registerValueInThumb:j,controlRef:O,thumbRef:k},children:(0,a.jsx)(c.Slider.Root,{ref:r,"data-spark-component":`slider`,className:l({className:n}),orientation:`horizontal`,disabled:x||S,thumbAlignment:`edge`,name:C,"aria-describedby":b.description,"aria-invalid":b.isInvalid,"aria-disabled":x||S?!0:void 0,value:o===void 0?void 0:[o],defaultValue:d===void 0?void 0:[d],onValueChange:h?e=>{h(Array.isArray(e)?e[0]??0:e)}:void 0,onValueCommitted:g?e=>{g(Array.isArray(e)?e[0]??0:e)}:void 0,min:_,max:v,...y,children:t})})};f.displayName=`Slider`;var p=({className:e,ref:t,...n})=>{let{hasValueInThumb:i,controlRef:s}=d(),l=(0,o.useMergeRefs)(s,t);return(0,a.jsx)(c.Slider.Control,{"data-spark-component":`slider-control`,ref:l,className:(0,r.cx)(`min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center`,i&&`mt-xl`,e),...n})};p.displayName=`Slider.Control`;var m=(0,r.cva)([`relative grow h-sz-4 bg-on-background/dim-4 rounded-sm`]),h=(0,r.cva)([`absolute h-full rounded-sm`,`transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],info:[`bg-info`],neutral:[`bg-neutral`],success:[`bg-success`],alert:[`bg-alert`],error:[`bg-error`]}},defaultVariants:{intent:`support`}}),g=({className:e,ref:t,...n})=>{let{intent:r}=d();return(0,a.jsx)(c.Slider.Indicator,{"data-spark-component":`slider-indicator`,ref:t,className:h({intent:r,className:e}),...n})};g.displayName=`Slider.Indicator`;var _=`:slider-label`,v=({htmlFor:c,id:l,className:u,children:f,requiredIndicator:p=(0,a.jsx)(n.t,{}),asChild:m,ref:h,...g})=>{let v=(0,s.useFormFieldControl)(),{fieldLabelId:y,fieldId:b,onLabelId:x}=d(),S=`${_}-${(0,i.useId)()}`,C=l||y||v.labelId||S,w=m?void 0:c||b||v.id,T=v.disabled,E=v.isRequired,D=(0,o.useMergeRefs)(h,(0,i.useRef)(null));return(0,i.useEffect)(()=>{x&&!y&&!v.labelId&&x(C)},[x,y,v.labelId,C]),(0,a.jsx)(t.t,{ref:D,id:C,"data-spark-component":`slider-label`,htmlFor:w,className:(0,r.cx)(T?`text-on-surface/dim-3 pointer-events-none`:void 0,u),asChild:m,...g,children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.Slottable,{children:f}),E&&p]})})};v.displayName=`Slider.Label`;var y=(0,i.forwardRef)(({className:e,children:t},n)=>{let{max:i=100}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-max-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-2 text-right`,e),children:o})});y.displayName=`Slider.MaxValue`;var b=(0,i.forwardRef)(({className:e,children:t},n)=>{let{min:i=0}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-min-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-1 text-left`,e),children:o})});b.displayName=`Slider.MinValue`;var x=(0,r.cva)([`relative block size-sz-24 rounded-full cursor-pointer`,`outline-hidden`,`has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus`,`data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden`,`after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:size-sz-24 after:rounded-full`,`before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2`,`before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75`,`hover:before:size-sz-32 data-dragging:before:size-sz-32`],{variants:{intent:{main:[`after:bg-main`,`before:bg-main-container before:border-main`],support:[`after:bg-support`,`before:bg-support-container before:border-support`],accent:[`after:bg-accent`,`before:bg-accent-container before:border-accent`],info:[`after:bg-info`,`before:bg-info-container before:border-info`],neutral:[`after:bg-neutral`,`before:bg-neutral-container before:border-neutral`],success:[`after:bg-success`,`before:bg-success-container before:border-success`],alert:[`after:bg-alert`,`before:bg-alert-container before:border-alert`],error:[`after:bg-error`,`before:bg-error-container before:border-error`]}},defaultVariants:{intent:`support`}}),S=(0,i.createContext)(null),C=()=>(0,i.useContext)(S),w=({className:e,ref:t,children:n,...r})=>{let{intent:s,fieldLabelId:l,fieldId:u,thumbRef:f}=d(),p=(0,i.useRef)(null),m=(0,o.useMergeRefs)(f,t??p);return(0,a.jsx)(S.Provider,{value:{isInsideThumb:!0},children:(0,a.jsx)(c.Slider.Thumb,{"data-spark-component":`slider-thumb`,ref:m,id:u,className:x({intent:s,className:e}),"aria-labelledby":l,...r,children:n})})};w.displayName=`Slider.Thumb`;var T=({className:e,ref:t,...n})=>(0,a.jsx)(c.Slider.Track,{"data-spark-component":`slider-track`,ref:t,className:m({className:e}),...n});T.displayName=`Slider.Track`;function E(e,t,n,r){let[a,o]=(0,i.useState)(0),[s,c]=(0,i.useState)(!1);return(0,i.useLayoutEffect)(()=>{let r=e.current,i=t.current,a=n.current;if(!r||!i||!a){o(0),s||requestAnimationFrame(()=>c(!0));return}let l=!1,u=()=>{if(l)return;let e=r.getBoundingClientRect(),t=i.getBoundingClientRect(),n=a.scrollWidth;if(n===0){requestAnimationFrame(u);return}let s=t.left-e.left+t.width/2,c=n/2,d=e.width-n/2,f=Math.max(c,Math.min(d,s))-s;o(e=>e===f?e:f)};u();let d=new ResizeObserver(u);return d.observe(r),d.observe(a),()=>{l=!0,d.disconnect()}},[e,t,n,r,s]),a}var D=({className:e,children:t,ref:n,...s})=>{let{registerValueInThumb:l,controlRef:u,thumbRef:f}=d(),p=C()!==null,m=(0,i.useRef)(null),h=(0,o.useMergeRefs)(m,n),[g,_]=(0,i.useState)(0),v=E(u,f,m,g);(0,i.useEffect)(()=>{if(p)return l()},[p,l]);let y=(0,r.cx)(p?`absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../label-BCSEss4U.js`),n=require(`../FormFieldRequiredIndicator-CEB8Ez-q.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@base-ui/react/slider`);var l=(0,r.cva)([`grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative`,`touch-none select-none`,`data-disabled:cursor-not-allowed data-disabled:opacity-dim-3`]),u=(0,i.createContext)({}),d=()=>(0,i.useContext)(u),f=({intent:e=`support`,children:t,className:n,ref:r,value:o,defaultValue:d,disabled:f,readOnly:p,name:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,...y})=>{let b=(0,s.useFormFieldControl)(),x=b.disabled??f,S=b.readOnly??p,C=b.name??m,[w,T]=(0,i.useState)(b.labelId),[E,D]=(0,i.useState)(0),O=(0,i.useRef)(null),k=(0,i.useRef)(null),A=(0,i.useCallback)(e=>{T(e)},[]),j=(0,i.useCallback)(()=>(D(e=>e+1),()=>D(e=>e-1)),[]);return(0,a.jsx)(u.Provider,{value:{intent:e,min:_,max:v,fieldLabelId:b.labelId||w,fieldId:b.id,onLabelId:A,hasValueInThumb:E>0,registerValueInThumb:j,controlRef:O,thumbRef:k},children:(0,a.jsx)(c.Slider.Root,{ref:r,"data-spark-component":`slider`,className:l({className:n}),orientation:`horizontal`,disabled:x||S,thumbAlignment:`edge`,name:C,"aria-describedby":b.description,"aria-invalid":b.isInvalid,"aria-disabled":x||S?!0:void 0,value:o===void 0?void 0:[o],defaultValue:d===void 0?void 0:[d],onValueChange:h?e=>{h(Array.isArray(e)?e[0]??0:e)}:void 0,onValueCommitted:g?e=>{g(Array.isArray(e)?e[0]??0:e)}:void 0,min:_,max:v,...y,children:t})})};f.displayName=`Slider`;var p=({className:e,ref:t,...n})=>{let{hasValueInThumb:i,controlRef:s}=d(),l=(0,o.useMergeRefs)(s,t);return(0,a.jsx)(c.Slider.Control,{"data-spark-component":`slider-control`,ref:l,className:(0,r.cx)(`min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center`,i&&`mt-xl`,e),...n})};p.displayName=`Slider.Control`;var m=(0,r.cva)([`relative grow h-sz-4 bg-on-background/dim-4 rounded-sm`]),h=(0,r.cva)([`absolute h-full rounded-sm`,`transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],accent:[`bg-accent`],info:[`bg-info`],neutral:[`bg-neutral`],success:[`bg-success`],alert:[`bg-alert`],error:[`bg-error`]}},defaultVariants:{intent:`support`}}),g=({className:e,ref:t,...n})=>{let{intent:r}=d();return(0,a.jsx)(c.Slider.Indicator,{"data-spark-component":`slider-indicator`,ref:t,className:h({intent:r,className:e}),...n})};g.displayName=`Slider.Indicator`;var _=`:slider-label`,v=({htmlFor:c,id:l,className:u,children:f,requiredIndicator:p=(0,a.jsx)(n.t,{}),asChild:m,ref:h,...g})=>{let v=(0,s.useFormFieldControl)(),{fieldLabelId:y,fieldId:b,onLabelId:x}=d(),S=`${_}-${(0,i.useId)()}`,C=l||y||v.labelId||S,w=m?void 0:c||b||v.id,T=v.disabled,E=v.isRequired,D=(0,o.useMergeRefs)(h,(0,i.useRef)(null));return(0,i.useEffect)(()=>{x&&!y&&!v.labelId&&x(C)},[x,y,v.labelId,C]),(0,a.jsx)(t.t,{ref:D,id:C,"data-spark-component":`slider-label`,htmlFor:w,className:(0,r.cx)(T?`text-on-surface/dim-3 pointer-events-none`:void 0,u),asChild:m,...g,children:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.Slottable,{children:f}),E&&p]})})};v.displayName=`Slider.Label`;var y=(0,i.forwardRef)(({className:e,children:t},n)=>{let{max:i=100}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-max-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-2 text-right`,e),children:o})});y.displayName=`Slider.MaxValue`;var b=(0,i.forwardRef)(({className:e,children:t},n)=>{let{min:i=0}=d(),o=t?t(i):i;return(0,a.jsx)(`div`,{"data-spark-component":`slider-min-value`,ref:n,className:(0,r.cx)(`text-on-surface/dim-1 text-body-2 col-start-1 text-left`,e),children:o})});b.displayName=`Slider.MinValue`;var x=(0,r.cva)([`relative block size-sz-24 rounded-full cursor-pointer`,`outline-hidden`,`has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus`,`data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden`,`after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:size-sz-24 after:rounded-full`,`before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2`,`before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75`,`hover:before:size-sz-32 data-dragging:before:size-sz-32`],{variants:{intent:{main:[`after:bg-main`,`before:bg-main-container before:border-main`],support:[`after:bg-support`,`before:bg-support-container before:border-support`],accent:[`after:bg-accent`,`before:bg-accent-container before:border-accent`],info:[`after:bg-info`,`before:bg-info-container before:border-info`],neutral:[`after:bg-neutral`,`before:bg-neutral-container before:border-neutral`],success:[`after:bg-success`,`before:bg-success-container before:border-success`],alert:[`after:bg-alert`,`before:bg-alert-container before:border-alert`],error:[`after:bg-error`,`before:bg-error-container before:border-error`]}},defaultVariants:{intent:`support`}}),S=(0,i.createContext)(null),C=()=>(0,i.useContext)(S),w=({className:e,ref:t,children:n,...r})=>{let{intent:s,fieldLabelId:l,fieldId:u,thumbRef:f}=d(),p=(0,i.useRef)(null),m=(0,o.useMergeRefs)(f,t??p);return(0,a.jsx)(S.Provider,{value:{isInsideThumb:!0},children:(0,a.jsx)(c.Slider.Thumb,{"data-spark-component":`slider-thumb`,ref:m,id:u,className:x({intent:s,className:e}),"aria-labelledby":l,...r,children:n})})};w.displayName=`Slider.Thumb`;var T=({className:e,ref:t,...n})=>(0,a.jsx)(c.Slider.Track,{"data-spark-component":`slider-track`,ref:t,className:m({className:e}),...n});T.displayName=`Slider.Track`;function E(e,t,n,r){let[a,o]=(0,i.useState)(0),[s,c]=(0,i.useState)(!1);return(0,i.useLayoutEffect)(()=>{let r=e.current,i=t.current,a=n.current;if(!r||!i||!a){o(0),s||requestAnimationFrame(()=>c(!0));return}let l=!1,u=()=>{if(l)return;let e=r.getBoundingClientRect(),t=i.getBoundingClientRect(),n=a.scrollWidth;if(n===0){requestAnimationFrame(u);return}let s=t.left-e.left+t.width/2,c=n/2,d=e.width-n/2,f=Math.max(c,Math.min(d,s))-s;o(e=>e===f?e:f)};u();let d=new ResizeObserver(u);return d.observe(r),d.observe(a),()=>{l=!0,d.disconnect()}},[e,t,n,r,s]),a}var D=({className:e,children:t,ref:n,...s})=>{let{registerValueInThumb:l,controlRef:u,thumbRef:f}=d(),p=C()!==null,m=(0,i.useRef)(null),h=(0,o.useMergeRefs)(m,n),[g,_]=(0,i.useState)(0),v=E(u,f,m,g);(0,i.useEffect)(()=>{if(p)return l()},[p,l]);let y=(0,r.cx)(p?`absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1-highlight whitespace-nowrap`:`default:text-body-1-highlight col-start-2 text-right`,e),b=(0,i.useCallback)((e,n)=>{let r=e[0]??String(n[0]??``),i=n[0]??0;return _(i),typeof t==`function`?t(r,i):r},[t]),x=p?{transform:`translate(calc(0% + ${v}px), 0)`}:void 0;return(0,a.jsx)(c.Slider.Value,{"data-spark-component":`slider-value`,ref:h,className:y,style:x,...s,children:b})};D.displayName=`Slider.Value`;var O=Object.assign(f,{Control:p,Indicator:g,Label:v,MaxValue:y,MinValue:b,Thumb:w,Track:T,Value:D});O.displayName=`Slider`,p.displayName=`Slider.Control`,g.displayName=`Slider.Indicator`,v.displayName=`Slider.Label`,y.displayName=`Slider.MaxValue`,b.displayName=`Slider.MinValue`,w.displayName=`Slider.Thumb`,T.displayName=`Slider.Track`,D.displayName=`Slider.Value`,exports.Slider=O;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/slider/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n 'touch-none select-none',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n fieldLabelId?: string\n fieldId?: string\n onLabelId?: (id: string | undefined) => void\n hasValueInThumb: boolean\n registerValueInThumb: () => () => void\n controlRef: RefObject<HTMLElement | null>\n thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n extends\n Omit<\n ComponentProps<typeof BaseSlider.Root>,\n 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n >,\n PropsWithChildren<SliderRangeVariantsProps> {\n /**\n * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n */\n defaultValue?: number\n /**\n * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n */\n value?: number\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: number) => void\n /**\n * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n */\n onValueCommit?: (value: number) => void\n /**\n * The name of the slider. Submitted with its owning form as part of a name/value pair.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * When `true`, prevents the user from interacting with the slider.\n * @default false\n */\n disabled?: boolean\n /**\n * Sets the slider as interactive or not.\n */\n readOnly?: boolean\n /**\n * The minimum value for the range.\n * @default 0\n */\n min?: number\n /**\n * The maximum value for the range.\n * @default 100\n */\n max?: number\n /**\n * The stepping interval.\n * @default 1\n */\n step?: number\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n intent = 'support',\n children,\n className,\n ref,\n value: valueProp,\n defaultValue: defaultValueProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n name: nameProp,\n onValueChange,\n onValueCommit,\n min = 0,\n max = 100,\n ...rest\n}: SliderProps) => {\n const field = useFormFieldControl()\n\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n\n const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n const [valueInThumbCount, setValueInThumbCount] = useState(0)\n const controlRef = useRef<HTMLElement | null>(null)\n const thumbRef = useRef<HTMLElement | null>(null)\n\n const handleLabelId = useCallback((id: string | undefined) => {\n setLabelId(id)\n }, [])\n\n const registerValueInThumb = useCallback(() => {\n setValueInThumbCount(c => c + 1)\n\n return () => setValueInThumbCount(c => c - 1)\n }, [])\n\n return (\n <SliderContext.Provider\n value={{\n intent,\n min,\n max,\n fieldLabelId: field.labelId || labelId,\n fieldId: field.id,\n onLabelId: handleLabelId,\n hasValueInThumb: valueInThumbCount > 0,\n registerValueInThumb,\n controlRef,\n thumbRef,\n }}\n >\n <BaseSlider.Root\n ref={ref}\n data-spark-component=\"slider\"\n className={rootStyles({ className })}\n orientation=\"horizontal\"\n disabled={disabled || readOnly}\n thumbAlignment=\"edge\"\n name={name}\n aria-describedby={field.description}\n aria-invalid={field.isInvalid}\n aria-disabled={disabled || readOnly ? true : undefined}\n value={valueProp !== undefined ? [valueProp] : undefined}\n defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n onValueChange={\n onValueChange\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueChange(v)\n }\n : undefined\n }\n onValueCommitted={\n onValueCommit\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueCommit(v)\n }\n : undefined\n }\n min={min}\n max={max}\n {...rest}\n >\n {children}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n const { hasValueInThumb, controlRef } = useSliderContext()\n const mergedRef = useMergeRefs(controlRef, ref)\n\n return (\n <BaseSlider.Control\n data-spark-component=\"slider-control\"\n ref={mergedRef}\n className={cx(\n 'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n hasValueInThumb && 'mt-xl',\n className\n )}\n {...rest}\n />\n )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n [\n 'absolute h-full rounded-sm',\n // Disable transitions during drag to eliminate latency\n 'transition-none',\n ],\n {\n variants: {\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n error: ['bg-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n const { intent } = useSliderContext()\n\n return (\n <BaseSlider.Indicator\n data-spark-component=\"slider-indicator\"\n ref={ref}\n className={rangeVariants({ intent, className })}\n {...rest}\n />\n )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n /**\n * Element shown when the input is required inside the label.\n */\n requiredIndicator?: ReactNode\n ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n htmlFor: htmlForProp,\n id: idProp,\n className,\n children,\n requiredIndicator = <FormFieldRequiredIndicator />,\n asChild,\n ref,\n ...others\n}: SliderLabelProps) => {\n const field = useFormFieldControl()\n const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n // Generate an id if not provided and no FormField labelId is available\n const internalId = useId()\n const generatedId = `${ID_PREFIX}-${internalId}`\n const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n // Get disabled and required state from FormField if present\n const disabled = field.disabled\n const isRequired = field.isRequired\n\n // Notify SliderContext of the label id if no FormField is present\n const labelRef = useRef<HTMLLabelElement>(null)\n const mergedRef = useMergeRefs(ref, labelRef)\n\n useEffect(() => {\n if (onLabelId && !fieldLabelId && !field.labelId) {\n onLabelId(labelId)\n }\n }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n return (\n <Label\n ref={mergedRef}\n id={labelId}\n data-spark-component=\"slider-label\"\n htmlFor={htmlFor}\n className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n asChild={asChild}\n {...others}\n >\n <>\n <Slottable>{children}</Slottable>\n {isRequired && requiredIndicator}\n </>\n </Label>\n )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n ({ className, children }, ref) => {\n const { max = 100 } = useSliderContext()\n\n const content = children ? children(max) : max\n\n return (\n <div\n data-spark-component=\"slider-max-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n ({ className, children }, ref) => {\n const { min = 0 } = useSliderContext()\n\n const content = children ? children(min) : min\n\n return (\n <div\n data-spark-component=\"slider-min-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n [\n 'relative block size-sz-24 rounded-full cursor-pointer',\n 'outline-hidden',\n 'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n 'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n // visual thumb\n 'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n 'after:size-sz-24 after:rounded-full',\n // hover effect\n 'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n 'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n ],\n {\n variants: {\n intent: {\n main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n PropsWithChildren\n\nexport const SliderThumb = ({\n className,\n ref: forwardedRef,\n children,\n ...rest\n}: SliderThumbProps) => {\n const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n const innerRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n return (\n <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n <BaseSlider.Thumb\n data-spark-component=\"slider-thumb\"\n ref={ref}\n id={fieldId}\n className={thumbVariants({ intent, className })}\n aria-labelledby={fieldLabelId}\n {...rest}\n >\n {children}\n </BaseSlider.Thumb>\n </SliderThumbContext.Provider>\n )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n return (\n <BaseSlider.Track\n data-spark-component=\"slider-track\"\n ref={ref}\n className={trackVariants({ className })}\n {...rest}\n />\n )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n controlRef: RefObject<HTMLElement | null>,\n thumbRef: RefObject<HTMLElement | null>,\n valueRef: RefObject<HTMLElement | null>,\n value: number\n): number {\n const [translateX, setTranslateX] = useState(0)\n const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n useLayoutEffect(() => {\n const control = controlRef.current\n const thumb = thumbRef.current\n const valueEl = valueRef.current\n\n if (!control || !thumb || !valueEl) {\n setTranslateX(0)\n // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n if (!refsRetryScheduled) {\n requestAnimationFrame(() => setRefsRetryScheduled(true))\n }\n\n return\n }\n\n let cancelled = false\n\n const compute = () => {\n if (cancelled) return\n\n const controlRect = control.getBoundingClientRect()\n const thumbRect = thumb.getBoundingClientRect()\n const valueWidth = valueEl.scrollWidth\n\n // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n if (valueWidth === 0) {\n requestAnimationFrame(compute)\n\n return\n }\n\n const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n const valueCenterMin = valueWidth / 2\n const valueCenterMax = controlRect.width - valueWidth / 2\n\n const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n const nextTranslateX = clampedCenter - thumbCenterPx\n\n setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n }\n\n compute()\n\n const resizeObserver = new ResizeObserver(compute)\n resizeObserver.observe(control)\n resizeObserver.observe(valueEl)\n\n return () => {\n cancelled = true\n resizeObserver.disconnect()\n }\n }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n ComponentProps<typeof BaseSlider.Value>,\n 'render' | 'children'\n> & {\n children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n const thumbContext = useSliderThumbContext()\n const isInsideThumb = thumbContext !== null\n\n const valueRef = useRef<HTMLOutputElement | null>(null)\n const mergedRef = useMergeRefs(valueRef, ref)\n\n const [currentValue, setCurrentValue] = useState(0)\n const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n useEffect(() => {\n if (!isInsideThumb) return\n\n return registerValueInThumb()\n }, [isInsideThumb, registerValueInThumb])\n\n const resolvedClassName = cx(\n isInsideThumb\n ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n : 'default:text-body-1 col-start-2 text-right default:font-bold',\n className\n )\n\n const normalizedChildren = useCallback(\n (formattedValues: readonly string[], values: readonly number[]) => {\n const formatted = formattedValues[0] ?? String(values[0] ?? '')\n const value = values[0] ?? 0\n setCurrentValue(value)\n if (typeof children === 'function') {\n return children(formatted, value)\n }\n\n return formatted\n },\n [children]\n )\n\n const style = isInsideThumb\n ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n : undefined\n\n return (\n <BaseSlider.Value\n data-spark-component=\"slider-value\"\n ref={mergedRef}\n className={resolvedClassName}\n style={style}\n {...rest}\n >\n {normalizedChildren}\n </BaseSlider.Value>\n )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\n/**\n * An input control that allows users to select a value from a continuous range by dragging a handle.\n */\nexport const Slider: typeof Root & {\n Control: typeof Control\n Indicator: typeof Indicator\n Label: typeof Label\n MaxValue: typeof MaxValue\n MinValue: typeof MinValue\n Thumb: typeof Thumb\n Track: typeof Track\n Value: typeof Value\n} = Object.assign(Root, {\n Control,\n Indicator,\n Label,\n MaxValue,\n MinValue,\n Thumb,\n Track,\n Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n SliderProps,\n SliderControlProps,\n SliderIndicatorProps,\n SliderLabelProps,\n SliderMaxValueProps,\n SliderMinValueProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderValueProps,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n 'touch-none select-none',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n fieldLabelId?: string\n fieldId?: string\n onLabelId?: (id: string | undefined) => void\n hasValueInThumb: boolean\n registerValueInThumb: () => () => void\n controlRef: RefObject<HTMLElement | null>\n thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n extends\n Omit<\n ComponentProps<typeof BaseSlider.Root>,\n 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n >,\n PropsWithChildren<SliderRangeVariantsProps> {\n /**\n * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n */\n defaultValue?: number\n /**\n * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n */\n value?: number\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: number) => void\n /**\n * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n */\n onValueCommit?: (value: number) => void\n /**\n * The name of the slider. Submitted with its owning form as part of a name/value pair.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * When `true`, prevents the user from interacting with the slider.\n * @default false\n */\n disabled?: boolean\n /**\n * Sets the slider as interactive or not.\n */\n readOnly?: boolean\n /**\n * The minimum value for the range.\n * @default 0\n */\n min?: number\n /**\n * The maximum value for the range.\n * @default 100\n */\n max?: number\n /**\n * The stepping interval.\n * @default 1\n */\n step?: number\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n intent = 'support',\n children,\n className,\n ref,\n value: valueProp,\n defaultValue: defaultValueProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n name: nameProp,\n onValueChange,\n onValueCommit,\n min = 0,\n max = 100,\n ...rest\n}: SliderProps) => {\n const field = useFormFieldControl()\n\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n\n const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n const [valueInThumbCount, setValueInThumbCount] = useState(0)\n const controlRef = useRef<HTMLElement | null>(null)\n const thumbRef = useRef<HTMLElement | null>(null)\n\n const handleLabelId = useCallback((id: string | undefined) => {\n setLabelId(id)\n }, [])\n\n const registerValueInThumb = useCallback(() => {\n setValueInThumbCount(c => c + 1)\n\n return () => setValueInThumbCount(c => c - 1)\n }, [])\n\n return (\n <SliderContext.Provider\n value={{\n intent,\n min,\n max,\n fieldLabelId: field.labelId || labelId,\n fieldId: field.id,\n onLabelId: handleLabelId,\n hasValueInThumb: valueInThumbCount > 0,\n registerValueInThumb,\n controlRef,\n thumbRef,\n }}\n >\n <BaseSlider.Root\n ref={ref}\n data-spark-component=\"slider\"\n className={rootStyles({ className })}\n orientation=\"horizontal\"\n disabled={disabled || readOnly}\n thumbAlignment=\"edge\"\n name={name}\n aria-describedby={field.description}\n aria-invalid={field.isInvalid}\n aria-disabled={disabled || readOnly ? true : undefined}\n value={valueProp !== undefined ? [valueProp] : undefined}\n defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n onValueChange={\n onValueChange\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueChange(v)\n }\n : undefined\n }\n onValueCommitted={\n onValueCommit\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueCommit(v)\n }\n : undefined\n }\n min={min}\n max={max}\n {...rest}\n >\n {children}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n const { hasValueInThumb, controlRef } = useSliderContext()\n const mergedRef = useMergeRefs(controlRef, ref)\n\n return (\n <BaseSlider.Control\n data-spark-component=\"slider-control\"\n ref={mergedRef}\n className={cx(\n 'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n hasValueInThumb && 'mt-xl',\n className\n )}\n {...rest}\n />\n )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n [\n 'absolute h-full rounded-sm',\n // Disable transitions during drag to eliminate latency\n 'transition-none',\n ],\n {\n variants: {\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n error: ['bg-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n const { intent } = useSliderContext()\n\n return (\n <BaseSlider.Indicator\n data-spark-component=\"slider-indicator\"\n ref={ref}\n className={rangeVariants({ intent, className })}\n {...rest}\n />\n )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n /**\n * Element shown when the input is required inside the label.\n */\n requiredIndicator?: ReactNode\n ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n htmlFor: htmlForProp,\n id: idProp,\n className,\n children,\n requiredIndicator = <FormFieldRequiredIndicator />,\n asChild,\n ref,\n ...others\n}: SliderLabelProps) => {\n const field = useFormFieldControl()\n const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n // Generate an id if not provided and no FormField labelId is available\n const internalId = useId()\n const generatedId = `${ID_PREFIX}-${internalId}`\n const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n // Get disabled and required state from FormField if present\n const disabled = field.disabled\n const isRequired = field.isRequired\n\n // Notify SliderContext of the label id if no FormField is present\n const labelRef = useRef<HTMLLabelElement>(null)\n const mergedRef = useMergeRefs(ref, labelRef)\n\n useEffect(() => {\n if (onLabelId && !fieldLabelId && !field.labelId) {\n onLabelId(labelId)\n }\n }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n return (\n <Label\n ref={mergedRef}\n id={labelId}\n data-spark-component=\"slider-label\"\n htmlFor={htmlFor}\n className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n asChild={asChild}\n {...others}\n >\n <>\n <Slottable>{children}</Slottable>\n {isRequired && requiredIndicator}\n </>\n </Label>\n )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n ({ className, children }, ref) => {\n const { max = 100 } = useSliderContext()\n\n const content = children ? children(max) : max\n\n return (\n <div\n data-spark-component=\"slider-max-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n ({ className, children }, ref) => {\n const { min = 0 } = useSliderContext()\n\n const content = children ? children(min) : min\n\n return (\n <div\n data-spark-component=\"slider-min-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n [\n 'relative block size-sz-24 rounded-full cursor-pointer',\n 'outline-hidden',\n 'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n 'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n // visual thumb\n 'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n 'after:size-sz-24 after:rounded-full',\n // hover effect\n 'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n 'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n ],\n {\n variants: {\n intent: {\n main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n PropsWithChildren\n\nexport const SliderThumb = ({\n className,\n ref: forwardedRef,\n children,\n ...rest\n}: SliderThumbProps) => {\n const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n const innerRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n return (\n <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n <BaseSlider.Thumb\n data-spark-component=\"slider-thumb\"\n ref={ref}\n id={fieldId}\n className={thumbVariants({ intent, className })}\n aria-labelledby={fieldLabelId}\n {...rest}\n >\n {children}\n </BaseSlider.Thumb>\n </SliderThumbContext.Provider>\n )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n return (\n <BaseSlider.Track\n data-spark-component=\"slider-track\"\n ref={ref}\n className={trackVariants({ className })}\n {...rest}\n />\n )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n controlRef: RefObject<HTMLElement | null>,\n thumbRef: RefObject<HTMLElement | null>,\n valueRef: RefObject<HTMLElement | null>,\n value: number\n): number {\n const [translateX, setTranslateX] = useState(0)\n const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n useLayoutEffect(() => {\n const control = controlRef.current\n const thumb = thumbRef.current\n const valueEl = valueRef.current\n\n if (!control || !thumb || !valueEl) {\n setTranslateX(0)\n // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n if (!refsRetryScheduled) {\n requestAnimationFrame(() => setRefsRetryScheduled(true))\n }\n\n return\n }\n\n let cancelled = false\n\n const compute = () => {\n if (cancelled) return\n\n const controlRect = control.getBoundingClientRect()\n const thumbRect = thumb.getBoundingClientRect()\n const valueWidth = valueEl.scrollWidth\n\n // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n if (valueWidth === 0) {\n requestAnimationFrame(compute)\n\n return\n }\n\n const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n const valueCenterMin = valueWidth / 2\n const valueCenterMax = controlRect.width - valueWidth / 2\n\n const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n const nextTranslateX = clampedCenter - thumbCenterPx\n\n setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n }\n\n compute()\n\n const resizeObserver = new ResizeObserver(compute)\n resizeObserver.observe(control)\n resizeObserver.observe(valueEl)\n\n return () => {\n cancelled = true\n resizeObserver.disconnect()\n }\n }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n ComponentProps<typeof BaseSlider.Value>,\n 'render' | 'children'\n> & {\n children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n const thumbContext = useSliderThumbContext()\n const isInsideThumb = thumbContext !== null\n\n const valueRef = useRef<HTMLOutputElement | null>(null)\n const mergedRef = useMergeRefs(valueRef, ref)\n\n const [currentValue, setCurrentValue] = useState(0)\n const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n useEffect(() => {\n if (!isInsideThumb) return\n\n return registerValueInThumb()\n }, [isInsideThumb, registerValueInThumb])\n\n const resolvedClassName = cx(\n isInsideThumb\n ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1-highlight whitespace-nowrap'\n : 'default:text-body-1-highlight col-start-2 text-right',\n className\n )\n\n const normalizedChildren = useCallback(\n (formattedValues: readonly string[], values: readonly number[]) => {\n const formatted = formattedValues[0] ?? String(values[0] ?? '')\n const value = values[0] ?? 0\n setCurrentValue(value)\n if (typeof children === 'function') {\n return children(formatted, value)\n }\n\n return formatted\n },\n [children]\n )\n\n const style = isInsideThumb\n ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n : undefined\n\n return (\n <BaseSlider.Value\n data-spark-component=\"slider-value\"\n ref={mergedRef}\n className={resolvedClassName}\n style={style}\n {...rest}\n >\n {normalizedChildren}\n </BaseSlider.Value>\n )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\n/**\n * An input control that allows users to select a value from a continuous range by dragging a handle.\n */\nexport const Slider: typeof Root & {\n Control: typeof Control\n Indicator: typeof Indicator\n Label: typeof Label\n MaxValue: typeof MaxValue\n MinValue: typeof MinValue\n Thumb: typeof Thumb\n Track: typeof Track\n Value: typeof Value\n} = Object.assign(Root, {\n Control,\n Indicator,\n Label,\n MaxValue,\n MinValue,\n Thumb,\n Track,\n Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n SliderProps,\n SliderControlProps,\n SliderIndicatorProps,\n SliderLabelProps,\n SliderMaxValueProps,\n SliderMinValueProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderValueProps,\n}\n"],"mappings":"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"}
|
package/dist/slider/index.mjs
CHANGED
|
@@ -234,7 +234,7 @@ var R = ({ className: e, children: t, ref: n, ...r }) => {
|
|
|
234
234
|
l(() => {
|
|
235
235
|
if (u) return a();
|
|
236
236
|
}, [u, a]);
|
|
237
|
-
let x = i(u ? "absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1
|
|
237
|
+
let x = i(u ? "absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1-highlight whitespace-nowrap" : "default:text-body-1-highlight col-start-2 text-right", e), C = s((e, n) => {
|
|
238
238
|
let r = e[0] ?? String(n[0] ?? ""), i = n[0] ?? 0;
|
|
239
239
|
return v(i), typeof t == "function" ? t(r, i) : r;
|
|
240
240
|
}, [t]), w = u ? { transform: `translate(calc(0% + ${b}px), 0)` } : void 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n 'touch-none select-none',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n fieldLabelId?: string\n fieldId?: string\n onLabelId?: (id: string | undefined) => void\n hasValueInThumb: boolean\n registerValueInThumb: () => () => void\n controlRef: RefObject<HTMLElement | null>\n thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n extends\n Omit<\n ComponentProps<typeof BaseSlider.Root>,\n 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n >,\n PropsWithChildren<SliderRangeVariantsProps> {\n /**\n * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n */\n defaultValue?: number\n /**\n * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n */\n value?: number\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: number) => void\n /**\n * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n */\n onValueCommit?: (value: number) => void\n /**\n * The name of the slider. Submitted with its owning form as part of a name/value pair.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * When `true`, prevents the user from interacting with the slider.\n * @default false\n */\n disabled?: boolean\n /**\n * Sets the slider as interactive or not.\n */\n readOnly?: boolean\n /**\n * The minimum value for the range.\n * @default 0\n */\n min?: number\n /**\n * The maximum value for the range.\n * @default 100\n */\n max?: number\n /**\n * The stepping interval.\n * @default 1\n */\n step?: number\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n intent = 'support',\n children,\n className,\n ref,\n value: valueProp,\n defaultValue: defaultValueProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n name: nameProp,\n onValueChange,\n onValueCommit,\n min = 0,\n max = 100,\n ...rest\n}: SliderProps) => {\n const field = useFormFieldControl()\n\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n\n const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n const [valueInThumbCount, setValueInThumbCount] = useState(0)\n const controlRef = useRef<HTMLElement | null>(null)\n const thumbRef = useRef<HTMLElement | null>(null)\n\n const handleLabelId = useCallback((id: string | undefined) => {\n setLabelId(id)\n }, [])\n\n const registerValueInThumb = useCallback(() => {\n setValueInThumbCount(c => c + 1)\n\n return () => setValueInThumbCount(c => c - 1)\n }, [])\n\n return (\n <SliderContext.Provider\n value={{\n intent,\n min,\n max,\n fieldLabelId: field.labelId || labelId,\n fieldId: field.id,\n onLabelId: handleLabelId,\n hasValueInThumb: valueInThumbCount > 0,\n registerValueInThumb,\n controlRef,\n thumbRef,\n }}\n >\n <BaseSlider.Root\n ref={ref}\n data-spark-component=\"slider\"\n className={rootStyles({ className })}\n orientation=\"horizontal\"\n disabled={disabled || readOnly}\n thumbAlignment=\"edge\"\n name={name}\n aria-describedby={field.description}\n aria-invalid={field.isInvalid}\n aria-disabled={disabled || readOnly ? true : undefined}\n value={valueProp !== undefined ? [valueProp] : undefined}\n defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n onValueChange={\n onValueChange\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueChange(v)\n }\n : undefined\n }\n onValueCommitted={\n onValueCommit\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueCommit(v)\n }\n : undefined\n }\n min={min}\n max={max}\n {...rest}\n >\n {children}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n const { hasValueInThumb, controlRef } = useSliderContext()\n const mergedRef = useMergeRefs(controlRef, ref)\n\n return (\n <BaseSlider.Control\n data-spark-component=\"slider-control\"\n ref={mergedRef}\n className={cx(\n 'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n hasValueInThumb && 'mt-xl',\n className\n )}\n {...rest}\n />\n )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n [\n 'absolute h-full rounded-sm',\n // Disable transitions during drag to eliminate latency\n 'transition-none',\n ],\n {\n variants: {\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n error: ['bg-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n const { intent } = useSliderContext()\n\n return (\n <BaseSlider.Indicator\n data-spark-component=\"slider-indicator\"\n ref={ref}\n className={rangeVariants({ intent, className })}\n {...rest}\n />\n )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n /**\n * Element shown when the input is required inside the label.\n */\n requiredIndicator?: ReactNode\n ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n htmlFor: htmlForProp,\n id: idProp,\n className,\n children,\n requiredIndicator = <FormFieldRequiredIndicator />,\n asChild,\n ref,\n ...others\n}: SliderLabelProps) => {\n const field = useFormFieldControl()\n const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n // Generate an id if not provided and no FormField labelId is available\n const internalId = useId()\n const generatedId = `${ID_PREFIX}-${internalId}`\n const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n // Get disabled and required state from FormField if present\n const disabled = field.disabled\n const isRequired = field.isRequired\n\n // Notify SliderContext of the label id if no FormField is present\n const labelRef = useRef<HTMLLabelElement>(null)\n const mergedRef = useMergeRefs(ref, labelRef)\n\n useEffect(() => {\n if (onLabelId && !fieldLabelId && !field.labelId) {\n onLabelId(labelId)\n }\n }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n return (\n <Label\n ref={mergedRef}\n id={labelId}\n data-spark-component=\"slider-label\"\n htmlFor={htmlFor}\n className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n asChild={asChild}\n {...others}\n >\n <>\n <Slottable>{children}</Slottable>\n {isRequired && requiredIndicator}\n </>\n </Label>\n )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n ({ className, children }, ref) => {\n const { max = 100 } = useSliderContext()\n\n const content = children ? children(max) : max\n\n return (\n <div\n data-spark-component=\"slider-max-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n ({ className, children }, ref) => {\n const { min = 0 } = useSliderContext()\n\n const content = children ? children(min) : min\n\n return (\n <div\n data-spark-component=\"slider-min-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n [\n 'relative block size-sz-24 rounded-full cursor-pointer',\n 'outline-hidden',\n 'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n 'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n // visual thumb\n 'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n 'after:size-sz-24 after:rounded-full',\n // hover effect\n 'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n 'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n ],\n {\n variants: {\n intent: {\n main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n PropsWithChildren\n\nexport const SliderThumb = ({\n className,\n ref: forwardedRef,\n children,\n ...rest\n}: SliderThumbProps) => {\n const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n const innerRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n return (\n <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n <BaseSlider.Thumb\n data-spark-component=\"slider-thumb\"\n ref={ref}\n id={fieldId}\n className={thumbVariants({ intent, className })}\n aria-labelledby={fieldLabelId}\n {...rest}\n >\n {children}\n </BaseSlider.Thumb>\n </SliderThumbContext.Provider>\n )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n return (\n <BaseSlider.Track\n data-spark-component=\"slider-track\"\n ref={ref}\n className={trackVariants({ className })}\n {...rest}\n />\n )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n controlRef: RefObject<HTMLElement | null>,\n thumbRef: RefObject<HTMLElement | null>,\n valueRef: RefObject<HTMLElement | null>,\n value: number\n): number {\n const [translateX, setTranslateX] = useState(0)\n const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n useLayoutEffect(() => {\n const control = controlRef.current\n const thumb = thumbRef.current\n const valueEl = valueRef.current\n\n if (!control || !thumb || !valueEl) {\n setTranslateX(0)\n // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n if (!refsRetryScheduled) {\n requestAnimationFrame(() => setRefsRetryScheduled(true))\n }\n\n return\n }\n\n let cancelled = false\n\n const compute = () => {\n if (cancelled) return\n\n const controlRect = control.getBoundingClientRect()\n const thumbRect = thumb.getBoundingClientRect()\n const valueWidth = valueEl.scrollWidth\n\n // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n if (valueWidth === 0) {\n requestAnimationFrame(compute)\n\n return\n }\n\n const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n const valueCenterMin = valueWidth / 2\n const valueCenterMax = controlRect.width - valueWidth / 2\n\n const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n const nextTranslateX = clampedCenter - thumbCenterPx\n\n setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n }\n\n compute()\n\n const resizeObserver = new ResizeObserver(compute)\n resizeObserver.observe(control)\n resizeObserver.observe(valueEl)\n\n return () => {\n cancelled = true\n resizeObserver.disconnect()\n }\n }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n ComponentProps<typeof BaseSlider.Value>,\n 'render' | 'children'\n> & {\n children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n const thumbContext = useSliderThumbContext()\n const isInsideThumb = thumbContext !== null\n\n const valueRef = useRef<HTMLOutputElement | null>(null)\n const mergedRef = useMergeRefs(valueRef, ref)\n\n const [currentValue, setCurrentValue] = useState(0)\n const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n useEffect(() => {\n if (!isInsideThumb) return\n\n return registerValueInThumb()\n }, [isInsideThumb, registerValueInThumb])\n\n const resolvedClassName = cx(\n isInsideThumb\n ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n : 'default:text-body-1 col-start-2 text-right default:font-bold',\n className\n )\n\n const normalizedChildren = useCallback(\n (formattedValues: readonly string[], values: readonly number[]) => {\n const formatted = formattedValues[0] ?? String(values[0] ?? '')\n const value = values[0] ?? 0\n setCurrentValue(value)\n if (typeof children === 'function') {\n return children(formatted, value)\n }\n\n return formatted\n },\n [children]\n )\n\n const style = isInsideThumb\n ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n : undefined\n\n return (\n <BaseSlider.Value\n data-spark-component=\"slider-value\"\n ref={mergedRef}\n className={resolvedClassName}\n style={style}\n {...rest}\n >\n {normalizedChildren}\n </BaseSlider.Value>\n )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\n/**\n * An input control that allows users to select a value from a continuous range by dragging a handle.\n */\nexport const Slider: typeof Root & {\n Control: typeof Control\n Indicator: typeof Indicator\n Label: typeof Label\n MaxValue: typeof MaxValue\n MinValue: typeof MinValue\n Thumb: typeof Thumb\n Track: typeof Track\n Value: typeof Value\n} = Object.assign(Root, {\n Control,\n Indicator,\n Label,\n MaxValue,\n MinValue,\n Thumb,\n Track,\n Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n SliderProps,\n SliderControlProps,\n SliderIndicatorProps,\n SliderLabelProps,\n SliderMaxValueProps,\n SliderMinValueProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderValueProps,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n 'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n 'touch-none select-none',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n fieldLabelId?: string\n fieldId?: string\n onLabelId?: (id: string | undefined) => void\n hasValueInThumb: boolean\n registerValueInThumb: () => () => void\n controlRef: RefObject<HTMLElement | null>\n thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n extends\n Omit<\n ComponentProps<typeof BaseSlider.Root>,\n 'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n >,\n PropsWithChildren<SliderRangeVariantsProps> {\n /**\n * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n */\n defaultValue?: number\n /**\n * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n */\n value?: number\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: number) => void\n /**\n * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n */\n onValueCommit?: (value: number) => void\n /**\n * The name of the slider. Submitted with its owning form as part of a name/value pair.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * When `true`, prevents the user from interacting with the slider.\n * @default false\n */\n disabled?: boolean\n /**\n * Sets the slider as interactive or not.\n */\n readOnly?: boolean\n /**\n * The minimum value for the range.\n * @default 0\n */\n min?: number\n /**\n * The maximum value for the range.\n * @default 100\n */\n max?: number\n /**\n * The stepping interval.\n * @default 1\n */\n step?: number\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n intent = 'support',\n children,\n className,\n ref,\n value: valueProp,\n defaultValue: defaultValueProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n name: nameProp,\n onValueChange,\n onValueCommit,\n min = 0,\n max = 100,\n ...rest\n}: SliderProps) => {\n const field = useFormFieldControl()\n\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n\n const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n const [valueInThumbCount, setValueInThumbCount] = useState(0)\n const controlRef = useRef<HTMLElement | null>(null)\n const thumbRef = useRef<HTMLElement | null>(null)\n\n const handleLabelId = useCallback((id: string | undefined) => {\n setLabelId(id)\n }, [])\n\n const registerValueInThumb = useCallback(() => {\n setValueInThumbCount(c => c + 1)\n\n return () => setValueInThumbCount(c => c - 1)\n }, [])\n\n return (\n <SliderContext.Provider\n value={{\n intent,\n min,\n max,\n fieldLabelId: field.labelId || labelId,\n fieldId: field.id,\n onLabelId: handleLabelId,\n hasValueInThumb: valueInThumbCount > 0,\n registerValueInThumb,\n controlRef,\n thumbRef,\n }}\n >\n <BaseSlider.Root\n ref={ref}\n data-spark-component=\"slider\"\n className={rootStyles({ className })}\n orientation=\"horizontal\"\n disabled={disabled || readOnly}\n thumbAlignment=\"edge\"\n name={name}\n aria-describedby={field.description}\n aria-invalid={field.isInvalid}\n aria-disabled={disabled || readOnly ? true : undefined}\n value={valueProp !== undefined ? [valueProp] : undefined}\n defaultValue={defaultValueProp !== undefined ? [defaultValueProp] : undefined}\n onValueChange={\n onValueChange\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueChange(v)\n }\n : undefined\n }\n onValueCommitted={\n onValueCommit\n ? (value: number | readonly number[]) => {\n const v = Array.isArray(value) ? (value[0] ?? 0) : value\n onValueCommit(v)\n }\n : undefined\n }\n min={min}\n max={max}\n {...rest}\n >\n {children}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n const { hasValueInThumb, controlRef } = useSliderContext()\n const mergedRef = useMergeRefs(controlRef, ref)\n\n return (\n <BaseSlider.Control\n data-spark-component=\"slider-control\"\n ref={mergedRef}\n className={cx(\n 'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n hasValueInThumb && 'mt-xl',\n className\n )}\n {...rest}\n />\n )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n [\n 'absolute h-full rounded-sm',\n // Disable transitions during drag to eliminate latency\n 'transition-none',\n ],\n {\n variants: {\n intent: {\n main: ['bg-main'],\n support: ['bg-support'],\n accent: ['bg-accent'],\n info: ['bg-info'],\n neutral: ['bg-neutral'],\n success: ['bg-success'],\n alert: ['bg-alert'],\n error: ['bg-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n const { intent } = useSliderContext()\n\n return (\n <BaseSlider.Indicator\n data-spark-component=\"slider-indicator\"\n ref={ref}\n className={rangeVariants({ intent, className })}\n {...rest}\n />\n )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n /**\n * Element shown when the input is required inside the label.\n */\n requiredIndicator?: ReactNode\n ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n htmlFor: htmlForProp,\n id: idProp,\n className,\n children,\n requiredIndicator = <FormFieldRequiredIndicator />,\n asChild,\n ref,\n ...others\n}: SliderLabelProps) => {\n const field = useFormFieldControl()\n const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n // Generate an id if not provided and no FormField labelId is available\n const internalId = useId()\n const generatedId = `${ID_PREFIX}-${internalId}`\n const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n // Get disabled and required state from FormField if present\n const disabled = field.disabled\n const isRequired = field.isRequired\n\n // Notify SliderContext of the label id if no FormField is present\n const labelRef = useRef<HTMLLabelElement>(null)\n const mergedRef = useMergeRefs(ref, labelRef)\n\n useEffect(() => {\n if (onLabelId && !fieldLabelId && !field.labelId) {\n onLabelId(labelId)\n }\n }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n return (\n <Label\n ref={mergedRef}\n id={labelId}\n data-spark-component=\"slider-label\"\n htmlFor={htmlFor}\n className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n asChild={asChild}\n {...others}\n >\n <>\n <Slottable>{children}</Slottable>\n {isRequired && requiredIndicator}\n </>\n </Label>\n )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n ({ className, children }, ref) => {\n const { max = 100 } = useSliderContext()\n\n const content = children ? children(max) : max\n\n return (\n <div\n data-spark-component=\"slider-max-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n className?: string\n children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n ({ className, children }, ref) => {\n const { min = 0 } = useSliderContext()\n\n const content = children ? children(min) : min\n\n return (\n <div\n data-spark-component=\"slider-min-value\"\n ref={ref}\n className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n >\n {content}\n </div>\n )\n }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n [\n 'relative block size-sz-24 rounded-full cursor-pointer',\n 'outline-hidden',\n 'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n 'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n // visual thumb\n 'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n 'after:size-sz-24 after:rounded-full',\n // hover effect\n 'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n 'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n 'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n ],\n {\n variants: {\n intent: {\n main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n },\n },\n defaultVariants: {\n intent: 'support',\n },\n }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\nimport { SliderThumbContext } from './SliderThumbContext'\n\nexport type SliderThumbProps = Omit<ComponentProps<typeof BaseSlider.Thumb>, 'render' | 'index'> &\n PropsWithChildren\n\nexport const SliderThumb = ({\n className,\n ref: forwardedRef,\n children,\n ...rest\n}: SliderThumbProps) => {\n const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n const innerRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n return (\n <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n <BaseSlider.Thumb\n data-spark-component=\"slider-thumb\"\n ref={ref}\n id={fieldId}\n className={thumbVariants({ intent, className })}\n aria-labelledby={fieldLabelId}\n {...rest}\n >\n {children}\n </BaseSlider.Thumb>\n </SliderThumbContext.Provider>\n )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n return (\n <BaseSlider.Track\n data-spark-component=\"slider-track\"\n ref={ref}\n className={trackVariants({ className })}\n {...rest}\n />\n )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n controlRef: RefObject<HTMLElement | null>,\n thumbRef: RefObject<HTMLElement | null>,\n valueRef: RefObject<HTMLElement | null>,\n value: number\n): number {\n const [translateX, setTranslateX] = useState(0)\n const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n useLayoutEffect(() => {\n const control = controlRef.current\n const thumb = thumbRef.current\n const valueEl = valueRef.current\n\n if (!control || !thumb || !valueEl) {\n setTranslateX(0)\n // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n if (!refsRetryScheduled) {\n requestAnimationFrame(() => setRefsRetryScheduled(true))\n }\n\n return\n }\n\n let cancelled = false\n\n const compute = () => {\n if (cancelled) return\n\n const controlRect = control.getBoundingClientRect()\n const thumbRect = thumb.getBoundingClientRect()\n const valueWidth = valueEl.scrollWidth\n\n // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n if (valueWidth === 0) {\n requestAnimationFrame(compute)\n\n return\n }\n\n const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n const valueCenterMin = valueWidth / 2\n const valueCenterMax = controlRect.width - valueWidth / 2\n\n const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n const nextTranslateX = clampedCenter - thumbCenterPx\n\n setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n }\n\n compute()\n\n const resizeObserver = new ResizeObserver(compute)\n resizeObserver.observe(control)\n resizeObserver.observe(valueEl)\n\n return () => {\n cancelled = true\n resizeObserver.disconnect()\n }\n }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<\n ComponentProps<typeof BaseSlider.Value>,\n 'render' | 'children'\n> & {\n children?: ReactNode | ((formatted: string, value: number) => ReactNode)\n}\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n const thumbContext = useSliderThumbContext()\n const isInsideThumb = thumbContext !== null\n\n const valueRef = useRef<HTMLOutputElement | null>(null)\n const mergedRef = useMergeRefs(valueRef, ref)\n\n const [currentValue, setCurrentValue] = useState(0)\n const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n useEffect(() => {\n if (!isInsideThumb) return\n\n return registerValueInThumb()\n }, [isInsideThumb, registerValueInThumb])\n\n const resolvedClassName = cx(\n isInsideThumb\n ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1-highlight whitespace-nowrap'\n : 'default:text-body-1-highlight col-start-2 text-right',\n className\n )\n\n const normalizedChildren = useCallback(\n (formattedValues: readonly string[], values: readonly number[]) => {\n const formatted = formattedValues[0] ?? String(values[0] ?? '')\n const value = values[0] ?? 0\n setCurrentValue(value)\n if (typeof children === 'function') {\n return children(formatted, value)\n }\n\n return formatted\n },\n [children]\n )\n\n const style = isInsideThumb\n ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n : undefined\n\n return (\n <BaseSlider.Value\n data-spark-component=\"slider-value\"\n ref={mergedRef}\n className={resolvedClassName}\n style={style}\n {...rest}\n >\n {normalizedChildren}\n </BaseSlider.Value>\n )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\n/**\n * An input control that allows users to select a value from a continuous range by dragging a handle.\n */\nexport const Slider: typeof Root & {\n Control: typeof Control\n Indicator: typeof Indicator\n Label: typeof Label\n MaxValue: typeof MaxValue\n MinValue: typeof MinValue\n Thumb: typeof Thumb\n Track: typeof Track\n Value: typeof Value\n} = Object.assign(Root, {\n Control,\n Indicator,\n Label,\n MaxValue,\n MinValue,\n Thumb,\n Track,\n Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n SliderProps,\n SliderControlProps,\n SliderIndicatorProps,\n SliderLabelProps,\n SliderMaxValueProps,\n SliderMinValueProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderValueProps,\n}\n"],"mappings":"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"}
|
package/dist/stepper/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-jcPwRD21.js`),n=require(`../input-Cx5cfgE8.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/components/form-field`),c=require(`@spark-ui/icons/Minus`),l=require(`@base-ui/react/number-field`),u=require(`@spark-ui/icons/Plus`);var d=(0,i.createContext)(null),f=({children:e,formatOptions:t,minValue:o,maxValue:c,ref:u,onValueChange:f,locale:p=`fr`,name:m,...h})=>{let g=(0,i.useRef)(null),_=(0,s.useFormFieldControl)(),v=(0,i.useRef)(h.value??h.defaultValue??null),y=_.name??m,b=_.disabled??h.disabled,x=_.readOnly??h.readOnly,S=_.isRequired??h.required,C=e=>{f&&e!==v.current&&(v.current=e,f(e))},{"aria-label":w,...T}=h;return(0,a.jsx)(d.Provider,{value:{inputRef:g,fieldId:_.id,fieldLabelId:_.labelId,fieldIsInvalid:_.isInvalid,fieldIsRequired:S,state:h.state,ariaLabel:w},children:(0,a.jsx)(l.NumberField.Root,{...T,format:t,min:o,max:c,locale:p,disabled:b,readOnly:x,required:S,name:y,inputRef:g,onValueCommitted:C,"aria-describedby":_.description,children:(0,a.jsx)(`div`,{"data-spark-component":`stepper`,ref:u,className:(0,r.cx)(n.r({disabled:b,readOnly:x}),h.className),children:e})})})};f.displayName=`Stepper`;var p=()=>{let e=(0,i.useContext)(d);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},m=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:c,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Increment,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-r-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-increment-button`,children:(0,a.jsx)(t.t,{ref:c,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-l-0! -ml-px rounded-r-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(u.Plus,{})})})})}})},h=({children:n,design:i=`ghost`,intent:o=`neutral`,className:s,ref:u,disabled:d,...f})=>{let{fieldId:m,state:h}=p();return(0,a.jsx)(l.NumberField.Decrement,{render:l=>{let p=d||`disabled`in l&&l.disabled,g=`readOnly`in l&&l.readOnly;return(0,a.jsx)(`div`,{className:(0,r.cx)(`rounded-l-lg`,p||g?`bg-on-surface/dim-5`:null),"data-spark-component":`stepper-decrement-button`,children:(0,a.jsx)(t.t,{ref:u,design:i,intent:o,className:(0,r.cx)(`overflow-hidden border-sm shrink-0 h-full focus-visible:relative focus-visible:z-raised mx-0`,`rounded-r-0! -mr-px rounded-l-lg`,h===`error`&&`border-error`,h===`alert`&&`border-alert`,h===`success`&&`border-success`,!h&&`border-outline`,s),...f,...l,"aria-label":f[`aria-label`]||l[`aria-label`],"aria-controls":m,disabled:p,children:n||(0,a.jsx)(e.t,{children:(0,a.jsx)(c.Minus,{})})})})}})},g=m,_=h;m.displayName=`Stepper.IncrementButton`,h.displayName=`Stepper.DecrementButton`;var v=({ref:e,...t})=>{let{inputRef:r,fieldId:i,fieldLabelId:s,fieldIsInvalid:c,fieldIsRequired:u,ariaLabel:d}=p(),f=(0,o.useMergeRefs)(e,r),{className:m=``,...h}=t,g=!!s;return(0,a.jsx)(`div`,{className:`relative inline-flex w-full`,children:(0,a.jsx)(l.NumberField.Input,{render:e=>{let t;u===void 0?`required`in e&&(t=e.required):t=u;let r=c===void 0?e[`aria-invalid`]:c;return(0,a.jsx)(n.n,{ref:f,...e,...h,id:i||e.id,required:t,"aria-invalid":r,"aria-label":g?void 0:d,className:`min-w-sz-56 text-center rounded-none! ${m}`})}})})},y=v;v.displayName=`Stepper.Input`;var b=Object.assign(f,{IncrementButton:g,DecrementButton:_,Input:y});b.displayName=`Stepper`,g.displayName=`Stepper.IncrementButton`,_.displayName=`Stepper.DecrementButton`,y.displayName=`Stepper.Input`,exports.Stepper=b;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/stepper/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "../icon-D05Uqh8_.mjs";
|
|
2
|
-
import { t } from "../icon-button-
|
|
2
|
+
import { t } from "../icon-button-C3RgGf2o.mjs";
|
|
3
3
|
import { n, r } from "../input-BIuBpTEq.mjs";
|
|
4
4
|
import { cx as i } from "class-variance-authority";
|
|
5
5
|
import { createContext as a, useContext as o, useRef as s } from "react";
|
package/dist/table/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-B-sMnDc_.js`),r=require(`../checkbox-DjwbAH09.js`);let i=require(`class-variance-authority`),a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`@react-aria/utils`),c=require(`@react-stately/table`),l=require(`react-aria`),u=require(`@react-aria/table`),d=require(`@spark-ui/icons/ArrowDown`),f=require(`@spark-ui/icons/ArrowUp`),p=require(`@spark-ui/icons/Sort`);var m=(0,a.createContext)({isResizable:!1,tableWidth:0});function h(){return(0,a.useContext)(m)}var g=(0,a.createContext)({selectedCount:0,onClearSelection:()=>{}});function _(){return(0,a.useContext)(g)}function v({children:e,className:t,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onClearSelection:c,onSelectAll:l,allowsResizing:u=!0,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,...x}){let S=0;n===`all`?S=a??0:n instanceof Set?S=n.size:n&&(S=new Set(n).size);let C=c??(()=>r?.(new Set)),w={...x,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onSelectAll:l,selectedCount:S,onClearSelection:C,allowsResizing:u,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,className:t};return(0,o.jsx)(g.Provider,{value:w,children:(0,o.jsx)(`div`,{className:(0,i.cx)(`gap-md flex flex-col`,t),children:e})})}v.displayName=`Table`;function y({className:e,children:t,...n}){let r=(0,a.useRef)(null),[c,l]=(0,a.useState)(0);return(0,a.useLayoutEffect)(()=>{let e=r.current;e&&l(e.clientWidth)},[]),(0,s.useResizeObserver)({ref:r,onResize:()=>{let e=r.current;e&&l(e.clientWidth)}}),(0,o.jsx)(m.Provider,{value:{isResizable:!0,tableWidth:c},children:(0,o.jsx)(`div`,{ref:r,"data-spark-component":`resizable-table-container`,className:(0,i.cx)(`relative w-full overflow-auto`,e),...n,children:t})})}y.displayName=`ResizableTableContainer`;var b=`[data-spark-component="table-cell"]`;function x(e){return!e||!(e instanceof Element)?!1:!!e.closest(`[role="combobox"],select,[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`)}function S(e){if(!e||!(e instanceof Element))return!1;let t=e.closest(`[role="combobox"],[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`);return t?t.getAttribute(`aria-expanded`)===`true`:!1}var C=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function w(e){return!e||!(e instanceof Element)?null:e.closest(b)}function T(e){return e.getAttribute(`data-table-cell-kind`)===`selection`}function E(e){return Array.from(e.querySelectorAll(C)).filter(t=>!(t===e||t.hasAttribute(`disabled`)||t.getAttribute(`aria-disabled`)===`true`||t.getAttribute(`hidden`)!==null))}function D(e,t){for(let n of E(e)){let e=`data-prev-tabindex`;if(!t)n.hasAttribute(e)||n.setAttribute(e,n.getAttribute(`tabindex`)??``),n.setAttribute(`tabindex`,`-1`);else{let t=n.getAttribute(e);if(t===null)continue;n.removeAttribute(e),t===``?n.removeAttribute(`tabindex`):n.setAttribute(`tabindex`,t)}}}function O(e){let t=Array.from(e.querySelectorAll(b));for(let e of t)D(e,!1)}function ee({ref:e,gridProps:t,onKeyDownCapture:n,onFocusCapture:r}){let[i,o]=(0,a.useState)(`grid`),s=(0,a.useRef)(`grid`),c=(0,a.useRef)(null),u=(0,a.useRef)(!1),d=(0,a.useMemo)(()=>{let{onKeyDown:a,...d}=t,f=e=>{c.current=e,s.current=`interaction`,o(`interaction`),D(e,!0)};return(0,l.mergeProps)(d,{onKeyDown:e=>{if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let e=c.current,t=document.activeElement;if(e&&t instanceof Node&&e.contains(t))return}s.current===`interaction`&&(e.key===`ArrowUp`||e.key===`ArrowDown`)&&x(e.target)&&w(e.target)===c.current||a?.(e)},onKeyDownCapture:e=>{if(n?.(e),s.current===`interaction`&&e.key===`Tab`){let t=w(e.target);t&&t===c.current&&e.stopPropagation();return}if(x(e.target)&&s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current)return}if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current){e.stopPropagation();return}}if(s.current===`grid`&&e.key===`ArrowRight`){let t=w(e.target);if(t){let n=t.closest(`tr`);if(n){let r=Array.from(n.querySelectorAll(b));if(r.length>0&&r[r.length-1]===t){e.preventDefault(),e.stopPropagation(),n.focus();return}}}}if(s.current===`grid`&&e.key===`Enter`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`grid`&&e.key===`F2`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`interaction`&&e.key===`Escape`){if(S(e.target))return;let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}if(s.current===`interaction`&&e.key===`F2`){let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}},onBlurCapture:t=>{if(s.current!==`interaction`)return;let n=e.current;if(!n)return;let r=t.relatedTarget;r instanceof Node&&n.contains(r)||(c.current=null,s.current=`grid`,o(`grid`))},onFocusCapture:t=>{r?.(t);let n=u.current;u.current=!1;let i=e.current,a=w(t.target);if(s.current===`interaction`&&c.current&&i){let e=!!(a&&a!==c.current),n=!a&&t.target instanceof Element&&i.contains(t.target)&&!c.current.contains(t.target);(e||n)&&(s.current=`grid`,o(`grid`),n&&(c.current=null))}if(!a)return;c.current=a;let l=t.target instanceof Element?t.target:null,d=a.matches(b),p=s.current===`grid`,m=!!(l&&l!==a&&a.contains(l)),h=E(a).length>0;p&&d&&m&&h&&!n&&queueMicrotask(()=>a.focus()),n&&p&&m&&d&&h&&!T(a)&&f(a)},onPointerDownCapture:e=>{let t=w(e.target);t?.matches(b)&&e.target instanceof Element&&e.target!==t&&t.contains(e.target)&&(u.current=!0)},"data-table-keyboard-mode":i})},[t,i,e,r,n]);return(0,a.useEffect)(()=>{s.current=i;let t=e.current;if(t){if(i===`grid`){O(t),c.current?.focus?.();return}O(t),c.current&&D(c.current,!0)}},[i,e]),{gridProps:d,keyboardMode:i}}var k=(0,i.cva)([`h-sz-64 min-w-sz-64`,`relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container`,`pl-lg pr-lg py-sm text-left outline-none box-border`,`cursor-default`,`data-focus-visible:u-outline data-focus-visible:-outline-offset-2`],{variants:{checkbox:{true:[`w-sz-64 min-w-sz-64 max-w-sz-64`,`px-0 align-middle`]},resizable:{true:[`pr-xl`]}},defaultVariants:{checkbox:!1,resizable:!1}}),te=(0,i.cva)([`flex flex-1 justify-between items-center gap-md`,`font-inherit text-left text-inherit`,`whitespace-nowrap text-ellipsis`,`border-transparent`,`data-focus-visible:u-outline data-focus-visible:outline-offset-2`],{variants:{},defaultVariants:{}});(0,i.cva)([`empty:italic empty:text-center empty:text-body-2 empty:py-lg`],{variants:{},defaultVariants:{}});var ne=(0,i.cva)([`p-lg outline-none box-border default:overflow-hidden`,`border-b-sm border-outline [tr:last-child>&]:border-b-0`,`[-webkit-tap-highlight-color:transparent]`,`data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`],{variants:{checkbox:{true:[`w-sz-64 py-sm px-0 align-middle`]}},defaultVariants:{checkbox:!1}}),re=(0,i.cva)([`pointer-events-none`,`[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle`],{variants:{},defaultVariants:{}}),ie=`button, [role="button"], [role="switch"], [role="checkbox"], [role="option"], input:not([type="hidden"]), select, textarea, [href], [data-spark-component="dropdown-trigger"], [data-spark-component="icon-button"], [data-spark-component="switch"], [data-spark-component="switch-input"], [data-spark-component="combobox-input"]`,ae=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function oe(e){if(!e||!(e instanceof Element))return!1;let t=e;return t.matches(ie)||t.closest(ie)!==null}function se(e){return e?e instanceof Element?e:e instanceof Text?e.parentElement:null:null}function ce(e){for(let t of e.querySelectorAll(ae))if(t!==e&&!t.hasAttribute(`disabled`)&&t.getAttribute(`aria-disabled`)!==`true`&&t.getAttribute(`hidden`)===null)return!0;return!1}function le(e){let t=se(e);if(!t)return!1;if(oe(t))return!0;let n=t.closest(`[data-spark-component="table-cell"]`);return!n||n.getAttribute(`data-table-cell-kind`)===`selection`?!1:ce(n)}var A=(0,a.createContext)(`grid`);function j({checkboxProps:e,className:t,suppressFocusWalker:n}){let{isSelected:i,isIndeterminate:a,isDisabled:s,onChange:c,...l}=e,u=a===!0?`indeterminate`:!!i;return(0,o.jsx)(`span`,{...n?{"data-react-aria-prevent-focus":!0}:void 0,onClick:e=>e.stopPropagation(),onPointerDown:e=>e.stopPropagation(),className:t??`flex h-full min-h-full items-center justify-center`,children:(0,o.jsx)(r.n,{checked:u,disabled:s,onCheckedChange:c,...l})})}j.displayName=`Table.SelectionCheckbox`;function M({cell:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{gridCellProps:i}=(0,l.useTableCell)({node:e},t,r),{isFocusVisible:s,focusProps:c}=(0,l.useFocusRing)(),d=(0,a.useContext)(A),f=(0,a.useCallback)(e=>{d===`interaction`&&(e.key!==` `&&e.key!==`Enter`||e.stopPropagation())},[d]),{onKeyDownCapture:p,...m}=i,h=(0,a.useCallback)(e=>{[`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`].includes(e.key)||p?.(e)},[p]),g=(0,u.useTableSelectionCheckbox)({key:e.parentKey??e.key},t),_=t.collection.columns[e.index??0]?.key??null,v=_?n?.columnWidths?.get?.(_):void 0;return e.props?.isSelectionCell?(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,"data-table-cell-kind":`selection`,className:ne({checkbox:!0}),"data-focus-visible":s||void 0,children:(0,o.jsx)(j,{suppressFocusWalker:d===`grid`,checkboxProps:g.checkboxProps})}):(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,className:ne(),"data-focus-visible":s||void 0,style:v?{width:v}:void 0,children:e.rendered})}M.displayName=`Table.BodyCellRenderer`;function N(e){if(e)return t=>{le((0,s.getEventTarget)(t.nativeEvent))||e(t)}}function P({item:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{rowProps:s,isSelected:c}=(0,l.useTableRow)({node:e},t,r),{isFocusVisible:u,focusProps:d}=(0,l.useFocusRing)(),{onClick:f,onPointerDown:p,onMouseDown:m,onPointerUp:h,onPointerCancel:g,..._}=s,v=(0,i.cx)(`outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`,_.className,c&&`bg-support-container text-on-support-container`);return(0,o.jsx)(`tr`,{...(0,l.mergeProps)(_,d),onPointerDown:N(p),onMouseDown:N(m),onPointerUp:N(h),onPointerCancel:N(g),onClick:N(f),ref:r,"data-spark-component":`table-row`,"data-selected":c||void 0,"data-focus-visible":u||void 0,className:v,tabIndex:-1,children:[...e.childNodes].map(e=>(0,o.jsx)(M,{cell:e,state:t,resizeState:n},e.key))})}P.displayName=`Table.BodyRowRenderer`;function F({column:e,ariaLabel:t,resizeState:n,resizeCallbacks:r}){let s=(0,a.useRef)(null),{resizerProps:c,inputProps:l,isResizing:d}=(0,u.useTableColumnResize)({column:e,"aria-label":t??`Resize column`,onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd},n,s);return(0,o.jsx)(`div`,{role:`presentation`,className:(0,i.cx)(`cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center`,`after:block after:h-full after:w-[2px] after:bg-outline after:transition-all after:duration-75`,`has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2`,d&&`after:bg-outline-high after:scale-120`),"data-resizable-direction":`both`,...c,children:(0,o.jsx)(`input`,{ref:s,disabled:!d,...l})})}F.displayName=`Table.ColumnResizer`;function I({state:e}){let{checkboxProps:t}=(0,u.useTableSelectAllCheckbox)(e),{collection:n,selectionManager:r}=e,i=r.selectedKeys,a=n,s=a.body,c=s==null?new Set(n.getKeys()):new Set([...a.getChildren(s.key)].map(e=>e.key)),l=i===`all`?c:i,d=[...c].filter(e=>l.has(e)).length,f=c.size,p=f>0&&d===f,m=d>0&&d<f,{isSelected:h,isIndeterminate:g,onChange:_,...v}=t,y=e=>{(e.key===` `||e.key===`Enter`)&&e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),t.isDisabled||_?.(!p))};return(0,o.jsx)(j,{checkboxProps:{...v,isSelected:p,isIndeterminate:m,onChange:_,onKeyDown:y}})}I.displayName=`Table.HeaderSelectionCheckbox`;var L=(0,i.cx)(`sticky top-0 z-sticky`);function R({column:e,state:n,resizeState:r,stickyHeader:s,resizeCallbacks:c,isLastColumnInRow:u=!1}){let m=(0,a.useRef)(null),{resizeColumnAriaLabel:h}=_(),{columnHeaderProps:g}=(0,l.useTableColumnHeader)({node:e},n,m),{isFocusVisible:v,focusProps:y}=(0,l.useFocusRing)(),b=e.props?.allowsResizing!==!1&&!u,x=r?.columnWidths?.get?.(e.key),S=!!(r&&b);if(e.props?.isSelectionCell)return(0,o.jsx)(`th`,{...g,ref:m,role:`columnheader`,className:(0,i.cx)(k({checkbox:!0}),s&&L),"data-spark-component":`table-column`,"data-table-selection-columnheader":!0,"data-focus-visible":v||void 0,children:(0,o.jsx)(I,{state:n})});let C=!!e.props?.allowsSorting,w=n.sortDescriptor?.column===e.key,T=n.sortDescriptor?.direction??`ascending`,E=w?T===`descending`?(0,o.jsx)(d.ArrowDown,{}):(0,o.jsx)(f.ArrowUp,{}):(0,o.jsx)(p.Sort,{}),D=t=>{C&&(t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),t.stopPropagation(),n.sort?.(e.key)))};return(0,o.jsxs)(`th`,{...(0,l.mergeProps)(g,y),ref:m,role:`columnheader`,className:(0,i.cx)(k({resizable:S}),s&&L),style:x?{width:x}:void 0,"data-spark-component":`table-column`,"data-focus-visible":v||void 0,onKeyDown:D,children:[(0,o.jsxs)(`div`,{className:te(),children:[(0,o.jsx)(`button`,{type:`button`,className:(0,i.cx)(`gap-md flex min-w-0 flex-1 items-center text-left`,`focus-visible:u-outline outline-none`,`bg-transparent p-0 border-0`),onKeyDown:D,children:(0,o.jsx)(`span`,{className:`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap`,children:e.rendered})}),C?(0,o.jsx)(`span`,{"aria-hidden":`true`,className:(0,i.cx)(`shrink-0 opacity-dim-2 group-hover/column:opacity-100`,w&&`opacity-100`),children:(0,o.jsx)(t.t,{size:`sm`,children:E})}):null]}),r&&b?(0,o.jsx)(F,{column:e,ariaLabel:typeof h==`function`?h(e):h,resizeState:r,resizeCallbacks:c}):null]})}R.displayName=`Table.ColumnHeader`;function z({item:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i}){let s=(0,a.useRef)(null),{rowProps:c}=(0,l.useTableHeaderRow)({node:e},t,s),u=[...e.childNodes];return(0,o.jsx)(`tr`,{...c,ref:s,children:u.map((e,a)=>(0,o.jsx)(R,{column:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i,isLastColumnInRow:a===u.length-1},e.key))})}z.displayName=`Table.HeaderRowRenderer`;function B({className:e,children:t,stickyHeader:n,...r}){let u=!!n,d=(0,a.useRef)(null),f=h(),p=r.selectionMode===`multiple`,m=(0,c.useTableState)({...r,showSelectionCheckboxes:r.selectionMode===`multiple`,children:t}),g=(0,c.useTableColumnResizeState)({tableWidth:f.tableWidth},m),_=f.isResizable&&r.allowsResizing!==!1?g:null,{gridProps:v}=(0,l.useTable)({...r},m,d),y=m.collection.headerRows,b=[...m.collection.body.childNodes],x=m.collection.body.props?.renderEmptyState,S=m.collection.columns.length||1,C=b.length>0||!!x,{rowGroupProps:w}=(0,l.useTableRowGroup)(),{rowGroupProps:T}=(0,l.useTableRowGroup)(),{gridProps:E,keyboardMode:D}=ee({ref:d,gridProps:v,onKeyDownCapture:r.onKeyDownCapture,onFocusCapture:r.onFocusCapture});return(0,o.jsx)(A.Provider,{value:D,children:(0,o.jsxs)(`table`,{...(0,l.mergeProps)(E,(0,s.filterDOMProps)(r,{global:!0})),ref:d,"data-spark-component":`table`,className:(0,i.cx)(`default:w-full`,p?`table-fixed`:void 0,`border-separate border-spacing-y-0`,`bg-surface`,`outline-none`,`text-body-1`,`forced-color-adjust-none`,`data-focus-visible:u-outline-inset`,`has-[>[data-empty]]:h-full`,e),children:[(0,o.jsx)(`thead`,{...w,"data-spark-component":`table-header`,children:y.map(e=>(0,o.jsx)(z,{item:e,state:m,resizeState:_,stickyHeader:u,resizeCallbacks:{onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd}},e.key))}),(0,o.jsxs)(`tbody`,{...T,"data-spark-component":`table-body`,children:[C?(0,o.jsx)(`tr`,{"aria-hidden":`true`,className:re(),role:`presentation`,"data-spark-component":`table-body-spacer`,children:(0,o.jsx)(`td`,{colSpan:S,role:`presentation`})}):null,b.length===0&&x?(0,o.jsx)(`tr`,{"data-empty":!0,children:(0,o.jsx)(`td`,{colSpan:S,children:x({isEmpty:!0})})}):null,b.map(e=>(0,o.jsx)(P,{item:e,state:m,resizeState:_},e.key))]})]})})}B.displayName=`Table.Grid.Inner`;function ue(e){return typeof e==`number`?`${e}px`:e}function V({"aria-label":e,"aria-labelledby":t,className:n,children:r}){let{allowsResizing:i=!0,maxHeight:a,stickyHeader:s,onResizeStart:c,onResize:l,onResizeEnd:u,onKeyDownCapture:d,sortDescriptor:f,onSortChange:p,className:m,...h}=_(),g=a==null?void 0:{maxHeight:ue(a)},v=n??m,b={...h,...e!=null&&{"aria-label":e},...t!=null&&{"aria-labelledby":t},sortDescriptor:f,onSortChange:p,onKeyDownCapture:d,className:v,stickyHeader:s},x=B;return i?(0,o.jsx)(y,{className:v,style:g,onResizeStart:c,onResize:l,onResizeEnd:u,children:(0,o.jsx)(x,{...b,children:r})}):(0,o.jsx)(`div`,{className:`relative w-full overflow-auto`,style:g,children:(0,o.jsx)(x,{...b,children:r})})}V.displayName=`Table.Grid`;function H(e){return(0,o.jsx)(c.TableBody,{...e})}H.displayName=`Table.Body`,H.getCollectionNode=c.TableBody.getCollectionNode;var U=(0,a.createContext)(null);function W(){let e=(0,a.useContext)(U);if(!e)throw Error(`Table.BulkBar subcomponents must be used within Table.BulkBar`);return e}function G({children:e,className:t,rootProps:n,...r}){let{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u}=_(),d={selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u};return(0,o.jsx)(U.Provider,{value:d,children:(0,o.jsx)(`div`,{role:`toolbar`,"aria-label":r[`aria-label`]??`Table bulk actions`,"data-spark-component":`table-bulk-bar`,className:(0,i.cx)(`gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between`,`rounded-lg`,`bg-support-container text-on-support-container p-lg`,t),...n,children:e})})}function K({children:e}){return W(),(0,o.jsx)(`span`,{className:`text-body-1 font-bold`,children:e})}function q({className:e,children:t,...r}){let{selectedCount:a,onClearSelection:s,hasMultiplePages:c}=W();return c?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:a===0,onClick:s,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}function de({className:e,children:t,...r}){let{selectedCount:a,totalCount:s,onSelectAll:c,hasMultiplePages:l}=W();return l?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:s==null||c==null||a>=s,onClick:c,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}G.displayName=`Table.BulkBar`;var J=G;J.displayName=`Table.BulkBar`,K.displayName=`Table.BulkBarSelectedCount`,q.displayName=`Table.BulkBarClearButton`,de.displayName=`Table.BulkBarSelectAllButton`;function Y(e){return(0,o.jsx)(c.Cell,{...e})}Y.displayName=`Table.Cell`,Y.getCollectionNode=c.Cell.getCollectionNode;function X({label:e,allowsResizing:t=!0,...n}){return null}X.displayName=`Table.Column`,X.getCollectionNode=function*(e,t){let n=e.title??e.label??e.children??null,r=e.textValue||(typeof n==`string`?n:``)||e[`aria-label`],i=yield{type:`column`,key:e.id??null,hasChildNodes:!!e.childColumns||!!e.title&&a.default.Children.count(e.children)>0,rendered:n,textValue:r,props:{...e,title:e.title??e.label,allowsResizing:e.allowsResizing},*childNodes(){if(e.childColumns)for(let t of e.childColumns)yield{type:`column`,value:t};else if(e.title){let t=[];a.default.Children.forEach(e.children,e=>{t.push({type:`column`,element:e})}),yield*t}},shouldInvalidate(e){return o(e),!1}},o=e=>{for(let t of i)t.hasChildNodes||e.columns.push(t)};o(t)};function Z(e){return(0,o.jsx)(c.TableHeader,{...e})}Z.displayName=`Table.Header`,Z.getCollectionNode=c.TableHeader.getCollectionNode;function Q(e){return null}Q.displayName=`Table.Row`,Q.getCollectionNode=function*(e,t){let{children:n,textValue:r,UNSTABLE_childItems:i}=e;yield{type:`item`,key:e.id??null,props:e,textValue:r,"aria-label":e[`aria-label`],hasChildNodes:!0,*childNodes(){if(t.showDragButtons&&(yield{type:`cell`,key:`header-drag`,props:{isDragButtonCell:!0}}),t.showSelectionCheckboxes&&t.selectionMode!==`none`&&(yield{type:`cell`,key:`header`,props:{isSelectionCell:!0}}),typeof n==`function`){for(let e of t.columns)yield{type:`cell`,element:n(e.key),key:e.key};if(i)for(let e of i)yield{type:`item`,value:e}}else{let e=[],r=[],i=0;if(a.default.Children.forEach(n,n=>{if(n)if(n.type===Q){if(e.length<t.columns.length)throw Error(`All of a Row's child Cells must be positioned before any child Rows.`);r.push({type:`item`,element:n})}else e.push({type:`cell`,element:n}),i+=n.props?.colSpan??1}),i!==t.columns.length)throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);yield*e,yield*r}},shouldInvalidate(e){return e.columns.length!==t.columns.length||e.columns.some((e,n)=>e.key!==t.columns[n].key)||e.showSelectionCheckboxes!==t.showSelectionCheckboxes||e.showDragButtons!==t.showDragButtons||e.selectionMode!==t.selectionMode}}};function fe(e,t,n,r){let i=e[n],a=t[n];if(i===a)return 0;let o;return o=typeof i==`number`&&typeof a==`number`?i<a?-1:1:String(i).localeCompare(String(a)),r===`descending`?-o:o}function pe(e,t={}){let{initialSort:n,compare:r}=t,[i,o]=(0,a.useState)(()=>n?{column:n.column,direction:n.direction}:{column:`id`,direction:`ascending`});return{sortDescriptor:i,onSortChange:o,setSortDescriptor:o,sortedItems:(0,a.useMemo)(()=>{let t=i.column;if(!t)return[...e];let n=r??fe,a=i.direction??`ascending`;return[...e].sort((e,r)=>n(e,r,t,a))},[e,i.column,i.direction,r])}}function me(e,t){let{pageSize:n,initialPage:r=1,getId:i}=t,[o,s]=(0,a.useState)(r),[c,l]=(0,a.useState)(()=>new Set),u=e.length,d=Math.max(1,Math.ceil(u/n));(0,a.useEffect)(()=>{s(e=>e<1?1:e>d?d:e)},[d]);let f=o;f<1?f=1:f>d&&(f=d);let p=(0,a.useMemo)(()=>{let t=(f-1)*n,r=t+n;return e.slice(t,r)},[e,f,n]),m=(0,a.useMemo)(()=>{let t=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(e.map(e=>t(e)))},[i,e]),h=(0,a.useMemo)(()=>{let e=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(p.map(t=>e(t)))},[i,p]);return{page:f,setPage:s,pageItems:p,totalItems:u,totalPages:d,allKeys:m,selectedKeys:c,onSelectionChange:e=>{let t=e===`all`?new Set(h):new Set(e);l(e=>{let n=new Set(t);for(let t of e)h.has(t)||n.add(t);return n})},onPageChange:e=>{s(e.page)},clearSelection:()=>{l(()=>new Set)}}}var $=Object.assign(v,{Grid:V,Header:Z,Column:X,Body:H,Row:Q,Cell:Y,BulkBar:J,BulkBarSelectedCount:K,BulkBarClearButton:q,BulkBarSelectAllButton:de});$.displayName=`Table`,Z.displayName=`Table.Header`,X.displayName=`Table.Column`,H.displayName=`Table.Body`,Q.displayName=`Table.Row`,Y.displayName=`Table.Cell`,exports.Table=$,exports.TableCompound=$,exports.useTablePagination=me,exports.useTableSort=pe;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../checkbox-DjwbAH09.js`);let i=require(`class-variance-authority`),a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`@react-aria/utils`),c=require(`@react-stately/table`),l=require(`react-aria`),u=require(`@react-aria/table`),d=require(`@spark-ui/icons/ArrowDown`),f=require(`@spark-ui/icons/ArrowUp`),p=require(`@spark-ui/icons/Sort`);var m=(0,a.createContext)({isResizable:!1,tableWidth:0});function h(){return(0,a.useContext)(m)}var g=(0,a.createContext)({selectedCount:0,onClearSelection:()=>{}});function _(){return(0,a.useContext)(g)}function v({children:e,className:t,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onClearSelection:c,onSelectAll:l,allowsResizing:u=!0,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,...x}){let S=0;n===`all`?S=a??0:n instanceof Set?S=n.size:n&&(S=new Set(n).size);let C=c??(()=>r?.(new Set)),w={...x,selectedKeys:n,onSelectionChange:r,totalCount:a,hasMultiplePages:s,onSelectAll:l,selectedCount:S,onClearSelection:C,allowsResizing:u,resizeColumnAriaLabel:d,maxHeight:f,stickyHeader:p,onResizeStart:m,onResize:h,onResizeEnd:_,onKeyDownCapture:v,sortDescriptor:y,onSortChange:b,className:t};return(0,o.jsx)(g.Provider,{value:w,children:(0,o.jsx)(`div`,{className:(0,i.cx)(`gap-md flex flex-col`,t),children:e})})}v.displayName=`Table`;function y({className:e,children:t,...n}){let r=(0,a.useRef)(null),[c,l]=(0,a.useState)(0);return(0,a.useLayoutEffect)(()=>{let e=r.current;e&&l(e.clientWidth)},[]),(0,s.useResizeObserver)({ref:r,onResize:()=>{let e=r.current;e&&l(e.clientWidth)}}),(0,o.jsx)(m.Provider,{value:{isResizable:!0,tableWidth:c},children:(0,o.jsx)(`div`,{ref:r,"data-spark-component":`resizable-table-container`,className:(0,i.cx)(`relative w-full overflow-auto`,e),...n,children:t})})}y.displayName=`ResizableTableContainer`;var b=`[data-spark-component="table-cell"]`;function x(e){return!e||!(e instanceof Element)?!1:!!e.closest(`[role="combobox"],select,[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`)}function S(e){if(!e||!(e instanceof Element))return!1;let t=e.closest(`[role="combobox"],[data-spark-component="dropdown-trigger"],[data-spark-component="combobox-input"]`);return t?t.getAttribute(`aria-expanded`)===`true`:!1}var C=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function w(e){return!e||!(e instanceof Element)?null:e.closest(b)}function T(e){return e.getAttribute(`data-table-cell-kind`)===`selection`}function E(e){return Array.from(e.querySelectorAll(C)).filter(t=>!(t===e||t.hasAttribute(`disabled`)||t.getAttribute(`aria-disabled`)===`true`||t.getAttribute(`hidden`)!==null))}function D(e,t){for(let n of E(e)){let e=`data-prev-tabindex`;if(!t)n.hasAttribute(e)||n.setAttribute(e,n.getAttribute(`tabindex`)??``),n.setAttribute(`tabindex`,`-1`);else{let t=n.getAttribute(e);if(t===null)continue;n.removeAttribute(e),t===``?n.removeAttribute(`tabindex`):n.setAttribute(`tabindex`,t)}}}function O(e){let t=Array.from(e.querySelectorAll(b));for(let e of t)D(e,!1)}function ee({ref:e,gridProps:t,onKeyDownCapture:n,onFocusCapture:r}){let[i,o]=(0,a.useState)(`grid`),s=(0,a.useRef)(`grid`),c=(0,a.useRef)(null),u=(0,a.useRef)(!1),d=(0,a.useMemo)(()=>{let{onKeyDown:a,...d}=t,f=e=>{c.current=e,s.current=`interaction`,o(`interaction`),D(e,!0)};return(0,l.mergeProps)(d,{onKeyDown:e=>{if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let e=c.current,t=document.activeElement;if(e&&t instanceof Node&&e.contains(t))return}s.current===`interaction`&&(e.key===`ArrowUp`||e.key===`ArrowDown`)&&x(e.target)&&w(e.target)===c.current||a?.(e)},onKeyDownCapture:e=>{if(n?.(e),s.current===`interaction`&&e.key===`Tab`){let t=w(e.target);t&&t===c.current&&e.stopPropagation();return}if(x(e.target)&&s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current)return}if(s.current===`interaction`&&(e.key===`ArrowLeft`||e.key===`ArrowRight`||e.key===`ArrowUp`||e.key===`ArrowDown`)){let t=w(e.target);if(t&&t===c.current){e.stopPropagation();return}}if(s.current===`grid`&&e.key===`ArrowRight`){let t=w(e.target);if(t){let n=t.closest(`tr`);if(n){let r=Array.from(n.querySelectorAll(b));if(r.length>0&&r[r.length-1]===t){e.preventDefault(),e.stopPropagation(),n.focus();return}}}}if(s.current===`grid`&&e.key===`Enter`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`grid`&&e.key===`F2`){let t=w(e.target);if(!t||T(t))return;let n=E(t);if(n.length===0)return;e.preventDefault(),e.stopPropagation(),f(t),n[0]?.focus();return}if(s.current===`interaction`&&e.key===`Escape`){if(S(e.target))return;let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}if(s.current===`interaction`&&e.key===`F2`){let t=c.current;if(!t)return;e.preventDefault(),e.stopPropagation(),s.current=`grid`,o(`grid`),t.focus()}},onBlurCapture:t=>{if(s.current!==`interaction`)return;let n=e.current;if(!n)return;let r=t.relatedTarget;r instanceof Node&&n.contains(r)||(c.current=null,s.current=`grid`,o(`grid`))},onFocusCapture:t=>{r?.(t);let n=u.current;u.current=!1;let i=e.current,a=w(t.target);if(s.current===`interaction`&&c.current&&i){let e=!!(a&&a!==c.current),n=!a&&t.target instanceof Element&&i.contains(t.target)&&!c.current.contains(t.target);(e||n)&&(s.current=`grid`,o(`grid`),n&&(c.current=null))}if(!a)return;c.current=a;let l=t.target instanceof Element?t.target:null,d=a.matches(b),p=s.current===`grid`,m=!!(l&&l!==a&&a.contains(l)),h=E(a).length>0;p&&d&&m&&h&&!n&&queueMicrotask(()=>a.focus()),n&&p&&m&&d&&h&&!T(a)&&f(a)},onPointerDownCapture:e=>{let t=w(e.target);t?.matches(b)&&e.target instanceof Element&&e.target!==t&&t.contains(e.target)&&(u.current=!0)},"data-table-keyboard-mode":i})},[t,i,e,r,n]);return(0,a.useEffect)(()=>{s.current=i;let t=e.current;if(t){if(i===`grid`){O(t),c.current?.focus?.();return}O(t),c.current&&D(c.current,!0)}},[i,e]),{gridProps:d,keyboardMode:i}}var k=(0,i.cva)([`h-sz-64 min-w-sz-64`,`relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container`,`pl-lg pr-lg py-sm text-left outline-none box-border`,`cursor-default`,`data-focus-visible:u-outline data-focus-visible:-outline-offset-2`],{variants:{checkbox:{true:[`w-sz-64 min-w-sz-64 max-w-sz-64`,`px-0 align-middle`]},resizable:{true:[`pr-xl`]}},defaultVariants:{checkbox:!1,resizable:!1}}),te=(0,i.cva)([`flex flex-1 justify-between items-center gap-md`,`font-inherit text-left text-inherit`,`whitespace-nowrap text-ellipsis`,`border-transparent`,`data-focus-visible:u-outline data-focus-visible:outline-offset-2`],{variants:{},defaultVariants:{}});(0,i.cva)([`empty:italic empty:text-center empty:text-body-2 empty:py-lg`],{variants:{},defaultVariants:{}});var ne=(0,i.cva)([`p-lg outline-none box-border default:overflow-hidden`,`border-b-sm border-outline [tr:last-child>&]:border-b-0`,`[-webkit-tap-highlight-color:transparent]`,`data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`],{variants:{checkbox:{true:[`w-sz-64 py-sm px-0 align-middle`]}},defaultVariants:{checkbox:!1}}),re=(0,i.cva)([`pointer-events-none`,`[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle`],{variants:{},defaultVariants:{}}),ie=`button, [role="button"], [role="switch"], [role="checkbox"], [role="option"], input:not([type="hidden"]), select, textarea, [href], [data-spark-component="dropdown-trigger"], [data-spark-component="icon-button"], [data-spark-component="switch"], [data-spark-component="switch-input"], [data-spark-component="combobox-input"]`,ae=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]`;function oe(e){if(!e||!(e instanceof Element))return!1;let t=e;return t.matches(ie)||t.closest(ie)!==null}function se(e){return e?e instanceof Element?e:e instanceof Text?e.parentElement:null:null}function ce(e){for(let t of e.querySelectorAll(ae))if(t!==e&&!t.hasAttribute(`disabled`)&&t.getAttribute(`aria-disabled`)!==`true`&&t.getAttribute(`hidden`)===null)return!0;return!1}function le(e){let t=se(e);if(!t)return!1;if(oe(t))return!0;let n=t.closest(`[data-spark-component="table-cell"]`);return!n||n.getAttribute(`data-table-cell-kind`)===`selection`?!1:ce(n)}var A=(0,a.createContext)(`grid`);function j({checkboxProps:e,className:t,suppressFocusWalker:n}){let{isSelected:i,isIndeterminate:a,isDisabled:s,onChange:c,...l}=e,u=a===!0?`indeterminate`:!!i;return(0,o.jsx)(`span`,{...n?{"data-react-aria-prevent-focus":!0}:void 0,onClick:e=>e.stopPropagation(),onPointerDown:e=>e.stopPropagation(),className:t??`flex h-full min-h-full items-center justify-center`,children:(0,o.jsx)(r.n,{checked:u,disabled:s,onCheckedChange:c,...l})})}j.displayName=`Table.SelectionCheckbox`;function M({cell:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{gridCellProps:i}=(0,l.useTableCell)({node:e},t,r),{isFocusVisible:s,focusProps:c}=(0,l.useFocusRing)(),d=(0,a.useContext)(A),f=(0,a.useCallback)(e=>{d===`interaction`&&(e.key!==` `&&e.key!==`Enter`||e.stopPropagation())},[d]),{onKeyDownCapture:p,...m}=i,h=(0,a.useCallback)(e=>{[`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`].includes(e.key)||p?.(e)},[p]),g=(0,u.useTableSelectionCheckbox)({key:e.parentKey??e.key},t),_=t.collection.columns[e.index??0]?.key??null,v=_?n?.columnWidths?.get?.(_):void 0;return e.props?.isSelectionCell?(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,"data-table-cell-kind":`selection`,className:ne({checkbox:!0}),"data-focus-visible":s||void 0,children:(0,o.jsx)(j,{suppressFocusWalker:d===`grid`,checkboxProps:g.checkboxProps})}):(0,o.jsx)(`td`,{...(0,l.mergeProps)(m,{onKeyDownCapture:h},c,{onKeyDown:f}),ref:r,"data-spark-component":`table-cell`,className:ne(),"data-focus-visible":s||void 0,style:v?{width:v}:void 0,children:e.rendered})}M.displayName=`Table.BodyCellRenderer`;function N(e){if(e)return t=>{le((0,s.getEventTarget)(t.nativeEvent))||e(t)}}function P({item:e,state:t,resizeState:n}){let r=(0,a.useRef)(null),{rowProps:s,isSelected:c}=(0,l.useTableRow)({node:e},t,r),{isFocusVisible:u,focusProps:d}=(0,l.useFocusRing)(),{onClick:f,onPointerDown:p,onMouseDown:m,onPointerUp:h,onPointerCancel:g,..._}=s,v=(0,i.cx)(`outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed`,_.className,c&&`bg-support-container text-on-support-container`);return(0,o.jsx)(`tr`,{...(0,l.mergeProps)(_,d),onPointerDown:N(p),onMouseDown:N(m),onPointerUp:N(h),onPointerCancel:N(g),onClick:N(f),ref:r,"data-spark-component":`table-row`,"data-selected":c||void 0,"data-focus-visible":u||void 0,className:v,tabIndex:-1,children:[...e.childNodes].map(e=>(0,o.jsx)(M,{cell:e,state:t,resizeState:n},e.key))})}P.displayName=`Table.BodyRowRenderer`;function F({column:e,ariaLabel:t,resizeState:n,resizeCallbacks:r}){let s=(0,a.useRef)(null),{resizerProps:c,inputProps:l,isResizing:d}=(0,u.useTableColumnResize)({column:e,"aria-label":t??`Resize column`,onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd},n,s);return(0,o.jsx)(`div`,{role:`presentation`,className:(0,i.cx)(`cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center`,`after:block after:h-full after:w-[2px] after:bg-outline after:transition-all after:duration-75`,`has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2`,d&&`after:bg-outline-high after:scale-120`),"data-resizable-direction":`both`,...c,children:(0,o.jsx)(`input`,{ref:s,disabled:!d,...l})})}F.displayName=`Table.ColumnResizer`;function I({state:e}){let{checkboxProps:t}=(0,u.useTableSelectAllCheckbox)(e),{collection:n,selectionManager:r}=e,i=r.selectedKeys,a=n,s=a.body,c=s==null?new Set(n.getKeys()):new Set([...a.getChildren(s.key)].map(e=>e.key)),l=i===`all`?c:i,d=[...c].filter(e=>l.has(e)).length,f=c.size,p=f>0&&d===f,m=d>0&&d<f,{isSelected:h,isIndeterminate:g,onChange:_,...v}=t,y=e=>{(e.key===` `||e.key===`Enter`)&&e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),t.isDisabled||_?.(!p))};return(0,o.jsx)(j,{checkboxProps:{...v,isSelected:p,isIndeterminate:m,onChange:_,onKeyDown:y}})}I.displayName=`Table.HeaderSelectionCheckbox`;var L=(0,i.cx)(`sticky top-0 z-sticky`);function R({column:e,state:n,resizeState:r,stickyHeader:s,resizeCallbacks:c,isLastColumnInRow:u=!1}){let m=(0,a.useRef)(null),{resizeColumnAriaLabel:h}=_(),{columnHeaderProps:g}=(0,l.useTableColumnHeader)({node:e},n,m),{isFocusVisible:v,focusProps:y}=(0,l.useFocusRing)(),b=e.props?.allowsResizing!==!1&&!u,x=r?.columnWidths?.get?.(e.key),S=!!(r&&b);if(e.props?.isSelectionCell)return(0,o.jsx)(`th`,{...g,ref:m,role:`columnheader`,className:(0,i.cx)(k({checkbox:!0}),s&&L),"data-spark-component":`table-column`,"data-table-selection-columnheader":!0,"data-focus-visible":v||void 0,children:(0,o.jsx)(I,{state:n})});let C=!!e.props?.allowsSorting,w=n.sortDescriptor?.column===e.key,T=n.sortDescriptor?.direction??`ascending`,E=w?T===`descending`?(0,o.jsx)(d.ArrowDown,{}):(0,o.jsx)(f.ArrowUp,{}):(0,o.jsx)(p.Sort,{}),D=t=>{C&&(t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),t.stopPropagation(),n.sort?.(e.key)))};return(0,o.jsxs)(`th`,{...(0,l.mergeProps)(g,y),ref:m,role:`columnheader`,className:(0,i.cx)(k({resizable:S}),s&&L),style:x?{width:x}:void 0,"data-spark-component":`table-column`,"data-focus-visible":v||void 0,onKeyDown:D,children:[(0,o.jsxs)(`div`,{className:te(),children:[(0,o.jsx)(`button`,{type:`button`,className:(0,i.cx)(`gap-md flex min-w-0 flex-1 items-center text-left`,`focus-visible:u-outline outline-none`,`bg-transparent p-0 border-0`),onKeyDown:D,children:(0,o.jsx)(`span`,{className:`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap`,children:e.rendered})}),C?(0,o.jsx)(`span`,{"aria-hidden":`true`,className:(0,i.cx)(`shrink-0 opacity-dim-2 group-hover/column:opacity-100`,w&&`opacity-100`),children:(0,o.jsx)(t.t,{size:`sm`,children:E})}):null]}),r&&b?(0,o.jsx)(F,{column:e,ariaLabel:typeof h==`function`?h(e):h,resizeState:r,resizeCallbacks:c}):null]})}R.displayName=`Table.ColumnHeader`;function z({item:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i}){let s=(0,a.useRef)(null),{rowProps:c}=(0,l.useTableHeaderRow)({node:e},t,s),u=[...e.childNodes];return(0,o.jsx)(`tr`,{...c,ref:s,children:u.map((e,a)=>(0,o.jsx)(R,{column:e,state:t,resizeState:n,stickyHeader:r,resizeCallbacks:i,isLastColumnInRow:a===u.length-1},e.key))})}z.displayName=`Table.HeaderRowRenderer`;function B({className:e,children:t,stickyHeader:n,...r}){let u=!!n,d=(0,a.useRef)(null),f=h(),p=r.selectionMode===`multiple`,m=(0,c.useTableState)({...r,showSelectionCheckboxes:r.selectionMode===`multiple`,children:t}),g=(0,c.useTableColumnResizeState)({tableWidth:f.tableWidth},m),_=f.isResizable&&r.allowsResizing!==!1?g:null,{gridProps:v}=(0,l.useTable)({...r},m,d),y=m.collection.headerRows,b=[...m.collection.body.childNodes],x=m.collection.body.props?.renderEmptyState,S=m.collection.columns.length||1,C=b.length>0||!!x,{rowGroupProps:w}=(0,l.useTableRowGroup)(),{rowGroupProps:T}=(0,l.useTableRowGroup)(),{gridProps:E,keyboardMode:D}=ee({ref:d,gridProps:v,onKeyDownCapture:r.onKeyDownCapture,onFocusCapture:r.onFocusCapture});return(0,o.jsx)(A.Provider,{value:D,children:(0,o.jsxs)(`table`,{...(0,l.mergeProps)(E,(0,s.filterDOMProps)(r,{global:!0})),ref:d,"data-spark-component":`table`,className:(0,i.cx)(`default:w-full`,p?`table-fixed`:void 0,`border-separate border-spacing-y-0`,`bg-surface`,`outline-none`,`text-body-1`,`forced-color-adjust-none`,`data-focus-visible:u-outline-inset`,`has-[>[data-empty]]:h-full`,e),children:[(0,o.jsx)(`thead`,{...w,"data-spark-component":`table-header`,children:y.map(e=>(0,o.jsx)(z,{item:e,state:m,resizeState:_,stickyHeader:u,resizeCallbacks:{onResizeStart:r.onResizeStart,onResize:r.onResize,onResizeEnd:r.onResizeEnd}},e.key))}),(0,o.jsxs)(`tbody`,{...T,"data-spark-component":`table-body`,children:[C?(0,o.jsx)(`tr`,{"aria-hidden":`true`,className:re(),role:`presentation`,"data-spark-component":`table-body-spacer`,children:(0,o.jsx)(`td`,{colSpan:S,role:`presentation`})}):null,b.length===0&&x?(0,o.jsx)(`tr`,{"data-empty":!0,children:(0,o.jsx)(`td`,{colSpan:S,children:x({isEmpty:!0})})}):null,b.map(e=>(0,o.jsx)(P,{item:e,state:m,resizeState:_},e.key))]})]})})}B.displayName=`Table.Grid.Inner`;function ue(e){return typeof e==`number`?`${e}px`:e}function V({"aria-label":e,"aria-labelledby":t,className:n,children:r}){let{allowsResizing:i=!0,maxHeight:a,stickyHeader:s,onResizeStart:c,onResize:l,onResizeEnd:u,onKeyDownCapture:d,sortDescriptor:f,onSortChange:p,className:m,...h}=_(),g=a==null?void 0:{maxHeight:ue(a)},v=n??m,b={...h,...e!=null&&{"aria-label":e},...t!=null&&{"aria-labelledby":t},sortDescriptor:f,onSortChange:p,onKeyDownCapture:d,className:v,stickyHeader:s},x=B;return i?(0,o.jsx)(y,{className:v,style:g,onResizeStart:c,onResize:l,onResizeEnd:u,children:(0,o.jsx)(x,{...b,children:r})}):(0,o.jsx)(`div`,{className:`relative w-full overflow-auto`,style:g,children:(0,o.jsx)(x,{...b,children:r})})}V.displayName=`Table.Grid`;function H(e){return(0,o.jsx)(c.TableBody,{...e})}H.displayName=`Table.Body`,H.getCollectionNode=c.TableBody.getCollectionNode;var U=(0,a.createContext)(null);function W(){let e=(0,a.useContext)(U);if(!e)throw Error(`Table.BulkBar subcomponents must be used within Table.BulkBar`);return e}function G({children:e,className:t,rootProps:n,...r}){let{selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u}=_(),d={selectedCount:a,totalCount:s,onClearSelection:c,onSelectAll:l,hasMultiplePages:u};return(0,o.jsx)(U.Provider,{value:d,children:(0,o.jsx)(`div`,{role:`toolbar`,"aria-label":r[`aria-label`]??`Table bulk actions`,"data-spark-component":`table-bulk-bar`,className:(0,i.cx)(`gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between`,`rounded-lg`,`bg-support-container text-on-support-container p-lg`,t),...n,children:e})})}function K({children:e}){return W(),(0,o.jsx)(`span`,{className:`text-body-1-highlight`,children:e})}function q({className:e,children:t,...r}){let{selectedCount:a,onClearSelection:s,hasMultiplePages:c}=W();return c?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:a===0,onClick:s,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}function de({className:e,children:t,...r}){let{selectedCount:a,totalCount:s,onSelectAll:c,hasMultiplePages:l}=W();return l?(0,o.jsx)(n.t,{size:`sm`,design:`ghost`,intent:`support`,underline:!0,ariaDisabled:s==null||c==null||a>=s,onClick:c,className:(0,i.cx)(`text-body-2`,e),...r,children:t}):null}G.displayName=`Table.BulkBar`;var J=G;J.displayName=`Table.BulkBar`,K.displayName=`Table.BulkBarSelectedCount`,q.displayName=`Table.BulkBarClearButton`,de.displayName=`Table.BulkBarSelectAllButton`;function Y(e){return(0,o.jsx)(c.Cell,{...e})}Y.displayName=`Table.Cell`,Y.getCollectionNode=c.Cell.getCollectionNode;function X({label:e,allowsResizing:t=!0,...n}){return null}X.displayName=`Table.Column`,X.getCollectionNode=function*(e,t){let n=e.title??e.label??e.children??null,r=e.textValue||(typeof n==`string`?n:``)||e[`aria-label`],i=yield{type:`column`,key:e.id??null,hasChildNodes:!!e.childColumns||!!e.title&&a.default.Children.count(e.children)>0,rendered:n,textValue:r,props:{...e,title:e.title??e.label,allowsResizing:e.allowsResizing},*childNodes(){if(e.childColumns)for(let t of e.childColumns)yield{type:`column`,value:t};else if(e.title){let t=[];a.default.Children.forEach(e.children,e=>{t.push({type:`column`,element:e})}),yield*t}},shouldInvalidate(e){return o(e),!1}},o=e=>{for(let t of i)t.hasChildNodes||e.columns.push(t)};o(t)};function Z(e){return(0,o.jsx)(c.TableHeader,{...e})}Z.displayName=`Table.Header`,Z.getCollectionNode=c.TableHeader.getCollectionNode;function Q(e){return null}Q.displayName=`Table.Row`,Q.getCollectionNode=function*(e,t){let{children:n,textValue:r,UNSTABLE_childItems:i}=e;yield{type:`item`,key:e.id??null,props:e,textValue:r,"aria-label":e[`aria-label`],hasChildNodes:!0,*childNodes(){if(t.showDragButtons&&(yield{type:`cell`,key:`header-drag`,props:{isDragButtonCell:!0}}),t.showSelectionCheckboxes&&t.selectionMode!==`none`&&(yield{type:`cell`,key:`header`,props:{isSelectionCell:!0}}),typeof n==`function`){for(let e of t.columns)yield{type:`cell`,element:n(e.key),key:e.key};if(i)for(let e of i)yield{type:`item`,value:e}}else{let e=[],r=[],i=0;if(a.default.Children.forEach(n,n=>{if(n)if(n.type===Q){if(e.length<t.columns.length)throw Error(`All of a Row's child Cells must be positioned before any child Rows.`);r.push({type:`item`,element:n})}else e.push({type:`cell`,element:n}),i+=n.props?.colSpan??1}),i!==t.columns.length)throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);yield*e,yield*r}},shouldInvalidate(e){return e.columns.length!==t.columns.length||e.columns.some((e,n)=>e.key!==t.columns[n].key)||e.showSelectionCheckboxes!==t.showSelectionCheckboxes||e.showDragButtons!==t.showDragButtons||e.selectionMode!==t.selectionMode}}};function fe(e,t,n,r){let i=e[n],a=t[n];if(i===a)return 0;let o;return o=typeof i==`number`&&typeof a==`number`?i<a?-1:1:String(i).localeCompare(String(a)),r===`descending`?-o:o}function pe(e,t={}){let{initialSort:n,compare:r}=t,[i,o]=(0,a.useState)(()=>n?{column:n.column,direction:n.direction}:{column:`id`,direction:`ascending`});return{sortDescriptor:i,onSortChange:o,setSortDescriptor:o,sortedItems:(0,a.useMemo)(()=>{let t=i.column;if(!t)return[...e];let n=r??fe,a=i.direction??`ascending`;return[...e].sort((e,r)=>n(e,r,t,a))},[e,i.column,i.direction,r])}}function me(e,t){let{pageSize:n,initialPage:r=1,getId:i}=t,[o,s]=(0,a.useState)(r),[c,l]=(0,a.useState)(()=>new Set),u=e.length,d=Math.max(1,Math.ceil(u/n));(0,a.useEffect)(()=>{s(e=>e<1?1:e>d?d:e)},[d]);let f=o;f<1?f=1:f>d&&(f=d);let p=(0,a.useMemo)(()=>{let t=(f-1)*n,r=t+n;return e.slice(t,r)},[e,f,n]),m=(0,a.useMemo)(()=>{let t=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(e.map(e=>t(e)))},[i,e]),h=(0,a.useMemo)(()=>{let e=i??(e=>{let t=e.id;if(t==null)throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");return t});return new Set(p.map(t=>e(t)))},[i,p]);return{page:f,setPage:s,pageItems:p,totalItems:u,totalPages:d,allKeys:m,selectedKeys:c,onSelectionChange:e=>{let t=e===`all`?new Set(h):new Set(e);l(e=>{let n=new Set(t);for(let t of e)h.has(t)||n.add(t);return n})},onPageChange:e=>{s(e.page)},clearSelection:()=>{l(()=>new Set)}}}var $=Object.assign(v,{Grid:V,Header:Z,Column:X,Body:H,Row:Q,Cell:Y,BulkBar:J,BulkBarSelectedCount:K,BulkBarClearButton:q,BulkBarSelectAllButton:de});$.displayName=`Table`,Z.displayName=`Table.Header`,X.displayName=`Table.Column`,H.displayName=`Table.Body`,Q.displayName=`Table.Row`,Y.displayName=`Table.Cell`,exports.Table=$,exports.TableCompound=$,exports.useTablePagination=me,exports.useTableSort=pe;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|