@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/data/Table.svelte

@@ -0,0 +1,443 @@
+<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

@@ -0,0 +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;
+    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, {}, "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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,13 @@
+interface Props {
+    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>;
+export default Tag;

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

@@ -0,0 +1,12 @@
+export { default as Table } from './Table.svelte';
+export type { Column as TableColumn, SortDirection, RowKey, SelectionState } from './Table.types';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as List } from './List.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as CalendarGrid } from './CalendarGrid.svelte';
+export type { CalendarEvent } from './CalendarGrid.types';
+export { default as Sparkline } from './Sparkline.svelte';

package/dist/components/data/index.js

@@ -0,0 +1,10 @@
+export { default as Table } from './Table.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as List } from './List.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as CalendarGrid } from './CalendarGrid.svelte';
+export { default as Sparkline } from './Sparkline.svelte';

package/dist/components/forms/Checkbox.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { checked = $bindable(false), disabled = false, label, id = createId('checkbox'), onchange, iconBefore, class: className = '' } = $props();
+</script>
+
+<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
+  <input
+    type="checkbox"
+    {id}
+    {disabled}
+    bind:checked
+    onchange={onchange}
+    class="w-6 h-6 rounded-sm border-2 border-border-strong bg-transparent appearance-none transition-all duration-200 ease-luxe cursor-pointer checked:bg-accent checked:border-accent checked:accent-glow focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {disabled ? 'cursor-not-allowed' : ''}"
+  />
+  {#if iconBefore}
+    <span class="inline-flex items-center justify-center text-text-soft">
+      {@render iconBefore()}
+    </span>
+  {/if}
+  {#if label}
+    <span class="text-text text-sm select-none">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }</style>

package/dist/components/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    onchange?: (event: Event) => void;
+    iconBefore?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/DatePicker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
+let { value = $bindable(''), min, max, placeholder, disabled = false, error = false, label, id = createId('datepicker'), onchange, class: className = '', } = $props();
+const errorClasses = $derived(error ? 'error-state' : '');
+</script>
+
+{#if label}
+	<div>
+		<label for={id} class="text-text-soft text-sm mb-2 block">
+			{label}
+		</label>
+		<input
+			type="date"
+			{id}
+			{placeholder}
+			{disabled}
+			{min}
+			{max}
+			bind:value
+			{onchange}
+			class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+				? disabledClasses
+				: ''} {className}"
+		/>
+	</div>
+{:else}
+	<input
+		type="date"
+		{id}
+		{placeholder}
+		{disabled}
+		{min}
+		{max}
+		bind:value
+		{onchange}
+		class="{baseInputClasses} {focusClasses} {errorClasses} {disabled
+			? disabledClasses
+			: ''} {className}"
+	/>
+{/if}
+
+<style>
+	input[type='date'] {
+		min-height: 3rem;
+		cursor: pointer;
+	}
+
+	input[type='date']::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(0.7);
+		transition: filter 120ms var(--ease-sharp);
+	}
+
+	input[type='date']:hover::-webkit-calendar-picker-indicator {
+		filter: invert(1);
+	}
+
+	input[type='date']:disabled::-webkit-calendar-picker-indicator {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}</style>