@aspect-ops/exon-ui 0.0.1 → 0.0.3

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';

package/dist/components/SafeArea/SafeArea.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { SafeAreaEdge, SafeAreaProps } from '../../types/index.js';
+
+	interface Props extends SafeAreaProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		edges = ['top', 'right', 'bottom', 'left'],
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Derive style string based on which edges are selected
+	const style = $derived.by(() => {
+		const styles: string[] = [];
+		if (edges?.includes('top')) styles.push('padding-top: env(safe-area-inset-top)');
+		if (edges?.includes('right')) styles.push('padding-right: env(safe-area-inset-right)');
+		if (edges?.includes('bottom')) styles.push('padding-bottom: env(safe-area-inset-bottom)');
+		if (edges?.includes('left')) styles.push('padding-left: env(safe-area-inset-left)');
+		return styles.join('; ');
+	});
+</script>
+
+<div class="safe-area {className}" {style}>
+	{@render children?.()}
+</div>
+
+<style>
+	.safe-area {
+		box-sizing: border-box;
+	}
+</style>

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

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

package/dist/components/Select/Select.svelte

@@ -79,7 +79,7 @@
 	</SelectPrimitive.Trigger>
 
 	<SelectPrimitive.Portal>
-		<SelectPrimitive.Content class="select__content" sideOffset={4}>
+		<SelectPrimitive.Content class="select__content" sideOffset={4} align="start">
 			<SelectPrimitive.Viewport class="select__viewport">
 				{#each options as option (option.value)}
 					<SelectPrimitive.Item
@@ -195,46 +195,89 @@
 
 	:global(.select__content) {
 		z-index: 50;
-		min-width: 8rem;
 		overflow: hidden;
 		border: 1px solid var(--color-border, #e5e7eb);
 		border-radius: var(--radius-md, 0.375rem);
 		background: var(--color-bg, #ffffff);
-		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+		box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
 		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		/* Match trigger width - bits-ui provides this CSS variable */
+		min-width: var(--bits-floating-anchor-width, 200px);
+		width: var(--bits-floating-anchor-width, auto);
+	}
+
+	:global(.select__content[data-state='open']) {
+		animation: select-in 150ms ease-out;
+	}
+
+	:global(.select__content[data-state='closed']) {
+		animation: select-out 100ms ease-in;
+	}
+
+	@keyframes -global-select-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-select-out {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
 	}
 
 	:global(.select__viewport) {
-		padding: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) 0;
+		max-height: 20rem;
+		overflow-y: auto;
 	}
 
 	:global(.select__item) {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.375rem 0.5rem;
-		border-radius: var(--radius-sm, 0.25rem);
+		padding: 0.625rem 1rem;
 		font-size: var(--text-sm, 0.875rem);
-		line-height: 1.25;
+		line-height: 1.5;
 		color: var(--color-text, #1f2937);
 		cursor: pointer;
 		outline: none;
-		transition: background var(--transition-fast, 150ms ease);
+		transition:
+			background var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
 	}
 
 	:global(.select__item:hover),
 	:global(.select__item[data-highlighted]) {
-		background: var(--color-bg-muted, #f3f4f6);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
 	}
 
 	:global(.select__item[data-selected]) {
-		background: var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
-		color: var(--color-primary, #3b82f6);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
 	}
 
 	:global(.select__item[data-disabled]) {
 		opacity: 0.5;
 		cursor: not-allowed;
+		background: transparent;
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	:global(.select__item[data-disabled]:hover) {
+		background: transparent;
+		color: var(--color-text-muted, #9ca3af);
 	}
 
 	.select__item-text {
@@ -245,7 +288,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--color-primary, #3b82f6);
+		color: currentColor;
 		margin-left: var(--space-sm, 0.5rem);
 	}
 </style>

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { SkeletonProps } from '../../types/index.js';
+
+	interface Props extends SkeletonProps {
+		variant?: 'text' | 'circle' | 'rectangle';
+		width?: string;
+		height?: string;
+		class?: string;
+	}
+
+	let { variant = 'text', width, height, class: className = '' }: Props = $props();
+
+	// Determine default dimensions based on variant
+	const defaultWidth = $derived(
+		variant === 'text' ? '100%' : variant === 'circle' ? '2.5rem' : '100%'
+	);
+	const defaultHeight = $derived(
+		variant === 'text' ? '1rem' : variant === 'circle' ? '2.5rem' : '8rem'
+	);
+
+	// Use provided dimensions or defaults
+	const finalWidth = $derived(width ?? defaultWidth);
+	const finalHeight = $derived(height ?? defaultHeight);
+
+	// Border radius based on variant
+	const borderRadius = $derived(
+		variant === 'circle'
+			? '50%'
+			: variant === 'text'
+				? 'var(--exon-radius-sm, 0.25rem)'
+				: 'var(--exon-radius-md, 0.375rem)'
+	);
+</script>
+
+<div
+	class="skeleton {className}"
+	aria-hidden="true"
+	role="presentation"
+	style="width: {finalWidth}; height: {finalHeight}; border-radius: {borderRadius};"
+></div>
+
+<style>
+	.skeleton {
+		display: block;
+		background: var(--exon-skeleton-bg, var(--color-neutral-200, #e5e7eb));
+		font-family: inherit;
+		animation: skeleton-pulse 1.5s ease-in-out infinite;
+	}
+
+	@keyframes skeleton-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { SkeletonProps } from '../../types/index.js';
+interface Props extends SkeletonProps {
+    variant?: 'text' | 'circle' | 'rectangle';
+    width?: string;
+    height?: string;
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

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

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

package/dist/components/Skeleton/index.js

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