@aspect-ops/exon-ui 0.0.3 → 0.1.0

package/dist/components/Stepper/StepperStep.svelte

@@ -0,0 +1,391 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label: string;
+		description?: string;
+		optional?: boolean;
+		error?: boolean;
+		disabled?: boolean;
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let {
+		label,
+		description,
+		optional = false,
+		error = false,
+		disabled = false,
+		icon,
+		class: className = ''
+	}: Props = $props();
+
+	const context = getContext<{
+		activeStep: number;
+		orientation: 'horizontal' | 'vertical';
+		linear: boolean;
+		totalSteps: number;
+		completedSteps: Set<number>;
+		registerStep: () => number;
+		setActiveStep: (index: number) => void;
+		completeStep: (index: number) => void;
+	}>('stepper');
+
+	let stepIndex = $state(0);
+
+	onMount(() => {
+		stepIndex = context.registerStep();
+	});
+
+	const isActive = $derived(context.activeStep === stepIndex);
+	const isCompleted = $derived(context.completedSteps.has(stepIndex));
+	const isPending = $derived(!isActive && !isCompleted);
+	const isClickable = $derived(
+		!disabled && (!context.linear || isCompleted || context.activeStep >= stepIndex)
+	);
+
+	function handleClick() {
+		if (isClickable) {
+			context.setActiveStep(stepIndex);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+<li
+	class="stepper-step stepper-step--{context.orientation} {className}"
+	class:stepper-step--active={isActive}
+	class:stepper-step--completed={isCompleted}
+	class:stepper-step--pending={isPending}
+	class:stepper-step--error={error}
+	class:stepper-step--disabled={disabled}
+	role="listitem"
+	aria-current={isActive ? 'step' : undefined}
+>
+	{#if isClickable}
+		<button
+			class="stepper-step__button stepper-step__button--clickable"
+			onclick={handleClick}
+			onkeydown={handleKeyDown}
+			type="button"
+			aria-disabled={disabled}
+		>
+			<div class="stepper-step__indicator">
+				{#if icon}
+					{@render icon()}
+				{:else if isCompleted}
+					<svg
+						class="stepper-step__icon"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else if error}
+					<svg
+						class="stepper-step__icon"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else}
+					<span class="stepper-step__number">{stepIndex + 1}</span>
+				{/if}
+			</div>
+
+			<div class="stepper-step__content">
+				<div class="stepper-step__label">
+					{label}
+					{#if optional}
+						<span class="stepper-step__optional">(Optional)</span>
+					{/if}
+				</div>
+				{#if description}
+					<div class="stepper-step__description">{description}</div>
+				{/if}
+			</div>
+		</button>
+	{:else}
+		<div class="stepper-step__button">
+			<div class="stepper-step__indicator">
+				{#if icon}
+					{@render icon()}
+				{:else if isCompleted}
+					<svg
+						class="stepper-step__icon"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else if error}
+					<svg
+						class="stepper-step__icon"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else}
+					<span class="stepper-step__number">{stepIndex + 1}</span>
+				{/if}
+			</div>
+
+			<div class="stepper-step__content">
+				<div class="stepper-step__label">
+					{label}
+					{#if optional}
+						<span class="stepper-step__optional">(Optional)</span>
+					{/if}
+				</div>
+				{#if description}
+					<div class="stepper-step__description">{description}</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#if stepIndex < context.totalSteps - 1}
+		<div class="stepper-step__connector" aria-hidden="true"></div>
+	{/if}
+</li>
+
+<style>
+	.stepper-step {
+		position: relative;
+		display: flex;
+	}
+
+	/* Horizontal orientation */
+	.stepper-step--horizontal {
+		flex-direction: column;
+		flex: 1;
+		align-items: flex-start;
+	}
+
+	.stepper-step--horizontal .stepper-step__button {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.stepper-step--horizontal .stepper-step__connector {
+		position: absolute;
+		top: 1.25rem;
+		left: calc(50% + 1.5rem);
+		right: calc(-50% + 1.5rem);
+		height: 2px;
+		background: var(--color-border, #d9d9d9);
+	}
+
+	.stepper-step--horizontal.stepper-step--completed .stepper-step__connector,
+	.stepper-step--horizontal.stepper-step--active .stepper-step__connector {
+		background: var(--color-primary, #0090ff);
+	}
+
+	/* Vertical orientation */
+	.stepper-step--vertical {
+		flex-direction: row;
+		align-items: flex-start;
+	}
+
+	.stepper-step--vertical .stepper-step__button {
+		flex-direction: row;
+		align-items: flex-start;
+		text-align: left;
+		gap: var(--space-md, 1rem);
+	}
+
+	.stepper-step--vertical .stepper-step__connector {
+		position: absolute;
+		top: 2.5rem;
+		left: 1.25rem;
+		bottom: -0.25rem;
+		width: 2px;
+		background: var(--color-border, #d9d9d9);
+	}
+
+	.stepper-step--vertical.stepper-step--completed .stepper-step__connector,
+	.stepper-step--vertical.stepper-step--active .stepper-step__connector {
+		background: var(--color-primary, #0090ff);
+	}
+
+	/* Button */
+	.stepper-step__button {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		background: none;
+		border: none;
+		padding: 0;
+		font-family: inherit;
+		width: 100%;
+	}
+
+	.stepper-step__button--clickable {
+		cursor: pointer;
+	}
+
+	.stepper-step__button--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #0090ff);
+		outline-offset: 2px;
+		border-radius: var(--radius-md, 0.375rem);
+	}
+
+	/* Indicator */
+	.stepper-step__indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		min-width: 2.5rem;
+		min-height: 2.5rem;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-bg-muted, #f9f9f9);
+		border: 2px solid var(--color-border, #d9d9d9);
+		color: var(--color-text-muted, #646464);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-semibold, 600);
+		transition:
+			background var(--transition-fast, 150ms ease),
+			border-color var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
+	}
+
+	/* Pending state */
+	.stepper-step--pending .stepper-step__indicator {
+		background: var(--color-bg-muted, #f9f9f9);
+		border-color: var(--color-border, #d9d9d9);
+		color: var(--color-text-muted, #646464);
+	}
+
+	/* Active state */
+	.stepper-step--active .stepper-step__indicator {
+		background: var(--color-primary, #0090ff);
+		border-color: var(--color-primary, #0090ff);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	/* Completed state */
+	.stepper-step--completed .stepper-step__indicator {
+		background: var(--color-primary, #0090ff);
+		border-color: var(--color-primary, #0090ff);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	/* Error state */
+	.stepper-step--error .stepper-step__indicator {
+		background: var(--color-error, #e5484d);
+		border-color: var(--color-error, #e5484d);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	/* Disabled state */
+	.stepper-step--disabled .stepper-step__indicator {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Icon */
+	.stepper-step__icon {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	/* Number */
+	.stepper-step__number {
+		line-height: 1;
+	}
+
+	/* Content */
+	.stepper-step__content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+		padding-top: 0.25rem;
+	}
+
+	/* Label */
+	.stepper-step__label {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: var(--font-medium, 500);
+		color: var(--color-text-muted, #646464);
+		transition: color var(--transition-fast, 150ms ease);
+	}
+
+	.stepper-step--active .stepper-step__label {
+		color: var(--color-text, #202020);
+		font-weight: var(--font-semibold, 600);
+	}
+
+	.stepper-step--completed .stepper-step__label {
+		color: var(--color-text, #202020);
+	}
+
+	.stepper-step--error .stepper-step__label {
+		color: var(--color-error, #e5484d);
+	}
+
+	/* Optional */
+	.stepper-step__optional {
+		font-size: var(--text-xs, 0.69rem);
+		font-weight: var(--font-normal, 400);
+		color: var(--color-text-subtle, #838383);
+		margin-left: var(--space-xs, 0.25rem);
+	}
+
+	/* Description */
+	.stepper-step__description {
+		font-size: var(--text-xs, 0.69rem);
+		color: var(--color-text-subtle, #838383);
+		line-height: var(--leading-normal, 1.5);
+	}
+
+	/* Touch targets for mobile */
+	@media (hover: none) and (pointer: coarse) {
+		.stepper-step__button {
+			min-height: var(--touch-target-min, 44px);
+		}
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 640px) {
+		.stepper-step--horizontal .stepper-step__content {
+			display: none;
+		}
+
+		.stepper-step--horizontal .stepper-step__connector {
+			left: calc(50% + 1.25rem);
+			right: calc(-50% + 1.25rem);
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    description?: string;
+    optional?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    icon?: Snippet;
+    class?: string;
+}
+declare const StepperStep: import("svelte").Component<Props, {}, "">;
+type StepperStep = ReturnType<typeof StepperStep>;
+export default StepperStep;

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

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

package/dist/components/Stepper/index.js

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