@skdx/react 0.26.0 → 0.28.0

package/dist/slider/Slider.cjs

@@ -1 +1 @@
-"use strict";var pe=Object.create;var v=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var Se=Object.getOwnPropertyNames;var Re=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var Pe=(t,r)=>{for(var o in r)v(t,o,{get:r[o],enumerable:!0})},Y=(t,r,o,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Se(r))!be.call(t,a)&&a!==o&&v(t,a,{get:()=>r[a],enumerable:!(e=fe(r,a))||e.enumerable});return t};var N=(t,r,o)=>(o=t!=null?pe(Re(t)):{},Y(r||!t||!t.__esModule?v(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Y(v({},"__esModule",{value:!0}),t);var ge={};Pe(ge,{Slider:()=>Z,SliderProvider:()=>W,SliderRange:()=>B,SliderThumb:()=>F,SliderTrack:()=>z,useSliderContext:()=>x});module.exports=he(ge);var c=N(require("react"),1),q=require("../utils/clamp.cjs"),O=require("../utils/composeRefs.cjs"),_=require("../utils/createContext.cjs"),G=require("../utils/formControl.cjs"),J=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs"),K=require("react/jsx-runtime"),[W,x]=(0,_.createSafeContext)("Slider");function xe(t,r,o){let e=Math.round((t-r)/o),a=r+e*o,S=(String(o).split(".")[1]??"").length;return Number(a.toFixed(S))}var Z=c.forwardRef((t,r)=>{let{value:o,defaultValue:e=[0],onValueChange:a,onValueCommit:S,min:i=0,max:d=100,step:R=1,disabled:l=!1,orientation:u="horizontal",name:H,...b}=t,[p=[],m]=(0,Q.useControllableState)({prop:o,defaultProp:e,onChange:a}),P=c.useRef(p);P.current=p;let g=c.useRef(null),[L,k]=c.useState(null),y=(0,O.useComposedRefs)(r,g,k);(0,G.useFormReset)(g,()=>m(e));let A=c.useRef(0),$=c.useCallback((n,s)=>{let M=xe(s,i,R);m((f=[])=>{let D=n>0?f[n-1]??i:i,U=n<f.length-1?f[n+1]??d:d,V=(0,q.clamp)(M,Math.max(D,i),Math.min(U,d));if(f[n]===V)return f;let w=[...f];return w[n]=V,w})},[i,d,R,m]),X=c.useCallback(n=>{let s=g.current?.getBoundingClientRect();if(!s)return null;let M=u==="horizontal"?(n.clientX-s.left)/s.width:1-(n.clientY-s.top)/s.height;return i+M*(d-i)},[u,i,d]),me=n=>{if(l)return;let s=X(n);if(s==null)return;let M=P.current,f=0,D=1/0;M.forEach((U,V)=>{let w=Math.abs(U-s);w<D&&(D=w,f=V)}),A.current=f,n.target.setPointerCapture?.(n.pointerId),$(f,s)},ue=n=>{if(l||!n.target.hasPointerCapture?.(n.pointerId))return;let s=X(n);s!=null&&$(A.current,s)},ce=n=>{n.target.hasPointerCapture?.(n.pointerId)&&(n.target.releasePointerCapture(n.pointerId),S?.(P.current))};return(0,K.jsx)(W,{values:p,min:i,max:d,disabled:l,orientation:u,thumbIndexRef:A,rootNode:L,updateValue:$,step:R,name:H,children:(0,K.jsx)(E.Primitive.span,{"data-orientation":u,"data-disabled":l?"":void 0,...b,...(0,J.skdxPart)("slider","root",b.className),ref:y,onPointerDown:(0,E.composeEventHandlers)(b.onPointerDown,me),onPointerMove:(0,E.composeEventHandlers)(b.onPointerMove,ue),onPointerUp:(0,E.composeEventHandlers)(b.onPointerUp,ce),style:{touchAction:"none",...b.style}})})});Z.displayName="Slider";var j=N(require("react"),1),ee=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),z=j.forwardRef((t,r)=>{let o=x("SliderTrack");return(0,re.jsx)(te.Primitive.span,{"data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,...t,...(0,ee.skdxPart)("slider","track",t.className),ref:r})});z.displayName="SliderTrack";var oe=N(require("react"),1),ne=require("../utils/part.cjs"),ae=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),B=oe.forwardRef((t,r)=>{let o=x("SliderRange"),{values:e,min:a,max:S,orientation:i}=o,d=e.map(u=>(u-a)/(S-a)*100),R=e.length>1?Math.min(...d):0,l=100-Math.max(...d,0);return(0,ie.jsx)(ae.Primitive.span,{"data-orientation":i,"data-disabled":o.disabled?"":void 0,...t,...(0,ne.skdxPart)("slider","range",t.className),ref:r,style:{...i==="horizontal"?{left:`${R}%`,right:`${l}%`}:{bottom:`${R}%`,top:`${l}%`},...t.style}})});B.displayName="SliderRange";var h=N(require("react"),1),le=require("../utils/composeRefs.cjs"),I=require("../utils/direction.cjs"),se=require("../utils/hiddenInput.cjs"),de=require("../utils/part.cjs"),C=require("../utils/primitive.cjs");var T=require("react/jsx-runtime"),Te='[role="slider"]',F=h.forwardRef(({index:t,...r},o)=>{let e=x("SliderThumb"),a=(0,I.useDirection)(),S=h.useRef(null),i=(0,le.useComposedRefs)(o,S),[d,R]=h.useState(0);h.useLayoutEffect(()=>{if(t!==void 0||!e.rootNode)return;let m=Array.from(e.rootNode.querySelectorAll(Te)).findIndex(P=>P===S.current);m!==-1&&m!==d&&R(m)});let l=t??d,u=e.values[l]??e.min,H=(u-e.min)/(e.max-e.min)*100,b=p=>{if(e.disabled)return;let{step:m,min:P,max:g}=e,L=Math.max((g-P)/10,m),k={ArrowRight:m,ArrowUp:m,ArrowLeft:-m,ArrowDown:-m,PageUp:L,PageDown:-L},y=(0,I.directionalKey)(p.key,p.currentTarget,a);y in k?(p.preventDefault(),e.updateValue(l,u+k[y])):y==="Home"?(p.preventDefault(),e.updateValue(l,P)):y==="End"&&(p.preventDefault(),e.updateValue(l,g))};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(C.Primitive.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":u,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,tabIndex:e.disabled?void 0:0,...r,...(0,de.skdxPart)("slider","thumb",r.className),ref:i,onKeyDown:(0,C.composeEventHandlers)(r.onKeyDown,b),onPointerDown:(0,C.composeEventHandlers)(r.onPointerDown,()=>{e.thumbIndexRef.current=l}),style:{position:"absolute",...e.orientation==="horizontal"?{left:`${H}%`,transform:"translateX(-50%)"}:{bottom:`${H}%`,transform:"translateY(50%)"},...r.style}}),e.name&&(0,T.jsx)(se.HiddenInput,{type:"number",name:e.values.length>1?`${e.name}[${l}]`:e.name,value:u,disabled:e.disabled})]})});F.displayName="SliderThumb";0&&(module.exports={Slider,SliderProvider,SliderRange,SliderThumb,SliderTrack,useSliderContext});
+"use strict";var Fe=Object.create;var $=Object.defineProperty;var Xe=Object.getOwnPropertyDescriptor;var Ye=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,qe=Object.prototype.hasOwnProperty;var Oe=(t,n)=>{for(var r in n)$(t,r,{get:n[r],enumerable:!0})},se=(t,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of Ye(n))!qe.call(t,e)&&e!==r&&$(t,e,{get:()=>n[e],enumerable:!(o=Xe(n,e))||o.enumerable});return t};var v=(t,n,r)=>(r=t!=null?Fe(_e(t)):{},se(n||!t||!t.__esModule?$(r,"default",{value:t,enumerable:!0}):r,t)),Ge=t=>se($({},"__esModule",{value:!0}),t);var Ze={};Oe(Ze,{Slider:()=>j,SliderMark:()=>z,SliderProvider:()=>Ie,SliderRange:()=>B,SliderThumb:()=>K,SliderTrack:()=>U,useSliderContext:()=>p});module.exports=Ge(Ze);var l=v(require("react"),1),ve=require("../utils/clamp.cjs"),Ee=require("../utils/composeRefs.cjs"),De=require("../utils/createContext.cjs"),X=require("../utils/direction.cjs"),Le=require("../utils/formControl.cjs"),Ve=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),He=require("../utils/useControllableState.cjs");var Te=v(require("react"),1),we=require("../utils/is-dev-mode.cjs");var de=v(require("react"),1),me=require("../utils/part.cjs"),ue=require("../utils/primitive.cjs");var ce=require("react/jsx-runtime"),z=de.forwardRef(({value:t,...n},r)=>{let o=p("SliderMark"),e=(t-o.min)/(o.max-o.min)*100;return(0,ce.jsx)(ue.Primitive.span,{"aria-hidden":"true","data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,"data-value":t,...n,...(0,me.skdxPart)("slider","mark",n.className),ref:r,style:{position:"absolute",...o.orientation==="horizontal"?{insetInlineStart:`${e}%`}:{bottom:`${e}%`},...n.style}})});z.displayName="SliderMark";var pe=v(require("react"),1),fe=require("../utils/part.cjs"),Se=require("../utils/primitive.cjs");var be=require("react/jsx-runtime"),B=pe.forwardRef((t,n)=>{let r=p("SliderRange"),{values:o,min:e,max:u,orientation:s}=r,m=o.map(c=>(c-e)/(u-e)*100),f=o.length>1?Math.min(...m):0,d=100-Math.max(...m,0);return(0,be.jsx)(Se.Primitive.span,{"data-orientation":s,"data-disabled":r.disabled?"":void 0,...t,...(0,fe.skdxPart)("slider","range",t.className),ref:n,style:{...s==="horizontal"?{insetInlineStart:`${f}%`,insetInlineEnd:`${d}%`}:{bottom:`${f}%`,top:`${d}%`},...t.style}})});B.displayName="SliderRange";var y=v(require("react"),1),he=require("../utils/composeRefs.cjs"),ge=require("../utils/direction.cjs"),Re=require("../utils/hiddenInput.cjs"),ye=require("../utils/part.cjs"),L=require("../utils/primitive.cjs");var x=require("react/jsx-runtime"),Je='[role="slider"]',K=y.forwardRef(({index:t,valueText:n,...r},o)=>{let e=p("SliderThumb"),u=y.useRef(null),s=(0,he.useComposedRefs)(o,u),[m,f]=y.useState(0);y.useLayoutEffect(()=>{if(t!==void 0||!e.rootNode)return;let P=Array.from(e.rootNode.querySelectorAll(Je)).findIndex(E=>E===u.current);P!==-1&&P!==m&&f(P)});let d=t??m,c=e.values[d]??e.min,V=(c-e.min)/(e.max-e.min)*100,H=h=>{if(e.disabled)return;let{step:P,min:E,max:Y,largeStep:D}=e,k=h.shiftKey?D:P,S={ArrowRight:k,ArrowUp:k,ArrowLeft:-k,ArrowDown:-k,PageUp:D,PageDown:-D},T=(0,ge.directionalKey)(h.key,h.currentTarget,e.direction);T in S?(h.preventDefault(),e.updateValue(d,c+S[T],"keyboard")):T==="Home"?(h.preventDefault(),e.updateValue(d,E,"keyboard")):T==="End"&&(h.preventDefault(),e.updateValue(d,Y,"keyboard"))};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(L.Primitive.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":c,"aria-valuetext":n,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,"data-dragging":e.draggingIndex===d?"":void 0,tabIndex:e.disabled?void 0:0,...r,...(0,ye.skdxPart)("slider","thumb",r.className),ref:s,onKeyDown:(0,L.composeEventHandlers)(r.onKeyDown,H),onPointerDown:(0,L.composeEventHandlers)(r.onPointerDown,()=>{e.thumbIndexRef.current=d}),style:{position:"absolute",...e.orientation==="horizontal"?{insetInlineStart:`${V}%`,transform:`translateX(${e.direction==="rtl"?"":"-"}50%)`}:{bottom:`${V}%`,transform:"translateY(50%)"},...r.style}}),e.name&&(0,x.jsx)(Re.HiddenInput,{type:"number",name:e.values.length>1?`${e.name}[${d}]`:e.name,value:c,disabled:e.disabled,form:e.form})]})});K.displayName="SliderThumb";var Pe=v(require("react"),1),xe=require("../utils/part.cjs"),Me=require("../utils/primitive.cjs");var ke=require("react/jsx-runtime"),U=Pe.forwardRef((t,n)=>{let r=p("SliderTrack");return(0,ke.jsx)(Me.Primitive.span,{"data-orientation":r.orientation,"data-disabled":r.disabled?"":void 0,...t,...(0,xe.skdxPart)("slider","track",t.className),ref:n})});U.displayName="SliderTrack";var b=require("react/jsx-runtime"),Ce=({marks:t,showTooltip:n})=>{let{values:r,thumbLabels:o}=p("SliderAnatomy");return Te.useEffect(()=>{(0,we.isDevMode)()&&(r.length<=1||o&&o.length>=r.length||console.warn(`[skandadx] Slider derives ${r.length} thumbs without aria-labels from thumbLabels and all will announce identically, violating accessibility.namingRequirement. Pass thumbLabels with one name per thumb to distinguish them (for example, ["Minimum price", "Maximum price"]).`))},[r.length,o]),(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(U,{children:(0,b.jsx)(B,{})}),r.map((e,u)=>(0,b.jsx)(K,{index:u,"aria-label":o?.[u],children:n?(0,b.jsx)("span",{"aria-hidden":"true",className:"skdx-slider__tooltip","data-part":"tooltip",children:e}):null},u)),t?.map(e=>(0,b.jsx)(z,{value:e.value,children:e.label},e.value))]})};var F=require("react/jsx-runtime"),[Ie,p]=(0,De.createSafeContext)("Slider");function Qe(t,n){return t.length===n.length&&t.every((r,o)=>r===n[o])}function We(t,n,r){let o=Math.round((t-n)/r),e=n+o*r,u=(String(r).split(".")[1]??"").length;return Number(e.toFixed(u))}var j=l.forwardRef((t,n)=>{let{value:r,defaultValue:o=[0],onValueChange:e,onValueCommit:u,min:s=0,max:m=100,step:f=1,disabled:d=!1,orientation:c="horizontal",largeStep:V,minStepsBetweenValues:H=0,name:h,form:P,marks:E,showTooltip:Y=!1,thumbLabels:D,children:k,...S}=t,T=V??Math.max((m-s)/10,f),ee=l.useRef("programmatic"),te=l.useRef(null),[_=[],re]=(0,He.useControllableState)({prop:r,defaultProp:o,onChange:a=>e?.({value:a,previousValue:te.current,reason:ee.current})}),w=l.useRef(_);w.current=_;let q=l.useCallback((a,i)=>{ee.current=i,te.current=w.current,re(a)},[re]),O=l.useRef(null),[ne,Ne]=l.useState(null),Ae=(0,Ee.useComposedRefs)(n,O,Ne);(0,Le.useFormReset)(O,()=>q(o,"programmatic"));let G=l.useRef(0),[oe,J]=l.useState(null),I=l.useRef(null),$e=(0,X.useDirection)(),Q=(0,X.resolveDirection)(ne,$e),W=l.useCallback((a,i,C)=>{let R=We(i,s,f);q((g=[])=>{let N=H*f,Z=a>0?(g[a-1]??s)+N:s,A=a<g.length-1?(g[a+1]??m)-N:m,ie=(0,ve.clamp)(R,Math.max(Z,s),Math.min(A,m));if(g[a]===ie)return g;let le=[...g];return le[a]=ie,le},C)},[s,m,f,H,q]),ae=l.useCallback(a=>{let i=O.current?.getBoundingClientRect();if(!i)return null;let C=c==="horizontal"?(a.clientX-i.left)/i.width:1-(a.clientY-i.top)/i.height,R=c==="horizontal"&&Q==="rtl"?1-C:C;return s+R*(m-s)},[c,Q,s,m]),ze=a=>{if(d)return;let i=ae(a);if(i==null)return;let C=w.current,R=0,g=1/0;C.forEach((N,Z)=>{let A=Math.abs(N-i);A<g&&(g=A,R=Z)}),G.current=R,I.current=w.current,J(R),a.target.setPointerCapture?.(a.pointerId),W(R,i,"pointer")},Be=a=>{if(d||!a.target.hasPointerCapture?.(a.pointerId))return;let i=ae(a);i!=null&&W(G.current,i,"pointer")},Ke=()=>{I.current=null,J(null)},Ue=a=>{if(a.target.hasPointerCapture?.(a.pointerId)){a.target.releasePointerCapture(a.pointerId);let i=I.current;I.current=null,J(null),i&&!Qe(i,w.current)&&u?.(w.current)}};return(0,F.jsx)(Ie,{values:_,min:s,max:m,disabled:d,orientation:c,direction:Q,thumbIndexRef:G,draggingIndex:oe,rootNode:ne,updateValue:W,step:f,largeStep:T,name:h,form:P,thumbLabels:D,children:(0,F.jsx)(M.Primitive.span,{"data-orientation":c,"data-disabled":d?"":void 0,"data-dragging":oe!==null?"":void 0,...S,...(0,Ve.skdxPart)("slider","root",S.className),ref:Ae,onPointerDown:(0,M.composeEventHandlers)(S.onPointerDown,ze),onPointerMove:(0,M.composeEventHandlers)(S.onPointerMove,Be),onPointerUp:(0,M.composeEventHandlers)(S.onPointerUp,Ue),onPointerCancel:(0,M.composeEventHandlers)(S.onPointerCancel,Ke),style:{touchAction:"none",...S.style},children:k??(0,F.jsx)(Ce,{marks:E,showTooltip:Y})})})});j.displayName="Slider";0&&(module.exports={Slider,SliderMark,SliderProvider,SliderRange,SliderThumb,SliderTrack,useSliderContext});

