@aspect-ops/exon-ui 0.0.2 → 0.1.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/Spacer/Spacer.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { SpacerProps, SpacerSize } from '../../types/index.js';
+
+	interface Props extends SpacerProps {}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+</script>
+
+<div class="spacer {className}" data-size={size} aria-hidden="true"></div>
+
+<style>
+	.spacer {
+		font-family: inherit;
+	}
+
+	/* Fixed size spacers */
+	.spacer[data-size='xs'] {
+		height: var(--space-xs, 0.25rem);
+		width: var(--space-xs, 0.25rem);
+	}
+
+	.spacer[data-size='sm'] {
+		height: var(--space-sm, 0.5rem);
+		width: var(--space-sm, 0.5rem);
+	}
+
+	.spacer[data-size='md'] {
+		height: var(--space-md, 1rem);
+		width: var(--space-md, 1rem);
+	}
+
+	.spacer[data-size='lg'] {
+		height: var(--space-lg, 1.5rem);
+		width: var(--space-lg, 1.5rem);
+	}
+
+	.spacer[data-size='xl'] {
+		height: var(--space-xl, 2rem);
+		width: var(--space-xl, 2rem);
+	}
+
+	.spacer[data-size='2xl'] {
+		height: var(--space-2xl, 3rem);
+		width: var(--space-2xl, 3rem);
+	}
+
+	.spacer[data-size='3xl'] {
+		height: var(--space-3xl, 4rem);
+		width: var(--space-3xl, 4rem);
+	}
+
+	/* Fill mode - grows to fill available space in flex container */
+	.spacer[data-size='fill'] {
+		flex: 1;
+	}
+</style>

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

@@ -0,0 +1,6 @@
+import type { SpacerProps } from '../../types/index.js';
+interface Props extends SpacerProps {
+}
+declare const Spacer: import("svelte").Component<Props, {}, "">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

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

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

package/dist/components/Spacer/index.js

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

package/dist/components/Stack/Stack.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { StackDirection, SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+
+	interface Props {
+		direction?: StackDirection;
+		gap?: SpacingToken;
+		align?: GridAlign;
+		justify?: GridJustify;
+		wrap?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		direction = 'column',
+		gap = 'md',
+		align = 'stretch',
+		justify = 'start',
+		wrap = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div
+	class="stack {className}"
+	data-direction={direction}
+	data-gap={gap}
+	data-align={align}
+	data-justify={justify}
+	data-wrap={wrap}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.stack {
+		display: flex;
+		width: 100%;
+		font-family: inherit;
+	}
+
+	/* Direction */
+	.stack[data-direction='row'] {
+		flex-direction: row;
+	}
+	.stack[data-direction='column'] {
+		flex-direction: column;
+	}
+
+	/* Gap sizes using CSS custom properties */
+	.stack[data-gap='xs'] {
+		gap: var(--space-xs, 0.25rem);
+	}
+	.stack[data-gap='sm'] {
+		gap: var(--space-sm, 0.5rem);
+	}
+	.stack[data-gap='md'] {
+		gap: var(--space-md, 1rem);
+	}
+	.stack[data-gap='lg'] {
+		gap: var(--space-lg, 1.5rem);
+	}
+	.stack[data-gap='xl'] {
+		gap: var(--space-xl, 2rem);
+	}
+	.stack[data-gap='2xl'] {
+		gap: var(--space-2xl, 3rem);
+	}
+	.stack[data-gap='3xl'] {
+		gap: var(--space-3xl, 4rem);
+	}
+
+	/* Align items */
+	.stack[data-align='start'] {
+		align-items: start;
+	}
+	.stack[data-align='center'] {
+		align-items: center;
+	}
+	.stack[data-align='end'] {
+		align-items: end;
+	}
+	.stack[data-align='stretch'] {
+		align-items: stretch;
+	}
+
+	/* Justify content */
+	.stack[data-justify='start'] {
+		justify-content: start;
+	}
+	.stack[data-justify='center'] {
+		justify-content: center;
+	}
+	.stack[data-justify='end'] {
+		justify-content: end;
+	}
+	.stack[data-justify='space-between'] {
+		justify-content: space-between;
+	}
+	.stack[data-justify='space-around'] {
+		justify-content: space-around;
+	}
+	.stack[data-justify='space-evenly'] {
+		justify-content: space-evenly;
+	}
+
+	/* Wrap */
+	.stack[data-wrap='true'] {
+		flex-wrap: wrap;
+	}
+	.stack[data-wrap='false'] {
+		flex-wrap: nowrap;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { StackDirection, SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+interface Props {
+    direction?: StackDirection;
+    gap?: SpacingToken;
+    align?: GridAlign;
+    justify?: GridJustify;
+    wrap?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

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

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

package/dist/components/Stack/index.js

@@ -0,0 +1 @@
+export { default as Stack } from './Stack.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;