@r2digisolutions/components 0.17.6 → 0.17.7

package/dist/components/molecules/DropZone/DropZone.svelte

@@ -25,6 +25,8 @@
 		maxSizeMb?: number;
 		/** Show image thumbnails / file cards for selected files. */
 		showPreview?: boolean;
+		/** Append “multiple · max N MB” under the hint. Default true. */
+		showConstraints?: boolean;
 		class?: string;
 		ondropfiles?: (files: File[]) => void;
 		onchange?: (files: File[]) => void;
@@ -41,6 +43,7 @@
 		disabled = false,
 		maxSizeMb = 25,
 		showPreview = true,
+		showConstraints = true,
 		class: className = '',
 		ondropfiles,
 		onchange,
@@ -239,8 +242,8 @@
 		<div>
 			<p class="text-sm font-medium text-primary">{label}</p>
 			<p class="mt-0.5 text-xs text-muted">
-				{hint}{#if multiple} · multiple{/if}
-				{#if maxSizeMb} · max {maxSizeMb}MB{/if}
+				{hint}{#if showConstraints && multiple} · multiple{/if}
+				{#if showConstraints && maxSizeMb} · max {maxSizeMb}MB{/if}
 			</p>
 		</div>
 		<input

package/dist/components/molecules/DropZone/DropZone.svelte.d.ts

@@ -16,6 +16,8 @@ interface DropZoneProps {
     maxSizeMb?: number;
     /** Show image thumbnails / file cards for selected files. */
     showPreview?: boolean;
+    /** Append “multiple · max N MB” under the hint. Default true. */
+    showConstraints?: boolean;
     class?: string;
     ondropfiles?: (files: File[]) => void;
     onchange?: (files: File[]) => void;

package/dist/components/molecules/ImageGallery/ImageGallery.stories.js

@@ -9,7 +9,7 @@ const meta = {
     argTypes: {
         variant: {
             control: 'select',
-            options: ['default', 'featured', 'masonry']
+            options: ['default', 'featured', 'masonry', 'hero']
         }
     }
 };
@@ -23,3 +23,6 @@ export const Featured = {
 export const Masonry = {
     args: { variant: 'masonry' }
 };
+export const Hero = {
+    args: { variant: 'hero' }
+};

package/dist/components/molecules/ImageGallery/ImageGallery.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import AspectRatio from '../../atoms/AspectRatio/AspectRatio.svelte';
 	import ImageLightbox from '../ImageLightbox/ImageLightbox.svelte';
 	import type { LightboxImage } from '../ImageLightbox/ImageLightbox.svelte';
@@ -11,14 +12,18 @@
 		caption?: string;
 	}
 
-	type GalleryLayout = 'grid' | 'featured' | 'masonry';
+	export type GalleryLayout = 'grid' | 'featured' | 'masonry' | 'hero';
 
 	interface ImageGalleryProps {
 		images?: GalleryImage[];
 		cols?: 2 | 3 | 4;
 		layout?: GalleryLayout;
 		showCaptions?: boolean;
+		/** Footer line under the gallery. Default true. */
+		showHint?: boolean;
+		hint?: string;
 		class?: string;
+		empty?: Snippet;
 	}
 
 	const {
@@ -26,7 +31,10 @@
 		cols = 3,
 		layout = 'grid',
 		showCaptions = false,
-		class: className = ''
+		showHint = true,
+		hint,
+		class: className = '',
+		empty
 	}: ImageGalleryProps = $props();
 
 	let open = $state(false);
@@ -51,6 +59,12 @@
 				: 'grid-cols-2 lg:grid-cols-3'
 	);
 
+	const heroVisible = $derived(images.slice(0, layout === 'hero' && images.length > 4 ? 4 : images.length));
+	const heroExtra = $derived(Math.max(0, images.length - heroVisible.length));
+	const hintText = $derived(
+		hint ?? `${images.length} photos · click to open lightbox`
+	);
+
 	const tones = [
 		'from-slate-600 to-slate-800',
 		'from-sky-500 to-indigo-700',
@@ -68,6 +82,19 @@
 	function markFailed(id: string) {
 		failed = { ...failed, [id]: true };
 	}
+
+	const heroGridClass = $derived.by(() => {
+		const n = heroVisible.length;
+		if (n <= 1) return 'grid-cols-1';
+		if (n === 2) return 'grid-cols-2';
+		return 'grid-cols-2 grid-rows-2';
+	});
+
+	const heroMainSpan = $derived.by(() => {
+		const n = heroVisible.length;
+		if (n === 3) return 'row-span-2';
+		return '';
+	});
 </script>
 
 {#snippet tile(img: GalleryImage, i: number, ratio = 1, featured = false)}
@@ -82,10 +109,7 @@
 		<AspectRatio {ratio}>
 			{#if failed[img.id]}
 				<div
-					class={[
-						'flex h-full w-full items-end bg-gradient-to-br p-4',
-						tones[i % tones.length]
-					]}
+					class={['flex h-full w-full items-end bg-gradient-to-br p-4', tones[i % tones.length]]}
 				>
 					<span class="text-sm font-medium text-white/90">{img.alt}</span>
 				</div>
@@ -119,14 +143,70 @@
 	</button>
 {/snippet}
 
-<div class={['w-full space-y-3', className]}>
-	{#if images.length === 0}
+{#snippet fillTile(img: GalleryImage, i: number, spanClass = '', extra = 0)}
+	<button
+		type="button"
+		class={[
+			'group relative min-h-0 overflow-hidden rounded-xl border border-border bg-surface-overlay text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40',
+			spanClass
+		]}
+		onclick={() => openAt(i)}
+	>
+		{#if failed[img.id]}
+			<div class={['flex h-full w-full items-end bg-gradient-to-br p-4', tones[i % tones.length]]}>
+				<span class="text-sm font-medium text-white/90">{img.alt}</span>
+			</div>
+		{:else}
+			<img
+				src={img.src}
+				alt={img.alt}
+				loading="eager"
+				decoding="async"
+				class="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
+				onerror={() => markFailed(img.id)}
+			/>
+		{/if}
 		<div
-			class="flex min-h-64 w-full items-center justify-center rounded-2xl border border-dashed border-border bg-surface-overlay px-6 text-sm text-muted"
+			class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/45 via-transparent to-transparent opacity-0 transition group-hover:opacity-100"
+		></div>
+		<span
+			class="absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/45 text-white opacity-0 backdrop-blur-sm transition group-hover:opacity-100"
 		>
-			No images yet
+			<Expand class="h-4 w-4" />
+		</span>
+		{#if extra > 0}
+			<span
+				class="absolute inset-0 flex items-center justify-center bg-neutral-950/55 text-lg font-semibold text-white"
+			>
+				+{extra}
+			</span>
+		{/if}
+	</button>
+{/snippet}
+
+<div class={['w-full space-y-3', className]}>
+	{#if images.length === 0}
+		{#if empty}
+			{@render empty()}
+		{:else}
+			<div
+				class="flex min-h-64 w-full items-center justify-center rounded-2xl border border-dashed border-border bg-surface-overlay px-6 text-sm text-muted"
+			>
+				No images yet
+			</div>
+		{/if}
+	{:else if layout === 'hero'}
+		<div class={['grid h-72 gap-2 sm:h-80', heroGridClass]}>
+			{#each heroVisible as img, i (img.id)}
+				{@render fillTile(
+					img,
+					i,
+					i === 0 ? heroMainSpan : '',
+					i === heroVisible.length - 1 ? heroExtra : 0
+				)}
+			{/each}
 		</div>
-	{:else if layout === 'featured' && images.length > 0}
+	{:else if layout === 'featured'}
 		<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
 			{@render tile(images[0], 0, 1, true)}
 			{#each images.slice(1) as img, i (img.id)}
@@ -162,7 +242,7 @@
 						/>
 					{/if}
 					<span
-						class="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/45 text-white opacity-0 backdrop-blur-sm transition group-hover:opacity-100"
+						class="absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/45 text-white opacity-0 backdrop-blur-sm transition group-hover:opacity-100"
 					>
 						<Expand class="h-4 w-4" />
 					</span>
@@ -177,8 +257,8 @@
 		</div>
 	{/if}
 
-	{#if images.length}
-		<p class="text-xs text-muted">{images.length} photos · click to open lightbox</p>
+	{#if images.length && showHint}
+		<p class="text-xs text-muted">{hintText}</p>
 	{/if}
 
 	{#if lightboxImages.length}

package/dist/components/molecules/ImageGallery/ImageGallery.svelte.d.ts

@@ -1,16 +1,21 @@
+import type { Snippet } from 'svelte';
 export interface GalleryImage {
     id: string;
     src: string;
     alt: string;
     caption?: string;
 }
-type GalleryLayout = 'grid' | 'featured' | 'masonry';
+export type GalleryLayout = 'grid' | 'featured' | 'masonry' | 'hero';
 interface ImageGalleryProps {
     images?: GalleryImage[];
     cols?: 2 | 3 | 4;
     layout?: GalleryLayout;
     showCaptions?: boolean;
+    /** Footer line under the gallery. Default true. */
+    showHint?: boolean;
+    hint?: string;
     class?: string;
+    empty?: Snippet;
 }
 declare const ImageGallery: import("svelte").Component<ImageGalleryProps, {}, "">;
 type ImageGallery = ReturnType<typeof ImageGallery>;

package/dist/components/molecules/ImageGallery/ImageGalleryStory.svelte

@@ -3,7 +3,7 @@
 	import type { GalleryImage } from './ImageGallery.svelte';
 
 	interface Props {
-		variant?: 'default' | 'featured' | 'masonry';
+		variant?: 'default' | 'featured' | 'masonry' | 'hero';
 	}
 
 	let { variant = 'default' }: Props = $props();
@@ -60,6 +60,8 @@
 		<ImageGallery {images} layout="featured" showCaptions cols={4} class="w-full" />
 	{:else if variant === 'masonry'}
 		<ImageGallery {images} layout="masonry" showCaptions class="w-full" />
+	{:else if variant === 'hero'}
+		<ImageGallery {images} layout="hero" class="w-full" />
 	{:else}
 		<ImageGallery {images} cols={3} showCaptions class="w-full" />
 	{/if}

package/dist/components/molecules/ImageGallery/ImageGalleryStory.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    variant?: 'default' | 'featured' | 'masonry';
+    variant?: 'default' | 'featured' | 'masonry' | 'hero';
 }
 declare const ImageGalleryStory: import("svelte").Component<Props, {}, "">;
 type ImageGalleryStory = ReturnType<typeof ImageGalleryStory>;

package/dist/components/molecules/StatCard/StatCard.svelte

@@ -5,6 +5,7 @@
 	import Badge from '../../atoms/Badge/Badge.svelte';
 
 	export type StatCardTrend = 'up' | 'down' | 'neutral';
+	export type StatCardSize = 'sm' | 'md';
 
 	interface StatCardProps {
 		label: string;
@@ -15,6 +16,7 @@
 		badge?: string;
 		badgeVariant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
 		variant?: CardVariant;
+		size?: StatCardSize;
 		class?: string;
 		icon?: Snippet;
 		onclick?: (e: MouseEvent) => void;
@@ -29,39 +31,70 @@
 		badge,
 		badgeVariant = 'primary',
 		variant = 'default',
+		size = 'md',
 		class: className = '',
 		icon,
 		onclick
 	}: StatCardProps = $props();
+
+	const compact = $derived(size === 'sm');
 </script>
 
-<Card {variant} padding="md" hoverable={!!onclick} {onclick} class={className} chrome={false}>
-	<div class="flex items-start justify-between gap-3">
+<Card
+	{variant}
+	padding={compact ? 'sm' : 'md'}
+	hoverable={!!onclick}
+	{onclick}
+	class={className}
+	chrome={false}
+>
+	<div class="gap-3 flex items-start justify-between">
 		<div class="min-w-0 space-y-1">
-			<div class="flex flex-wrap items-center gap-2">
-				<p class="text-sm font-medium text-secondary">{label}</p>
+			<div class="gap-2 flex flex-wrap items-center">
+				<p class={['font-medium text-secondary', compact ? 'text-xs' : 'text-sm']}>{label}</p>
 				{#if badge}
 					<Badge variant={badgeVariant} size="sm">{badge}</Badge>
 				{/if}
 			</div>
-			<p class="text-2xl font-semibold tracking-tight text-primary">{value}</p>
+			<p
+				class={[
+					'min-w-0 font-semibold tracking-tight text-primary',
+					compact ? 'text-lg leading-snug' : 'text-2xl'
+				]}
+			>
+				{value}
+			</p>
 			{#if delta || description}
-				<div class="flex flex-wrap items-center gap-2 text-xs">
+				<div class="gap-2 text-xs flex flex-wrap items-center">
 					{#if delta}
 						<span
 							class={[
-								'inline-flex items-center gap-0.5 font-medium',
+								'gap-0.5 font-medium inline-flex items-center',
 								trend === 'up' && 'text-green-600 dark:text-green-400',
 								trend === 'down' && 'text-red-600 dark:text-red-400',
 								trend === 'neutral' && 'text-muted'
 							]}
 						>
 							{#if trend === 'up'}
-								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+								<svg
+									class="h-3.5 w-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2.5"
+									aria-hidden="true"
+								>
 									<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
 								</svg>
 							{:else if trend === 'down'}
-								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+								<svg
+									class="h-3.5 w-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2.5"
+									aria-hidden="true"
+								>
 									<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 								</svg>
 							{/if}
@@ -76,7 +109,10 @@
 		</div>
 		{#if icon}
 			<div
-				class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-950/60 dark:text-brand-400"
+				class={[
+					'rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-950/60 dark:text-brand-400 flex shrink-0 items-center justify-center',
+					compact ? 'h-8 w-8' : 'h-10 w-10'
+				]}
 			>
 				{@render icon()}
 			</div>

package/dist/components/molecules/StatCard/StatCard.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { CardVariant } from '../Card/Card.svelte';
 export type StatCardTrend = 'up' | 'down' | 'neutral';
+export type StatCardSize = 'sm' | 'md';
 interface StatCardProps {
     label: string;
     value: string | number;
@@ -10,6 +11,7 @@ interface StatCardProps {
     badge?: string;
     badgeVariant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
     variant?: CardVariant;
+    size?: StatCardSize;
     class?: string;
     icon?: Snippet;
     onclick?: (e: MouseEvent) => void;

package/dist/index.d.ts

@@ -360,7 +360,7 @@ export { default as OfflineBanner } from './components/molecules/OfflineBanner/O
 export { default as UnsavedChanges } from './components/molecules/UnsavedChanges/UnsavedChanges.svelte';
 export { default as ErrorBoundary } from './components/molecules/ErrorBoundary/ErrorBoundary.svelte';
 export { default as StatCard } from './components/molecules/StatCard/StatCard.svelte';
-export type { StatCardTrend } from './components/molecules/StatCard/StatCard.svelte';
+export type { StatCardTrend, StatCardSize } from './components/molecules/StatCard/StatCard.svelte';
 export { default as MediaCard } from './components/molecules/MediaCard/MediaCard.svelte';
 export { default as FormActions } from './components/molecules/FormActions/FormActions.svelte';
 export { default as FormSection } from './components/molecules/FormSection/FormSection.svelte';
@@ -465,7 +465,7 @@ export type { CalendarEvent, CalendarEventColor } from './components/molecules/E
 export { default as CompareSlider } from './components/molecules/CompareSlider/CompareSlider.svelte';
 export { default as PdfViewer } from './components/molecules/PdfViewer/PdfViewer.svelte';
 export { default as ImageGallery } from './components/molecules/ImageGallery/ImageGallery.svelte';
-export type { GalleryImage } from './components/molecules/ImageGallery/ImageGallery.svelte';
+export type { GalleryImage, GalleryLayout } from './components/molecules/ImageGallery/ImageGallery.svelte';
 export { default as LogViewer } from './components/molecules/LogViewer/LogViewer.svelte';
 export type { LogEntry, LogLevel } from './components/molecules/LogViewer/LogViewer.svelte';
 export { default as PriceTag } from './components/molecules/PriceTag/PriceTag.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.17.6",
+	"version": "0.17.7",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",