package/dist/slider/Slider.d.cts

@@ -7,22 +7,13 @@ export declare const SliderProvider: {
     displayName: string;
 }, useSliderContext: (consumerName: string) => SliderContextValue;
 /**
- * Multi-thumb slider. `value` is always an array; pass a single-element
- * array for a simple slider, two elements for a range slider. Renders a
- * `<span data-orientation data-disabled>` container with `touchAction: 'none'`.
- * Clicking or dragging anywhere in the track moves the thumb closest to the
- * pointer; `onValueCommit` fires once, on pointer up. Works controlled
- * (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Multi-thumb slider with array values. Click/drag track to move nearest thumb.
+ * Single element = simple slider, two = range. Controlled or uncontrolled.
+ * With no `children`, derives anatomy (Track, Range, Thumbs, Marks).
  *
  * @example
  * ```tsx
- * <Slider defaultValue={[25, 75]} min={0} max={100} step={1}>
- *   <SliderTrack>
- *     <SliderRange />
- *   </SliderTrack>
- *   <SliderThumb index={0} aria-label="Minimum" />
- *   <SliderThumb index={1} aria-label="Maximum" />
- * </Slider>
+ * <Slider defaultValue={[25, 75]} min={0} max={100} step={1} />
  * ```
  */
 export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/Slider.d.ts

