@mrintel/villain-ui 0.7.8 → 0.8.0

package/dist/components/buttons/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';

package/dist/components/buttons/IconButton.svelte.d.ts

@@ -1,5 +1,5 @@
 export interface Props {
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     shape?: 'circle' | 'square';
     disabled?: boolean;

package/dist/components/buttons/LinkButton.svelte.d.ts

@@ -1,6 +1,6 @@
 export interface Props {
     href: string;
-    variant?: 'primary' | 'secondary' | 'ghost';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     target?: '_self' | '_blank' | '_parent' | '_top';

package/dist/components/buttons/buttonClasses.d.ts

@@ -2,7 +2,9 @@ export declare const variantClasses: {
     primary: string;
     secondary: string;
     ghost: string;
+    danger: string;
 };
+export type ButtonVariant = keyof typeof variantClasses;
 export declare const sizeClasses: {
     sm: string;
     md: string;

package/dist/components/buttons/buttonClasses.js

@@ -1,7 +1,8 @@
 export const variantClasses = {
     primary: 'bg-[var(--color-accent)] text-[var(--color-text)] accent-glow hover-lift',
     secondary: 'bg-transparent text-[var(--color-text)] border border-[var(--color-border-strong)] hover:border-[var(--color-accent)] hover-lift',
-    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)] hover-lift'
+    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)] hover-lift',
+    danger: 'bg-[var(--color-error)] text-[var(--color-text)] shadow-[0_0_20px_var(--color-error-overlay-30)] hover-lift'
 };
 export const sizeClasses = {
     sm: 'px-3 py-1.5 text-sm font-medium',

package/dist/components/cards/SectionHeader.svelte

@@ -1,8 +1,13 @@
-<script lang="ts">let { title, level = 2, glow = true, subtitle, align = 'left', children } = $props();
+<script lang="ts">let { variant = 'default', title, level = 2, glow = true, subtitle, align = 'left', children } = $props();
+const variantClasses = {
+    default: '',
+    accent: 'text-accent',
+    gradient: 'text-gradient'
+};
 const headingTag = $derived(`h${level}`);
-const glowClasses = $derived(glow ? 'text-glow' : '');
+const baseClasses = $derived(`transition-all duration-300 ${glow ? 'text-glow' : ''} ${variantClasses[variant]}`);
 const alignClasses = $derived(`text-${align}`);
-const headingClasses = $derived(`font-[var(--font-heading)] text-[length:var(--text-h${level}-size)] font-[number:var(--text-h${level}-weight)] leading-[var(--text-h${level}-line-height)] text-[var(--color-text)] ${glowClasses} ${alignClasses}`);
+const headingClasses = $derived(`font-[var(--font-heading)] text-[length:var(--text-h${level}-size)] font-[number:var(--text-h${level}-weight)] leading-[var(--text-h${level}-line-height)] text-[var(--color-text)] ${baseClasses} ${alignClasses}`);
 const subtitleClasses = $derived(`mt-2 font-[var(--font-body)] text-[length:var(--text-body-size)] text-[var(--color-text-soft)] ${alignClasses}`);
 export {};
 </script>

package/dist/components/cards/SectionHeader.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    variant?: 'default' | 'accent' | 'gradient';
     title?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     glow?: boolean;

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

@@ -25,3 +25,13 @@ export interface SelectionState {
     allSelected: boolean;
     someSelected: boolean;
 }
+export interface WeekHeatmapCell {
+    /** Matrix row index (0 = Sunday, matching the SDK PeakTimesHeatmap contract) */
+    day: number;
+    /** Hour of day, 0–23 */
+    hour: number;
+    /** Raw matrix value */
+    value: number;
+    /** 0–100, after normalization */
+    intensity: number;
+}

package/dist/components/data/EmptyState.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">"use strict";
+let { title, message, icon, action, size = 'md', class: className = '' } = $props();
+const sizeClasses = {
+    sm: 'py-6 gap-2',
+    md: 'py-12 gap-3',
+    lg: 'py-20 gap-4'
+};
+const iconSizeClasses = {
+    sm: 'text-3xl',
+    md: 'text-5xl',
+    lg: 'text-6xl'
+};
+</script>
+
+<div class="flex flex-col items-center justify-center text-center {sizeClasses[size]} {className}">
+	{#if icon}
+		<div class="{iconSizeClasses[size]} text-[var(--color-text-muted)]" aria-hidden="true">
+			{@render icon()}
+		</div>
+	{/if}
+
+	{#if title}
+		<p
+			class="font-semibold"
+			style="color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-h5-size);"
+		>
+			{title}
+		</p>
+	{/if}
+
+	{#if message}
+		<p class="max-w-sm text-sm" style="color: var(--color-text-muted); font-family: var(--font-body);">
+			{message}
+		</p>
+	{/if}
+
+	{#if action}
+		<div class="mt-2">
+			{@render action()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+interface Props {
+    title?: string;
+    message?: string;
+    /** Icon or illustration shown above the title. */
+    icon?: import('svelte').Snippet;
+    /** Call-to-action area (typically a Button or LinkButton). */
+    action?: import('svelte').Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/data/Stat.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">"use strict";
-let { label, value, change, trend, icon, description } = $props();
+let { label, value, change, trend, icon, description, countUp = false, countUpDuration = 800, format } = $props();
 const trendColors = {
     up: 'var(--color-success)',
     down: 'var(--color-error)',
@@ -7,6 +7,34 @@ const trendColors = {
 };
 const trendColor = $derived(trend ? trendColors[trend] : 'var(--color-text-muted)');
 const showGlow = $derived(trend === 'up');
+// Count-up: animate toward the current numeric value; re-runs when value changes.
+let animatedValue = $state(0);
+$effect(() => {
+    if (!countUp || typeof value !== 'number')
+        return;
+    const target = value;
+    const reduced = typeof window !== 'undefined' &&
+        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) {
+        animatedValue = target;
+        return;
+    }
+    const from = animatedValue;
+    const start = performance.now();
+    let raf = 0;
+    const tick = (t) => {
+        const p = Math.min(1, (t - start) / countUpDuration);
+        const eased = 1 - Math.pow(1 - p, 3);
+        animatedValue = Math.round(from + (target - from) * eased);
+        if (p < 1)
+            raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+});
+const displayValue = $derived(countUp && typeof value === 'number'
+    ? (format ? format(animatedValue) : animatedValue)
+    : value);
 </script>
 
 <div class="panel-spectral rounded-[var(--radius-xl)] p-6">
@@ -34,7 +62,7 @@ const showGlow = $derived(trend === 'up');
 		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}
+		{displayValue}
 	</div>
 
 	<!-- Change Indicator & Description -->

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

@@ -5,6 +5,15 @@ interface Props {
     trend?: 'up' | 'down' | 'neutral';
     icon?: import('svelte').Snippet;
     description?: string;
+    /**
+     * Animate numeric values counting up from 0 on mount (easeOutCubic).
+     * Ignored for string values; disabled under prefers-reduced-motion.
+     */
+    countUp?: boolean;
+    /** Count-up duration in ms. @default 800 */
+    countUpDuration?: number;
+    /** Formatter for the displayed number while counting (e.g. toLocaleString). */
+    format?: (value: number) => string;
 }
 declare const Stat: import("svelte").Component<Props, {}, "">;
 type Stat = ReturnType<typeof Stat>;

package/dist/components/data/WeekHeatmap.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">let { matrix, rowOrder, dayLabels, hourLabel = (h) => String(h), hourLabelEvery = 1, normalize = true, highlight, markNow = false, cellLabel, onCellSelect, selected = null, ariaLabel = 'Weekly traffic heatmap', class: className = '' } = $props();
+const BASE_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const hours = Array.from({ length: 24 }, (_, h) => h);
+// Captured once at init — a long-lived page drifts; accepted (matches hand-rolled versions).
+const now = new Date();
+const nowDay = now.getDay();
+const nowHour = now.getHours();
+const order = $derived(rowOrder ?? [0, 1, 2, 3, 4, 5, 6]);
+const labels = $derived(dayLabels ?? order.map((d) => BASE_DAY_NAMES[d] ?? String(d)));
+const rows = $derived(order.map((day, i) => ({ day, label: labels[i] ?? String(day) })));
+const maxValue = $derived(normalize ? Math.max(1, ...matrix.flat()) : 100);
+function getCell(day, hour) {
+    const value = matrix[day]?.[hour] ?? 0;
+    const intensity = Math.min(100, Math.max(0, Math.round((value / maxValue) * 100)));
+    return { day, hour, value, intensity };
+}
+function labelFor(cell, dayLabel, isNow) {
+    const text = cellLabel ? cellLabel(cell) : `${dayLabel} ${hourLabel(cell.hour)} — ${cell.value}`;
+    return isNow ? `${text} (now)` : text;
+}
+const fill = (intensity) => `color-mix(in srgb, var(--color-accent) ${intensity}%, var(--color-base-2))`;
+export {};
+</script>
+
+{#if matrix.length > 0}
+	<div class="heatmap-scroll {className}">
+		<div
+			class="heatmap-grid"
+			role={onCellSelect ? undefined : 'img'}
+			aria-label={onCellSelect ? undefined : ariaLabel}
+		>
+			<!-- Corner + hour axis -->
+			<div class="heatmap-corner" aria-hidden="true"></div>
+			{#each hours as hour (hour)}
+				<div class="heatmap-axis heatmap-hour" aria-hidden="true">
+					{hour % hourLabelEvery === 0 ? hourLabel(hour) : ''}
+				</div>
+			{/each}
+
+			<!-- Day rows -->
+			{#each rows as row (row.day)}
+				<div class="heatmap-axis heatmap-day" aria-hidden="true">{row.label}</div>
+				{#each hours as hour (hour)}
+					{@const cell = getCell(row.day, hour)}
+					{@const hl = highlight?.(row.day, hour) ?? false}
+					{@const isNow = markNow && row.day === nowDay && hour === nowHour}
+					{@const isSel = !!selected && selected.day === row.day && selected.hour === hour}
+					{@const label = labelFor(cell, row.label, isNow)}
+					{#if onCellSelect}
+						<button
+							type="button"
+							class="heatmap-cell"
+							class:is-highlight={hl}
+							class:is-ring={isNow || isSel}
+							style="background-color: {fill(cell.intensity)}"
+							aria-label={label}
+							aria-pressed={isSel}
+							onclick={() => onCellSelect(cell)}
+						></button>
+					{:else}
+						<div
+							class="heatmap-cell"
+							class:is-highlight={hl}
+							class:is-ring={isNow || isSel}
+							style="background-color: {fill(cell.intensity)}"
+							title={label}
+							aria-hidden="true"
+						></div>
+					{/if}
+				{/each}
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.heatmap-scroll {
+		overflow-x: auto;
+	}
+
+	.heatmap-grid {
+		display: grid;
+		grid-template-columns: 3rem repeat(24, 1fr);
+		gap: 2px;
+		min-width: 640px;
+	}
+
+	.heatmap-axis {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.6rem;
+		color: var(--color-text-muted);
+		text-align: center;
+	}
+
+	.heatmap-corner {
+		min-width: 3rem;
+	}
+
+	.heatmap-cell {
+		height: var(--heatmap-cell-size, 1.5rem);
+		min-width: var(--heatmap-cell-size, 1.5rem);
+		border-radius: 2px;
+		border: 0;
+		padding: 0;
+	}
+
+	button.heatmap-cell {
+		cursor: pointer;
+	}
+
+	button.heatmap-cell:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.heatmap-cell.is-highlight {
+		outline: 1.5px solid color-mix(in srgb, var(--color-text) 85%, transparent);
+		outline-offset: -1.5px;
+	}
+
+	/* Ring (now / selected) wins over the highlight outline. */
+	.heatmap-cell.is-ring {
+		box-shadow: 0 0 0 2px var(--color-accent);
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (hover: hover) {
+		.heatmap-cell {
+			transition: transform 150ms var(--ease-sharp);
+		}
+
+		.heatmap-cell:hover {
+			transform: scale(1.2);
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.heatmap-cell {
+			transition: none;
+		}
+
+		.heatmap-cell:hover {
+			transform: none;
+		}
+	}</style>

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

@@ -0,0 +1,47 @@
+import type { WeekHeatmapCell } from './Data.types';
+interface Props {
+    /** 7 rows × 24 cols. Row index 0 = Sunday. */
+    matrix: number[][];
+    /**
+     * Display order of matrix row indices. Default Sunday-first [0..6].
+     * Monday-first = [1, 2, 3, 4, 5, 6, 0].
+     */
+    rowOrder?: number[];
+    /** Labels aligned to rowOrder. Default ['Sun','Mon',...] reordered by rowOrder. */
+    dayLabels?: string[];
+    /** Hour column label formatter. Default String(hour). E.g. h => '12a'/'6a'/'12p'/'6p'. */
+    hourLabel?: (hour: number) => string;
+    /**
+     * Show a label only every N hour columns (others render empty) to reduce axis noise.
+     * Default 1 (label every hour).
+     */
+    hourLabelEvery?: number;
+    /**
+     * true (default): scale intensity to max(matrix) — raw-count matrices.
+     * false: values are already 0–100 — percentage matrices.
+     */
+    normalize?: boolean;
+    /** Outline overlay predicate (e.g. member's frequent cells). */
+    highlight?: (day: number, hour: number) => boolean;
+    /** Ring the current weekday+hour cell. Default false. */
+    markNow?: boolean;
+    /** Tooltip/aria text per cell. Default: `${dayLabel} ${hourLabel} — ${value}`. */
+    cellLabel?: (cell: WeekHeatmapCell) => string;
+    /**
+     * When provided, cells render as <button> and clicking/tapping calls this —
+     * the consumer renders its own readout. When absent, cells are inert divs
+     * and the grid gets role="img".
+     */
+    onCellSelect?: (cell: WeekHeatmapCell) => void;
+    /** Currently selected cell, ring-highlighted. Consumer-managed (pairs with onCellSelect). */
+    selected?: {
+        day: number;
+        hour: number;
+    } | null;
+    /** Accessible name for the grid. Default "Weekly traffic heatmap". */
+    ariaLabel?: string;
+    class?: string;
+}
+declare const WeekHeatmap: import("svelte").Component<Props, {}, "">;
+type WeekHeatmap = ReturnType<typeof WeekHeatmap>;
+export default WeekHeatmap;

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

@@ -1,5 +1,5 @@
 export { default as Table } from './Table.svelte';
-export type { Column as TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem } from './Data.types';
+export type { Column as TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem, WeekHeatmapCell } from './Data.types';
 export { default as Pagination } from './Pagination.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Tag } from './Tag.svelte';
@@ -9,3 +9,5 @@ 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';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as WeekHeatmap } from './WeekHeatmap.svelte';

package/dist/components/data/index.js

@@ -8,3 +8,5 @@ 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';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as WeekHeatmap } from './WeekHeatmap.svelte';

package/dist/components/forms/Checkbox.svelte

@@ -1,28 +1,34 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
-let { checked = $bindable(), disabled = false, label, id = createId('checkbox'), name, onchange, iconBefore, class: className = '' } = $props();
+let { checked = $bindable(), disabled = false, error = false, label, id = createId('checkbox'), name, onchange, iconBefore, validationMessage, class: className = '' } = $props();
+const hasError = $derived(error || !!validationMessage);
 </script>
 
-<label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
-  <input
-    type="checkbox"
-    {id}
-    name={name}
-    {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>
+<div>
+  <label for={id} class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}">
+    <input
+      type="checkbox"
+      {id}
+      name={name}
+      {disabled}
+      bind:checked
+      onchange={onchange}
+      class="w-6 h-6 rounded-sm border-2 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 {hasError ? 'border-error' : 'border-border-strong'} {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>
+  {#if validationMessage}
+    <p class="text-error text-xs mt-1.5 ml-8">{validationMessage}</p>
   {/if}
-  {#if label}
-    <span class="text-text text-sm select-none">
-      {label}
-    </span>
-  {/if}
-</label>
+</div>
 
 <style>
   input[type="checkbox"]:checked::after {

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

@@ -1,11 +1,13 @@
 export interface Props {
     checked?: boolean;
     disabled?: boolean;
+    error?: boolean;
     label?: string;
     id?: string;
     name?: string;
     onchange?: (event: Event) => void;
     iconBefore?: import('svelte').Snippet;
+    validationMessage?: string;
     class?: string;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;

package/dist/components/forms/DatePicker.svelte

@@ -2,7 +2,7 @@
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
 import CalendarGrid from '../data/CalendarGrid.svelte';
 import Dropdown from '../overlays/Dropdown.svelte';
-let { variant = 'glass', value = $bindable(), min, max, placeholder = 'Select date', disabled = false, error = false, label, id = createId('datepicker'), name, autocomplete, onchange, class: className = '', } = $props();
+let { variant = 'glass', value = $bindable(), min, max, placeholder = 'Select date', disabled = false, error = false, label, id = createId('datepicker'), name, autocomplete, onchange, validationMessage, class: className = '', } = $props();
 let open = $state(false);
 let calendarElement = $state();
 let inputElement = $state();
@@ -183,7 +183,8 @@ $effect(() => {
         });
     }
 });
-const errorClasses = $derived(error ? 'error-state' : '');
+const hasError = $derived(error || !!validationMessage);
+const errorClasses = $derived(hasError ? 'error-state' : '');
 </script>
 
 <div class="date-picker-wrapper w-full">
@@ -257,6 +258,10 @@ const errorClasses = $derived(error ? 'error-state' : '');
 			/>
 		</div>
 	</Dropdown>
+
+	{#if validationMessage}
+		<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+	{/if}
 </div>
 
 <style>

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

@@ -11,6 +11,7 @@ export interface Props {
     name?: string;
     autocomplete?: HTMLInputElement['autocomplete'];
     onchange?: (event: Event) => void;
+    validationMessage?: string;
     class?: string;
 }
 declare const DatePicker: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/DateTimePicker.svelte

@@ -3,7 +3,7 @@ import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses'
 import CalendarGrid from '../data/CalendarGrid.svelte';
 import TimePickerGrid from './TimePickerGrid.svelte';
 import Dropdown from '../overlays/Dropdown.svelte';
-let { variant = 'glass', value = $bindable(), min, max, step = 60, placeholder = 'Select date and time', disabled = false, error = false, label, id = createId('datetimepicker'), name, autocomplete, is24Hour = true, onchange, class: className = '', } = $props();
+let { variant = 'glass', value = $bindable(), min, max, step = 60, placeholder = 'Select date and time', disabled = false, error = false, label, id = createId('datetimepicker'), name, autocomplete, is24Hour = true, onchange, validationMessage, class: className = '', } = $props();
 let open = $state(false);
 let activeTab = $state('date');
 let pickerElement = $state();
@@ -191,7 +191,8 @@ function handleInputKeyDown(event) {
     }
     event.preventDefault();
 }
-const errorClasses = $derived(error ? 'error-state' : '');
+const hasError = $derived(error || !!validationMessage);
+const errorClasses = $derived(hasError ? 'error-state' : '');
 </script>
 
 <div class="datetime-picker-wrapper w-full">
@@ -323,6 +324,10 @@ const errorClasses = $derived(error ? 'error-state' : '');
 			</div>
 		</div>
 	</Dropdown>
+
+	{#if validationMessage}
+		<p class="text-error text-xs mt-1.5">{validationMessage}</p>
+	{/if}
 </div>
 
 <style>

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

@@ -13,6 +13,7 @@ export interface Props {
     autocomplete?: HTMLInputElement['autocomplete'];
     is24Hour?: boolean;
     onchange?: (event: Event) => void;
+    validationMessage?: string;
     class?: string;
 }
 declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;

package/dist/components/forms/FileUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
-let { files = $bindable(null), accept, multiple = false, disabled = false, label, id = createId('file-upload'), name, onchange, icon } = $props();
+let { files = $bindable(null), accept, multiple = false, disabled = false, error = false, label, id = createId('file-upload'), name, onchange, icon, validationMessage } = $props();
+const hasError = $derived(error || !!validationMessage);
 let isDragging = $state(false);
 let inputElement;
 function handleDragOver(event) {
@@ -66,7 +67,7 @@ const fileList = $derived(files ? Array.from(files) : []);
     ondrop={handleDrop}
     onclick={handleClick}
     onkeydown={(e) => e.key === 'Enter' && handleClick()}
-    class="panel-raised rounded-[var(--radius-lg)] p-8 text-center cursor-pointer transition-all duration-300 ease-luxe {isDragging ? 'border-2 border-accent accent-glow bg-base-2' : ''} {disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}"
+    class="panel-raised rounded-[var(--radius-lg)] p-8 text-center cursor-pointer transition-all duration-300 ease-luxe {isDragging ? 'border-2 border-accent accent-glow bg-base-2' : ''} {hasError && !isDragging ? 'border-2 border-error' : ''} {disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}"
   >
     <div class="flex flex-col items-center gap-2">
       {#if icon}
@@ -134,4 +135,8 @@ const fileList = $derived(files ? Array.from(files) : []);
       </ul>
     </div>
   {/if}
+
+  {#if validationMessage}
+    <p class="text-error text-xs mt-1.5">{validationMessage}</p>
+  {/if}
 </div>

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

@@ -9,6 +9,7 @@ interface Props {
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;
+    error?: boolean;
     label?: string;
     id?: string;
     name?: string;
@@ -18,6 +19,7 @@ interface Props {
         };
     }) => void;
     icon?: import('svelte').Snippet;
+    validationMessage?: string;
 }
 declare const FileUpload: import("svelte").Component<Props, {}, "files">;
 type FileUpload = ReturnType<typeof FileUpload>;