@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/Popover/index.js

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';

package/dist/components/Progress/ProgressBar.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { ProgressBarProps } from '../../types/index.js';
+
+	interface Props extends ProgressBarProps {
+		value?: number;
+		max?: number;
+		indeterminate?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		indeterminate = false,
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	// Calculate percentage for determinate mode
+	const percentage = $derived(indeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100)));
+</script>
+
+<div
+	class="progress-bar progress-bar--{size} {className}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax={max}
+	aria-valuenow={indeterminate ? undefined : value}
+	aria-label={indeterminate ? 'Loading' : `${Math.round(percentage)}% complete`}
+>
+	<div
+		class="progress-bar__fill"
+		class:progress-bar__fill--indeterminate={indeterminate}
+		style="width: {indeterminate ? '30%' : `${percentage}%`}"
+	></div>
+</div>
+
+<style>
+	.progress-bar {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		background-color: var(--exon-progress-track, var(--color-neutral-200, #e5e7eb));
+		border-radius: var(--exon-radius-full, 9999px);
+		font-family: inherit;
+	}
+
+	/* Size variants */
+	.progress-bar--sm {
+		height: 0.25rem;
+	}
+
+	.progress-bar--md {
+		height: 0.5rem;
+	}
+
+	.progress-bar--lg {
+		height: 0.75rem;
+	}
+
+	/* Progress fill */
+	.progress-bar__fill {
+		height: 100%;
+		background-color: var(--exon-progress-fill, var(--color-primary, #3b82f6));
+		border-radius: var(--exon-radius-full, 9999px);
+		transition: width 0.3s ease;
+	}
+
+	/* Indeterminate animation */
+	.progress-bar__fill--indeterminate {
+		animation: progress-indeterminate 1.5s ease-in-out infinite;
+	}
+
+	@keyframes progress-indeterminate {
+		0% {
+			transform: translateX(-100%);
+		}
+		50% {
+			transform: translateX(350%);
+		}
+		100% {
+			transform: translateX(-100%);
+		}
+	}
+</style>

package/dist/components/Progress/ProgressBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProgressBarProps } from '../../types/index.js';
+interface Props extends ProgressBarProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/Progress/ProgressCircle.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { ProgressCircleProps } from '../../types/index.js';
+
+	interface Props extends ProgressCircleProps {
+		value?: number;
+		max?: number;
+		indeterminate?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		strokeWidth?: number;
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		indeterminate = false,
+		size = 'md',
+		strokeWidth = 4,
+		class: className = ''
+	}: Props = $props();
+
+	// SVG constants
+	const radius = 45;
+	const circumference = 2 * Math.PI * radius;
+
+	// Calculate percentage and stroke-dashoffset for determinate mode
+	const percentage = $derived(indeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100)));
+	const strokeDashoffset = $derived(circumference * (1 - percentage / 100));
+</script>
+
+<div
+	class="progress-circle progress-circle--{size} {className}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax={max}
+	aria-valuenow={indeterminate ? undefined : value}
+	aria-label={indeterminate ? 'Loading' : `${Math.round(percentage)}% complete`}
+>
+	<svg class="progress-circle__svg" viewBox="0 0 100 100">
+		<!-- Track circle (background) -->
+		<circle
+			class="progress-circle__track"
+			cx="50"
+			cy="50"
+			r={radius}
+			fill="none"
+			stroke-width={strokeWidth}
+		/>
+
+		<!-- Progress circle (foreground) -->
+		<circle
+			class="progress-circle__fill"
+			class:progress-circle__fill--indeterminate={indeterminate}
+			cx="50"
+			cy="50"
+			r={radius}
+			fill="none"
+			stroke-width={strokeWidth}
+			stroke-dasharray={circumference}
+			stroke-dashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}
+			stroke-linecap="round"
+		/>
+	</svg>
+</div>
+
+<style>
+	.progress-circle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-family: inherit;
+	}
+
+	/* Size variants */
+	.progress-circle--sm {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	.progress-circle--md {
+		width: 2.5rem;
+		height: 2.5rem;
+	}
+
+	.progress-circle--lg {
+		width: 3.5rem;
+		height: 3.5rem;
+	}
+
+	.progress-circle__svg {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+	}
+
+	/* Track circle (background) */
+	.progress-circle__track {
+		stroke: var(--exon-progress-track, var(--color-neutral-200, #e5e7eb));
+	}
+
+	/* Progress circle (foreground fill) */
+	.progress-circle__fill {
+		stroke: var(--exon-progress-fill, var(--color-primary, #3b82f6));
+		transition: stroke-dashoffset 0.3s ease;
+	}
+
+	/* Indeterminate animation */
+	.progress-circle__fill--indeterminate {
+		animation:
+			progress-circle-rotate 1.5s linear infinite,
+			progress-circle-dash 1.5s ease-in-out infinite;
+	}
+
+	@keyframes progress-circle-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes progress-circle-dash {
+		0% {
+			stroke-dashoffset: 282.74;
+		}
+		50% {
+			stroke-dashoffset: 70.685;
+		}
+		100% {
+			stroke-dashoffset: 282.74;
+		}
+	}
+</style>

package/dist/components/Progress/ProgressCircle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ProgressCircleProps } from '../../types/index.js';
+interface Props extends ProgressCircleProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    strokeWidth?: number;
+    class?: string;
+}
+declare const ProgressCircle: import("svelte").Component<Props, {}, "">;
+type ProgressCircle = ReturnType<typeof ProgressCircle>;
+export default ProgressCircle;

package/dist/components/Progress/Spinner.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { SpinnerProps } from '../../types/index.js';
+
+	interface Props extends SpinnerProps {
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+</script>
+
+<div class="spinner spinner--{size} {className}" role="status" aria-label="Loading">
+	<span class="spinner__visually-hidden">Loading...</span>
+</div>
+
+<style>
+	.spinner {
+		display: inline-block;
+		border-style: solid;
+		border-color: var(--exon-spinner-color, var(--color-primary, #3b82f6)) transparent transparent
+			transparent;
+		border-radius: 50%;
+		animation: spinner-rotate 0.75s linear infinite;
+		font-family: inherit;
+	}
+
+	/* Size variants - diameter and border-width */
+	.spinner--sm {
+		width: 1rem;
+		height: 1rem;
+		border-width: 2px;
+	}
+
+	.spinner--md {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-width: 2px;
+	}
+
+	.spinner--lg {
+		width: 2rem;
+		height: 2rem;
+		border-width: 3px;
+	}
+
+	/* Visually hidden text for screen readers */
+	.spinner__visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+
+	/* Rotation animation */
+	@keyframes spinner-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/components/Progress/Spinner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SpinnerProps } from '../../types/index.js';
+interface Props extends SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ProgressCircle } from './ProgressCircle.svelte';
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/Progress/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ProgressCircle } from './ProgressCircle.svelte';
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/PullToRefresh/PullToRefresh.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+	import type { PullToRefreshProps } from '../../types/index.js';
+	import { hapticImpact } from '../../utils/haptics.js';
+
+	interface Props extends PullToRefreshProps {
+		/** Controlled loading state (bindable) */
+		refreshing?: boolean;
+		/** Pull distance in pixels to trigger refresh (default: 80) */
+		threshold?: number;
+		/** Maximum pull distance in pixels (default: 150) */
+		maxPull?: number;
+		/** Disable pull-to-refresh functionality */
+		disabled?: boolean;
+		/** Additional CSS class */
+		class?: string;
+		/** Called when threshold reached and released */
+		onrefresh?: () => void;
+		/** Content to render inside */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		refreshing = $bindable(false),
+		threshold = 80,
+		maxPull = 150,
+		disabled = false,
+		class: className = '',
+		onrefresh,
+		children
+	}: Props = $props();
+
+	// Touch tracking state
+	let pullDistance = $state(0);
+	let isPulling = $state(false);
+	let startY = $state(0);
+	let currentY = $state(0);
+	let containerEl: HTMLDivElement | undefined = $state();
+	let contentEl: HTMLDivElement | undefined = $state();
+
+	// Calculated values
+	const progress = $derived(Math.min(pullDistance / threshold, 1));
+	const indicatorRotation = $derived(progress * 360);
+	const indicatorY = $derived(Math.min(pullDistance, maxPull) - 40);
+	const indicatorOpacity = $derived(Math.min(progress, 1));
+	const isThresholdReached = $derived(pullDistance >= threshold);
+
+	/**
+	 * Check if content is scrolled to the top
+	 */
+	function isAtScrollTop(): boolean {
+		if (!contentEl) return true;
+		return contentEl.scrollTop <= 0;
+	}
+
+	/**
+	 * Apply resistance to pull distance for natural feel
+	 */
+	function applyResistance(distance: number): number {
+		if (distance <= 0) return 0;
+		// Diminishing returns after threshold
+		const resistance = distance > threshold ? 0.4 : 0.6;
+		return Math.min(distance * resistance, maxPull);
+	}
+
+	/**
+	 * Handle touch start
+	 */
+	function handleTouchStart(e: TouchEvent) {
+		if (disabled || refreshing) return;
+		if (!isAtScrollTop()) return;
+		if (e.touches.length !== 1) return;
+
+		startY = e.touches[0].clientY;
+		currentY = startY;
+		isPulling = false;
+	}
+
+	/**
+	 * Handle touch move
+	 */
+	function handleTouchMove(e: TouchEvent) {
+		if (disabled || refreshing) return;
+		if (e.touches.length !== 1) return;
+
+		const touchY = e.touches[0].clientY;
+		const rawDistance = touchY - startY;
+
+		// Only start pulling if we're at scroll top and pulling down
+		if (!isPulling) {
+			if (rawDistance > 0 && isAtScrollTop()) {
+				isPulling = true;
+				startY = touchY; // Reset start position when pull begins
+			} else {
+				return;
+			}
+		}
+
+		// Calculate pull distance with resistance
+		currentY = touchY;
+		const actualDistance = currentY - startY;
+
+		if (actualDistance > 0) {
+			pullDistance = applyResistance(actualDistance);
+			// Prevent scroll while pulling
+			e.preventDefault();
+		} else {
+			// Reset if user pushes back up
+			pullDistance = 0;
+		}
+	}
+
+	/**
+	 * Handle touch end
+	 */
+	async function handleTouchEnd() {
+		if (disabled) return;
+
+		if (isPulling && isThresholdReached && !refreshing) {
+			// Trigger haptic feedback
+			await hapticImpact('medium');
+
+			// Trigger refresh
+			refreshing = true;
+			onrefresh?.();
+		}
+
+		// Animate back
+		isPulling = false;
+
+		if (!refreshing) {
+			pullDistance = 0;
+		}
+	}
+
+	/**
+	 * Handle touch cancel
+	 */
+	function handleTouchCancel() {
+		isPulling = false;
+		if (!refreshing) {
+			pullDistance = 0;
+		}
+	}
+
+	// Watch for refreshing state changes to reset pull distance
+	$effect(() => {
+		if (!refreshing && pullDistance > 0) {
+			pullDistance = 0;
+		}
+	});
+</script>
+
+<div
+	bind:this={containerEl}
+	class="ptr-container {className}"
+	class:ptr-container--pulling={isPulling}
+	class:ptr-container--refreshing={refreshing}
+	class:ptr-container--disabled={disabled}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+	ontouchcancel={handleTouchCancel}
+>
+	<!-- Pull indicator -->
+	<div
+		class="ptr-indicator"
+		class:ptr-indicator--visible={pullDistance > 0 || refreshing}
+		class:ptr-indicator--threshold-reached={isThresholdReached}
+		class:ptr-indicator--refreshing={refreshing}
+		style="transform: translateY({refreshing ? 20 : indicatorY}px); opacity: {refreshing
+			? 1
+			: indicatorOpacity};"
+		aria-hidden="true"
+	>
+		<div
+			class="ptr-spinner"
+			class:ptr-spinner--spinning={refreshing}
+			style="transform: rotate({refreshing ? 0 : indicatorRotation}deg);"
+		>
+			<svg viewBox="0 0 24 24" class="ptr-spinner__icon">
+				<path
+					d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+					fill="currentColor"
+				/>
+			</svg>
+		</div>
+	</div>
+
+	<!-- Content wrapper -->
+	<div
+		bind:this={contentEl}
+		class="ptr-content"
+		style="transform: translateY({refreshing ? threshold * 0.5 : pullDistance}px);"
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.ptr-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		touch-action: pan-y;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.ptr-container--disabled {
+		pointer-events: none;
+	}
+
+	.ptr-indicator {
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		background: var(--color-bg, #ffffff);
+		box-shadow: var(
+			--shadow-md,
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06)
+		);
+		opacity: 0;
+		pointer-events: none;
+		z-index: 10;
+		margin-left: -20px;
+		transition: opacity 0.2s ease;
+	}
+
+	.ptr-indicator--visible {
+		opacity: 1;
+	}
+
+	.ptr-indicator--threshold-reached {
+		background: var(--color-primary-light, #dbeafe);
+	}
+
+	.ptr-indicator--refreshing {
+		background: var(--color-bg, #ffffff);
+	}
+
+	.ptr-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		color: var(--color-primary, #3b82f6);
+		transition: transform 0.1s linear;
+	}
+
+	.ptr-spinner--spinning {
+		animation: ptr-spin 1s linear infinite;
+	}
+
+	.ptr-spinner__icon {
+		width: 100%;
+		height: 100%;
+	}
+
+	.ptr-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+		-webkit-overflow-scrolling: touch;
+		will-change: transform;
+		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.ptr-container--pulling .ptr-content {
+		transition: none;
+	}
+
+	.ptr-container--refreshing .ptr-content {
+		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	/* Spinning animation */
+	@keyframes ptr-spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Ensure minimum touch target size (F20 standard) */
+	.ptr-indicator {
+		min-width: 44px;
+		min-height: 44px;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { PullToRefreshProps } from '../../types/index.js';
+interface Props extends PullToRefreshProps {
+    /** Controlled loading state (bindable) */
+    refreshing?: boolean;
+    /** Pull distance in pixels to trigger refresh (default: 80) */
+    threshold?: number;
+    /** Maximum pull distance in pixels (default: 150) */
+    maxPull?: number;
+    /** Disable pull-to-refresh functionality */
+    disabled?: boolean;
+    /** Additional CSS class */
+    class?: string;
+    /** Called when threshold reached and released */
+    onrefresh?: () => void;
+    /** Content to render inside */
+    children?: import('svelte').Snippet;
+}
+declare const PullToRefresh: import("svelte").Component<Props, {}, "refreshing">;
+type PullToRefresh = ReturnType<typeof PullToRefresh>;
+export default PullToRefresh;

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

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

package/dist/components/PullToRefresh/index.js

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