@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/data/Avatar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	interface Props {
+		src?: string;
+		alt: string;
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		fallback?: string;
+		glow?: boolean;
+	}
+
+	let { src, alt, size = 'md', fallback, glow = false }: Props = $props();
+
+	let imageLoaded = $state(!!src);
+	let imageError = $state(false);
+
+	const sizeClasses = {
+		sm: 'w-8 h-8',
+		md: 'w-12 h-12',
+		lg: 'w-16 h-16',
+		xl: 'w-24 h-24'
+	};
+
+	const fontSizes = {
+		sm: '0.75rem',
+		md: '1rem',
+		lg: '1.25rem',
+		xl: '1.5rem'
+	};
+
+	const classes = $derived(
+		`${sizeClasses[size]} rounded-full overflow-hidden inline-flex items-center justify-center transition-all duration-300 hover:scale-105 ${glow ? 'border-2 border-[var(--color-accent)] accent-glow' : ''}`
+	);
+
+	const fallbackText = $derived(
+		fallback || alt.charAt(0).toUpperCase()
+	);
+
+	function handleImageError() {
+		imageError = true;
+		imageLoaded = false;
+	}
+
+	function handleImageLoad() {
+		imageLoaded = true;
+		imageError = false;
+	}
+</script>
+
+{#if src && !imageError}
+	<div class={classes}>
+		<img
+			{src}
+			{alt}
+			class="w-full h-full object-cover"
+			onerror={handleImageError}
+			onload={handleImageLoad}
+		/>
+	</div>
+{:else}
+	<div
+		class={classes}
+		style="background: linear-gradient(135deg, var(--color-accent) 0%, rgba(127, 61, 255, 0.7) 100%); color: var(--color-text); font-weight: 600; text-transform: uppercase; font-size: {fontSizes[size]};"
+		role="img"
+		aria-label={alt}
+	>
+		{fallbackText}
+	</div>
+{/if}

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

@@ -0,0 +1,10 @@
+interface Props {
+    src?: string;
+    alt: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fallback?: string;
+    glow?: boolean;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/data/Badge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
+		size?: 'sm' | 'md';
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'default', size = 'md', children }: Props = $props();
+
+	const variantClasses = {
+		default: 'bg-[var(--color-base-3)] text-[var(--color-text-soft)] border-[var(--color-base-3)]',
+		success:
+			'bg-[rgba(0,232,151,0.15)] text-[var(--color-success)] border-[var(--color-success)]',
+		warning:
+			'bg-[rgba(255,200,97,0.15)] text-[var(--color-warning)] border-[var(--color-warning)]',
+		error: 'bg-[rgba(255,74,106,0.15)] text-[var(--color-error)] border-[var(--color-error)]',
+		accent: 'bg-[rgba(127,61,255,0.15)] text-[var(--color-accent-soft)] border-[var(--color-accent)] accent-glow'
+	};
+
+	const sizeClasses = {
+		sm: 'px-2 py-0.5 text-xs',
+		md: 'px-2.5 py-1 text-sm'
+	};
+
+	const classes = $derived(
+		`inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-[var(--font-body)] font-medium transition-all duration-300 ${variantClasses[variant]} ${sizeClasses[size]}`
+	);
+</script>
+
+<span class={classes}>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,8 @@
+interface Props {
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
+    size?: 'sm' | 'md';
+    children?: import('svelte').Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/data/CodeBlock.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	/**
+	 * Props for the CodeBlock component.
+	 * 
+	 * This is a presentational component that provides layout and styling for syntax-highlighted code.
+	 * Consumers are responsible for providing pre-highlighted HTML via the default slot and ensuring
+	 * the content is properly sanitized to prevent XSS attacks.
+	 */
+	interface Props {
+		/**
+		 * Optional filename to display in the header.
+		 */
+		filename?: string;
+		/**
+		 * Whether to show line numbers in the gutter.
+		 */
+		showLineNumbers?: boolean;
+		/**
+		 * Total number of lines in the code. Required when showLineNumbers is true.
+		 */
+		lineCount?: number;
+		/**
+		 * Array of line numbers (1-indexed) to highlight in the gutter.
+		 */
+		highlightLines?: number[];
+		/**
+		 * Slot for pre-highlighted code HTML.
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		filename,
+		showLineNumbers = false,
+		lineCount = 0,
+		highlightLines = [],
+		children
+	}: Props = $props();
+
+	// Development-only validation
+</script>
+
+<div class="glass-panel rounded-lg overflow-hidden">
+	{#if filename}
+		<div
+			class="px-4 py-2 border-b border-border"
+			style="background: var(--color-base-2); color: var(--color-text-soft); font-family: var(--font-mono); font-size: 0.875rem;"
+		>
+			{filename}
+		</div>
+	{/if}
+
+	<div
+		class="p-4 overflow-x-auto"
+		style="background: var(--color-base-1); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6;"
+	>
+		{#if showLineNumbers}
+			<div class="flex">
+				<div
+					class="pr-4 border-r border-border select-none"
+					style="color: var(--color-text-muted);"
+				>
+					{#each Array.from({ length: lineCount }, (_, i) => i + 1) as lineNum}
+						<div
+							class:highlighted={highlightLines.includes(lineNum)}
+							style={highlightLines.includes(lineNum)
+								? 'background: rgba(127, 61, 255, 0.1);'
+								: ''}
+						>
+							{lineNum}
+						</div>
+					{/each}
+				</div>
+				<div class="pl-4 flex-1">
+					{@render children?.()}
+				</div>
+			</div>
+		{:else}
+			<div>
+				{@render children?.()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Custom scrollbar styling */
+	div::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	div::-webkit-scrollbar-track {
+		background: var(--color-base-1);
+	}
+
+	div::-webkit-scrollbar-thumb {
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+	}
+
+	div::-webkit-scrollbar-thumb:hover {
+		background: var(--color-accent-soft);
+	}
+
+	/* Highlight gutter numbers */
+	.highlighted {
+		background: rgba(127, 61, 255, 0.1);
+	}
+
+	/* 
+	 * Consumer-provided line highlighting:
+	 * Consumers should apply the `.line` class to each code line element
+	 * and the `.highlighted` class to lines that should be highlighted.
+	 * This ensures consistent styling with the component's luxury aesthetic.
+	 */
+	:global(.line.highlighted) {
+		background: rgba(127, 61, 255, 0.1);
+		display: inline-block;
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+ * Props for the CodeBlock component.
+ *
+ * This is a presentational component that provides layout and styling for syntax-highlighted code.
+ * Consumers are responsible for providing pre-highlighted HTML via the default slot and ensuring
+ * the content is properly sanitized to prevent XSS attacks.
+ */
+interface Props {
+    /**
+     * Optional filename to display in the header.
+     */
+    filename?: string;
+    /**
+     * Whether to show line numbers in the gutter.
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Total number of lines in the code. Required when showLineNumbers is true.
+     */
+    lineCount?: number;
+    /**
+     * Array of line numbers (1-indexed) to highlight in the gutter.
+     */
+    highlightLines?: number[];
+    /**
+     * Slot for pre-highlighted code HTML.
+     */
+    children?: import('svelte').Snippet;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/data/List.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'plain' | 'bordered' | 'divided';
+		hoverable?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'plain', hoverable = false, children }: Props = $props();
+
+	const containerClasses = $derived(
+		variant === 'bordered'
+			? 'glass-panel rounded-[var(--radius-lg)] border border-[var(--color-border)]'
+			: ''
+	);
+
+	const listClasses = $derived(`list-none ${variant} ${hoverable ? 'hoverable' : ''}`);
+</script>
+
+{#if variant === 'bordered'}
+	<div class={containerClasses}>
+		<ul class={listClasses}>
+			{@render children?.()}
+		</ul>
+	</div>
+{:else}
+	<ul class={listClasses}>
+		{@render children?.()}
+	</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: rgba(127, 61, 255, 0.05);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    variant?: 'plain' | 'bordered' | 'divided';
+    hoverable?: boolean;
+    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,123 @@
+<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>

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

@@ -0,0 +1,9 @@
+interface Props {
+    currentPage: number;
+    totalPages: number;
+    maxVisible?: number;
+    onpagechange?: (page: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "currentPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/data/Stat.svelte

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

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;

package/dist/components/data/Table.svelte

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

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

@@ -0,0 +1,9 @@
+interface Props {
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;