@aspect-ops/exon-ui 0.0.2 → 0.1.0

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;

package/dist/components/Table/TableBody.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Table rows content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<tbody class="table-body {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</tbody>
+
+<style>
+	.table-body {
+		font-family: inherit;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Table rows content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableBody: import("svelte").Component<Props, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Text alignment
+		 * @default 'left'
+		 */
+		align?: 'left' | 'center' | 'right';
+		/**
+		 * Truncate long text with ellipsis
+		 * @default false
+		 */
+		truncate?: boolean;
+		/**
+		 * Prevent text wrapping
+		 * @default false
+		 */
+		nowrap?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Cell content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		align = 'left',
+		truncate = false,
+		nowrap = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Build modifier classes
+	let modifierClasses = $derived(
+		[
+			align !== 'left' ? `table-cell--align-${align}` : '',
+			truncate ? 'table-cell--truncate' : '',
+			nowrap ? 'table-cell--nowrap' : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<td class="table-cell {modifierClasses} {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</td>
+
+<style>
+	.table-cell {
+		padding: 0.75rem; /* 12px */
+		font-family: inherit;
+		font-size: 0.875rem; /* 14px */
+		color: var(--color-text, var(--gray-12, inherit));
+		border-bottom: 1px solid var(--color-border, var(--gray-6, #e5e7eb));
+		vertical-align: middle;
+	}
+
+	/* Alignment modifiers */
+	.table-cell--align-center {
+		text-align: center;
+	}
+
+	.table-cell--align-right {
+		text-align: right;
+	}
+
+	/* Truncate modifier - truncate long text with ellipsis */
+	.table-cell--truncate {
+		max-width: 12.5rem; /* 200px */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Nowrap modifier - prevent text wrapping */
+	.table-cell--nowrap {
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+interface Props {
+    /**
+     * Text alignment
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Truncate long text with ellipsis
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Prevent text wrapping
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Cell content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableCell: import("svelte").Component<Props, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/Table/TableHead.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Header rows content (TableHeader components)
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<thead class="table-head {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</thead>
+
+<style>
+	.table-head {
+		font-family: inherit;
+	}
+
+	.table-head :global(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));
+		padding: 0.75rem; /* 12px */
+		text-align: left;
+		vertical-align: middle;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Header rows content (TableHeader components)
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableHead: import("svelte").Component<Props, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/components/Table/TableHeader.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Enable sortable functionality with click/keyboard interaction
+		 * @default false
+		 */
+		sortable?: boolean;
+		/**
+		 * Current sort direction (when sortable is true)
+		 * @default null
+		 */
+		sortDirection?: 'asc' | 'desc' | null;
+		/**
+		 * Callback fired when sort is triggered (click or keyboard)
+		 */
+		onsort?: () => void;
+		/**
+		 * Text alignment
+		 * @default 'left'
+		 */
+		align?: 'left' | 'center' | 'right';
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Header cell content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		sortable = false,
+		sortDirection = null,
+		onsort,
+		align = 'left',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	function handleClick() {
+		if (sortable && onsort) {
+			onsort();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (sortable && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			if (onsort) {
+				onsort();
+			}
+		}
+	}
+
+	// Build modifier classes
+	let modifierClasses = $derived(
+		[
+			sortable ? 'table-header--sortable' : '',
+			sortDirection ? `table-header--sorted-${sortDirection}` : '',
+			align !== 'left' ? `table-header--align-${align}` : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<th
+	scope="col"
+	class="table-header {modifierClasses} {className}"
+	role={sortable ? 'button' : undefined}
+	tabindex={sortable ? 0 : undefined}
+	aria-sort={sortDirection === 'asc'
+		? 'ascending'
+		: sortDirection === 'desc'
+			? 'descending'
+			: undefined}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	<div class="table-header__content">
+		{#if children}
+			{@render children()}
+		{/if}
+		{#if sortable}
+			<span class="table-header__sort-indicator" aria-hidden="true">
+				<svg
+					class="table-header__sort-icon table-header__sort-icon--asc"
+					width="12"
+					height="12"
+					viewBox="0 0 12 12"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M6 3L9 7H3L6 3Z" fill="currentColor" />
+				</svg>
+				<svg
+					class="table-header__sort-icon table-header__sort-icon--desc"
+					width="12"
+					height="12"
+					viewBox="0 0 12 12"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M6 9L3 5H9L6 9Z" fill="currentColor" />
+				</svg>
+			</span>
+		{/if}
+	</div>
+</th>
+
+<style>
+	.table-header {
+		font-family: inherit;
+		position: relative;
+		user-select: none;
+	}
+
+	.table-header__content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem; /* 8px */
+		min-height: 2.75rem; /* 44px minimum touch target */
+	}
+
+	/* Sortable styles */
+	.table-header--sortable {
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	.table-header--sortable:hover {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	.table-header--sortable:active {
+		background-color: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	.table-header--sortable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	/* Sort indicator */
+	.table-header__sort-indicator {
+		display: flex;
+		flex-direction: column;
+		gap: 0.0625rem; /* 1px */
+		flex-shrink: 0;
+		opacity: 0.4;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	.table-header--sortable:hover .table-header__sort-indicator {
+		opacity: 0.6;
+	}
+
+	.table-header__sort-icon {
+		display: block;
+		width: 0.75rem; /* 12px */
+		height: 0.75rem; /* 12px */
+		color: currentColor;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	/* Default state - both arrows visible but dimmed */
+	.table-header__sort-icon--asc,
+	.table-header__sort-icon--desc {
+		opacity: 0.5;
+	}
+
+	/* Ascending state - highlight up arrow */
+	.table-header--sorted-asc .table-header__sort-indicator {
+		opacity: 1;
+	}
+
+	.table-header--sorted-asc .table-header__sort-icon--asc {
+		opacity: 1;
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.table-header--sorted-asc .table-header__sort-icon--desc {
+		opacity: 0.2;
+	}
+
+	/* Descending state - highlight down arrow */
+	.table-header--sorted-desc .table-header__sort-indicator {
+		opacity: 1;
+	}
+
+	.table-header--sorted-desc .table-header__sort-icon--desc {
+		opacity: 1;
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.table-header--sorted-desc .table-header__sort-icon--asc {
+		opacity: 0.2;
+	}
+
+	/* Alignment modifiers */
+	.table-header--align-center {
+		text-align: center;
+	}
+
+	.table-header--align-center .table-header__content {
+		justify-content: center;
+	}
+
+	.table-header--align-right {
+		text-align: right;
+	}
+
+	.table-header--align-right .table-header__content {
+		justify-content: flex-end;
+	}
+</style>