sheer-ui 0.0.0

package/src/lib/components/slider/components/slider.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { untrack } from 'svelte';
+	import { boxWith, type WritableBox } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { SliderRootProps } from '../types.js';
+	import { SliderRootState } from '../slider.svelte.js';
+	import SliderRange from './slider-range.svelte';
+	import SliderThumb from './slider-thumb.svelte';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		onValueChange = () => {},
+		onValueCommit = () => {},
+		disabled = false,
+		min: minProp,
+		max: maxProp,
+		step = 1,
+		dir = 'ltr',
+		autoSort = true,
+		orientation = 'horizontal',
+		thumbPositioning = 'contain',
+		trackPadding,
+		class: className,
+		...restProps
+	}: SliderRootProps = $props();
+
+	// Slider mode is construction-static: the root state chooses a single/multiple class once.
+	const valueType = untrack(() => type);
+
+	const min = $derived.by(() => {
+		if (minProp !== undefined) return minProp;
+		if (Array.isArray(step)) return Math.min(...step);
+		return 0;
+	});
+
+	const max = $derived.by(() => {
+		if (maxProp !== undefined) return maxProp;
+		if (Array.isArray(step)) return Math.max(...step);
+		return 100;
+	});
+
+	function repairUndefinedMultipleControlledValue() {
+		if (value !== undefined) return;
+		if (valueType !== 'multiple') return;
+		value = [];
+	}
+
+	// SSR/initial setup: multiple Slider owns an array shape, even when empty.
+	repairUndefinedMultipleControlledValue();
+
+	$effect.pre(() => {
+		value;
+
+		untrack(() => {
+			/**
+			 * Parent spread-prop resets can make the bindable value undefined again.
+			 * Repairing multiple mode here prevents internal range math from reading
+			 * an undefined array. Single mode is normalized by the root state to the
+			 * current min/step grid so existing onValueChange behavior is preserved.
+			 */
+			repairUndefinedMultipleControlledValue();
+		});
+	});
+
+	const rootState = SliderRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
+			},
+		) as WritableBox<number> | WritableBox<number[]>,
+		// @ts-expect-error - we know
+		onValueCommit: boxWith(() => onValueCommit),
+		disabled: boxWith(() => disabled),
+		min: boxWith(() => min),
+		max: boxWith(() => max),
+		step: boxWith(() => step),
+		dir: boxWith(() => dir),
+		autoSort: boxWith(() => autoSort),
+		orientation: boxWith(() => orientation),
+		thumbPositioning: boxWith(() => thumbPositioning),
+		type: valueType,
+		trackPadding: boxWith(() => trackPadding),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'slider',
+				class: join(
+					'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col',
+					className,
+				),
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<span {...mergedProps}>
+		{#if children}
+			{@render children(rootState.snippetProps)}
+		{:else}
+			{@const { thumbs } = rootState.snippetProps}
+			<span
+				data-orientation={orientation}
+				data-slot="slider-track"
+				class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5">
+				<SliderRange />
+			</span>
+			{#each thumbs as thumb (thumb)}
+				<SliderThumb index={thumb} />
+			{/each}
+		{/if}
+	</span>
+{/if}

package/src/lib/components/slider/helpers.ts

@@ -0,0 +1,249 @@
+import type { StyleProperties } from '../../internal/index.js';
+import type { SliderLabelPosition } from './types.js';
+
+export const getLabelPosition = (direction: 'lr' | 'rl' | 'tb' | 'bt', position: SliderLabelPosition | undefined): SliderLabelPosition =>
+	position ?? (direction === 'lr' || direction === 'rl' ? 'top' : 'left');
+
+export function getRangeStyles(direction: 'lr' | 'rl' | 'tb' | 'bt', min: number, max: number) {
+	const styles: StyleProperties = {
+		position: 'absolute',
+	};
+	if (direction === 'lr') {
+		styles.left = `${min}%`;
+		styles.right = `${max}%`;
+	} else if (direction === 'rl') {
+		styles.right = `${min}%`;
+		styles.left = `${max}%`;
+	} else if (direction === 'bt') {
+		styles.bottom = `${min}%`;
+		styles.top = `${max}%`;
+	} else {
+		styles.top = `${min}%`;
+		styles.bottom = `${max}%`;
+	}
+	return styles;
+}
+
+export function getThumbStyles(direction: 'lr' | 'rl' | 'tb' | 'bt', thumbPos: number) {
+	const styles: StyleProperties = {
+		position: 'absolute',
+	};
+	if (direction === 'lr') {
+		styles.left = `${thumbPos}%`;
+		styles.translate = '-50% 0';
+	} else if (direction === 'rl') {
+		styles.right = `${thumbPos}%`;
+		styles.translate = '50% 0';
+	} else if (direction === 'bt') {
+		styles.bottom = `${thumbPos}%`;
+		styles.translate = '0 50%';
+	} else {
+		styles.top = `${thumbPos}%`;
+		styles.translate = '0 -50%';
+	}
+	return styles;
+}
+
+export function getTickStyles(direction: 'lr' | 'rl' | 'tb' | 'bt', tickPosition: number, offsetPercentage: number) {
+	const style: StyleProperties = {
+		position: 'absolute',
+	};
+
+	if (direction === 'lr') {
+		style.left = `${tickPosition}%`;
+		style.translate = `${offsetPercentage}% 0`;
+	} else if (direction === 'rl') {
+		style.right = `${tickPosition}%`;
+		style.translate = `${-offsetPercentage}% 0`;
+	} else if (direction === 'bt') {
+		style.bottom = `${tickPosition}%`;
+		style.translate = `0 ${-offsetPercentage}%`;
+	} else {
+		style.top = `${tickPosition}%`;
+		style.translate = `0 ${offsetPercentage}%`;
+	}
+
+	return style;
+}
+
+export function getTickLabelStyles(
+	direction: 'lr' | 'rl' | 'tb' | 'bt',
+	tickPosition: number,
+	labelPosition: 'top' | 'bottom' | 'left' | 'right' = 'top',
+) {
+	const style: StyleProperties = {
+		position: 'absolute',
+	};
+
+	if (direction === 'lr' || direction === 'rl') {
+		// Horizontal slider
+		style.left = direction === 'lr' ? `${tickPosition}%` : undefined;
+		style.right = direction === 'rl' ? `${tickPosition}%` : undefined;
+		style.translate = '-50% 0';
+
+		if (labelPosition === 'top') {
+			style.bottom = '100%';
+		} else if (labelPosition === 'bottom') {
+			style.top = '100%';
+		}
+	} else {
+		// Vertical slider - use same positioning as ticks
+		if (direction === 'tb') {
+			style.top = `${tickPosition}%`;
+		} else {
+			style.bottom = `${tickPosition}%`;
+		}
+		style.translate = '0 50%';
+
+		if (labelPosition === 'left') {
+			style.right = '100%';
+		} else if (labelPosition === 'right') {
+			style.left = '100%';
+		}
+	}
+
+	return style;
+}
+
+export function getThumbLabelStyles(
+	direction: 'lr' | 'rl' | 'tb' | 'bt',
+	thumbPosition: number,
+	labelPosition: 'top' | 'bottom' | 'left' | 'right' = 'top',
+) {
+	const style: StyleProperties = {
+		position: 'absolute',
+	};
+
+	if (direction === 'lr' || direction === 'rl') {
+		// Horizontal slider
+		style.left = direction === 'lr' ? `${thumbPosition}%` : undefined;
+		style.right = direction === 'rl' ? `${thumbPosition}%` : undefined;
+		style.translate = '-50% 0';
+
+		if (labelPosition === 'top') {
+			style.bottom = '100%';
+		} else if (labelPosition === 'bottom') {
+			style.top = '100%';
+		}
+	} else {
+		// Vertical slider
+		if (direction === 'tb') {
+			style.top = `${thumbPosition}%`;
+		} else {
+			style.bottom = `${thumbPosition}%`;
+		}
+		style.translate = '0 -50%';
+
+		if (labelPosition === 'left') {
+			style.right = '100%';
+		} else if (labelPosition === 'right') {
+			style.left = '100%';
+		}
+	}
+
+	return style;
+}
+
+/**
+ * Gets the number of decimal places in a number
+ */
+function getDecimalPlaces(num: number): number {
+	if (Math.floor(num) === num) return 0;
+	const str = num.toString();
+	if (str.indexOf('.') !== -1 && str.indexOf('e-') === -1) {
+		return str.split('.')[1]!.length;
+	} else if (str.indexOf('e-') !== -1) {
+		const parts = str.split('e-');
+		return parseInt(parts[1]!, 10);
+	}
+	return 0;
+}
+
+/**
+ * Rounds a number to the specified number of decimal places
+ */
+function roundToPrecision(num: number, precision: number): number {
+	const factor = Math.pow(10, precision);
+	return Math.round(num * factor) / factor;
+}
+
+/**
+ * Normalizes step to always be a sorted array of valid values within min/max range
+ */
+export function normalizeSteps(step: number | number[], min: number, max: number): number[] {
+	if (typeof step === 'number') {
+		// generate regular steps - match original behavior exactly
+		const difference = max - min;
+		let count = Math.ceil(difference / step);
+
+		// Get precision from step to avoid floating point errors
+		const precision = getDecimalPlaces(step);
+
+		// Check if difference is divisible by step using integer arithmetic to avoid floating point errors
+		const factor = Math.pow(10, precision);
+		const intDifference = Math.round(difference * factor);
+		const intStep = Math.round(step * factor);
+
+		if (intDifference % intStep === 0) {
+			count++;
+		}
+
+		const steps: number[] = [];
+		for (let i = 0; i < count; i++) {
+			const value = min + i * step;
+			// Round to the precision of the step to avoid floating point errors
+			const roundedValue = roundToPrecision(value, precision);
+			steps.push(roundedValue);
+		}
+		return steps;
+	}
+
+	return [...new Set(step)].filter((value) => value >= min && value <= max).sort((a, b) => a - b);
+}
+
+/**
+ * Snaps a value to the nearest step in a custom steps array
+ */
+export function snapValueToCustomSteps(value: number, steps: number[]): number {
+	if (steps.length === 0) return value;
+
+	// Find the closest step
+	let closest = steps[0]!;
+	let minDistance = Math.abs(value - closest);
+
+	for (const step of steps) {
+		const distance = Math.abs(value - step);
+		if (distance < minDistance) {
+			minDistance = distance;
+			closest = step;
+		}
+	}
+
+	return closest;
+}
+
+export function normalizeSliderValue(value: number, steps: number[]): number;
+export function normalizeSliderValue(value: number[], steps: number[]): number[];
+export function normalizeSliderValue(value: number | number[], steps: number[]) {
+	if (Array.isArray(value))
+		return value.every((item) => steps.includes(item)) ? value : value.map((item) => snapValueToCustomSteps(item, steps));
+	return steps.includes(value) ? value : snapValueToCustomSteps(value, steps);
+}
+
+/**
+ * Gets the next/previous step value for keyboard navigation
+ */
+export function getAdjacentStepValue(currentValue: number, steps: number[], direction: 'next' | 'prev'): number {
+	const currentIndex = steps.indexOf(currentValue);
+
+	if (currentIndex === -1) {
+		// current value is not in steps, snap to nearest
+		return snapValueToCustomSteps(currentValue, steps);
+	}
+
+	if (direction === 'next') {
+		return currentIndex < steps.length - 1 ? steps[currentIndex + 1]! : currentValue;
+	} else {
+		return currentIndex > 0 ? steps[currentIndex - 1]! : currentValue;
+	}
+}

package/src/lib/components/slider/index.ts

@@ -0,0 +1,15 @@
+export { default as Root, default as Slider } from './components/slider.svelte';
+export { default as Range } from './components/slider-range.svelte';
+export { default as Thumb } from './components/slider-thumb.svelte';
+export { default as Tick } from './components/slider-tick.svelte';
+export { default as TickLabel } from './components/slider-tick-label.svelte';
+export { default as ThumbLabel } from './components/slider-thumb-label.svelte';
+
+export type {
+	SliderRootProps as RootProps,
+	SliderRangeProps as RangeProps,
+	SliderThumbProps as ThumbProps,
+	SliderTickProps as TickProps,
+	SliderTickLabelProps as TickLabelProps,
+	SliderThumbLabelProps as ThumbLabelProps,
+} from './types.js';