@aspect-ops/exon-ui 0.0.2 → 0.0.3

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

package/dist/components/Switch/Switch.svelte

@@ -66,21 +66,34 @@
 		min-width: 2.75rem;
 		min-height: 1.5rem;
 		padding: 2px;
-		border: none;
+		border: 2px solid var(--color-border-strong, #9ca3af);
 		border-radius: 9999px;
-		background: var(--color-bg-muted, #e5e7eb);
+		background: var(--color-bg, #ffffff);
 		cursor: pointer;
-		transition: background var(--transition-fast, 150ms ease);
+		transition:
+			background var(--transition-fast, 150ms ease),
+			border-color var(--transition-fast, 150ms ease);
 		-webkit-tap-highlight-color: transparent;
 	}
 
+	:global(.switch:hover:not(.switch--disabled)) {
+		border-color: var(--color-text-muted, #6b7280);
+	}
+
 	:global(.switch:focus-visible) {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.2));
 	}
 
 	:global(.switch[data-state='checked']) {
 		background: var(--color-primary, #3b82f6);
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	:global(.switch[data-state='checked']:hover:not(.switch--disabled)) {
+		background: var(--color-primary-hover, #2563eb);
+		border-color: var(--color-primary-hover, #2563eb);
 	}
 
 	:global(.switch--disabled) {
@@ -90,16 +103,23 @@
 
 	:global(.switch__thumb) {
 		display: block;
-		width: 1.25rem;
-		height: 1.25rem;
+		width: 1rem;
+		height: 1rem;
 		border-radius: 50%;
-		background: var(--color-bg, #ffffff);
-		box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
-		transition: transform var(--transition-fast, 150ms ease);
+		background: var(--color-border-strong, #9ca3af);
+		box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.15));
+		transition:
+			transform var(--transition-fast, 150ms ease),
+			background var(--transition-fast, 150ms ease);
+	}
+
+	:global(.switch:hover:not(.switch--disabled) .switch__thumb) {
+		background: var(--color-text-muted, #6b7280);
 	}
 
 	:global(.switch[data-state='checked'] .switch__thumb) {
 		transform: translateX(1.25rem);
+		background: var(--color-bg, #ffffff);
 	}
 
 	.switch__label {

package/dist/components/Table/Table.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { TableProps } from '../../types/data-display.js';
+
+	interface Props {
+		/**
+		 * Enable alternating row background colors
+		 * @default false
+		 */
+		striped?: boolean;
+		/**
+		 * Show borders on table cells
+		 * @default false
+		 */
+		bordered?: boolean;
+		/**
+		 * Enable hover effect on table rows
+		 * @default false
+		 */
+		hoverable?: boolean;
+		/**
+		 * Reduce padding for more compact layout
+		 * @default false
+		 */
+		compact?: boolean;
+		/**
+		 * Make table header sticky on scroll
+		 * @default false
+		 */
+		stickyHeader?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Table content (thead, tbody, tfoot)
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		striped = false,
+		bordered = false,
+		hoverable = false,
+		compact = false,
+		stickyHeader = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Build modifier classes
+	let modifierClasses = $derived(
+		[
+			striped ? 'table-container--striped' : '',
+			bordered ? 'table-container--bordered' : '',
+			hoverable ? 'table-container--hoverable' : '',
+			compact ? 'table-container--compact' : '',
+			stickyHeader ? 'table-container--sticky-header' : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="table-container {modifierClasses} {className}">
+	<table class="table">
+		{#if children}
+			{@render children()}
+		{/if}
+	</table>
+</div>
+
+<style>
+	.table-container {
+		/* Horizontal scroll for responsive tables on mobile */
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+		font-family: inherit;
+	}
+
+	.table {
+		width: 100%;
+		border-collapse: collapse;
+		border-spacing: 0;
+		font-family: inherit;
+		font-size: 0.875rem; /* 14px */
+	}
+
+	/* Default cell padding */
+	.table :global(th),
+	.table :global(td) {
+		padding: 0.75rem; /* 12px */
+		text-align: left;
+		vertical-align: middle;
+	}
+
+	/* Header styles */
+	.table :global(thead th) {
+		font-weight: 600;
+		color: var(--color-text-muted, var(--gray-11, inherit));
+		background-color: var(--color-bg-muted, var(--gray-2, #f9fafb));
+		border-bottom: 2px solid var(--color-border, var(--gray-6, #e5e7eb));
+	}
+
+	/* Body cell styles */
+	.table :global(tbody td) {
+		color: var(--color-text, var(--gray-12, inherit));
+		border-bottom: 1px solid var(--color-border, var(--gray-6, #e5e7eb));
+	}
+
+	/* Footer styles */
+	.table :global(tfoot td),
+	.table :global(tfoot th) {
+		font-weight: 600;
+		color: var(--color-text-muted, var(--gray-11, inherit));
+		background-color: var(--color-bg-muted, var(--gray-2, #f9fafb));
+		border-top: 2px solid var(--color-border, var(--gray-6, #e5e7eb));
+	}
+
+	/* Striped modifier - alternating row backgrounds */
+	.table-container--striped .table :global(tbody tr:nth-child(even)) {
+		background-color: var(--color-bg-muted, var(--gray-2, #f9fafb));
+	}
+
+	/* Bordered modifier - borders on all cells */
+	.table-container--bordered .table :global(th),
+	.table-container--bordered .table :global(td) {
+		border: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.table-container--bordered .table :global(thead th) {
+		border-bottom-width: 2px;
+	}
+
+	/* Hoverable modifier - row hover effects */
+	.table-container--hoverable .table :global(tbody tr) {
+		transition: background-color 0.15s ease;
+	}
+
+	.table-container--hoverable .table :global(tbody tr:hover) {
+		background-color: var(--color-bg-hover, var(--gray-4, #f3f4f6));
+		cursor: pointer;
+	}
+
+	/* Compact modifier - reduced padding */
+	.table-container--compact .table :global(th),
+	.table-container--compact .table :global(td) {
+		padding: 0.5rem; /* 8px */
+	}
+
+	/* Sticky header modifier - header stays visible on scroll */
+	.table-container--sticky-header .table :global(thead th) {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		box-shadow: 0 1px 0 0 var(--color-border, var(--gray-6, #e5e7eb));
+	}
+
+	/* Ensure sticky header has proper background */
+	.table-container--sticky-header .table :global(thead th) {
+		background-color: var(--color-bg-muted, var(--gray-2, #f9fafb));
+	}
+
+	/* Right-align numeric columns */
+	.table :global(td.numeric),
+	.table :global(th.numeric) {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Center-align specific columns */
+	.table :global(td.center),
+	.table :global(th.center) {
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+interface Props {
+    /**
+     * Enable alternating row background colors
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Show borders on table cells
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Enable hover effect on table rows
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Reduce padding for more compact layout
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Make table header sticky on scroll
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Table content (thead, tbody, tfoot)
+     */
+    children?: import('svelte').Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;