@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/data/List.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">let { variant = 'plain', hoverable = false, items, children } = $props();
+const containerClasses = $derived(variant === 'bordered'
+    ? 'panel-raised rounded-[var(--radius-lg)] border border-[var(--color-border)]'
+    : '');
+const listClasses = $derived(`list-none ${variant} ${hoverable ? 'hoverable' : ''}`);
+export {};
+</script>
+
+{#if variant === 'bordered'}
+	<div class={containerClasses}>
+		<ul class={listClasses}>
+			{#if items}
+				{#each items as item (item.id)}
+					<li class="flex items-center gap-2">
+						{#if item.icon}
+							<span class="inline-flex items-center justify-center">
+								{@render item.icon()}
+							</span>
+						{/if}
+						{#if typeof item.content === 'string'}
+							{item.content}
+						{:else}
+							{@render item.content()}
+						{/if}
+					</li>
+				{/each}
+			{:else}
+				{@render children?.()}
+			{/if}
+		</ul>
+	</div>
+{:else}
+	<ul class={listClasses}>
+		{#if items}
+			{#each items as item (item.id)}
+				<li class="flex items-center gap-2">
+					{#if item.icon}
+						<span class="inline-flex items-center justify-center">
+							{@render item.icon()}
+						</span>
+					{/if}
+					{#if typeof item.content === 'string'}
+						{item.content}
+					{:else}
+						{@render item.content()}
+					{/if}
+				</li>
+			{/each}
+		{:else}
+			{@render children?.()}
+		{/if}
+	</ul>
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		padding: 0;
+		color: var(--color-text);
+		font-family: var(--font-body);
+	}
+
+	:global(ul.plain > li) {
+		padding: 0.5rem 0;
+	}
+
+	:global(ul.bordered > li) {
+		padding: 0.75rem 1rem;
+	}
+
+	:global(ul.divided > li) {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	:global(ul.divided > li:last-child) {
+		border-bottom: none;
+	}
+
+	:global(ul.hoverable > li) {
+		transition: all var(--ease-luxe);
+		cursor: pointer;
+	}
+
+	:global(ul.hoverable > li:hover) {
+		background: var(--color-accent-overlay-5);
+	}</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface ListItem {
+    id: string;
+    content: string | Snippet;
+    icon?: Snippet;
+}
+interface Props {
+    variant?: 'plain' | 'bordered' | 'divided';
+    hoverable?: boolean;
+    items?: ListItem[];
+    children?: import('svelte').Snippet;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/data/Pagination.svelte

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

@@ -0,0 +1,14 @@
+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>;
+export default 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

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

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

@@ -0,0 +1,11 @@
+interface Props {
+    label: string;
+    value: string | number;
+    change?: number;
+    trend?: 'up' | 'down' | 'neutral';
+    icon?: import('svelte').Snippet;
+    description?: string;
+}
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;