@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		showValue?: boolean;
+		showTicks?: boolean;
+		class?: string;
+		onchange?: (value: number) => void;
+	}
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		showValue = false,
+		showTicks = false,
+		class: className = '',
+		onchange
+	}: Props = $props();
+
+	let sliderRef: HTMLDivElement | null = $state(null);
+	let isDragging = $state(false);
+	let thumbRef: HTMLDivElement | null = $state(null);
+
+	// Calculate percentage for positioning
+	const percentage = $derived(((value - min) / (max - min)) * 100);
+
+	// Snap to nearest step
+	function snapToStep(val: number): number {
+		const snapped = Math.round(val / step) * step;
+		return Math.max(min, Math.min(max, snapped));
+	}
+
+	// Update value from position
+	function updateValueFromPosition(clientX: number) {
+		if (disabled || !sliderRef) return;
+
+		const rect = sliderRef.getBoundingClientRect();
+		const position = (clientX - rect.left) / rect.width;
+		const rawValue = position * (max - min) + min;
+		const newValue = snapToStep(rawValue);
+
+		if (newValue !== value) {
+			value = newValue;
+			onchange?.(newValue);
+		}
+	}
+
+	// Mouse/Touch handlers
+	function handlePointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		isDragging = true;
+		updateValueFromPosition(e.clientX);
+
+		// Capture pointer for smooth dragging
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!isDragging || disabled) return;
+		e.preventDefault();
+		updateValueFromPosition(e.clientX);
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		if (isDragging) {
+			isDragging = false;
+			(e.target as HTMLElement).releasePointerCapture(e.pointerId);
+		}
+	}
+
+	// Track click handler
+	function handleTrackClick(e: MouseEvent) {
+		if (disabled) return;
+		// Only update if clicking on track, not thumb
+		if (e.target === thumbRef) return;
+		updateValueFromPosition(e.clientX);
+	}
+
+	// Keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		if (disabled) return;
+
+		let newValue = value;
+		const largeStep = (max - min) * 0.1; // 10% for Page Up/Down
+
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				e.preventDefault();
+				newValue = Math.min(max, value + step);
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				e.preventDefault();
+				newValue = Math.max(min, value - step);
+				break;
+			case 'PageUp':
+				e.preventDefault();
+				newValue = Math.min(max, value + largeStep);
+				break;
+			case 'PageDown':
+				e.preventDefault();
+				newValue = Math.max(min, value - largeStep);
+				break;
+			case 'Home':
+				e.preventDefault();
+				newValue = min;
+				break;
+			case 'End':
+				e.preventDefault();
+				newValue = max;
+				break;
+			default:
+				return;
+		}
+
+		newValue = snapToStep(newValue);
+		if (newValue !== value) {
+			value = newValue;
+			onchange?.(newValue);
+		}
+	}
+
+	// Generate tick marks
+	function generateTicks(): number[] {
+		const ticks: number[] = [];
+		for (let i = min; i <= max; i += step) {
+			ticks.push(i);
+		}
+		return ticks;
+	}
+
+	const ticks = $derived(showTicks ? generateTicks() : []);
+</script>
+
+<div class="slider-container {className}">
+	<div
+		bind:this={sliderRef}
+		class="slider-track"
+		class:slider-track--disabled={disabled}
+		onclick={handleTrackClick}
+		role="presentation"
+	>
+		<!-- Filled portion of track -->
+		<div class="slider-track-fill" style="width: {percentage}%"></div>
+
+		<!-- Tick marks -->
+		{#if showTicks}
+			<div class="slider-ticks">
+				{#each ticks as tick}
+					<div class="slider-tick" style="left: {((tick - min) / (max - min)) * 100}%"></div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Draggable thumb -->
+		<div
+			bind:this={thumbRef}
+			class="slider-thumb"
+			class:slider-thumb--dragging={isDragging}
+			class:slider-thumb--disabled={disabled}
+			style="left: {percentage}%"
+			role="slider"
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={value}
+			aria-orientation="horizontal"
+			aria-disabled={disabled}
+			tabindex={disabled ? -1 : 0}
+			onpointerdown={handlePointerDown}
+			onpointermove={handlePointerMove}
+			onpointerup={handlePointerUp}
+			onkeydown={handleKeyDown}
+		>
+			{#if showValue}
+				<div class="slider-value-tooltip">{value}</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.slider-container {
+		position: relative;
+		width: 100%;
+		padding: var(--space-md, 1rem) 0;
+	}
+
+	.slider-track {
+		position: relative;
+		width: 100%;
+		height: 6px;
+		background: var(--color-bg-subtle, #f0f0f0);
+		border-radius: var(--radius-full, 9999px);
+		cursor: pointer;
+		touch-action: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.slider-track--disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.slider-track-fill {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: var(--color-primary, #0090ff);
+		border-radius: var(--radius-full, 9999px);
+		transition: width var(--transition-fast, 150ms ease);
+		pointer-events: none;
+	}
+
+	.slider-ticks {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.slider-tick {
+		position: absolute;
+		top: 50%;
+		width: 2px;
+		height: 8px;
+		background: var(--color-border, #d9d9d9);
+		transform: translate(-50%, -50%);
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.slider-thumb {
+		position: absolute;
+		top: 50%;
+		width: 20px;
+		height: 20px;
+		background: var(--color-bg-elevated, #ffffff);
+		border: 2px solid var(--color-primary, #0090ff);
+		border-radius: 50%;
+		box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+		transform: translate(-50%, -50%);
+		cursor: grab;
+		transition:
+			left var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease),
+			transform var(--transition-fast, 150ms ease);
+		touch-action: none;
+		-webkit-tap-highlight-color: transparent;
+
+		/* Ensure 44px touch target */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.slider-thumb::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: var(--touch-target-min, 44px);
+		height: var(--touch-target-min, 44px);
+		transform: translate(-50%, -50%);
+		border-radius: 50%;
+	}
+
+	.slider-thumb:hover:not(.slider-thumb--disabled) {
+		box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		transform: translate(-50%, -50%) scale(1.1);
+	}
+
+	.slider-thumb:focus-visible {
+		outline: none;
+		box-shadow:
+			var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)),
+			0 0 0 3px var(--color-primary-bg, rgba(0, 144, 255, 0.2));
+	}
+
+	.slider-thumb--dragging {
+		cursor: grabbing;
+		box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		transform: translate(-50%, -50%) scale(1.15);
+	}
+
+	.slider-thumb--disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.slider-value-tooltip {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		background: var(--color-text, #202020);
+		color: var(--color-text-inverse, #ffffff);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: var(--font-medium, 500);
+		border-radius: var(--radius-md, 0.375rem);
+		white-space: nowrap;
+		pointer-events: none;
+		box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+	}
+
+	.slider-value-tooltip::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border: 4px solid transparent;
+		border-top-color: var(--color-text, #202020);
+	}
+</style>

package/dist/components/Slider/Slider.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    showTicks?: boolean;
+    class?: string;
+    onchange?: (value: number) => void;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.svelte';

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.svelte';

package/dist/components/Stepper/Stepper.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		activeStep?: number;
+		orientation?: 'horizontal' | 'vertical';
+		linear?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		activeStep = $bindable(0),
+		orientation = 'horizontal',
+		linear = true,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Track completed steps
+	let completedSteps = $state<Set<number>>(new Set());
+
+	// Track total steps
+	let totalSteps = $state(0);
+
+	// Context for child steps
+	const stepperContext = {
+		get activeStep() {
+			return activeStep;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get linear() {
+			return linear;
+		},
+		get totalSteps() {
+			return totalSteps;
+		},
+		get completedSteps() {
+			return completedSteps;
+		},
+		registerStep: () => {
+			const stepIndex = totalSteps;
+			totalSteps++;
+			return stepIndex;
+		},
+		setActiveStep: (index: number) => {
+			if (!linear || completedSteps.has(index) || index <= activeStep) {
+				// Mark previous steps as completed
+				for (let i = 0; i < index; i++) {
+					completedSteps.add(i);
+				}
+				activeStep = index;
+			}
+		},
+		completeStep: (index: number) => {
+			completedSteps.add(index);
+		}
+	};
+
+	setContext('stepper', stepperContext);
+</script>
+
+<nav class="stepper stepper--{orientation} {className}" aria-label="Progress">
+	<ol class="stepper__list" role="list">
+		{#if children}
+			{@render children()}
+		{/if}
+	</ol>
+</nav>
+
+<style>
+	.stepper {
+		font-family: inherit;
+		width: 100%;
+	}
+
+	.stepper__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+	}
+
+	/* Horizontal Layout */
+	.stepper--horizontal .stepper__list {
+		flex-direction: row;
+		align-items: flex-start;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	/* Vertical Layout */
+	.stepper--vertical .stepper__list {
+		flex-direction: column;
+		align-items: stretch;
+		gap: var(--space-xs, 0.25rem);
+	}
+</style>

package/dist/components/Stepper/Stepper.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    activeStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    linear?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Stepper: import("svelte").Component<Props, {}, "activeStep">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;