@youcan/celeste 0.21.2 → 0.22.0

package/dist/es/chunks/slider.js

@@ -1,757 +1,8 @@
-import { t as clsx } from "./clsx.js";
-import { t as clamp } from "./clamp.js";
-import { t as createContext } from "./createContext.js";
-import { l as useMounted, p as useVModel } from "./dist2.js";
-import { t as Primitive } from "./Primitive.js";
-import { t as useDirection } from "./useDirection.js";
-import { t as useFormControl } from "./useFormControl.js";
-import { t as useForwardExpose } from "./useForwardExpose.js";
-import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
-import { t as useSize } from "./useSize.js";
-import { t as useCollection } from "./Collection.js";
-import { t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
-import { useDirection as useDirection$1 } from "../use-direction.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toRaw, toRefs, unref, withCtx } from "vue";
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/utils.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 percentage = 100 / (max - min) * (value - min);
-	return clamp(percentage, 0, 100);
-}
-/**
-* Returns a label for each thumb when there are two or more thumbs
-*/
-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;
-}
-/**
-* Given a `values` array and a `nextValue`, determine which value in
-* the array is closest to `nextValue` and return its index.
-*
-* @example
-* // returns 1
-* getClosestValueIndex([10, 30], 25);
-*/
-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);
-}
-/**
-* Offsets the thumb centre point while sliding to ensure it remains
-* within the bounds of the slider when reaching the edges
-*/
-function getThumbInBoundsOffset(width, left, direction) {
-	const halfWidth = width / 2;
-	return (halfWidth - linearScale([0, 50], [0, halfWidth])(left) * direction) * direction;
-}
-/**
-* Gets an array of steps between each value.
-*
-* @example
-* // returns [1, 9]
-* getStepsBetweenValues([10, 11, 20]);
-*/
-function getStepsBetweenValues(values) {
-	return values.slice(0, -1).map((value, index) => values[index + 1] - value);
-}
-/**
-* Verifies the minimum steps between all values is greater than or equal
-* to the expected minimum steps.
-*
-* @example
-* // returns false
-* hasMinStepsBetweenValues([1,2,3], 2);
-*
-* @example
-* // returns true
-* hasMinStepsBetweenValues([1,2,3], 1);
-*/
-function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
-	if (minStepsBetweenValues > 0) {
-		const stepsBetweenValues = getStepsBetweenValues(values);
-		return Math.min(...stepsBetweenValues) >= 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;
-}
-var PAGE_KEYS = ["PageUp", "PageDown"];
-var ARROW_KEYS = [
-	"ArrowUp",
-	"ArrowDown",
-	"ArrowLeft",
-	"ArrowRight"
-];
-var 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"
-	]
-};
-var [injectSliderOrientationContext, provideSliderOrientationContext] = /*#__PURE__*/ createContext(["SliderVertical", "SliderHorizontal"]);
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderHorizontal.js
-var SliderHorizontal_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?.value !== "rtl" && !inverted.value || 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 value = linearScale([0, rect.width - thumbWidth], isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]);
-			rectRef.value = rect;
-			return value(slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0));
-		}
-		provideSliderOrientationContext({
-			startEdge: computed(() => isSlidingFromLeft.value ? "left" : "right"),
-			endEdge: computed(() => isSlidingFromLeft.value ? "right" : "left"),
-			direction: computed(() => isSlidingFromLeft.value ? 1 : -1),
-			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"]);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderVertical.js
-var SliderVertical_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 value = linearScale([0, rect.height - thumbHeight], isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]);
-			const position = slideStart ? event.clientY - rect.top - thumbHeight / 2 : event.clientY - rect.top - (offsetPosition.value ?? 0);
-			rectRef.value = rect;
-			return value(position);
-		}
-		provideSliderOrientationContext({
-			startEdge: computed(() => isSlidingFromBottom.value ? "bottom" : "top"),
-			endEdge: computed(() => isSlidingFromBottom.value ? "top" : "bottom"),
-			direction: computed(() => isSlidingFromBottom.value ? 1 : -1),
-			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"]);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderRoot.js
-var [injectSliderRootContext, provideSliderRootContext] = /*#__PURE__*/ createContext("SliderRoot");
-var SliderRoot_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) {
-			updateValues(value, getClosestValueIndex(currentModelValue.value, value));
-		}
-		function handleSlideMove(value) {
-			updateValues(value, valueIndexToChangeRef.value);
-		}
-		function handleSlideEnd() {
-			const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value];
-			if (currentModelValue.value[valueIndexToChangeRef.value] !== prevValue) emits("valueCommit", toRaw(currentModelValue.value));
-		}
-		function updateValues(value, atIndex, { commit } = { commit: false }) {
-			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) {
-					thumbElements.value[valueIndexToChangeRef.value]?.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 multiplier = unref(PAGE_KEYS).includes(event.key) || event.shiftKey && unref(ARROW_KEYS).includes(event.key) ? 10 : 1;
-							const atIndex = valueIndexToChangeRef.value;
-							const value = currentModelValue.value[atIndex];
-							updateValues(value + unref(step) * multiplier * direction, 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
-			});
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderImpl.js
-var SliderImpl_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) => {
-					if (event.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);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderRange.js
-var SliderRange_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"
-			]);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderThumbImpl.js
-var SliderThumbImpl_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(() => rootContext.modelValue?.value?.[props.index]);
-		const percent = computed(() => value.value === void 0 ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100));
-		const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.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
-			});
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderThumb.js
-var SliderThumb_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"]);
-		};
-	}
-});
-//#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderTrack.js
-var SliderTrack_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"
-			]);
-		};
-	}
-});
+import { useDirection } from "../use-direction.js";
+import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
+import clsx$1 from "clsx";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /* @__PURE__ */ defineComponent({
@@ -785,17 +36,17 @@ var slider_default = /* @__PURE__ */ defineComponent({
 		const emits = __emit;
 		const delegatedProps = useDelegatedProps(props, "class");
 		const forwarded = useForwardPropsEmits(delegatedProps, emits);
-		const dir = useDirection$1(() => props.dir);
+		const dir = useDirection(() => props.dir);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(SliderRoot_default), mergeProps(unref(forwarded), {
-				class: unref(clsx)("celeste-slider", props.class),
+			return openBlock(), createBlock(unref(SliderRoot), mergeProps(unref(forwarded), {
+				class: unref(clsx$1)("celeste-slider", props.class),
 				dir: unref(dir)
 			}), {
-				default: withCtx(() => [createVNode(unref(SliderTrack_default), { class: "celeste-slider-track" }, {
-					default: withCtx(() => [createVNode(unref(SliderRange_default), { class: "celeste-slider-range" })]),
+				default: withCtx(() => [createVNode(unref(SliderTrack), { class: "celeste-slider-track" }, {
+					default: withCtx(() => [createVNode(unref(SliderRange), { class: "celeste-slider-range" })]),
 					_: 1
 				}), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (_, key) => {
-					return openBlock(), createBlock(unref(SliderThumb_default), {
+					return openBlock(), createBlock(unref(SliderThumb), {
 						key,
 						class: "celeste-slider-thumb"
 					});