@zag-js/slider 0.53.0 → 0.54.0

package/dist/index.mjs

@@ -1,2 +1,852 @@
-import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("slider").parts("root","label","thumb","valueText","track","range","control","markerGroup","marker");var parts=anatomy.build();import{getEventKey,getEventPoint,getEventStep,isLeftClick,isModifierKey}from"@zag-js/dom-event";import{ariaAttr,dataAttr}from"@zag-js/dom-query";import{getPercentValue as getPercentValue2,getValuePercent as getValuePercent2}from"@zag-js/numeric-range";import{getRelativePoint}from"@zag-js/dom-event";import{createScope,queryAll}from"@zag-js/dom-query";import{dispatchInputValueEvent}from"@zag-js/form-utils";import{getPercentValue}from"@zag-js/numeric-range";import{getValuePercent,getValueTransformer}from"@zag-js/numeric-range";function getBounds(value){const firstValue=value[0];const lastThumb=value[value.length-1];return[firstValue,lastThumb]}function getRangeOffsets(ctx){const[firstPercent,lastPercent]=getBounds(ctx.valuePercent);if(ctx.valuePercent.length===1){if(ctx.origin==="center"){const isNegative=ctx.valuePercent[0]<50;const start=isNegative?`${ctx.valuePercent[0]}%`:"50%";const end=isNegative?"50%":`${100-ctx.valuePercent[0]}%`;return{start,end}}return{start:"0%",end:`${100-lastPercent}%`}}return{start:`${firstPercent}%`,end:`${100-lastPercent}%`}}function getRangeStyle(ctx){if(ctx.isVertical){return{position:"absolute",bottom:"var(--slider-range-start)",top:"var(--slider-range-end)"}}return{position:"absolute",[ctx.isRtl?"right":"left"]:"var(--slider-range-start)",[ctx.isRtl?"left":"right"]:"var(--slider-range-end)"}}function getVerticalThumbOffset(ctx){const{height=0}=ctx.thumbSize??{};const getValue=getValueTransformer([ctx.min,ctx.max],[-height/2,height/2]);return parseFloat(getValue(ctx.value).toFixed(2))}function getHorizontalThumbOffset(ctx){const{width=0}=ctx.thumbSize??{};if(ctx.isRtl){const getValue2=getValueTransformer([ctx.max,ctx.min],[-width/2,width/2]);return-1*parseFloat(getValue2(ctx.value).toFixed(2))}const getValue=getValueTransformer([ctx.min,ctx.max],[-width/2,width/2]);return parseFloat(getValue(ctx.value).toFixed(2))}function getOffset(ctx,percent){if(ctx.thumbAlignment==="center")return`${percent}%`;const offset=ctx.isVertical?getVerticalThumbOffset(ctx):getHorizontalThumbOffset(ctx);return`calc(${percent}% - ${offset}px)`}function getThumbOffset(ctx){let percent=getValuePercent(ctx.value,ctx.min,ctx.max)*100;return getOffset(ctx,percent)}function getVisibility(ctx){let visibility="visible";if(ctx.thumbAlignment==="contain"&&!ctx.hasMeasuredThumbSize){visibility="hidden"}return visibility}function getThumbStyle(ctx,index){const placementProp=ctx.isVertical?"bottom":"insetInlineStart";return{visibility:getVisibility(ctx),position:"absolute",transform:"var(--slider-thumb-transform)",[placementProp]:`var(--slider-thumb-offset-${index})`}}function getControlStyle(){return{touchAction:"none",userSelect:"none",position:"relative"}}function getRootStyle(ctx){const range=getRangeOffsets(ctx);const offsetStyles=ctx.value.reduce((styles,value,index)=>{const offset=getThumbOffset({...ctx,value});return{...styles,[`--slider-thumb-offset-${index}`]:offset}},{});return{...offsetStyles,"--slider-thumb-transform":ctx.isVertical?"translateY(50%)":ctx.isRtl?"translateX(50%)":"translateX(-50%)","--slider-range-start":range.start,"--slider-range-end":range.end}}function getMarkerStyle(ctx,value){return{visibility:getVisibility(ctx),position:"absolute",pointerEvents:"none",[ctx.isHorizontal?"insetInlineStart":"bottom"]:getThumbOffset({...ctx,value}),translate:"var(--tx) var(--ty)","--tx":ctx.isHorizontal?ctx.isRtl?"50%":"-50%":"0%","--ty":!ctx.isHorizontal?"50%":"0%"}}function getMarkerGroupStyle(){return{userSelect:"none",pointerEvents:"none",position:"relative"}}var styleGetterFns={getRootStyle,getControlStyle,getThumbStyle,getRangeStyle,getMarkerStyle,getMarkerGroupStyle};var dom=createScope({...styleGetterFns,getRootId:ctx=>ctx.ids?.root??`slider:${ctx.id}`,getThumbId:(ctx,index)=>ctx.ids?.thumb?.(index)??`slider:${ctx.id}:thumb:${index}`,getHiddenInputId:(ctx,index)=>`slider:${ctx.id}:input:${index}`,getControlId:ctx=>ctx.ids?.control??`slider:${ctx.id}:control`,getTrackId:ctx=>ctx.ids?.track??`slider:${ctx.id}:track`,getRangeId:ctx=>ctx.ids?.range??`slider:${ctx.id}:range`,getLabelId:ctx=>ctx.ids?.label??`slider:${ctx.id}:label`,getValueTextId:ctx=>ctx.ids?.valueText??`slider:${ctx.id}:valueText`,getMarkerId:(ctx,value)=>ctx.ids?.marker?.(value)??`slider:${ctx.id}:marker:${value}`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getThumbEl:(ctx,index)=>dom.getById(ctx,dom.getThumbId(ctx,index)),getHiddenInputEl:(ctx,index)=>dom.getById(ctx,dom.getHiddenInputId(ctx,index)),getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getElements:ctx=>queryAll(dom.getControlEl(ctx),"[role=slider]"),getFirstEl:ctx=>dom.getElements(ctx)[0],getRangeEl:ctx=>dom.getById(ctx,dom.getRangeId(ctx)),getValueFromPoint(ctx,point){const controlEl=dom.getControlEl(ctx);if(!controlEl)return;const relativePoint=getRelativePoint(point,controlEl);const percent=relativePoint.getPercentValue({orientation:ctx.orientation,dir:ctx.dir,inverted:{y:true}});return getPercentValue(percent,ctx.min,ctx.max,ctx.step)},dispatchChangeEvent(ctx){const valueArray=Array.from(ctx.value);valueArray.forEach((value,index)=>{const inputEl=dom.getHiddenInputEl(ctx,index);if(!inputEl)return;dispatchInputValueEvent(inputEl,{value})})}});import{clampValue,getClosestValueIndex,getNextStepValue,getPreviousStepValue,getValueRanges,snapValueToStep}from"@zag-js/numeric-range";function normalizeValues(ctx,nextValues){return nextValues.map((value,index,values)=>{return constrainValue({...ctx,value:values},value,index)})}function getRangeAtIndex(ctx,index){return getValueRanges(ctx.value,ctx.min,ctx.max,ctx.minStepsBetweenThumbs)[index]}function constrainValue(ctx,value,index){const range=getRangeAtIndex(ctx,index);const snapValue=snapValueToStep(value,ctx.min,ctx.max,ctx.step);return clampValue(snapValue,range.min,range.max)}function decrement(ctx,index,step){const idx=index??ctx.focusedIndex;const range=getRangeAtIndex(ctx,idx);const nextValues=getPreviousStepValue(idx,{...range,step:step??ctx.step,values:ctx.value});nextValues[idx]=clampValue(nextValues[idx],range.min,range.max);return nextValues}function increment(ctx,index,step){const idx=index??ctx.focusedIndex;const range=getRangeAtIndex(ctx,idx);const nextValues=getNextStepValue(idx,{...range,step:step??ctx.step,values:ctx.value});nextValues[idx]=clampValue(nextValues[idx],range.min,range.max);return nextValues}function getClosestIndex(ctx,pointValue){return getClosestValueIndex(ctx.value,pointValue)}function assignArray(current,next){for(let i=0;i<next.length;i++){const value=next[i];current[i]=value}}function connect(state,send,normalize){const ariaLabel=state.context["aria-label"];const ariaLabelledBy=state.context["aria-labelledby"];const sliderValue=state.context.value;const focused=state.matches("focus");const dragging=state.matches("dragging");const disabled=state.context.isDisabled;const invalid=state.context.invalid;const interactive=state.context.isInteractive;const isHorizontal=state.context.orientation==="horizontal";const isVertical=state.context.orientation==="vertical";function getValuePercentFn(value){return getValuePercent2(value,state.context.min,state.context.max)}function getPercentValueFn(percent){return getPercentValue2(percent,state.context.min,state.context.max,state.context.step)}return{value:state.context.value,dragging,focused,setValue(value){send({type:"SET_VALUE",value})},getThumbValue(index){return sliderValue[index]},setThumbValue(index,value){send({type:"SET_VALUE",index,value})},getValuePercent:getValuePercentFn,getPercentValue:getPercentValueFn,getThumbPercent(index){return getValuePercentFn(sliderValue[index])},setThumbPercent(index,percent){const value=getPercentValueFn(percent);send({type:"SET_VALUE",index,value})},getThumbMin(index){return getRangeAtIndex(state.context,index).min},getThumbMax(index){return getRangeAtIndex(state.context,index).max},increment(index){send({type:"INCREMENT",index})},decrement(index){send({type:"DECREMENT",index})},focus(){if(!interactive)return;send({type:"FOCUS",index:0})},labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),id:dom.getLabelId(state.context),htmlFor:dom.getHiddenInputId(state.context,0),onClick(event){if(!interactive)return;event.preventDefault();dom.getFirstEl(state.context)?.focus()},style:{userSelect:"none"}}),rootProps:normalize.element({...parts.root.attrs,"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),id:dom.getRootId(state.context),dir:state.context.dir,style:dom.getRootStyle(state.context)}),valueTextProps:normalize.element({...parts.valueText.attrs,dir:state.context.dir,"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),id:dom.getValueTextId(state.context)}),trackProps:normalize.element({...parts.track.attrs,dir:state.context.dir,id:dom.getTrackId(state.context),"data-disabled":dataAttr(disabled),"data-invalid":dataAttr(invalid),"data-orientation":state.context.orientation,"data-focus":dataAttr(focused),style:{position:"relative"}}),getThumbProps(props2){const{index=0,name}=props2;const value=sliderValue[index];const range=getRangeAtIndex(state.context,index);const valueText=state.context.getAriaValueText?.({value,index});const _ariaLabel=Array.isArray(ariaLabel)?ariaLabel[index]:ariaLabel;const _ariaLabelledBy=Array.isArray(ariaLabelledBy)?ariaLabelledBy[index]:ariaLabelledBy;return normalize.element({...parts.thumb.attrs,dir:state.context.dir,"data-index":index,"data-name":name,id:dom.getThumbId(state.context,index),"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,"data-focus":dataAttr(focused&&state.context.focusedIndex===index),draggable:false,"aria-disabled":ariaAttr(disabled),"aria-label":_ariaLabel,"aria-labelledby":_ariaLabelledBy??dom.getLabelId(state.context),"aria-orientation":state.context.orientation,"aria-valuemax":range.max,"aria-valuemin":range.min,"aria-valuenow":sliderValue[index],"aria-valuetext":valueText,role:"slider",tabIndex:disabled?void 0:0,style:dom.getThumbStyle(state.context,index),onPointerDown(event){if(!interactive)return;send({type:"THUMB_POINTER_DOWN",index});event.stopPropagation()},onBlur(){if(!interactive)return;send("BLUR")},onFocus(){if(!interactive)return;send({type:"FOCUS",index})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;const step=getEventStep(event)*state.context.step;const keyMap={ArrowUp(){if(isHorizontal)return;send({type:"ARROW_INC",step,src:"ArrowUp"})},ArrowDown(){if(isHorizontal)return;send({type:"ARROW_DEC",step,src:"ArrowDown"})},ArrowLeft(){if(isVertical)return;send({type:"ARROW_DEC",step,src:"ArrowLeft"})},ArrowRight(){if(isVertical)return;send({type:"ARROW_INC",step,src:"ArrowRight"})},PageUp(){send({type:"ARROW_INC",step,src:"PageUp"})},PageDown(){send({type:"ARROW_DEC",step,src:"PageDown"})},Home(){send("HOME")},End(){send("END")}};const key=getEventKey(event,state.context);const exec=keyMap[key];if(exec){exec(event);event.preventDefault();event.stopPropagation()}}})},getHiddenInputProps(props2){const{index=0,name}=props2;return normalize.input({name:name??(state.context.name?state.context.name+(state.context.value.length>1?"[]":""):void 0),form:state.context.form,type:"text",hidden:true,defaultValue:state.context.value[index],id:dom.getHiddenInputId(state.context,index)})},rangeProps:normalize.element({id:dom.getRangeId(state.context),...parts.range.attrs,dir:state.context.dir,"data-focus":dataAttr(focused),"data-invalid":dataAttr(invalid),"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,style:dom.getRangeStyle(state.context)}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context),"data-disabled":dataAttr(disabled),"data-orientation":state.context.orientation,"data-invalid":dataAttr(invalid),"data-focus":dataAttr(focused),style:dom.getControlStyle(),onPointerDown(event){if(!interactive)return;if(!isLeftClick(event))return;if(isModifierKey(event))return;const point=getEventPoint(event);send({type:"POINTER_DOWN",point});event.preventDefault();event.stopPropagation()}}),markerGroupProps:normalize.element({...parts.markerGroup.attrs,role:"presentation",dir:state.context.dir,"aria-hidden":true,"data-orientation":state.context.orientation,style:dom.getMarkerGroupStyle()}),getMarkerProps(props2){const style=dom.getMarkerStyle(state.context,props2.value);let markerState;const first=state.context.value[0];const last=state.context.value[state.context.value.length-1];if(props2.value<first){markerState="under-value"}else if(props2.value>last){markerState="over-value"}else{markerState="at-value"}return normalize.element({...parts.marker.attrs,id:dom.getMarkerId(state.context,props2.value),role:"presentation",dir:state.context.dir,"data-orientation":state.context.orientation,"data-value":props2.value,"data-disabled":dataAttr(disabled),"data-state":markerState,style})}}}import{createMachine}from"@zag-js/core";import{trackPointerMove}from"@zag-js/dom-event";import{raf}from"@zag-js/dom-query";import{trackElementsSize}from"@zag-js/element-size";import{trackFormControl}from"@zag-js/form-utils";import{getValuePercent as getValuePercent3}from"@zag-js/numeric-range";import{compact,isEqual}from"@zag-js/utils";var isEqualSize=(a,b)=>{return a?.width===b?.width&&a?.height===b?.height};function machine(userContext){const ctx=compact(userContext);return createMachine({id:"slider",initial:"idle",context:{thumbSize:null,thumbAlignment:"contain",min:0,max:100,step:1,value:[0],origin:"start",orientation:"horizontal",dir:"ltr",minStepsBetweenThumbs:0,disabled:false,...ctx,focusedIndex:-1,fieldsetDisabled:false},computed:{isHorizontal:ctx2=>ctx2.orientation==="horizontal",isVertical:ctx2=>ctx2.orientation==="vertical",isRtl:ctx2=>ctx2.orientation==="horizontal"&&ctx2.dir==="rtl",isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled,isInteractive:ctx2=>!(ctx2.readOnly||ctx2.isDisabled),hasMeasuredThumbSize:ctx2=>ctx2.thumbSize!=null,valuePercent(ctx2){return ctx2.value.map(value=>100*getValuePercent3(value,ctx2.min,ctx2.max))}},watch:{value:["syncInputElements"]},entry:["coarseValue"],activities:["trackFormControlState","trackThumbsSize"],on:{SET_VALUE:[{guard:"hasIndex",actions:"setValueAtIndex"},{actions:"setValue"}],INCREMENT:{actions:"incrementThumbAtIndex"},DECREMENT:{actions:"decrementThumbAtIndex"}},states:{idle:{on:{POINTER_DOWN:{target:"dragging",actions:["setClosestThumbIndex","setPointerValue","focusActiveThumb"]},FOCUS:{target:"focus",actions:"setFocusedIndex"},THUMB_POINTER_DOWN:{target:"dragging",actions:["setFocusedIndex","focusActiveThumb"]}}},focus:{entry:"focusActiveThumb",on:{POINTER_DOWN:{target:"dragging",actions:["setClosestThumbIndex","setPointerValue","focusActiveThumb"]},THUMB_POINTER_DOWN:{target:"dragging",actions:["setFocusedIndex","focusActiveThumb"]},ARROW_DEC:{actions:["decrementThumbAtIndex","invokeOnChangeEnd"]},ARROW_INC:{actions:["incrementThumbAtIndex","invokeOnChangeEnd"]},HOME:{actions:["setFocusedThumbToMin","invokeOnChangeEnd"]},END:{actions:["setFocusedThumbToMax","invokeOnChangeEnd"]},BLUR:{target:"idle",actions:"clearFocusedIndex"}}},dragging:{entry:"focusActiveThumb",activities:"trackPointerMove",on:{POINTER_UP:{target:"focus",actions:"invokeOnChangeEnd"},POINTER_MOVE:{actions:"setPointerValue"}}}}},{guards:{hasIndex:(_ctx,evt)=>evt.index!=null},activities:{trackFormControlState(ctx2,_evt,{initialContext}){return trackFormControl(dom.getRootEl(ctx2),{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){set.value(ctx2,initialContext.value)}})},trackPointerMove(ctx2,_evt,{send}){return trackPointerMove(dom.getDoc(ctx2),{onPointerMove(info){send({type:"POINTER_MOVE",point:info.point})},onPointerUp(){send("POINTER_UP")}})},trackThumbsSize(ctx2){if(ctx2.thumbAlignment!=="contain"||ctx2.thumbSize)return;return trackElementsSize({getNodes:()=>dom.getElements(ctx2),observeMutation:true,callback(size){if(!size||isEqualSize(ctx2.thumbSize,size))return;ctx2.thumbSize=size}})}},actions:{syncInputElements(ctx2){ctx2.value.forEach((value,index)=>{const inputEl=dom.getHiddenInputEl(ctx2,index);dom.setValue(inputEl,value)})},invokeOnChangeEnd(ctx2){ctx2.onValueChangeEnd?.({value:ctx2.value})},setClosestThumbIndex(ctx2,evt){const pointValue=dom.getValueFromPoint(ctx2,evt.point);if(pointValue==null)return;const focusedIndex=getClosestIndex(ctx2,pointValue);set.focusedIndex(ctx2,focusedIndex)},setFocusedIndex(ctx2,evt){set.focusedIndex(ctx2,evt.index)},clearFocusedIndex(ctx2){set.focusedIndex(ctx2,-1)},setPointerValue(ctx2,evt){const pointerValue=dom.getValueFromPoint(ctx2,evt.point);if(pointerValue==null)return;const value=constrainValue(ctx2,pointerValue,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,value)},focusActiveThumb(ctx2){raf(()=>{const thumbEl=dom.getThumbEl(ctx2,ctx2.focusedIndex);thumbEl?.focus({preventScroll:true})})},decrementThumbAtIndex(ctx2,evt){const value=decrement(ctx2,evt.index,evt.step);set.value(ctx2,value)},incrementThumbAtIndex(ctx2,evt){const value=increment(ctx2,evt.index,evt.step);set.value(ctx2,value)},setFocusedThumbToMin(ctx2){const{min}=getRangeAtIndex(ctx2,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,min)},setFocusedThumbToMax(ctx2){const{max}=getRangeAtIndex(ctx2,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,max)},coarseValue(ctx2){const value=normalizeValues(ctx2,ctx2.value);set.value(ctx2,value)},setValueAtIndex(ctx2,evt){const value=constrainValue(ctx2,evt.value,evt.index);set.valueAtIndex(ctx2,evt.index,value)},setValue(ctx2,evt){const value=normalizeValues(ctx2,evt.value);set.value(ctx2,value)}}})}var invoke={change:ctx=>{ctx.onValueChange?.({value:Array.from(ctx.value)});dom.dispatchChangeEvent(ctx)},focusChange:ctx=>{ctx.onFocusChange?.({value:Array.from(ctx.value),focusedIndex:ctx.focusedIndex})}};var set={valueAtIndex:(ctx,index,value)=>{if(isEqual(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)},value:(ctx,value)=>{if(isEqual(ctx.value,value))return;assignArray(ctx.value,value);invoke.change(ctx)},focusedIndex:(ctx,index)=>{if(isEqual(ctx.focusedIndex,index))return;ctx.focusedIndex=index;invoke.focusChange(ctx)}};import{createProps}from"@zag-js/types";import{createSplitProps}from"@zag-js/utils";var props=createProps()(["aria-label","aria-labelledby","dir","disabled","form","getAriaValueText","getRootNode","id","ids","invalid","max","min","minStepsBetweenThumbs","name","onFocusChange","onValueChange","onValueChangeEnd","orientation","origin","readOnly","step","thumbAlignment","thumbAlignment","thumbSize","value"]);var splitProps=createSplitProps(props);var thumbProps=createProps()(["index","name"]);var splitThumbProps=createSplitProps(thumbProps);export{anatomy,connect,machine,props,splitProps,splitThumbProps,thumbProps};
+// src/slider.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "valueText",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker"
+);
+var parts = anatomy.build();
+
+// src/slider.connect.ts
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  isLeftClick,
+  isModifierKey
+} from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+import { getPercentValue as getPercentValue2, getValuePercent as getValuePercent2 } from "@zag-js/numeric-range";
+
+// src/slider.dom.ts
+import { getRelativePoint } from "@zag-js/dom-event";
+import { createScope, queryAll } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { getPercentValue } from "@zag-js/numeric-range";
+
+// src/slider.style.ts
+import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
+function getBounds(value) {
+  const firstValue = value[0];
+  const lastThumb = value[value.length - 1];
+  return [firstValue, lastThumb];
+}
+function getRangeOffsets(ctx) {
+  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent);
+  if (ctx.valuePercent.length === 1) {
+    if (ctx.origin === "center") {
+      const isNegative = ctx.valuePercent[0] < 50;
+      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%";
+      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`;
+      return { start, end };
+    }
+    return { start: "0%", end: `${100 - lastPercent}%` };
+  }
+  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
+}
+function getRangeStyle(ctx) {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
+  }
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
+}
+function getVerticalThumbOffset(ctx) {
+  const { height = 0 } = ctx.thumbSize ?? {};
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-height / 2, height / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getHorizontalThumbOffset(ctx) {
+  const { width = 0 } = ctx.thumbSize ?? {};
+  if (ctx.isRtl) {
+    const getValue2 = getValueTransformer([ctx.max, ctx.min], [-width / 2, width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getOffset(ctx, percent) {
+  if (ctx.thumbAlignment === "center")
+    return `${percent}%`;
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getThumbOffset(ctx) {
+  let percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
+  return getOffset(ctx, percent);
+}
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
+function getThumbStyle(ctx, index) {
+  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart";
+  return {
+    visibility: getVisibility(ctx),
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: `var(--slider-thumb-offset-${index})`
+  };
+}
+function getControlStyle() {
+  return {
+    touchAction: "none",
+    userSelect: "none",
+    position: "relative"
+  };
+}
+function getRootStyle(ctx) {
+  const range = getRangeOffsets(ctx);
+  const offsetStyles = ctx.value.reduce((styles, value, index) => {
+    const offset = getThumbOffset({ ...ctx, value });
+    return { ...styles, [`--slider-thumb-offset-${index}`]: offset };
+  }, {});
+  return {
+    ...offsetStyles,
+    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end
+  };
+}
+function getMarkerStyle(ctx, value) {
+  return {
+    // @ts-expect-error
+    visibility: getVisibility(ctx),
+    position: "absolute",
+    pointerEvents: "none",
+    // @ts-expect-error
+    [ctx.isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset({ ...ctx, value }),
+    translate: "var(--tx) var(--ty)",
+    "--tx": ctx.isHorizontal ? ctx.isRtl ? "50%" : "-50%" : "0%",
+    "--ty": !ctx.isHorizontal ? "50%" : "0%"
+  };
+}
+function getMarkerGroupStyle() {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
+    position: "relative"
+  };
+}
+var styleGetterFns = {
+  getRootStyle,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getMarkerStyle,
+  getMarkerGroupStyle
+};
+
+// src/slider.dom.ts
+var dom = createScope({
+  ...styleGetterFns,
+  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
+  getHiddenInputId: (ctx, index) => `slider:${ctx.id}:input:${index}`,
+  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
+  getRangeId: (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
+  getValueTextId: (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:valueText`,
+  getMarkerId: (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getThumbEl: (ctx, index) => dom.getById(ctx, dom.getThumbId(ctx, index)),
+  getHiddenInputEl: (ctx, index) => dom.getById(ctx, dom.getHiddenInputId(ctx, index)),
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getElements: (ctx) => queryAll(dom.getControlEl(ctx), "[role=slider]"),
+  getFirstEl: (ctx) => dom.getElements(ctx)[0],
+  getRangeEl: (ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
+  getValueFromPoint(ctx, point) {
+    const controlEl = dom.getControlEl(ctx);
+    if (!controlEl)
+      return;
+    const relativePoint = getRelativePoint(point, controlEl);
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
+    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
+  },
+  dispatchChangeEvent(ctx) {
+    const valueArray = Array.from(ctx.value);
+    valueArray.forEach((value, index) => {
+      const inputEl = dom.getHiddenInputEl(ctx, index);
+      if (!inputEl)
+        return;
+      dispatchInputValueEvent(inputEl, { value });
+    });
+  }
+});
+
+// src/slider.utils.ts
+import {
+  clampValue,
+  getClosestValueIndex,
+  getNextStepValue,
+  getPreviousStepValue,
+  getValueRanges,
+  snapValueToStep
+} from "@zag-js/numeric-range";
+function normalizeValues(ctx, nextValues) {
+  return nextValues.map((value, index, values) => {
+    return constrainValue({ ...ctx, value: values }, value, index);
+  });
+}
+function getRangeAtIndex(ctx, index) {
+  return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
+}
+function constrainValue(ctx, value, index) {
+  const range = getRangeAtIndex(ctx, index);
+  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+  return clampValue(snapValue, range.min, range.max);
+}
+function decrement(ctx, index, step) {
+  const idx = index ?? ctx.focusedIndex;
+  const range = getRangeAtIndex(ctx, idx);
+  const nextValues = getPreviousStepValue(idx, {
+    ...range,
+    step: step ?? ctx.step,
+    values: ctx.value
+  });
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+  return nextValues;
+}
+function increment(ctx, index, step) {
+  const idx = index ?? ctx.focusedIndex;
+  const range = getRangeAtIndex(ctx, idx);
+  const nextValues = getNextStepValue(idx, {
+    ...range,
+    step: step ?? ctx.step,
+    values: ctx.value
+  });
+  nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+  return nextValues;
+}
+function getClosestIndex(ctx, pointValue) {
+  return getClosestValueIndex(ctx.value, pointValue);
+}
+function assignArray(current, next) {
+  for (let i = 0; i < next.length; i++) {
+    const value = next[i];
+    current[i] = value;
+  }
+}
+
+// src/slider.connect.ts
+function connect(state, send, normalize) {
+  const ariaLabel = state.context["aria-label"];
+  const ariaLabelledBy = state.context["aria-labelledby"];
+  const sliderValue = state.context.value;
+  const focused = state.matches("focus");
+  const dragging = state.matches("dragging");
+  const disabled = state.context.isDisabled;
+  const invalid = state.context.invalid;
+  const interactive = state.context.isInteractive;
+  const isHorizontal = state.context.orientation === "horizontal";
+  const isVertical = state.context.orientation === "vertical";
+  function getValuePercentFn(value) {
+    return getValuePercent2(value, state.context.min, state.context.max);
+  }
+  function getPercentValueFn(percent) {
+    return getPercentValue2(percent, state.context.min, state.context.max, state.context.step);
+  }
+  return {
+    value: state.context.value,
+    dragging,
+    focused,
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    getThumbValue(index) {
+      return sliderValue[index];
+    },
+    setThumbValue(index, value) {
+      send({ type: "SET_VALUE", index, value });
+    },
+    getValuePercent: getValuePercentFn,
+    getPercentValue: getPercentValueFn,
+    getThumbPercent(index) {
+      return getValuePercentFn(sliderValue[index]);
+    },
+    setThumbPercent(index, percent) {
+      const value = getPercentValueFn(percent);
+      send({ type: "SET_VALUE", index, value });
+    },
+    getThumbMin(index) {
+      return getRangeAtIndex(state.context, index).min;
+    },
+    getThumbMax(index) {
+      return getRangeAtIndex(state.context, index).max;
+    },
+    increment(index) {
+      send({ type: "INCREMENT", index });
+    },
+    decrement(index) {
+      send({ type: "DECREMENT", index });
+    },
+    focus() {
+      if (!interactive)
+        return;
+      send({ type: "FOCUS", index: 0 });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        id: dom.getLabelId(state.context),
+        htmlFor: dom.getHiddenInputId(state.context, 0),
+        onClick(event) {
+          if (!interactive)
+            return;
+          event.preventDefault();
+          dom.getFirstEl(state.context)?.focus();
+        },
+        style: {
+          userSelect: "none"
+        }
+      });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        id: dom.getRootId(state.context),
+        dir: state.context.dir,
+        style: dom.getRootStyle(state.context)
+      });
+    },
+    getValueTextProps() {
+      return normalize.element({
+        ...parts.valueText.attrs,
+        dir: state.context.dir,
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        id: dom.getValueTextId(state.context)
+      });
+    },
+    getTrackProps() {
+      return normalize.element({
+        ...parts.track.attrs,
+        dir: state.context.dir,
+        id: dom.getTrackId(state.context),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(focused),
+        style: { position: "relative" }
+      });
+    },
+    getThumbProps(props2) {
+      const { index = 0, name } = props2;
+      const value = sliderValue[index];
+      const range = getRangeAtIndex(state.context, index);
+      const valueText = state.context.getAriaValueText?.({ value, index });
+      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
+      return normalize.element({
+        ...parts.thumb.attrs,
+        dir: state.context.dir,
+        "data-index": index,
+        "data-name": name,
+        id: dom.getThumbId(state.context, index),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(focused && state.context.focusedIndex === index),
+        draggable: false,
+        "aria-disabled": ariaAttr(disabled),
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
+        "aria-orientation": state.context.orientation,
+        "aria-valuemax": range.max,
+        "aria-valuemin": range.min,
+        "aria-valuenow": sliderValue[index],
+        "aria-valuetext": valueText,
+        role: "slider",
+        tabIndex: disabled ? void 0 : 0,
+        style: dom.getThumbStyle(state.context, index),
+        onPointerDown(event) {
+          if (!interactive)
+            return;
+          send({ type: "THUMB_POINTER_DOWN", index });
+          event.stopPropagation();
+        },
+        onBlur() {
+          if (!interactive)
+            return;
+          send("BLUR");
+        },
+        onFocus() {
+          if (!interactive)
+            return;
+          send({ type: "FOCUS", index });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          const step = getEventStep(event) * state.context.step;
+          const keyMap = {
+            ArrowUp() {
+              if (isHorizontal)
+                return;
+              send({ type: "ARROW_INC", step, src: "ArrowUp" });
+            },
+            ArrowDown() {
+              if (isHorizontal)
+                return;
+              send({ type: "ARROW_DEC", step, src: "ArrowDown" });
+            },
+            ArrowLeft() {
+              if (isVertical)
+                return;
+              send({ type: "ARROW_DEC", step, src: "ArrowLeft" });
+            },
+            ArrowRight() {
+              if (isVertical)
+                return;
+              send({ type: "ARROW_INC", step, src: "ArrowRight" });
+            },
+            PageUp() {
+              send({ type: "ARROW_INC", step, src: "PageUp" });
+            },
+            PageDown() {
+              send({ type: "ARROW_DEC", step, src: "PageDown" });
+            },
+            Home() {
+              send("HOME");
+            },
+            End() {
+              send("END");
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      });
+    },
+    getHiddenInputProps(props2) {
+      const { index = 0, name } = props2;
+      return normalize.input({
+        name: name ?? (state.context.name ? state.context.name + (state.context.value.length > 1 ? "[]" : "") : void 0),
+        form: state.context.form,
+        type: "text",
+        hidden: true,
+        defaultValue: state.context.value[index],
+        id: dom.getHiddenInputId(state.context, index)
+      });
+    },
+    getRangeProps() {
+      return normalize.element({
+        id: dom.getRangeId(state.context),
+        ...parts.range.attrs,
+        dir: state.context.dir,
+        "data-focus": dataAttr(focused),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        style: dom.getRangeStyle(state.context)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: state.context.dir,
+        id: dom.getControlId(state.context),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        style: dom.getControlStyle(),
+        onPointerDown(event) {
+          if (!interactive)
+            return;
+          if (!isLeftClick(event))
+            return;
+          if (isModifierKey(event))
+            return;
+          const point = getEventPoint(event);
+          send({ type: "POINTER_DOWN", point });
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      });
+    },
+    getMarkerGroupProps() {
+      return normalize.element({
+        ...parts.markerGroup.attrs,
+        role: "presentation",
+        dir: state.context.dir,
+        "aria-hidden": true,
+        "data-orientation": state.context.orientation,
+        style: dom.getMarkerGroupStyle()
+      });
+    },
+    getMarkerProps(props2) {
+      const style = dom.getMarkerStyle(state.context, props2.value);
+      let markerState;
+      const first = state.context.value[0];
+      const last = state.context.value[state.context.value.length - 1];
+      if (props2.value < first) {
+        markerState = "under-value";
+      } else if (props2.value > last) {
+        markerState = "over-value";
+      } else {
+        markerState = "at-value";
+      }
+      return normalize.element({
+        ...parts.marker.attrs,
+        id: dom.getMarkerId(state.context, props2.value),
+        role: "presentation",
+        dir: state.context.dir,
+        "data-orientation": state.context.orientation,
+        "data-value": props2.value,
+        "data-disabled": dataAttr(disabled),
+        "data-state": markerState,
+        style
+      });
+    }
+  };
+}
+
+// src/slider.machine.ts
+import { createMachine } from "@zag-js/core";
+import { trackPointerMove } from "@zag-js/dom-event";
+import { raf } from "@zag-js/dom-query";
+import { trackElementsSize } from "@zag-js/element-size";
+import { trackFormControl } from "@zag-js/form-utils";
+import { getValuePercent as getValuePercent3 } from "@zag-js/numeric-range";
+import { compact, isEqual } from "@zag-js/utils";
+var isEqualSize = (a, b) => {
+  return a?.width === b?.width && a?.height === b?.height;
+};
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "slider",
+      initial: "idle",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        min: 0,
+        max: 100,
+        step: 1,
+        value: [0],
+        origin: "start",
+        orientation: "horizontal",
+        dir: "ltr",
+        minStepsBetweenThumbs: 0,
+        disabled: false,
+        ...ctx,
+        focusedIndex: -1,
+        fieldsetDisabled: false
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical",
+        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
+        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
+        valuePercent(ctx2) {
+          return ctx2.value.map((value) => 100 * getValuePercent3(value, ctx2.min, ctx2.max));
+        }
+      },
+      watch: {
+        value: ["syncInputElements"]
+      },
+      entry: ["coarseValue"],
+      activities: ["trackFormControlState", "trackThumbsSize"],
+      on: {
+        SET_VALUE: [
+          {
+            guard: "hasIndex",
+            actions: "setValueAtIndex"
+          },
+          { actions: "setValue" }
+        ],
+        INCREMENT: {
+          actions: "incrementThumbAtIndex"
+        },
+        DECREMENT: {
+          actions: "decrementThumbAtIndex"
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+            },
+            FOCUS: {
+              target: "focus",
+              actions: "setFocusedIndex"
+            },
+            THUMB_POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setFocusedIndex", "focusActiveThumb"]
+            }
+          }
+        },
+        focus: {
+          entry: "focusActiveThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+            },
+            THUMB_POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setFocusedIndex", "focusActiveThumb"]
+            },
+            ARROW_DEC: {
+              actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
+            },
+            ARROW_INC: {
+              actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
+            },
+            HOME: {
+              actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
+            },
+            END: {
+              actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
+            },
+            BLUR: {
+              target: "idle",
+              actions: "clearFocusedIndex"
+            }
+          }
+        },
+        dragging: {
+          entry: "focusActiveThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd"
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        hasIndex: (_ctx, evt) => evt.index != null
+      },
+      activities: {
+        trackFormControlState(ctx2, _evt, { initialContext }) {
+          return trackFormControl(dom.getRootEl(ctx2), {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              set.value(ctx2, initialContext.value);
+            }
+          });
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        },
+        trackThumbsSize(ctx2) {
+          if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize)
+            return;
+          return trackElementsSize({
+            getNodes: () => dom.getElements(ctx2),
+            observeMutation: true,
+            callback(size) {
+              if (!size || isEqualSize(ctx2.thumbSize, size))
+                return;
+              ctx2.thumbSize = size;
+            }
+          });
+        }
+      },
+      actions: {
+        syncInputElements(ctx2) {
+          ctx2.value.forEach((value, index) => {
+            const inputEl = dom.getHiddenInputEl(ctx2, index);
+            dom.setValue(inputEl, value);
+          });
+        },
+        invokeOnChangeEnd(ctx2) {
+          ctx2.onValueChangeEnd?.({ value: ctx2.value });
+        },
+        setClosestThumbIndex(ctx2, evt) {
+          const pointValue = dom.getValueFromPoint(ctx2, evt.point);
+          if (pointValue == null)
+            return;
+          const focusedIndex = getClosestIndex(ctx2, pointValue);
+          set.focusedIndex(ctx2, focusedIndex);
+        },
+        setFocusedIndex(ctx2, evt) {
+          set.focusedIndex(ctx2, evt.index);
+        },
+        clearFocusedIndex(ctx2) {
+          set.focusedIndex(ctx2, -1);
+        },
+        setPointerValue(ctx2, evt) {
+          const pointerValue = dom.getValueFromPoint(ctx2, evt.point);
+          if (pointerValue == null)
+            return;
+          const value = constrainValue(ctx2, pointerValue, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, value);
+        },
+        focusActiveThumb(ctx2) {
+          raf(() => {
+            const thumbEl = dom.getThumbEl(ctx2, ctx2.focusedIndex);
+            thumbEl?.focus({ preventScroll: true });
+          });
+        },
+        decrementThumbAtIndex(ctx2, evt) {
+          const value = decrement(ctx2, evt.index, evt.step);
+          set.value(ctx2, value);
+        },
+        incrementThumbAtIndex(ctx2, evt) {
+          const value = increment(ctx2, evt.index, evt.step);
+          set.value(ctx2, value);
+        },
+        setFocusedThumbToMin(ctx2) {
+          const { min } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, min);
+        },
+        setFocusedThumbToMax(ctx2) {
+          const { max } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, max);
+        },
+        coarseValue(ctx2) {
+          const value = normalizeValues(ctx2, ctx2.value);
+          set.value(ctx2, value);
+        },
+        setValueAtIndex(ctx2, evt) {
+          const value = constrainValue(ctx2, evt.value, evt.index);
+          set.valueAtIndex(ctx2, evt.index, value);
+        },
+        setValue(ctx2, evt) {
+          const value = normalizeValues(ctx2, evt.value);
+          set.value(ctx2, value);
+        }
+      }
+    }
+  );
+}
+var invoke = {
+  change: (ctx) => {
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value)
+    });
+    dom.dispatchChangeEvent(ctx);
+  },
+  focusChange: (ctx) => {
+    ctx.onFocusChange?.({
+      value: Array.from(ctx.value),
+      focusedIndex: ctx.focusedIndex
+    });
+  }
+};
+var set = {
+  valueAtIndex: (ctx, index, value) => {
+    if (isEqual(ctx.value[index], value))
+      return;
+    ctx.value[index] = value;
+    invoke.change(ctx);
+  },
+  value: (ctx, value) => {
+    if (isEqual(ctx.value, value))
+      return;
+    assignArray(ctx.value, value);
+    invoke.change(ctx);
+  },
+  focusedIndex: (ctx, index) => {
+    if (isEqual(ctx.focusedIndex, index))
+      return;
+    ctx.focusedIndex = index;
+    invoke.focusChange(ctx);
+  }
+};
+
+// src/slider.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "aria-label",
+  "aria-labelledby",
+  "dir",
+  "disabled",
+  "form",
+  "getAriaValueText",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "max",
+  "min",
+  "minStepsBetweenThumbs",
+  "name",
+  "onFocusChange",
+  "onValueChange",
+  "onValueChangeEnd",
+  "orientation",
+  "origin",
+  "readOnly",
+  "step",
+  "thumbAlignment",
+  "thumbAlignment",
+  "thumbSize",
+  "value"
+]);
+var splitProps = createSplitProps(props);
+var thumbProps = createProps()(["index", "name"]);
+var splitThumbProps = createSplitProps(thumbProps);
+export {
+  anatomy,
+  connect,
+  machine,
+  props,
+  splitProps,
+  splitThumbProps,
+  thumbProps
+};
 //# sourceMappingURL=index.mjs.map