@brumaombra/ui-vintage 0.1.0

package/dist/Slider.vue_vue_type_script_setup_true_lang-D-cAN-4Q.js

@@ -0,0 +1,802 @@
+import { defineComponent, toRefs, ref, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot, resolveDynamicComponent, mergeProps, createCommentVNode, toRaw, onMounted, onUnmounted, createVNode, createElementBlock, Fragment, renderList } from "vue";
+import { c as createContext, u as useForwardPropsEmits } from "./useForwardPropsEmits-DmumnZO5.js";
+import { c as clamp } from "./clamp-D5Ye0kJT.js";
+import { u as useDirection } from "./useDirection-SIyEYNxv.js";
+import { u as useFormControl } from "./useFormControl-7ytzz-r7.js";
+import { u as useForwardExpose } from "./useForwardExpose-CNVHwdF2.js";
+import { u as useCollection } from "./Collection-CmOoLBo7.js";
+import { V as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-DLAsRwUw.js";
+import { P as Primitive } from "./Primitive-D3IcFg81.js";
+import { u as useVModel, c as useMounted } from "./index-C1_fxYhb.js";
+import { u as useSize } from "./useSize-DO9Z3wC4.js";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+import { r as reactiveOmit } from "./index-Dfi5ESP2.js";
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  const percentage = percentPerStep * (value - min);
+  return clamp(percentage, 0, 100);
+}
+function getLabel(index, totalValues) {
+  if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`;
+  else if (totalValues === 2) return ["Minimum", "Maximum"][index];
+  else return void 0;
+}
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1) return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue));
+  const closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+  const rounder = 10 ** decimalCount;
+  return Math.round(value * rounder) / rounder;
+}
+const PAGE_KEYS = ["PageUp", "PageDown"];
+const ARROW_KEYS = [
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight"
+];
+const BACK_KEYS = {
+  "from-left": [
+    "Home",
+    "PageDown",
+    "ArrowDown",
+    "ArrowLeft"
+  ],
+  "from-right": [
+    "Home",
+    "PageDown",
+    "ArrowDown",
+    "ArrowRight"
+  ],
+  "from-bottom": [
+    "Home",
+    "PageDown",
+    "ArrowDown",
+    "ArrowLeft"
+  ],
+  "from-top": [
+    "Home",
+    "PageUp",
+    "ArrowUp",
+    "ArrowLeft"
+  ]
+};
+const [injectSliderOrientationContext, provideSliderOrientationContext] = createContext(["SliderVertical", "SliderHorizontal"]);
+var SliderHorizontal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderHorizontal",
+  props: {
+    dir: {
+      type: String,
+      required: false
+    },
+    min: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    inverted: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: [
+    "slideEnd",
+    "slideStart",
+    "slideMove",
+    "homeKeyDown",
+    "endKeyDown",
+    "stepKeyDown"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { max, min, dir, inverted } = toRefs(props);
+    const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+    const rootContext = injectSliderRootContext();
+    const offsetPosition = ref();
+    const rectRef = ref();
+    const isSlidingFromLeft = computed(() => (dir == null ? void 0 : dir.value) !== "rtl" && !inverted.value || (dir == null ? void 0 : dir.value) !== "ltr" && inverted.value);
+    function getValueFromPointerEvent(event, slideStart) {
+      const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
+      const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+      const thumbWidth = rootContext.thumbAlignment.value === "contain" ? thumb.clientWidth : 0;
+      if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left;
+      const input = [0, rect.width - thumbWidth];
+      const output = isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value];
+      const value = linearScale(input, output);
+      rectRef.value = rect;
+      const position = slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0);
+      return value(position);
+    }
+    const startEdge = computed(() => isSlidingFromLeft.value ? "left" : "right");
+    const endEdge = computed(() => isSlidingFromLeft.value ? "right" : "left");
+    const direction = computed(() => isSlidingFromLeft.value ? 1 : -1);
+    provideSliderOrientationContext({
+      startEdge,
+      endEdge,
+      direction,
+      size: "width"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SliderImpl_default, {
+        ref: unref(forwardRef),
+        dir: unref(dir),
+        "data-orientation": "horizontal",
+        style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && unref(rootContext).thumbAlignment.value === "overflow" ? "translateX(50%)" : "translateX(-50%)" }),
+        onSlideStart: _cache[0] || (_cache[0] = (event) => {
+          const value = getValueFromPointerEvent(event, true);
+          emits("slideStart", value);
+        }),
+        onSlideMove: _cache[1] || (_cache[1] = (event) => {
+          const value = getValueFromPointerEvent(event);
+          emits("slideMove", value);
+        }),
+        onSlideEnd: _cache[2] || (_cache[2] = () => {
+          rectRef.value = void 0;
+          offsetPosition.value = void 0;
+          emits("slideEnd");
+        }),
+        onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
+          const slideDirection = isSlidingFromLeft.value ? "from-left" : "from-right";
+          const isBackKey = unref(BACK_KEYS)[slideDirection].includes(event.key);
+          emits("stepKeyDown", event, isBackKey ? -1 : 1);
+        }),
+        onEndKeyDown: _cache[4] || (_cache[4] = ($event) => emits("endKeyDown", $event)),
+        onHomeKeyDown: _cache[5] || (_cache[5] = ($event) => emits("homeKeyDown", $event))
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["dir", "style"]);
+    };
+  }
+});
+var SliderHorizontal_default = SliderHorizontal_vue_vue_type_script_setup_true_lang_default;
+var SliderVertical_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderVertical",
+  props: {
+    min: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    inverted: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: [
+    "slideEnd",
+    "slideStart",
+    "slideMove",
+    "homeKeyDown",
+    "endKeyDown",
+    "stepKeyDown"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { max, min, inverted } = toRefs(props);
+    const rootContext = injectSliderRootContext();
+    const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+    const offsetPosition = ref();
+    const rectRef = ref();
+    const isSlidingFromBottom = computed(() => !inverted.value);
+    function getValueFromPointerEvent(event, slideStart) {
+      const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
+      const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+      const thumbHeight = rootContext.thumbAlignment.value === "contain" ? thumb.clientHeight : 0;
+      if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top;
+      const input = [0, rect.height - thumbHeight];
+      const output = isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value];
+      const value = linearScale(input, output);
+      const position = slideStart ? event.clientY - rect.top - thumbHeight / 2 : event.clientY - rect.top - (offsetPosition.value ?? 0);
+      rectRef.value = rect;
+      return value(position);
+    }
+    const startEdge = computed(() => isSlidingFromBottom.value ? "bottom" : "top");
+    const endEdge = computed(() => isSlidingFromBottom.value ? "top" : "bottom");
+    const direction = computed(() => isSlidingFromBottom.value ? 1 : -1);
+    provideSliderOrientationContext({
+      startEdge,
+      endEdge,
+      direction,
+      size: "height"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SliderImpl_default, {
+        ref: unref(forwardRef),
+        "data-orientation": "vertical",
+        style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromBottom.value && unref(rootContext).thumbAlignment.value === "overflow" ? "translateY(-50%)" : "translateY(50%)" }),
+        onSlideStart: _cache[0] || (_cache[0] = (event) => {
+          const value = getValueFromPointerEvent(event, true);
+          emits("slideStart", value);
+        }),
+        onSlideMove: _cache[1] || (_cache[1] = (event) => {
+          const value = getValueFromPointerEvent(event);
+          emits("slideMove", value);
+        }),
+        onSlideEnd: _cache[2] || (_cache[2] = () => {
+          rectRef.value = void 0;
+          offsetPosition.value = void 0;
+          emits("slideEnd");
+        }),
+        onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
+          const slideDirection = isSlidingFromBottom.value ? "from-bottom" : "from-top";
+          const isBackKey = unref(BACK_KEYS)[slideDirection].includes(event.key);
+          emits("stepKeyDown", event, isBackKey ? -1 : 1);
+        }),
+        onEndKeyDown: _cache[4] || (_cache[4] = ($event) => emits("endKeyDown", $event)),
+        onHomeKeyDown: _cache[5] || (_cache[5] = ($event) => emits("homeKeyDown", $event))
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["style"]);
+    };
+  }
+});
+var SliderVertical_default = SliderVertical_vue_vue_type_script_setup_true_lang_default;
+const [injectSliderRootContext, provideSliderRootContext] = createContext("SliderRoot");
+var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "SliderRoot",
+  props: {
+    defaultValue: {
+      type: Array,
+      required: false,
+      default: () => [0]
+    },
+    modelValue: {
+      type: [Array, null],
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    orientation: {
+      type: String,
+      required: false,
+      default: "horizontal"
+    },
+    dir: {
+      type: String,
+      required: false
+    },
+    inverted: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100
+    },
+    step: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    minStepsBetweenThumbs: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    thumbAlignment: {
+      type: String,
+      required: false,
+      default: "contain"
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    },
+    name: {
+      type: String,
+      required: false
+    },
+    required: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ["update:modelValue", "valueCommit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = toRefs(props);
+    const dir = useDirection(propDir);
+    const { forwardRef, currentElement } = useForwardExpose();
+    const isFormControl = useFormControl(currentElement);
+    const { CollectionSlot } = useCollection({ isProvider: true });
+    const modelValue = useVModel(props, "modelValue", emits, {
+      defaultValue: props.defaultValue,
+      passive: props.modelValue === void 0
+    });
+    const currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : []);
+    const valueIndexToChangeRef = ref(0);
+    const valuesBeforeSlideStartRef = ref(currentModelValue.value);
+    function handleSlideStart(value) {
+      const closestIndex = getClosestValueIndex(currentModelValue.value, value);
+      updateValues(value, closestIndex);
+    }
+    function handleSlideMove(value) {
+      updateValues(value, valueIndexToChangeRef.value);
+    }
+    function handleSlideEnd() {
+      const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value];
+      const nextValue = currentModelValue.value[valueIndexToChangeRef.value];
+      const hasChanged = nextValue !== prevValue;
+      if (hasChanged) emits("valueCommit", toRaw(currentModelValue.value));
+    }
+    function updateValues(value, atIndex, { commit } = { commit: false }) {
+      var _a;
+      const decimalCount = getDecimalCount(step.value);
+      const snapToStep = roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount);
+      const nextValue = clamp(snapToStep, min.value, max.value);
+      const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex);
+      if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {
+        valueIndexToChangeRef.value = nextValues.indexOf(nextValue);
+        const hasChanged = String(nextValues) !== String(modelValue.value);
+        if (hasChanged && commit) emits("valueCommit", nextValues);
+        if (hasChanged) {
+          (_a = thumbElements.value[valueIndexToChangeRef.value]) == null ? void 0 : _a.focus();
+          modelValue.value = nextValues;
+        }
+      }
+    }
+    const thumbElements = ref([]);
+    provideSliderRootContext({
+      modelValue,
+      currentModelValue,
+      valueIndexToChangeRef,
+      thumbElements,
+      orientation,
+      min,
+      max,
+      disabled,
+      thumbAlignment
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionSlot), null, {
+        default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(orientation) === "horizontal" ? SliderHorizontal_default : SliderVertical_default), mergeProps(_ctx.$attrs, {
+          ref: unref(forwardRef),
+          "as-child": _ctx.asChild,
+          as: _ctx.as,
+          min: unref(min),
+          max: unref(max),
+          dir: unref(dir),
+          inverted: _ctx.inverted,
+          "aria-disabled": unref(disabled),
+          "data-disabled": unref(disabled) ? "" : void 0,
+          onPointerdown: _cache[0] || (_cache[0] = () => {
+            if (!unref(disabled)) valuesBeforeSlideStartRef.value = currentModelValue.value;
+          }),
+          onSlideStart: _cache[1] || (_cache[1] = ($event) => !unref(disabled) && handleSlideStart($event)),
+          onSlideMove: _cache[2] || (_cache[2] = ($event) => !unref(disabled) && handleSlideMove($event)),
+          onSlideEnd: _cache[3] || (_cache[3] = ($event) => !unref(disabled) && handleSlideEnd()),
+          onHomeKeyDown: _cache[4] || (_cache[4] = ($event) => !unref(disabled) && updateValues(unref(min), 0, { commit: true })),
+          onEndKeyDown: _cache[5] || (_cache[5] = ($event) => !unref(disabled) && updateValues(unref(max), currentModelValue.value.length - 1, { commit: true })),
+          onStepKeyDown: _cache[6] || (_cache[6] = (event, direction) => {
+            if (!unref(disabled)) {
+              const isPageKey = unref(PAGE_KEYS).includes(event.key);
+              const isSkipKey = isPageKey || event.shiftKey && unref(ARROW_KEYS).includes(event.key);
+              const multiplier = isSkipKey ? 10 : 1;
+              const atIndex = valueIndexToChangeRef.value;
+              const value = currentModelValue.value[atIndex];
+              const stepInDirection = unref(step) * multiplier * direction;
+              updateValues(value + stepInDirection, atIndex, { commit: true });
+            }
+          })
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) }), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+            key: 0,
+            type: "number",
+            value: unref(modelValue),
+            name: _ctx.name,
+            required: _ctx.required,
+            disabled: unref(disabled),
+            step: unref(step)
+          }, null, 8, [
+            "value",
+            "name",
+            "required",
+            "disabled",
+            "step"
+          ])) : createCommentVNode("v-if", true)]),
+          _: 3
+        }, 16, [
+          "as-child",
+          "as",
+          "min",
+          "max",
+          "dir",
+          "inverted",
+          "aria-disabled",
+          "data-disabled"
+        ]))]),
+        _: 3
+      });
+    };
+  }
+});
+var SliderRoot_default = SliderRoot_vue_vue_type_script_setup_true_lang_default;
+var SliderImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderImpl",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  emits: [
+    "slideStart",
+    "slideMove",
+    "slideEnd",
+    "homeKeyDown",
+    "endKeyDown",
+    "stepKeyDown"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectSliderRootContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({ "data-slider-impl": "" }, props, {
+        onKeydown: _cache[0] || (_cache[0] = (event) => {
+          if (event.key === "Home") {
+            emits("homeKeyDown", event);
+            event.preventDefault();
+          } else if (event.key === "End") {
+            emits("endKeyDown", event);
+            event.preventDefault();
+          } else if (unref(PAGE_KEYS).concat(unref(ARROW_KEYS)).includes(event.key)) {
+            emits("stepKeyDown", event);
+            event.preventDefault();
+          }
+        }),
+        onPointerdown: _cache[1] || (_cache[1] = (event) => {
+          const target = event.target;
+          target.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          if (unref(rootContext).thumbElements.value.includes(target)) target.focus();
+          else emits("slideStart", event);
+        }),
+        onPointermove: _cache[2] || (_cache[2] = (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) emits("slideMove", event);
+        }),
+        onPointerup: _cache[3] || (_cache[3] = (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+            emits("slideEnd", event);
+          }
+        })
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var SliderImpl_default = SliderImpl_vue_vue_type_script_setup_true_lang_default;
+var SliderRange_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderRange",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  setup(__props) {
+    const rootContext = injectSliderRootContext();
+    const orientation = injectSliderOrientationContext();
+    useForwardExpose();
+    const percentages = computed(() => rootContext.currentModelValue.value.map((value) => convertValueToPercentage(value, rootContext.min.value, rootContext.max.value)));
+    const offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value) : 0);
+    const offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        "data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+        "data-orientation": unref(rootContext).orientation.value,
+        "as-child": _ctx.asChild,
+        as: _ctx.as,
+        style: normalizeStyle({
+          [unref(orientation).startEdge.value]: `${offsetStart.value}%`,
+          [unref(orientation).endEdge.value]: `${offsetEnd.value}%`
+        })
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, [
+        "data-disabled",
+        "data-orientation",
+        "as-child",
+        "as",
+        "style"
+      ]);
+    };
+  }
+});
+var SliderRange_default = SliderRange_vue_vue_type_script_setup_true_lang_default;
+var SliderThumbImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "SliderThumbImpl",
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = injectSliderRootContext();
+    const orientation = injectSliderOrientationContext();
+    const { forwardRef, currentElement: thumbElement } = useForwardExpose();
+    const { CollectionItem } = useCollection();
+    const value = computed(() => {
+      var _a, _b;
+      return (_b = (_a = rootContext.modelValue) == null ? void 0 : _a.value) == null ? void 0 : _b[props.index];
+    });
+    const percent = computed(() => value.value === void 0 ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100));
+    const label = computed(() => {
+      var _a, _b;
+      return getLabel(props.index, ((_b = (_a = rootContext.modelValue) == null ? void 0 : _a.value) == null ? void 0 : _b.length) ?? 0);
+    });
+    const size = useSize(thumbElement);
+    const orientationSize = computed(() => size[orientation.size].value);
+    const thumbInBoundsOffset = computed(() => {
+      if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) return 0;
+      else return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction.value);
+    });
+    const isMounted = useMounted();
+    onMounted(() => {
+      rootContext.thumbElements.value.push(thumbElement.value);
+    });
+    onUnmounted(() => {
+      const i = rootContext.thumbElements.value.findIndex((i$1) => i$1 === thumbElement.value) ?? -1;
+      rootContext.thumbElements.value.splice(i, 1);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionItem), null, {
+        default: withCtx(() => [createVNode(unref(Primitive), mergeProps(_ctx.$attrs, {
+          ref: unref(forwardRef),
+          role: "slider",
+          tabindex: unref(rootContext).disabled.value ? void 0 : 0,
+          "aria-label": _ctx.$attrs["aria-label"] || label.value,
+          "data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+          "data-orientation": unref(rootContext).orientation.value,
+          "aria-valuenow": value.value,
+          "aria-valuemin": unref(rootContext).min.value,
+          "aria-valuemax": unref(rootContext).max.value,
+          "aria-orientation": unref(rootContext).orientation.value,
+          "as-child": _ctx.asChild,
+          as: _ctx.as,
+          style: {
+            transform: "var(--reka-slider-thumb-transform)",
+            position: "absolute",
+            [unref(orientation).startEdge.value]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+            display: !unref(isMounted) && value.value === void 0 ? "none" : void 0
+          },
+          onFocus: _cache[0] || (_cache[0] = () => {
+            unref(rootContext).valueIndexToChangeRef.value = _ctx.index;
+          })
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, [
+          "tabindex",
+          "aria-label",
+          "data-disabled",
+          "data-orientation",
+          "aria-valuenow",
+          "aria-valuemin",
+          "aria-valuemax",
+          "aria-orientation",
+          "as-child",
+          "as",
+          "style"
+        ])]),
+        _: 3
+      });
+    };
+  }
+});
+var SliderThumbImpl_default = SliderThumbImpl_vue_vue_type_script_setup_true_lang_default;
+var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderThumb",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { getItems } = useCollection();
+    const { forwardRef, currentElement: thumbElement } = useForwardExpose();
+    const index = computed(() => thumbElement.value ? getItems(true).findIndex((i) => i.ref === thumbElement.value) : -1);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SliderThumbImpl_default, mergeProps({ ref: unref(forwardRef) }, props, { index: index.value }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["index"]);
+    };
+  }
+});
+var SliderThumb_default = SliderThumb_vue_vue_type_script_setup_true_lang_default;
+var SliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "SliderTrack",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  setup(__props) {
+    const rootContext = injectSliderRootContext();
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        "as-child": _ctx.asChild,
+        as: _ctx.as,
+        "data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+        "data-orientation": unref(rootContext).orientation.value
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, [
+        "as-child",
+        "as",
+        "data-disabled",
+        "data-orientation"
+      ]);
+    };
+  }
+});
+var SliderTrack_default = SliderTrack_vue_vue_type_script_setup_true_lang_default;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Slider",
+  props: {
+    defaultValue: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    orientation: {},
+    dir: {},
+    inverted: { type: Boolean },
+    min: {},
+    max: {},
+    step: {},
+    minStepsBetweenThumbs: {},
+    thumbAlignment: {},
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean },
+    class: {}
+  },
+  emits: ["update:modelValue", "valueCommit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SliderRoot_default), mergeProps({
+        "data-slot": "slider",
+        class: unref(cn)(
+          "relative flex w-full cursor-pointer touch-none items-center select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+          props.class
+        )
+      }, unref(forwarded)), {
+        default: withCtx(({ modelValue }) => [
+          createVNode(unref(SliderTrack_default), {
+            "data-slot": "slider-track",
+            class: "bg-muted relative grow overflow-hidden rounded data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(SliderRange_default), {
+                "data-slot": "slider-range",
+                class: "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+              })
+            ]),
+            _: 1
+          }),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(modelValue, (_, key) => {
+            return openBlock(), createBlock(unref(SliderThumb_default), {
+              key,
+              "data-slot": "slider-thumb",
+              class: "bg-white border-primary ring-ring/50 block size-5 shrink-0 rounded border shadow-sm transition-[color,box-shadow,transform] hover:scale-105 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            });
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};