@aspect-ops/exon-ui 0.0.2 → 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';

package/dist/components/SwipeActions/SwipeAction.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { SwipeActionProps } from '../../types/index.js';
+
+	interface Props extends SwipeActionProps {
+		children?: import('svelte').Snippet;
+		onclick?: () => void;
+	}
+
+	let {
+		color = 'var(--color-primary, #3b82f6)',
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+</script>
+
+<button class="swipe-action-item {className}" style="background: {color}" {onclick}>
+	{@render children?.()}
+</button>
+
+<style>
+	.swipe-action-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		min-width: 80px;
+		height: 100%;
+		border: none;
+		color: white;
+		font-family: inherit;
+		font-size: var(--text-xs, 0.75rem);
+		cursor: pointer;
+		min-height: 44px;
+		padding: var(--space-sm, 0.5rem);
+	}
+
+	.swipe-action-item:focus-visible {
+		outline: 2px solid white;
+		outline-offset: -2px;
+	}
+</style>

package/dist/components/SwipeActions/SwipeAction.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SwipeActionProps } from '../../types/index.js';
+interface Props extends SwipeActionProps {
+    children?: import('svelte').Snippet;
+    onclick?: () => void;
+}
+declare const SwipeAction: import("svelte").Component<Props, {}, "">;
+type SwipeAction = ReturnType<typeof SwipeAction>;
+export default SwipeAction;

package/dist/components/SwipeActions/SwipeActions.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import type { SwipeActionsProps, SwipeActionData } from '../../types/index.js';
+	import { hapticImpact } from '../../utils/haptics.js';
+
+	interface Props extends SwipeActionsProps {
+		children?: import('svelte').Snippet;
+		leftActionsSnippet?: import('svelte').Snippet;
+		rightActionsSnippet?: import('svelte').Snippet;
+	}
+
+	let {
+		leftActions = [],
+		rightActions = [],
+		threshold = 60,
+		disabled = false,
+		class: className = '',
+		children,
+		leftActionsSnippet,
+		rightActionsSnippet
+	}: Props = $props();
+
+	let translateX = $state(0);
+	let isDragging = $state(false);
+	let startX = 0;
+	let containerRef: HTMLDivElement;
+
+	const leftWidth = $derived(leftActions.length * 80);
+	const rightWidth = $derived(rightActions.length * 80);
+
+	function handleTouchStart(e: TouchEvent) {
+		if (disabled) return;
+		isDragging = true;
+		startX = e.touches[0].clientX - translateX;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging || disabled) return;
+		const currentX = e.touches[0].clientX;
+		let newTranslateX = currentX - startX;
+
+		// Limit to action widths with resistance beyond
+		if (newTranslateX > leftWidth) {
+			newTranslateX = leftWidth + (newTranslateX - leftWidth) * 0.2;
+		} else if (newTranslateX < -rightWidth) {
+			newTranslateX = -rightWidth + (newTranslateX + rightWidth) * 0.2;
+		}
+
+		translateX = newTranslateX;
+	}
+
+	function handleTouchEnd() {
+		if (!isDragging) return;
+		isDragging = false;
+
+		// Snap to revealed or closed state
+		if (translateX > threshold && leftActions.length > 0) {
+			translateX = leftWidth;
+			hapticImpact('light');
+		} else if (translateX < -threshold && rightActions.length > 0) {
+			translateX = -rightWidth;
+			hapticImpact('light');
+		} else {
+			translateX = 0;
+		}
+	}
+
+	function executeAction(action: SwipeActionData, side: 'left' | 'right') {
+		hapticImpact('medium');
+		action.onAction?.();
+		translateX = 0;
+	}
+
+	function close() {
+		translateX = 0;
+	}
+</script>
+
+<div class="swipe-actions {className}" bind:this={containerRef}>
+	<!-- Left actions (revealed on swipe right) -->
+	{#if leftActions.length > 0}
+		<div class="swipe-actions__left" style="width: {leftWidth}px">
+			{#if leftActionsSnippet}
+				{@render leftActionsSnippet()}
+			{:else}
+				{#each leftActions as action}
+					<button
+						class="swipe-action"
+						style="background: {action.color || 'var(--color-primary, #3b82f6)'}"
+						onclick={() => executeAction(action, 'left')}
+					>
+						{#if action.icon}
+							<span class="swipe-action__icon">{action.icon}</span>
+						{/if}
+						<span class="swipe-action__label">{action.label}</span>
+					</button>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Main content -->
+	<div
+		class="swipe-actions__content"
+		style="transform: translateX({translateX}px); transition: {isDragging
+			? 'none'
+			: 'transform 0.3s cubic-bezier(0.32, 0.72, 0, 1)'};"
+		ontouchstart={handleTouchStart}
+		ontouchmove={handleTouchMove}
+		ontouchend={handleTouchEnd}
+		ontouchcancel={handleTouchEnd}
+		role="group"
+	>
+		{@render children?.()}
+	</div>
+
+	<!-- Right actions (revealed on swipe left) -->
+	{#if rightActions.length > 0}
+		<div class="swipe-actions__right" style="width: {rightWidth}px">
+			{#if rightActionsSnippet}
+				{@render rightActionsSnippet()}
+			{:else}
+				{#each rightActions as action}
+					<button
+						class="swipe-action"
+						style="background: {action.color || 'var(--color-destructive, #ef4444)'}"
+						onclick={() => executeAction(action, 'right')}
+					>
+						{#if action.icon}
+							<span class="swipe-action__icon">{action.icon}</span>
+						{/if}
+						<span class="swipe-action__label">{action.label}</span>
+					</button>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.swipe-actions {
+		position: relative;
+		overflow: hidden;
+		touch-action: pan-y;
+	}
+
+	.swipe-actions__left,
+	.swipe-actions__right {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+	}
+
+	.swipe-actions__left {
+		left: 0;
+		transform: translateX(-100%);
+	}
+
+	.swipe-actions__right {
+		right: 0;
+		transform: translateX(100%);
+	}
+
+	.swipe-actions__content {
+		position: relative;
+		background: var(--color-bg, #ffffff);
+		z-index: 1;
+	}
+
+	.swipe-action {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		width: 80px;
+		height: 100%;
+		border: none;
+		color: white;
+		font-family: inherit;
+		font-size: var(--text-xs, 0.75rem);
+		cursor: pointer;
+		min-height: 44px;
+	}
+
+	.swipe-action__icon {
+		font-size: 1.25rem;
+	}
+
+	.swipe-action__label {
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { SwipeActionsProps } from '../../types/index.js';
+interface Props extends SwipeActionsProps {
+    children?: import('svelte').Snippet;
+    leftActionsSnippet?: import('svelte').Snippet;
+    rightActionsSnippet?: import('svelte').Snippet;
+}
+declare const SwipeActions: import("svelte").Component<Props, {}, "">;
+type SwipeActions = ReturnType<typeof SwipeActions>;
+export default SwipeActions;

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

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

package/dist/components/SwipeActions/index.js

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