@@ -7,22 +7,13 @@ export declare const SliderProvider: {
     displayName: string;
 }, useSliderContext: (consumerName: string) => SliderContextValue;
 /**
- * Multi-thumb slider. `value` is always an array; pass a single-element
- * array for a simple slider, two elements for a range slider. Renders a
- * `<span data-orientation data-disabled>` container with `touchAction: 'none'`.
- * Clicking or dragging anywhere in the track moves the thumb closest to the
- * pointer; `onValueCommit` fires once, on pointer up. Works controlled
- * (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Multi-thumb slider with array values. Click/drag track to move nearest thumb.
+ * Single element = simple slider, two = range. Controlled or uncontrolled.
+ * With no `children`, derives anatomy (Track, Range, Thumbs, Marks).
  *
  * @example
  * ```tsx
- * <Slider defaultValue={[25, 75]} min={0} max={100} step={1}>
- *   <SliderTrack>
- *     <SliderRange />
- *   </SliderTrack>
- *   <SliderThumb index={0} aria-label="Minimum" />
- *   <SliderThumb index={1} aria-label="Maximum" />
- * </Slider>
+ * <Slider defaultValue={[25, 75]} min={0} max={100} step={1} />
  * ```
  */
 export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/Slider.js

@@ -1 +1 @@
-import*as u from"react";import{clamp as O}from"../utils/clamp.js";import{useComposedRefs as _}from"../utils/composeRefs.js";import{createSafeContext as G}from"../utils/createContext.js";import{useFormReset as J}from"../utils/formControl.js";import{skdxPart as Q}from"../utils/part.js";import{composeEventHandlers as v,Primitive as W}from"../utils/primitive.js";import{useControllableState as Z}from"../utils/useControllableState.js";import{jsx as I}from"react/jsx-runtime";var[j,g]=G("Slider");function ee(i,r,l){let e=Math.round((i-r)/l),f=r+e*l,S=(String(l).split(".")[1]??"").length;return Number(f.toFixed(S))}var te=u.forwardRef((i,r)=>{let{value:l,defaultValue:e=[0],onValueChange:f,onValueCommit:S,min:o=0,max:s=100,step:R=1,disabled:n=!1,orientation:m="horizontal",name:M,...b}=i,[c=[],d]=Z({prop:l,defaultProp:e,onChange:f}),P=u.useRef(c);P.current=c;let x=u.useRef(null),[w,C]=u.useState(null),T=_(r,x,C);J(x,()=>d(e));let k=u.useRef(0),D=u.useCallback((t,a)=>{let y=ee(a,o,R);d((p=[])=>{let H=t>0?p[t-1]??o:o,V=t<p.length-1?p[t+1]??s:s,L=O(y,Math.max(H,o),Math.min(V,s));if(p[t]===L)return p;let E=[...p];return E[t]=L,E})},[o,s,R,d]),N=u.useCallback(t=>{let a=x.current?.getBoundingClientRect();if(!a)return null;let y=m==="horizontal"?(t.clientX-a.left)/a.width:1-(t.clientY-a.top)/a.height;return o+y*(s-o)},[m,o,s]),X=t=>{if(n)return;let a=N(t);if(a==null)return;let y=P.current,p=0,H=1/0;y.forEach((V,L)=>{let E=Math.abs(V-a);E<H&&(H=E,p=L)}),k.current=p,t.target.setPointerCapture?.(t.pointerId),D(p,a)},Y=t=>{if(n||!t.target.hasPointerCapture?.(t.pointerId))return;let a=N(t);a!=null&&D(k.current,a)},q=t=>{t.target.hasPointerCapture?.(t.pointerId)&&(t.target.releasePointerCapture(t.pointerId),S?.(P.current))};return I(j,{values:c,min:o,max:s,disabled:n,orientation:m,thumbIndexRef:k,rootNode:w,updateValue:D,step:R,name:M,children:I(W.span,{"data-orientation":m,"data-disabled":n?"":void 0,...b,...Q("slider","root",b.className),ref:T,onPointerDown:v(b.onPointerDown,X),onPointerMove:v(b.onPointerMove,Y),onPointerUp:v(b.onPointerUp,q),style:{touchAction:"none",...b.style}})})});te.displayName="Slider";import*as A from"react";import{skdxPart as re}from"../utils/part.js";import{Primitive as oe}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var $=A.forwardRef((i,r)=>{let l=g("SliderTrack");return ne(oe.span,{"data-orientation":l.orientation,"data-disabled":l.disabled?"":void 0,...i,...re("slider","track",i.className),ref:r})});$.displayName="SliderTrack";import*as U from"react";import{skdxPart as ae}from"../utils/part.js";import{Primitive as ie}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";var K=U.forwardRef((i,r)=>{let l=g("SliderRange"),{values:e,min:f,max:S,orientation:o}=l,s=e.map(m=>(m-f)/(S-f)*100),R=e.length>1?Math.min(...s):0,n=100-Math.max(...s,0);return le(ie.span,{"data-orientation":o,"data-disabled":l.disabled?"":void 0,...i,...ae("slider","range",i.className),ref:r,style:{...o==="horizontal"?{left:`${R}%`,right:`${n}%`}:{bottom:`${R}%`,top:`${n}%`},...i.style}})});K.displayName="SliderRange";import*as h from"react";import{useComposedRefs as se}from"../utils/composeRefs.js";import{directionalKey as de,useDirection as me}from"../utils/direction.js";import{HiddenInput as ue}from"../utils/hiddenInput.js";import{skdxPart as ce}from"../utils/part.js";import{composeEventHandlers as z,Primitive as pe}from"../utils/primitive.js";import{Fragment as Se,jsx as B,jsxs as Re}from"react/jsx-runtime";var fe='[role="slider"]',F=h.forwardRef(({index:i,...r},l)=>{let e=g("SliderThumb"),f=me(),S=h.useRef(null),o=se(l,S),[s,R]=h.useState(0);h.useLayoutEffect(()=>{if(i!==void 0||!e.rootNode)return;let d=Array.from(e.rootNode.querySelectorAll(fe)).findIndex(P=>P===S.current);d!==-1&&d!==s&&R(d)});let n=i??s,m=e.values[n]??e.min,M=(m-e.min)/(e.max-e.min)*100,b=c=>{if(e.disabled)return;let{step:d,min:P,max:x}=e,w=Math.max((x-P)/10,d),C={ArrowRight:d,ArrowUp:d,ArrowLeft:-d,ArrowDown:-d,PageUp:w,PageDown:-w},T=de(c.key,c.currentTarget,f);T in C?(c.preventDefault(),e.updateValue(n,m+C[T])):T==="Home"?(c.preventDefault(),e.updateValue(n,P)):T==="End"&&(c.preventDefault(),e.updateValue(n,x))};return Re(Se,{children:[B(pe.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":m,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,tabIndex:e.disabled?void 0:0,...r,...ce("slider","thumb",r.className),ref:o,onKeyDown:z(r.onKeyDown,b),onPointerDown:z(r.onPointerDown,()=>{e.thumbIndexRef.current=n}),style:{position:"absolute",...e.orientation==="horizontal"?{left:`${M}%`,transform:"translateX(-50%)"}:{bottom:`${M}%`,transform:"translateY(50%)"},...r.style}}),e.name&&B(ue,{type:"number",name:e.values.length>1?`${e.name}[${n}]`:e.name,value:m,disabled:e.disabled})]})});F.displayName="SliderThumb";export{te as Slider,j as SliderProvider,K as SliderRange,F as SliderThumb,$ as SliderTrack,g as useSliderContext};
+import*as l from"react";import{clamp as $e}from"../utils/clamp.js";import{useComposedRefs as ze}from"../utils/composeRefs.js";import{createSafeContext as Be}from"../utils/createContext.js";import{resolveDirection as Ke,useDirection as Ue}from"../utils/direction.js";import{useFormReset as Fe}from"../utils/formControl.js";import{skdxPart as Xe}from"../utils/part.js";import{composeEventHandlers as H,Primitive as Ye}from"../utils/primitive.js";import{useControllableState as _e}from"../utils/useControllableState.js";import*as le from"react";import{isDevMode as Ie}from"../utils/is-dev-mode.js";import*as re from"react";import{skdxPart as he}from"../utils/part.js";import{Primitive as ge}from"../utils/primitive.js";import{jsx as Re}from"react/jsx-runtime";var X=re.forwardRef(({value:o,...a},t)=>{let n=S("SliderMark"),e=(o-n.min)/(n.max-n.min)*100;return Re(ge.span,{"aria-hidden":"true","data-orientation":n.orientation,"data-disabled":n.disabled?"":void 0,"data-value":o,...a,...he("slider","mark",a.className),ref:t,style:{position:"absolute",...n.orientation==="horizontal"?{insetInlineStart:`${e}%`}:{bottom:`${e}%`},...a.style}})});X.displayName="SliderMark";import*as ne from"react";import{skdxPart as ye}from"../utils/part.js";import{Primitive as Pe}from"../utils/primitive.js";import{jsx as xe}from"react/jsx-runtime";var Y=ne.forwardRef((o,a)=>{let t=S("SliderRange"),{values:n,min:e,max:u,orientation:s}=t,m=n.map(c=>(c-e)/(u-e)*100),p=n.length>1?Math.min(...m):0,d=100-Math.max(...m,0);return xe(Pe.span,{"data-orientation":s,"data-disabled":t.disabled?"":void 0,...o,...ye("slider","range",o.className),ref:a,style:{...s==="horizontal"?{insetInlineStart:`${p}%`,insetInlineEnd:`${d}%`}:{bottom:`${p}%`,top:`${d}%`},...o.style}})});Y.displayName="SliderRange";import*as R from"react";import{useComposedRefs as Me}from"../utils/composeRefs.js";import{directionalKey as ke}from"../utils/direction.js";import{HiddenInput as Te}from"../utils/hiddenInput.js";import{skdxPart as we}from"../utils/part.js";import{composeEventHandlers as oe,Primitive as Ce}from"../utils/primitive.js";import{Fragment as Ee,jsx as ae,jsxs as De}from"react/jsx-runtime";var ve='[role="slider"]',_=R.forwardRef(({index:o,valueText:a,...t},n)=>{let e=S("SliderThumb"),u=R.useRef(null),s=Me(n,u),[m,p]=R.useState(0);R.useLayoutEffect(()=>{if(o!==void 0||!e.rootNode)return;let y=Array.from(e.rootNode.querySelectorAll(ve)).findIndex(T=>T===u.current);y!==-1&&y!==m&&p(y)});let d=o??m,c=e.values[d]??e.min,v=(c-e.min)/(e.max-e.min)*100,E=b=>{if(e.disabled)return;let{step:y,min:T,max:I,largeStep:w}=e,P=b.shiftKey?w:y,f={ArrowRight:P,ArrowUp:P,ArrowLeft:-P,ArrowDown:-P,PageUp:w,PageDown:-w},x=ke(b.key,b.currentTarget,e.direction);x in f?(b.preventDefault(),e.updateValue(d,c+f[x],"keyboard")):x==="Home"?(b.preventDefault(),e.updateValue(d,T,"keyboard")):x==="End"&&(b.preventDefault(),e.updateValue(d,I,"keyboard"))};return De(Ee,{children:[ae(Ce.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":c,"aria-valuetext":a,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,"data-dragging":e.draggingIndex===d?"":void 0,tabIndex:e.disabled?void 0:0,...t,...we("slider","thumb",t.className),ref:s,onKeyDown:oe(t.onKeyDown,E),onPointerDown:oe(t.onPointerDown,()=>{e.thumbIndexRef.current=d}),style:{position:"absolute",...e.orientation==="horizontal"?{insetInlineStart:`${v}%`,transform:`translateX(${e.direction==="rtl"?"":"-"}50%)`}:{bottom:`${v}%`,transform:"translateY(50%)"},...t.style}}),e.name&&ae(Te,{type:"number",name:e.values.length>1?`${e.name}[${d}]`:e.name,value:c,disabled:e.disabled,form:e.form})]})});_.displayName="SliderThumb";import*as ie from"react";import{skdxPart as Le}from"../utils/part.js";import{Primitive as Ve}from"../utils/primitive.js";import{jsx as He}from"react/jsx-runtime";var q=ie.forwardRef((o,a)=>{let t=S("SliderTrack");return He(Ve.span,{"data-orientation":t.orientation,"data-disabled":t.disabled?"":void 0,...o,...Le("slider","track",o.className),ref:a})});q.displayName="SliderTrack";import{Fragment as Ne,jsx as C,jsxs as Ae}from"react/jsx-runtime";var se=({marks:o,showTooltip:a})=>{let{values:t,thumbLabels:n}=S("SliderAnatomy");return le.useEffect(()=>{Ie()&&(t.length<=1||n&&n.length>=t.length||console.warn(`[skandadx] Slider derives ${t.length} thumbs without aria-labels from thumbLabels and all will announce identically, violating accessibility.namingRequirement. Pass thumbLabels with one name per thumb to distinguish them (for example, ["Minimum price", "Maximum price"]).`))},[t.length,n]),Ae(Ne,{children:[C(q,{children:C(Y,{})}),t.map((e,u)=>C(_,{index:u,"aria-label":n?.[u],children:a?C("span",{"aria-hidden":"true",className:"skdx-slider__tooltip","data-part":"tooltip",children:e}):null},u)),o?.map(e=>C(X,{value:e.value,children:e.label},e.value))]})};import{jsx as O}from"react/jsx-runtime";var[qe,S]=Be("Slider");function Oe(o,a){return o.length===a.length&&o.every((t,n)=>t===a[n])}function Ge(o,a,t){let n=Math.round((o-a)/t),e=a+n*t,u=(String(t).split(".")[1]??"").length;return Number(e.toFixed(u))}var de=l.forwardRef((o,a)=>{let{value:t,defaultValue:n=[0],onValueChange:e,onValueCommit:u,min:s=0,max:m=100,step:p=1,disabled:d=!1,orientation:c="horizontal",largeStep:v,minStepsBetweenValues:E=0,name:b,form:y,marks:T,showTooltip:I=!1,thumbLabels:w,children:P,...f}=o,x=v??Math.max((m-s)/10,p),G=l.useRef("programmatic"),J=l.useRef(null),[N=[],Q]=_e({prop:t,defaultProp:n,onChange:r=>e?.({value:r,previousValue:J.current,reason:G.current})}),M=l.useRef(N);M.current=N;let A=l.useCallback((r,i)=>{G.current=i,J.current=M.current,Q(r)},[Q]),$=l.useRef(null),[W,me]=l.useState(null),ue=ze(a,$,me);Fe($,()=>A(n,"programmatic"));let z=l.useRef(0),[Z,B]=l.useState(null),D=l.useRef(null),ce=Ue(),K=Ke(W,ce),U=l.useCallback((r,i,k)=>{let g=Ge(i,s,p);A((h=[])=>{let L=E*p,F=r>0?(h[r-1]??s)+L:s,V=r<h.length-1?(h[r+1]??m)-L:m,ee=$e(g,Math.max(F,s),Math.min(V,m));if(h[r]===ee)return h;let te=[...h];return te[r]=ee,te},k)},[s,m,p,E,A]),j=l.useCallback(r=>{let i=$.current?.getBoundingClientRect();if(!i)return null;let k=c==="horizontal"?(r.clientX-i.left)/i.width:1-(r.clientY-i.top)/i.height,g=c==="horizontal"&&K==="rtl"?1-k:k;return s+g*(m-s)},[c,K,s,m]),pe=r=>{if(d)return;let i=j(r);if(i==null)return;let k=M.current,g=0,h=1/0;k.forEach((L,F)=>{let V=Math.abs(L-i);V<h&&(h=V,g=F)}),z.current=g,D.current=M.current,B(g),r.target.setPointerCapture?.(r.pointerId),U(g,i,"pointer")},fe=r=>{if(d||!r.target.hasPointerCapture?.(r.pointerId))return;let i=j(r);i!=null&&U(z.current,i,"pointer")},Se=()=>{D.current=null,B(null)},be=r=>{if(r.target.hasPointerCapture?.(r.pointerId)){r.target.releasePointerCapture(r.pointerId);let i=D.current;D.current=null,B(null),i&&!Oe(i,M.current)&&u?.(M.current)}};return O(qe,{values:N,min:s,max:m,disabled:d,orientation:c,direction:K,thumbIndexRef:z,draggingIndex:Z,rootNode:W,updateValue:U,step:p,largeStep:x,name:b,form:y,thumbLabels:w,children:O(Ye.span,{"data-orientation":c,"data-disabled":d?"":void 0,"data-dragging":Z!==null?"":void 0,...f,...Xe("slider","root",f.className),ref:ue,onPointerDown:H(f.onPointerDown,pe),onPointerMove:H(f.onPointerMove,fe),onPointerUp:H(f.onPointerUp,be),onPointerCancel:H(f.onPointerCancel,Se),style:{touchAction:"none",...f.style},children:P??O(se,{marks:T,showTooltip:I})})})});de.displayName="Slider";export{de as Slider,X as SliderMark,qe as SliderProvider,Y as SliderRange,_ as SliderThumb,q as SliderTrack,S as useSliderContext};

package/dist/slider/SliderAnatomy.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SliderMarkData } from './types.cjs';
+/**
+ * The anatomy a {@link Slider} draws when given no children: a `SliderTrack`
+ * holding a `SliderRange`, one `SliderThumb` per entry in the current values — with a
+ * `skdx-slider__tooltip` child showing its live value when `showTooltip` is
+ * set, positioned by the skin, not by this component — and one `SliderMark` per
+ * entry in `marks`.
+ *
+ * @internal
+ */
+export declare const SliderAnatomy: ({ marks, showTooltip, }: {
+    marks?: readonly SliderMarkData[];
+    showTooltip?: boolean;
+}) => React.JSX.Element;

package/dist/slider/SliderAnatomy.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SliderMarkData } from './types.js';
+/**
+ * The anatomy a {@link Slider} draws when given no children: a `SliderTrack`
+ * holding a `SliderRange`, one `SliderThumb` per entry in the current values — with a
+ * `skdx-slider__tooltip` child showing its live value when `showTooltip` is
+ * set, positioned by the skin, not by this component — and one `SliderMark` per
+ * entry in `marks`.
+ *
+ * @internal
+ */
+export declare const SliderAnatomy: ({ marks, showTooltip, }: {
+    marks?: readonly SliderMarkData[];
+    showTooltip?: boolean;
+}) => React.JSX.Element;

package/dist/slider/SliderMark.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SliderMarkProps } from './types.cjs';
+/**
+ * Optional tick at declared `value` — positioned to align with thumb in both writing directions.
+ *
+ * Computed positioning avoids RTL bugs; children are the label, tick drawn by skin's `::before`.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[50]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb />
+ *   <SliderMark value={0}>0</SliderMark>
+ *   <SliderMark value={100}>100</SliderMark>
+ * </Slider>
+ * ```
+ */
+export declare const SliderMark: React.ForwardRefExoticComponent<Omit<SliderMarkProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderMark.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SliderMarkProps } from './types.js';
+/**
+ * Optional tick at declared `value` — positioned to align with thumb in both writing directions.
+ *
+ * Computed positioning avoids RTL bugs; children are the label, tick drawn by skin's `::before`.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[50]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb />
+ *   <SliderMark value={0}>0</SliderMark>
+ *   <SliderMark value={100}>100</SliderMark>
+ * </Slider>
+ * ```
+ */
+export declare const SliderMark: React.ForwardRefExoticComponent<Omit<SliderMarkProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderRange.d.cts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import type { SliderRangeProps } from './types.cjs';
 /**
- * The filled portion of the track, spanning from the lowest to the highest
- * selected value (or from the start of the track to the single value, for a
- * one-thumb slider). Renders `<span data-orientation data-disabled>`
- * positioned with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
- * percentages computed from the current values.
+ * The filled portion of the track, spanning from lowest to highest selected
+ * value. Positioned with logical `inset-inline-*` (horizontal) or physical
+ * `bottom`/`top` (vertical) using percentages from the current values.
+ * Logical axis respects `dir="rtl"`.
  *
  * @example
  * ```tsx

package/dist/slider/SliderRange.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import type { SliderRangeProps } from './types.js';
 /**
- * The filled portion of the track, spanning from the lowest to the highest
- * selected value (or from the start of the track to the single value, for a
- * one-thumb slider). Renders `<span data-orientation data-disabled>`
- * positioned with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
- * percentages computed from the current values.
+ * The filled portion of the track, spanning from lowest to highest selected
+ * value. Positioned with logical `inset-inline-*` (horizontal) or physical
+ * `bottom`/`top` (vertical) using percentages from the current values.
+ * Logical axis respects `dir="rtl"`.
  *
  * @example
  * ```tsx

package/dist/slider/SliderThumb.d.cts

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import type { SliderThumbProps } from './types.cjs';
 /**
- * A single draggable handle on a {@link Slider}, positioned by `index` (or,
- * if omitted, by its render order among sibling thumbs). Renders
- * `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
- * `aria-orientation`, `aria-disabled`, `data-orientation`, and
- * `data-disabled`. Focusable and keyboard-operable: Arrow keys step by
- * `step`, PageUp/PageDown step by a larger increment (1/10th of the range),
- * Home/End jump to `min`/`max`. When the slider has a `name`, also renders a
- * visually-hidden native `<input type="number">` (indexed as `name[i]` for
- * multi-thumb sliders) for form submission.
+ * A single draggable handle on a {@link Slider}, positioned by `index` (or by render order).
+ * Renders `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
+ * `aria-orientation`, `aria-disabled`, `data-orientation`, `data-disabled`,
+ * plus `data-dragging` while pointer moves it and `aria-valuetext` when given.
+ * Keyboard-operable: Arrow keys step by `step`, Shift+Arrow and PageUp/PageDown by `largeStep`
+ * (1/10th of range by default), Home/End jump to `min`/`max`.
+ * Renders visually-hidden native `<input type="number">` for form submission when slider has `name`.
  *
  * @example
  * ```tsx

package/dist/slider/SliderThumb.d.ts

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import type { SliderThumbProps } from './types.js';
 /**
- * A single draggable handle on a {@link Slider}, positioned by `index` (or,
- * if omitted, by its render order among sibling thumbs). Renders
- * `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
- * `aria-orientation`, `aria-disabled`, `data-orientation`, and
- * `data-disabled`. Focusable and keyboard-operable: Arrow keys step by
- * `step`, PageUp/PageDown step by a larger increment (1/10th of the range),
- * Home/End jump to `min`/`max`. When the slider has a `name`, also renders a
- * visually-hidden native `<input type="number">` (indexed as `name[i]` for
- * multi-thumb sliders) for form submission.
+ * A single draggable handle on a {@link Slider}, positioned by `index` (or by render order).
+ * Renders `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
+ * `aria-orientation`, `aria-disabled`, `data-orientation`, `data-disabled`,
+ * plus `data-dragging` while pointer moves it and `aria-valuetext` when given.
+ * Keyboard-operable: Arrow keys step by `step`, Shift+Arrow and PageUp/PageDown by `largeStep`
+ * (1/10th of range by default), Home/End jump to `min`/`max`.
+ * Renders visually-hidden native `<input type="number">` for form submission when slider has `name`.
  *
  * @example
  * ```tsx

package/dist/slider/SliderTrack.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { SliderTrackProps } from './types.cjs';
 /**
- * The full-length background bar of a {@link Slider}. Renders
- * `<span data-orientation data-disabled>`; purely presentational, so pointer
- * interaction is handled by the `Slider` root itself.
+ * Full-length background bar for a {@link Slider}. Purely presentational; pointer interaction is handled by the `Slider` root.
  *
  * @example
  * ```tsx

package/dist/slider/SliderTrack.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { SliderTrackProps } from './types.js';
 /**
- * The full-length background bar of a {@link Slider}. Renders
- * `<span data-orientation data-disabled>`; purely presentational, so pointer
- * interaction is handled by the `Slider` root itself.
+ * Full-length background bar for a {@link Slider}. Purely presentational; pointer interaction is handled by the `Slider` root.
  *
  * @example
  * ```tsx

package/dist/slider/index.d.cts

@@ -1,5 +1,2 @@
-export * from './Slider.cjs';
-export { SliderTrack } from './SliderTrack.cjs';
-export { SliderRange } from './SliderRange.cjs';
-export { SliderThumb } from './SliderThumb.cjs';
-export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './types.cjs';
+export { Slider } from './Slider.cjs';
+export type { SliderProps, SliderMarkData, SliderValueChangeDetail } from './types.cjs';

package/dist/slider/index.d.ts

@@ -1,5 +1,2 @@
-export * from './Slider.js';
-export { SliderTrack } from './SliderTrack.js';
-export { SliderRange } from './SliderRange.js';
-export { SliderThumb } from './SliderThumb.js';
-export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './types.js';
+export { Slider } from './Slider.js';
+export type { SliderProps, SliderMarkData, SliderValueChangeDetail } from './types.js';

package/dist/slider/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `Slider` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Slider, SliderRange, SliderThumb, SliderTrack } from '@skdx/react/primitives/slider';
+ *
+ * <Slider defaultValue={[25, 75]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export { Slider } from './Slider.cjs';
+export { SliderTrack } from './SliderTrack.cjs';
+export { SliderRange } from './SliderRange.cjs';
+export { SliderThumb } from './SliderThumb.cjs';
+export { SliderMark } from './SliderMark.cjs';
+export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps, SliderMarkProps, } from './types.cjs';

package/dist/slider/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `Slider` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Slider, SliderRange, SliderThumb, SliderTrack } from '@skdx/react/primitives/slider';
+ *
+ * <Slider defaultValue={[25, 75]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export { Slider } from './Slider.js';
+export { SliderTrack } from './SliderTrack.js';
+export { SliderRange } from './SliderRange.js';
+export { SliderThumb } from './SliderThumb.js';
+export { SliderMark } from './SliderMark.js';
+export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps, SliderMarkProps, } from './types.js';

package/dist/slider/types.d.cts

@@ -1,5 +1,22 @@
 import type * as React from 'react';
+import type { Direction } from '../utils/direction.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * Payload of `onValueChange`. `reason` discriminates four change sources
+ * (track press, drag, keyboard, or programmatic). `previousValue` is included
+ * because consumers usually need both ends; `null` only when there was no prior value.
+ */
+export interface SliderValueChangeDetail {
+    /** The values the slider settled on, one per thumb. */
+    value: number[];
+    /** The values held before this change, or `null` when there were none. */
+    previousValue: number[] | null;
+    /**
+     * What drove the change. `'pointer'` covers both a track press and a drag
+     * frame — which of the two it was is readable off the originating event.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Shared state distributed from {@link Slider} to its parts via context. Not part of the public API. */
 export interface SliderContextValue {
     values: number[];
@@ -7,11 +24,23 @@ export interface SliderContextValue {
     max: number;
     disabled: boolean;
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Resolved once on root so all parts agree on track start. Used to map pointer
+     * and position thumbs.
+     */
+    direction: Direction;
     thumbIndexRef: React.RefObject<number>;
+    /** Index of the thumb a pointer gesture is currently moving, or `null` between gestures. */
+    draggingIndex: number | null;
     rootNode: HTMLSpanElement | null;
-    updateValue: (index: number, value: number) => void;
+    /** `reason` travels with the write, so the emitted detail names the interaction that caused it. */
+    updateValue: (index: number, value: number, reason: SliderValueChangeDetail['reason']) => void;
     step: number;
+    /** Already resolved: the `largeStep` prop, or the derived tenth-of-range fallback. */
+    largeStep: number;
     name?: string;
+    form?: string;
+    thumbLabels?: readonly string[];
 }
 /** Props for the {@link Slider} root. */
 export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
@@ -27,12 +56,15 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      */
     defaultValue?: number[];
     /**
-     * Fires with the new values array on every change during a drag or key press.
+     * Fires on every change during a drag or key press, with the new values, the
+     * values held before them, and the reason the change happened. A change that
+     * resolves to the values already held emits nothing.
      * @default undefined
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: (detail: SliderValueChangeDetail) => void;
     /**
-     * Fires once with the final values array when a drag ends (pointer up).
+     * Fires once with final values when drag ends, suppressed if values unchanged
+     * (bare click already in place).
      * @default undefined
      */
     onValueCommit?: (value: number[]) => void;
@@ -62,11 +94,61 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step — the increment
+     * those keys already moved before this prop existed.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0` two
+     * thumbs may be dragged onto the same value; at `1` the neighbour is pushed
+     * one step away, so a range can never collapse to nothing.
+     * @default 0
+     */
+    minStepsBetweenValues?: number;
     /**
      * Name for native form participation; each thumb renders its own hidden input.
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, one derived `SliderMark` part each.
+     * Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Shows the focused/dragged thumb's current value in a derived
+     * `skdx-slider__tooltip` element beside the thumb, positioned by the skin.
+     * Ignored when `children` is given.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Accessible names for derived thumbs, one per value (e.g. `["Minimum", "Maximum"]`).
+     * Multi-thumb sliders need these so each thumb announces distinctly; `role="slider"`
+     * takes no name from content. Ignored when `children` is given with its own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
+}
+/**
+ * Entry of {@link SliderProps.marks} — a tick with optional label. Named `Data`
+ * to avoid collision with the `SliderMark` part component.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string;
 }
 /** Props for the {@link SliderTrack}, the full-length background bar. */
 export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
@@ -82,9 +164,23 @@ export interface SliderThumbProps extends PrimitivePropsWithRef<'span'> {
      * @default undefined
      */
     index?: number;
+    /**
+     * Announcement for this thumb's value, written to `aria-valuetext`. Supply when
+     * the raw number doesn't match what the user chose (e.g. `"£20"` for price).
+     * @default undefined
+     */
+    valueText?: string;
     /**
      * Accessible name for this thumb, since it has no visible text content.
      * @default undefined
      */
     'aria-label'?: string;
 }
+/** Props for a {@link SliderMark} tick. */
+export interface SliderMarkProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * The value on the track this mark sits at. Positioned with the same
+     * logical inline offset the thumb uses, so it mirrors under `dir="rtl"`.
+     */
+    value: number;
+}