@aspect-ops/exon-ui 0.0.1 → 0.0.3

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>

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

@@ -0,0 +1,32 @@
+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;
+}
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Marks the row as selected
+		 * @default false
+		 */
+		selected?: boolean;
+		/**
+		 * Makes the row interactive with hover/active states
+		 * @default false
+		 */
+		clickable?: boolean;
+		/**
+		 * Disables the row
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Table cells content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		selected = false,
+		clickable = false,
+		disabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<tr
+	class="table-row {selected ? 'table-row--selected' : ''} {clickable
+		? 'table-row--clickable'
+		: ''} {disabled ? 'table-row--disabled' : ''} {className}"
+	role={clickable ? 'button' : undefined}
+	aria-selected={selected ? 'true' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={clickable && !disabled ? 0 : undefined}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</tr>
+
+<style>
+	.table-row {
+		font-family: inherit;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	/* Selected state */
+	.table-row--selected {
+		background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
+	}
+
+	/* Clickable state */
+	.table-row--clickable {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.table-row--clickable:hover:not(.table-row--disabled) {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	.table-row--clickable:active:not(.table-row--disabled) {
+		background-color: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	.table-row--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	/* Selected + Clickable hover state */
+	.table-row--selected.table-row--clickable:hover:not(.table-row--disabled) {
+		background-color: var(--color-primary-bg-hover, rgba(59, 130, 246, 0.15));
+	}
+
+	/* Disabled state */
+	.table-row--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+interface Props {
+    /**
+     * Marks the row as selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Makes the row interactive with hover/active states
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Disables the row
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Table cells content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableRow: import("svelte").Component<Props, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

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

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableCell } from './TableCell.svelte';

package/dist/components/Table/index.js

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableCell } from './TableCell.svelte';