@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/data/Table.svelte

@@ -1,76 +1,443 @@
-<script lang="ts">
-	interface Props {
-		striped?: boolean;
-		hoverable?: boolean;
-		compact?: boolean;
-		children?: import('svelte').Snippet;
-	}
-
-	let { striped = false, hoverable = true, compact = false, children }: Props = $props();
-</script>
-
-<div class="glass-panel rounded-[var(--radius-xl)] overflow-hidden">
-	<table class="mrdv-table w-full" class:striped class:hoverable class:compact>
-		{@render children?.()}
-	</table>
-</div>
-
-<style>
-	.mrdv-table :global(thead) {
-		background: var(--color-base-2);
-		border-bottom: 2px solid var(--color-border-strong);
-	}
-
-	.mrdv-table :global(thead th) {
-		color: var(--color-text);
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		text-align: left;
-	}
-
-	.mrdv-table.compact :global(th),
-	.mrdv-table.compact :global(td) {
-		padding: 0.5rem 1rem;
-	}
-
-	.mrdv-table:not(.compact) :global(th),
-	.mrdv-table:not(.compact) :global(td) {
-		padding: 1rem 1.5rem;
-	}
-
-	.mrdv-table :global(tbody) {
-		position: relative;
-		z-index: 1;
-	}
-
-	.mrdv-table :global(tbody tr) {
-		border-bottom: 1px solid var(--color-border);
-		transition: all var(--ease-luxe);
-	}
-
-	.mrdv-table.hoverable :global(tbody tr:hover) {
-		background: rgba(127, 61, 255, 0.05);
-		transform: translateY(-1px);
-		box-shadow:
-			0 2px 8px rgba(0, 0, 0, 0.2),
-			var(--shadow-accent-glow);
-	}
-
-	.mrdv-table.striped :global(tbody tr:nth-child(even)) {
-		background: rgba(255, 255, 255, 0.02);
-	}
-
-	.mrdv-table.striped.hoverable :global(tbody tr:nth-child(even):hover) {
-		background: rgba(127, 61, 255, 0.05);
-		transform: translateY(-1px);
-		box-shadow:
-			0 2px 8px rgba(0, 0, 0, 0.2),
-			var(--shadow-accent-glow);
-	}
-
-	.mrdv-table :global(th),
-	.mrdv-table :global(td) {
-		text-align: left;
-	}
-</style>
+<script lang="ts">import Checkbox from '../forms/Checkbox.svelte';
+let { columns, data, striped = false, hoverable = true, compact = false, stickyHeader = false, loading = false, loadingMessage = 'Loading...', emptyMessage = 'No data available', emptyState, filterFn, onSort, onRowClick, selectable = false, selectedKeys = $bindable(new Set()), rowKey = 'id', onSelectionChange, class: className = '', children, ...restProps } = $props();
+// Determine if we're in dynamic mode or manual markup mode
+const isDynamicMode = $derived(columns && data);
+// Apply user-defined filter if provided
+const filteredData = $derived.by(() => {
+    if (!isDynamicMode || !data)
+        return [];
+    if (!filterFn)
+        return data;
+    return data.filter(filterFn);
+});
+// Track current sort state
+let sortColumn = $state(null);
+let sortDirection = $state(null);
+function handleSort(columnKey) {
+    if (!onSort)
+        return;
+    // Cycle through: null -> asc -> desc -> null
+    if (sortColumn !== columnKey) {
+        sortColumn = columnKey;
+        sortDirection = 'asc';
+    }
+    else if (sortDirection === 'asc') {
+        sortDirection = 'desc';
+    }
+    else if (sortDirection === 'desc') {
+        sortColumn = null;
+        sortDirection = null;
+    }
+    else {
+        sortDirection = 'asc';
+    }
+    onSort(columnKey, sortDirection);
+}
+function handleRowClick(row) {
+    if (onRowClick) {
+        onRowClick(row);
+    }
+}
+// Selection logic
+function getRowKey(row, index) {
+    return row[rowKey] ?? index;
+}
+const allSelected = $derived.by(() => {
+    if (!selectable || filteredData.length === 0)
+        return false;
+    return filteredData.every((row, i) => selectedKeys.has(getRowKey(row, i)));
+});
+const someSelected = $derived.by(() => {
+    if (!selectable || filteredData.length === 0)
+        return false;
+    const selectedCount = filteredData.filter((row, i) => selectedKeys.has(getRowKey(row, i))).length;
+    return selectedCount > 0 && selectedCount < filteredData.length;
+});
+function toggleSelectAll() {
+    if (allSelected) {
+        // Deselect all
+        selectedKeys = new Set();
+    }
+    else {
+        // Select all filtered rows
+        selectedKeys = new Set(filteredData.map((row, i) => getRowKey(row, i)));
+    }
+    notifySelectionChange();
+}
+function toggleRowSelection(row, index) {
+    const key = getRowKey(row, index);
+    const newSet = new Set(selectedKeys);
+    if (newSet.has(key)) {
+        newSet.delete(key);
+    }
+    else {
+        newSet.add(key);
+    }
+    selectedKeys = newSet;
+    notifySelectionChange();
+}
+function isRowSelected(row, index) {
+    return selectedKeys.has(getRowKey(row, index));
+}
+function notifySelectionChange() {
+    if (onSelectionChange) {
+        const selectedRows = filteredData.filter((row, i) => selectedKeys.has(getRowKey(row, i)));
+        onSelectionChange(selectedKeys, selectedRows);
+    }
+}
+</script>
+
+<div class="panel-raised rounded-[var(--radius-xl)] overflow-hidden {className}" {...restProps}>
+	<table class="mrdv-table w-full" class:striped class:hoverable class:compact class:sticky-header={stickyHeader}>
+		{#if isDynamicMode}
+			<!-- Dynamic mode: render from columns and data -->
+			<thead>
+				<tr>
+					{#if selectable}
+						<th class="select-cell">
+							<Checkbox
+								checked={allSelected}
+								onchange={toggleSelectAll}
+								class={someSelected ? 'indeterminate' : ''}
+							/>
+						</th>
+					{/if}
+					{#each columns as column}
+						<th
+							style:text-align={column.align || 'left'}
+							class:sortable={column.sortable && onSort}
+							class:sorted={sortColumn === column.key}
+							onclick={() => column.sortable && handleSort(column.key)}
+						>
+							<div class="th-content">
+								{column.label}
+								{#if column.sortable && onSort}
+									<span class="sort-indicator">
+										{#if sortColumn === column.key}
+											{#if sortDirection === 'asc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="16"
+													height="16"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path d="m18 15-6-6-6 6" />
+												</svg>
+											{:else if sortDirection === 'desc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="16"
+													height="16"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+												>
+													<path d="m6 9 6 6 6-6" />
+												</svg>
+											{/if}
+										{:else}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="16"
+												height="16"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												opacity="0.3"
+											>
+												<path d="m7 15 5 5 5-5" />
+												<path d="m7 9 5-5 5 5" />
+											</svg>
+										{/if}
+									</span>
+								{/if}
+							</div>
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#if loading}
+					<!-- Loading state -->
+					<tr class="state-row">
+						<td colspan={(columns?.length || 0) + (selectable ? 1 : 0)} class="text-center">
+							<div class="loading-container">
+								<svg
+									class="loading-spinner"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+								</svg>
+								<span>{loadingMessage}</span>
+							</div>
+						</td>
+					</tr>
+				{:else if filteredData.length === 0}
+					<!-- Empty state -->
+					<tr class="state-row">
+						<td colspan={(columns?.length || 0) + (selectable ? 1 : 0)} class="text-center">
+							{#if emptyState}
+								{@render emptyState()}
+							{:else}
+								<div class="empty-container">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="48"
+										height="48"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="1.5"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										opacity="0.3"
+									>
+										<circle cx="11" cy="11" r="8" />
+										<path d="m21 21-4.3-4.3" />
+									</svg>
+									<p>{emptyMessage}</p>
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{:else}
+					<!-- Data rows -->
+					{#each filteredData as row, index}
+						<tr
+							class:clickable={onRowClick}
+							class:selected={selectable && isRowSelected(row, index)}
+							onclick={() => handleRowClick(row)}
+						>
+							{#if selectable}
+								<td class="select-cell" onclick={(e) => e.stopPropagation()}>
+									<Checkbox
+										checked={isRowSelected(row, index)}
+										onchange={() => toggleRowSelection(row, index)}
+									/>
+								</td>
+							{/if}
+							{#each columns as column}
+								<td style:text-align={column.align || 'left'}>
+									{#if restProps[`cell_${column.key}`]}
+										{@render restProps[`cell_${column.key}`]({ value: row[column.key], row })}
+									{:else if column.render}
+										{@html column.render(row[column.key], row)}
+									{:else}
+										{row[column.key]}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		{:else}
+			<!-- Manual markup mode: use children snippet -->
+			{@render children?.()}
+		{/if}
+	</table>
+</div>
+
+<style>
+	.mrdv-table :global(thead) {
+		background: var(--color-base-2);
+		border-bottom: 2px solid var(--color-border-strong);
+	}
+
+	.mrdv-table :global(thead th) {
+		color: var(--color-text);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		text-align: left;
+	}
+
+	.mrdv-table.compact :global(th),
+	.mrdv-table.compact :global(td) {
+		padding: 0.5rem 1rem;
+	}
+
+	.mrdv-table:not(.compact) :global(th),
+	.mrdv-table:not(.compact) :global(td) {
+		padding: 1rem 1.5rem;
+	}
+
+	.mrdv-table :global(tbody) {
+		position: relative;
+		z-index: 1;
+	}
+
+	.mrdv-table :global(tbody tr) {
+		border-bottom: 1px solid var(--color-border);
+		transition: all var(--duration-200) var(--ease-luxe);
+	}
+
+	.mrdv-table.hoverable :global(tbody tr:hover) {
+		background: var(--color-accent-overlay-5);
+		transform: translateY(-1px);
+		box-shadow:
+			0 2px 8px var(--color-shadow-overlay-20),
+			var(--shadow-accent-glow);
+	}
+
+	.mrdv-table.striped :global(tbody tr:nth-child(even)) {
+		background: var(--color-neutral-overlay-2);
+	}
+
+	.mrdv-table.striped.hoverable :global(tbody tr:nth-child(even):hover) {
+		background: var(--color-accent-overlay-5);
+		transform: translateY(-1px);
+		box-shadow:
+			0 2px 8px var(--color-shadow-overlay-20),
+			var(--shadow-accent-glow);
+	}
+
+	.mrdv-table :global(th),
+	.mrdv-table :global(td) {
+		text-align: left;
+	}
+
+	/* Sortable column styles */
+	.mrdv-table th.sortable {
+		cursor: pointer;
+		user-select: none;
+		transition: all var(--duration-200) var(--ease-luxe);
+	}
+
+	.mrdv-table th.sortable:hover {
+		background: var(--color-accent-overlay-5);
+		color: var(--color-accent);
+	}
+
+	.mrdv-table th.sorted {
+		color: var(--color-accent);
+	}
+
+	.th-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		justify-content: space-between;
+	}
+
+	.sort-indicator {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	/* Clickable row styles */
+	.mrdv-table tbody tr.clickable {
+		cursor: pointer;
+	}
+
+	/* Selection styles */
+	.select-cell {
+		width: 3rem;
+		padding-left: 1rem !important;
+		padding-right: 0.5rem !important;
+	}
+
+	.mrdv-table tbody tr.selected {
+		background: var(--color-accent-overlay-10);
+	}
+
+	.mrdv-table tbody tr.selected:hover {
+		background: var(--color-accent-overlay-15);
+	}
+
+	.mrdv-table.striped tbody tr.selected:nth-child(even) {
+		background: var(--color-accent-overlay-10);
+	}
+
+	/* Indeterminate checkbox styling */
+	.select-cell :global(.indeterminate input[type="checkbox"]) {
+		background: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.select-cell :global(.indeterminate input[type="checkbox"])::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 10px;
+		height: 2px;
+		background: white;
+		border-radius: 1px;
+	}
+
+	/* Sticky header */
+	.mrdv-table.sticky-header thead {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+
+	/* Loading state */
+	.loading-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 3rem 1rem;
+		color: var(--color-text-secondary);
+	}
+
+	.loading-spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Empty state */
+	.empty-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		padding: 3rem 1rem;
+		color: var(--color-text-muted);
+	}
+
+	.empty-container p {
+		margin: 0;
+		font-size: 0.875rem;
+	}
+
+	/* State row */
+	.state-row td {
+		border-bottom: none !important;
+	}
+
+	.text-center {
+		text-align: center;
+	}</style>

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

@@ -1,9 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { Column, SortDirection, RowKey } from './Table.types';
 interface Props {
+    columns?: Column[];
+    data?: Record<string, any>[];
     striped?: boolean;
     hoverable?: boolean;
     compact?: boolean;
-    children?: import('svelte').Snippet;
+    stickyHeader?: boolean;
+    loading?: boolean;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    emptyState?: Snippet;
+    filterFn?: (row: Record<string, any>) => boolean;
+    onSort?: (columnKey: string, direction: SortDirection) => void;
+    onRowClick?: (row: Record<string, any>) => void;
+    selectable?: boolean;
+    selectedKeys?: Set<RowKey>;
+    rowKey?: string;
+    onSelectionChange?: (selectedKeys: Set<RowKey>, rows: Record<string, any>[]) => void;
+    children?: Snippet;
+    [key: `cell_${string}`]: Snippet<[{
+        value: any;
+        row: any;
+    }]> | undefined;
+    class?: string;
 }
-declare const Table: import("svelte").Component<Props, {}, "">;
+declare const Table: import("svelte").Component<Props, {}, "selectedKeys">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/components/data/Table.types.d.ts

@@ -0,0 +1,14 @@
+export type SortDirection = 'asc' | 'desc' | null;
+export interface Column {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    render?: (value: any, row: any) => any;
+}
+export type RowKey = string | number;
+export interface SelectionState {
+    selectedKeys: Set<RowKey>;
+    allSelected: boolean;
+    someSelected: boolean;
+}

package/dist/components/data/Table.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data/Tag.svelte

@@ -1,53 +1,51 @@
-<script lang="ts">
-	interface Props {
-		variant?: 'default' | 'accent';
-		dismissible?: boolean;
-		ondismiss?: () => void;
-		children?: import('svelte').Snippet;
-	}
-
-	let { variant = 'default', dismissible = false, ondismiss, children }: Props = $props();
-
-	const variantClasses = {
-		default:
-			'bg-[var(--color-base-2)] text-[var(--color-text-soft)] border-[var(--color-border)]',
-		accent:
-			'bg-[rgba(127,61,255,0.1)] text-[var(--color-accent-soft)] border-[var(--color-accent)] shadow-[0_0_12px_rgba(127,61,255,0.2)]'
-	};
-
-	const classes = $derived(
-		`inline-flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-pill)] border font-[var(--font-body)] font-medium text-sm transition-all duration-300 hover:scale-[1.02] ${variantClasses[variant]}`
-	);
-
-	function handleDismiss() {
-		ondismiss?.();
-	}
-</script>
-
-<span class={classes}>
-	{@render children?.()}
-
-	{#if dismissible}
-		<button
-			class="ml-1 opacity-60 hover:opacity-100 hover:text-[var(--color-text)] transition-all duration-300"
-			onclick={handleDismiss}
-			aria-label="Remove tag"
-		>
-			<svg
-				width="14"
-				height="14"
-				viewBox="0 0 14 14"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5"
-					stroke="currentColor"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				/>
-			</svg>
-		</button>
-	{/if}
-</span>
+<script lang="ts">"use strict";
+let { variant = 'default', size = 'md', dismissible = false, onDismiss, ondismiss, children, icon } = $props();
+const onDismissCallback = $derived(onDismiss ?? ondismiss);
+const variantClasses = {
+    default: 'bg-[var(--color-base-2)] text-[var(--color-text-soft)] border-[var(--color-border)]',
+    accent: 'bg-[var(--color-secondary-overlay-10)] text-[var(--color-accent-soft)] border-[var(--color-accent)] shadow-[0_0_12px_var(--color-secondary-overlay-20)]',
+    info: 'bg-[var(--color-info-overlay-10)] text-[var(--color-info)] border-[var(--color-info)] shadow-[0_0_12px_var(--color-info-overlay-20)]'
+};
+const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs gap-1',
+    md: 'px-3 py-1.5 text-sm gap-2',
+    lg: 'px-4 py-2 text-base gap-2'
+};
+const classes = $derived(`inline-flex items-center rounded-[var(--radius-pill)] border font-[var(--font-body)] font-medium transition-all duration-300 hover:scale-[1.02] ${sizeClasses[size]} ${variantClasses[variant]}`);
+function handleDismiss() {
+    onDismissCallback?.();
+}
+</script>
+
+<span class={classes}>
+	{#if icon}
+		<span class="inline-flex items-center justify-center">
+			{@render icon()}
+		</span>
+	{/if}
+	{@render children?.()}
+
+	{#if dismissible}
+		<button
+			class="ml-1 opacity-60 hover:opacity-100 hover:text-[var(--color-text)] transition-all duration-300"
+			onclick={handleDismiss}
+			aria-label="Remove tag"
+		>
+			<svg
+				width="14"
+				height="14"
+				viewBox="0 0 14 14"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+</span>

package/dist/components/data/Tag.svelte.d.ts

@@ -1,8 +1,12 @@
 interface Props {
-    variant?: 'default' | 'accent';
+    variant?: 'default' | 'accent' | 'info';
+    size?: 'sm' | 'md' | 'lg';
     dismissible?: boolean;
+    onDismiss?: () => void;
+    /** @deprecated Use onDismiss */
     ondismiss?: () => void;
     children?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
 }
 declare const Tag: import("svelte").Component<Props, {}, "">;
 type Tag = ReturnType<typeof Tag>;