@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/data/Pagination.svelte

@@ -1,123 +1,121 @@
-<script lang="ts">
-	interface Props {
-		currentPage: number;
-		totalPages: number;
-		maxVisible?: number;
-		onpagechange?: (page: number) => void;
-	}
-
-	let { currentPage = $bindable(1), totalPages, maxVisible = 7, onpagechange }: Props = $props();
-
-	const visiblePages = $derived((() => {
-		const pages: (number | 'ellipsis')[] = [];
-
-		if (totalPages <= maxVisible) {
-			// Show all pages
-			for (let i = 1; i <= totalPages; i++) {
-				pages.push(i);
-			}
-		} else {
-			// Always show first page
-			pages.push(1);
-
-			const halfVisible = Math.floor((maxVisible - 2) / 2);
-			let startPage = Math.max(2, currentPage - halfVisible);
-			let endPage = Math.min(totalPages - 1, currentPage + halfVisible);
-
-			// Adjust range if at boundaries
-			if (currentPage <= halfVisible + 1) {
-				endPage = maxVisible - 1;
-			} else if (currentPage >= totalPages - halfVisible) {
-				startPage = totalPages - maxVisible + 2;
-			}
-
-			// Add ellipsis before start if needed
-			if (startPage > 2) {
-				pages.push('ellipsis');
-			}
-
-			// Add middle pages
-			for (let i = startPage; i <= endPage; i++) {
-				pages.push(i);
-			}
-
-			// Add ellipsis after end if needed
-			if (endPage < totalPages - 1) {
-				pages.push('ellipsis');
-			}
-
-			// Always show last page
-			pages.push(totalPages);
-		}
-
-		return pages;
-	})());
-
-	function goToPage(page: number) {
-		if (page < 1 || page > totalPages || page === currentPage) return;
-		currentPage = page;
-		onpagechange?.(page);
-	}
-</script>
-
-<nav role="navigation" aria-label="Pagination" class="flex items-center gap-2">
-	<!-- Previous Button -->
-	<button
-		class="px-3 py-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-transparent transition-all duration-300 font-[var(--font-body)] hover:bg-[rgba(127,61,255,0.1)] hover:border-[var(--color-accent)] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border)]"
-		onclick={() => goToPage(currentPage - 1)}
-		disabled={currentPage === 1}
-		aria-disabled={currentPage === 1}
-	>
-		Previous
-	</button>
-
-	<!-- Page Numbers -->
-	{#each visiblePages as page}
-		{#if page === 'ellipsis'}
-			<span class="px-3 py-2 text-[var(--color-text-muted)]">...</span>
-		{:else}
-			<button
-				class="px-3 py-2 rounded-[var(--radius-md)] transition-all duration-300 font-[var(--font-body)]"
-				class:active={page === currentPage}
-				class:inactive={page !== currentPage}
-				onclick={() => goToPage(page)}
-				aria-current={page === currentPage ? 'page' : undefined}
-			>
-				{page}
-			</button>
-		{/if}
-	{/each}
-
-	<!-- Next Button -->
-	<button
-		class="px-3 py-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-transparent transition-all duration-300 font-[var(--font-body)] hover:bg-[rgba(127,61,255,0.1)] hover:border-[var(--color-accent)] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border)]"
-		onclick={() => goToPage(currentPage + 1)}
-		disabled={currentPage === totalPages}
-		aria-disabled={currentPage === totalPages}
-	>
-		Next
-	</button>
-</nav>
-
-<style>
-	button.active {
-		background: var(--color-accent);
-		color: var(--color-text);
-		cursor: default;
-	}
-
-	button.active {
-		box-shadow: 0 0 20px rgba(127, 61, 255, 0.5);
-	}
-
-	button.inactive {
-		background: transparent;
-		border: 1px solid var(--color-border);
-		color: var(--color-text);
-	}
-
-	button.inactive:hover {
-		background: rgba(127, 61, 255, 0.1);
-		border-color: var(--color-accent);
-	}
-</style>
+<script lang="ts">"use strict";
+let { currentPage = $bindable(1), totalPages, maxVisible = 7, onPageChange, onpagechange, prevIcon, nextIcon, showLabels } = $props();
+const onPageChangeCallback = $derived(onPageChange ?? onpagechange);
+const displayPrevLabel = $derived(showLabels !== false);
+const displayNextLabel = $derived(showLabels !== false);
+const visiblePages = $derived((() => {
+    const pages = [];
+    if (totalPages <= maxVisible) {
+        // Show all pages
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+    }
+    else {
+        // Always show first page
+        pages.push(1);
+        const halfVisible = Math.floor((maxVisible - 2) / 2);
+        let startPage = Math.max(2, currentPage - halfVisible);
+        let endPage = Math.min(totalPages - 1, currentPage + halfVisible);
+        // Adjust range if at boundaries
+        if (currentPage <= halfVisible + 1) {
+            endPage = maxVisible - 1;
+        }
+        else if (currentPage >= totalPages - halfVisible) {
+            startPage = totalPages - maxVisible + 2;
+        }
+        // Add ellipsis before start if needed
+        if (startPage > 2) {
+            pages.push('ellipsis');
+        }
+        // Add middle pages
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i);
+        }
+        // Add ellipsis after end if needed
+        if (endPage < totalPages - 1) {
+            pages.push('ellipsis');
+        }
+        // Always show last page
+        pages.push(totalPages);
+    }
+    return pages;
+})());
+function goToPage(page) {
+    if (page < 1 || page > totalPages || page === currentPage)
+        return;
+    currentPage = page;
+    onPageChangeCallback?.(page);
+}
+</script>
+
+<nav role="navigation" aria-label="Pagination" class="flex items-center gap-2">
+	<!-- Previous Button -->
+	<button
+		class="flex items-center gap-2 px-3 py-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-transparent transition-all duration-300 font-[var(--font-body)] hover:bg-[var(--color-secondary-overlay-10)] hover:border-[var(--color-accent)] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border)]"
+		onclick={() => goToPage(currentPage - 1)}
+		disabled={currentPage === 1}
+		aria-disabled={currentPage === 1}
+	>
+		{#if prevIcon}
+			<span class="inline-flex items-center justify-center">
+				{@render prevIcon()}
+			</span>
+		{/if}
+		{#if displayPrevLabel}Previous{/if}
+	</button>
+
+	<!-- Page Numbers -->
+	{#each visiblePages as page}
+		{#if page === 'ellipsis'}
+			<span class="px-3 py-2 text-[var(--color-text-muted)]">...</span>
+		{:else}
+			<button
+				class="px-3 py-2 rounded-[var(--radius-md)] transition-all duration-300 font-[var(--font-body)]"
+				class:active={page === currentPage}
+				class:inactive={page !== currentPage}
+				onclick={() => goToPage(page)}
+				aria-current={page === currentPage ? 'page' : undefined}
+			>
+				{page}
+			</button>
+		{/if}
+	{/each}
+
+	<!-- Next Button -->
+	<button
+		class="flex items-center gap-2 px-3 py-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-transparent transition-all duration-300 font-[var(--font-body)] hover:bg-[var(--color-secondary-overlay-10)] hover:border-[var(--color-accent)] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border)]"
+		onclick={() => goToPage(currentPage + 1)}
+		disabled={currentPage === totalPages}
+		aria-disabled={currentPage === totalPages}
+	>
+		{#if displayNextLabel}Next{/if}
+		{#if nextIcon}
+			<span class="inline-flex items-center justify-center">
+				{@render nextIcon()}
+			</span>
+		{/if}
+	</button>
+</nav>
+
+<style>
+	button.active {
+		background: var(--color-accent);
+		color: var(--color-text);
+		cursor: default;
+	}
+
+	button.active {
+		box-shadow: 0 0 20px var(--color-accent-overlay-50);
+	}
+
+	button.inactive {
+		background: transparent;
+		border: 1px solid var(--color-border);
+		color: var(--color-text);
+	}
+
+	button.inactive:hover {
+		background: var(--color-accent-overlay-10);
+		border-color: var(--color-accent);
+	}</style>

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

@@ -2,7 +2,12 @@ interface Props {
     currentPage: number;
     totalPages: number;
     maxVisible?: number;
+    onPageChange?: (page: number) => void;
+    /** @deprecated Use onPageChange */
     onpagechange?: (page: number) => void;
+    prevIcon?: import('svelte').Snippet;
+    nextIcon?: import('svelte').Snippet;
+    showLabels?: boolean;
 }
 declare const Pagination: import("svelte").Component<Props, {}, "currentPage">;
 type Pagination = ReturnType<typeof Pagination>;

package/dist/components/data/Sparkline.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">import { onMount } from 'svelte';
+let { data, color = 'var(--color-accent-soft)', height = 40, width = 200, showDots = false, showFill = false, strokeWidth = 2, animationDuration = 500 } = $props();
+let pathElement = $state();
+let mounted = $state(false);
+// Calculate min/max for scaling
+const min = $derived(Math.min(...data));
+const max = $derived(Math.max(...data));
+const range = $derived(max - min || 1); // Avoid division by zero
+// Padding for dots and stroke
+const padding = $derived(showDots ? 4 : strokeWidth);
+// Calculate viewBox dimensions
+const viewBoxWidth = $derived(width);
+const viewBoxHeight = $derived(height);
+// Generate SVG path from data points
+const points = $derived(data.map((value, index) => {
+    const x = padding + (index / (data.length - 1)) * (viewBoxWidth - padding * 2);
+    const y = viewBoxHeight - padding - ((value - min) / range) * (viewBoxHeight - padding * 2);
+    return { x, y, value };
+}));
+const pathData = $derived(points.length > 0
+    ? points.reduce((path, point, index) => {
+        if (index === 0) {
+            return `M ${point.x},${point.y}`;
+        }
+        return `${path} L ${point.x},${point.y}`;
+    }, '')
+    : '');
+// Generate fill path (line + close to bottom)
+const fillPathData = $derived(points.length > 0
+    ? `${pathData} L ${viewBoxWidth - padding},${viewBoxHeight} L ${padding},${viewBoxHeight} Z`
+    : '');
+// Gradient ID for unique identification
+const gradientId = $derived(`sparkline-gradient-${Math.random().toString(36).slice(2, 9)}`);
+// Animation
+onMount(() => {
+    if (animationDuration > 0 && pathElement) {
+        const length = pathElement.getTotalLength();
+        pathElement.style.strokeDasharray = `${length}`;
+        pathElement.style.strokeDashoffset = `${length}`;
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!prefersReducedMotion) {
+            // Animate the stroke
+            requestAnimationFrame(() => {
+                if (pathElement) {
+                    pathElement.style.transition = `stroke-dashoffset ${animationDuration}ms var(--ease-luxe)`;
+                    pathElement.style.strokeDashoffset = '0';
+                }
+            });
+        }
+        else {
+            // Skip animation if reduced motion is preferred
+            pathElement.style.strokeDashoffset = '0';
+        }
+    }
+    mounted = true;
+});
+</script>
+
+<svg
+	{width}
+	{height}
+	viewBox="0 0 {viewBoxWidth} {viewBoxHeight}"
+	class="sparkline"
+	role="img"
+	aria-label="Trend sparkline visualization"
+	style="overflow: visible;"
+>
+	<!-- Gradient definition for fill -->
+	{#if showFill}
+		<defs>
+			<linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+				<stop offset="0%" style="stop-color: {color}; stop-opacity: 0.3;" />
+				<stop offset="100%" style="stop-color: {color}; stop-opacity: 0.05;" />
+			</linearGradient>
+		</defs>
+	{/if}
+
+	<!-- Gradient fill area -->
+	{#if showFill && mounted}
+		<path
+			d={fillPathData}
+			fill="url(#{gradientId})"
+			style="opacity: 0; animation: fade-in {animationDuration}ms var(--ease-luxe) forwards;"
+		/>
+	{/if}
+
+	<!-- Line path -->
+	<path
+		bind:this={pathElement}
+		d={pathData}
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+
+	<!-- Data point dots -->
+	{#if showDots && mounted}
+		{#each points as point, i}
+			<circle
+				cx={point.x}
+				cy={point.y}
+				r="3"
+				fill={color}
+				style="opacity: 0; animation: fade-in {animationDuration}ms var(--ease-luxe) {i *
+					50}ms forwards;"
+			/>
+		{/each}
+	{/if}
+</svg>
+
+<style>
+	.sparkline {
+		display: block;
+	}</style>

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

@@ -0,0 +1,43 @@
+interface Props {
+    /**
+     * Array of numeric data points to plot
+     */
+    data: number[];
+    /**
+     * Line color (defaults to accent primary)
+     */
+    color?: string;
+    /**
+     * Chart height in pixels
+     * @default 40
+     */
+    height?: number;
+    /**
+     * Chart width in pixels
+     * @default 200
+     */
+    width?: number;
+    /**
+     * Show dots at each data point
+     * @default false
+     */
+    showDots?: boolean;
+    /**
+     * Show gradient fill below the line
+     * @default false
+     */
+    showFill?: boolean;
+    /**
+     * Line thickness in pixels
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Animation duration in milliseconds (set to 0 to disable)
+     * @default 500
+     */
+    animationDuration?: number;
+}
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/components/data/Stat.svelte

@@ -1,103 +1,92 @@
-<script lang="ts">
-	interface Props {
-		label: string;
-		value: string | number;
-		change?: number;
-		trend?: 'up' | 'down' | 'neutral';
-		icon?: import('svelte').Snippet;
-		description?: string;
-	}
-
-	let { label, value, change, trend, icon, description }: Props = $props();
-
-	const trendColors = {
-		up: 'var(--color-success)',
-		down: 'var(--color-error)',
-		neutral: 'var(--color-text-muted)'
-	};
-
-	const trendColor = $derived(trend ? trendColors[trend] : 'var(--color-text-muted)');
-	const showGlow = $derived(trend === 'up');
-</script>
-
-<div class="glass-panel rounded-[var(--radius-xl)] p-6">
-	<!-- Top Row: Icon & Label -->
-	<div class="flex items-start justify-between mb-4">
-		<div class="flex-1">
-			<div
-				class="uppercase tracking-wider"
-				style="color: var(--color-text-soft); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;"
-			>
-				{label}
-			</div>
-		</div>
-
-		{#if icon}
-			<div class="w-10 h-10" style="color: var(--color-accent-soft);">
-				{@render icon()}
-			</div>
-		{/if}
-	</div>
-
-	<!-- Value Display -->
-	<div
-		class="mb-2"
-		class:text-glow={showGlow}
-		style="color: var(--color-text); font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; line-height: 1.2;"
-	>
-		{value}
-	</div>
-
-	<!-- Change Indicator & Description -->
-	{#if change !== undefined || description}
-		<div class="flex items-center gap-2 flex-wrap">
-			{#if change !== undefined}
-				<div
-					class="inline-flex items-center gap-1 font-semibold text-sm"
-					style="color: {trendColor};"
-				>
-					{#if trend === 'up'}
-						<svg
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M8 12V4M8 4L4 8M8 4L12 8"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					{:else if trend === 'down'}
-						<svg
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M8 4V12M8 12L4 8M8 12L12 8"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					{/if}
-					{change > 0 ? '+' : ''}{change}%
-				</div>
-			{/if}
-
-			{#if description}
-				<div class="text-xs" style="color: var(--color-text-muted);">
-					{description}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
+<script lang="ts">"use strict";
+let { label, value, change, trend, icon, description } = $props();
+const trendColors = {
+    up: 'var(--color-success)',
+    down: 'var(--color-error)',
+    neutral: 'var(--color-text-muted)'
+};
+const trendColor = $derived(trend ? trendColors[trend] : 'var(--color-text-muted)');
+const showGlow = $derived(trend === 'up');
+</script>
+
+<div class="panel-spectral rounded-[var(--radius-xl)] p-6">
+	<!-- Top Row: Icon & Label -->
+	<div class="flex items-start justify-between mb-4">
+		<div class="flex-1">
+			<div
+				class="uppercase tracking-wider"
+				style="color: var(--color-text-soft); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;"
+			>
+				{label}
+			</div>
+		</div>
+
+		{#if icon}
+			<div class="w-10 h-10" style="color: var(--color-accent-soft);">
+				{@render icon()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Value Display -->
+	<div
+		class="mb-2"
+		class:text-glow={showGlow}
+		style="color: var(--color-text); font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; line-height: 1.2;"
+	>
+		{value}
+	</div>
+
+	<!-- Change Indicator & Description -->
+	{#if change !== undefined || description}
+		<div class="flex items-center gap-2 flex-wrap">
+			{#if change !== undefined}
+				<div
+					class="inline-flex items-center gap-1 font-semibold text-sm"
+					style="color: {trendColor};"
+				>
+					{#if trend === 'up'}
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M8 12V4M8 4L4 8M8 4L12 8"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					{:else if trend === 'down'}
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M8 4V12M8 12L4 8M8 12L12 8"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					{/if}
+					{change > 0 ? '+' : ''}{change}%
+				</div>
+			{/if}
+
+			{#if description}
+				<div class="text-xs" style="color: var(--color-text-muted);">
+					{description}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>