@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -171,6 +171,7 @@
 </script>
 
 <script lang="ts">
+	import Button from "../Button/Button.svelte";
 	const clog = createClog("AssetsPreview", { color: "auto" });
 
 	let {
@@ -219,7 +220,13 @@
 	let imgEl: HTMLImageElement | null = null;
 	let containerEl: HTMLDivElement | null = $state(null);
 
-	const TOP_BUTTON_CLS = "rounded bg-white hover:bg-neutral-200 p-1";
+	const BUTTON_CLS = "stuic-assets-preview-control pointer-events-auto p-0!";
+
+	const BUTTON_PROPS = {
+		aspect1: true,
+		variant: "soft",
+		roundedFull: true,
+	};
 
 	$effect(() => {
 		const visible = modal?.visibility().visible;
@@ -457,6 +464,7 @@
 		previewIdx = idx % assets.length;
 	}
 
+	const ICON_SIZE = 24;
 	// $inspect(assets).with(clog);
 </script>
 
@@ -513,7 +521,9 @@
 							class: "mx-auto",
 						})}
 					</div>
-					<div class="opacity-50 mt-4">{t("unable_to_preview")}</div>
+					<div class="text-(--stuic-color-muted-foreground) mt-4">
+						{t("unable_to_preview")}
+					</div>
 				</div>
 			{/if}
 
@@ -521,95 +531,103 @@
 				<div
 					class="absolute inset-0 flex items-center justify-between pointer-events-none"
 				>
-					<button
-						class={twMerge("p-4 pointer-events-auto", classControls)}
+					<!-- class={twMerge("p-4 aspect-square pointer-events-auto", classControls)} -->
+					<Button
+						class={twMerge(BUTTON_CLS, "ml-4", classControls)}
 						onclick={preview_previous}
 						type="button"
+						{...BUTTON_PROPS}
 					>
-						<span class="bg-white rounded-full p-3 block">
-							{@html iconPrevious()}
-						</span>
-					</button>
-
-					<button
-						class={twMerge("p-4 pointer-events-auto", classControls)}
+						<!-- <span class="stuic-assets-preview-control-nav p-3 block"> -->
+						{@html iconPrevious({ size: ICON_SIZE })}
+						<!-- </span> -->
+					</Button>
+
+					<!-- class={twMerge("p-4 aspect-square pointer-events-auto", classControls)} -->
+					<Button
+						class={twMerge(BUTTON_CLS, "mr-4", classControls)}
 						onclick={preview_next}
 						type="button"
+						{...BUTTON_PROPS}
 					>
-						<span class="bg-white rounded-full p-3 block">
-							{@html iconNext()}
-						</span>
-					</button>
+						<!-- <span class="stuic-assets-preview-control-nav p-3 block"> -->
+						{@html iconNext({ size: ICON_SIZE })}
+						<!-- </span> -->
+					</Button>
 				</div>
 			{/if}
 
 			<div class="absolute top-4 left-4 right-4 flex items-center justify-between gap-3">
 				{#if !noName && previewAsset?.name}
-					<span class="truncate bg-white px-1 rounded">
+					<span class="stuic-assets-preview-label truncate px-1">
 						{previewAsset?.name}
 					</span>
 				{:else}
 					<span></span>
 				{/if}
 				<div class="flex items-center space-x-3 shrink-0">
-				{#if previewAsset.isImage}
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
-						type="button"
-						onclick={zoomOut}
-						disabled={zoomLevelIdx === 0}
-						aria-label={t("zoom_out")}
-						use:tooltip={() => ({ content: t("zoom_out") })}
-					>
-						{@html iconZoomOut({ class: "size-6" })}
-					</button>
-
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
+					{#if previewAsset.isImage}
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={zoomOut}
+							disabled={zoomLevelIdx === 0}
+							aria-label={t("zoom_out")}
+							tooltip={t("zoom_out")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconZoomOut({ size: ICON_SIZE })}
+						</Button>
+
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={zoomIn}
+							disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
+							aria-label={t("zoom_in")}
+							tooltip={t("zoom_in")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconZoomIn({ size: ICON_SIZE })}
+						</Button>
+					{/if}
+
+					{#if typeof onDelete === "function"}
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={() => onDelete(previewAsset, previewIdx, { close })}
+							aria-label={t("delete")}
+							tooltip={t("delete")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconDelete({ size: ICON_SIZE })}
+						</Button>
+					{/if}
+
+					<Button
+						class={twMerge(BUTTON_CLS, classControls)}
 						type="button"
-						onclick={zoomIn}
-						disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
-						aria-label={t("zoom_in")}
-						use:tooltip={() => ({ content: t("zoom_in") })}
+						onclick={(e) => {
+							e.preventDefault();
+							forceDownload(String(previewAsset.url.original), previewAsset?.name || "");
+						}}
+						aria-label={t("download")}
+						tooltip={t("download")}
+						{...BUTTON_PROPS}
 					>
-						{@html iconZoomIn({ class: "size-6" })}
-					</button>
-				{/if}
+						{@html iconDownload({ size: ICON_SIZE })}
+					</Button>
 
-				{#if typeof onDelete === "function"}
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
+					<Button
+						class={twMerge(BUTTON_CLS, classControls)}
+						onclick={modal?.close}
+						aria-label={t("close")}
 						type="button"
-						onclick={() => onDelete(previewAsset, previewIdx, { close })}
-						aria-label={t("delete")}
-						use:tooltip
-					>
-						{@html iconDelete({ class: "size-6" })}
-					</button>
-				{/if}
-
-				<button
-					class={twMerge(TOP_BUTTON_CLS, classControls)}
-					type="button"
-					onclick={(e) => {
-						e.preventDefault();
-						forceDownload(String(previewAsset.url.original), previewAsset?.name || "");
-					}}
-					aria-label={t("download")}
-					use:tooltip
-				>
-					{@html iconDownload({ class: "size-6" })}
-				</button>
-
-				<button
-					class={twMerge(TOP_BUTTON_CLS, classControls)}
-					onclick={modal?.close}
-					aria-label={t("close")}
-					type="button"
-					use:tooltip
-				>
-					<X />
-				</button>
+						tooltip={t("close")}
+						{...BUTTON_PROPS}
+						x
+					/>
 				</div>
 			</div>
 
@@ -619,7 +637,7 @@
 						class="absolute bottom-10 left-0 right-0 text-center"
 						transition:fade={{ duration: 100 }}
 					>
-						<span class="bg-white p-1 rounded opacity/75">
+						<span class="stuic-assets-preview-label p-1">
 							{dotTooltip}
 						</span>
 					</div>
@@ -630,8 +648,8 @@
 						<button
 							type="button"
 							class={twMerge(
-								"size-3 rounded-full transition-colors border border-black/50",
-								i === previewIdx ? "bg-white" : "bg-white/50 hover:bg-neutral-200"
+								"stuic-assets-preview-dot",
+								i === previewIdx ? "active" : ""
 							)}
 							onclick={() => {
 								previewIdx = i;

package/dist/components/AssetsPreview/index.css

@@ -0,0 +1,61 @@
+/* ============================================================================
+   ASSETS PREVIEW COMPONENT TOKENS
+   Override globally: :root { --stuic-assets-preview-control-bg: var(--stuic-color-muted); }
+   Override locally:  <AssetsPreview style="--stuic-assets-preview-control-bg: red;">
+   ============================================================================ */
+
+:root {
+	/* Control buttons (zoom, download, close, prev/next) */
+
+	/* Labels (filename, tooltip) */
+	--stuic-assets-preview-label-bg: var(--stuic-color-surface);
+	--stuic-assets-preview-label-text: var(--stuic-color-surface-foreground);
+	--stuic-assets-preview-label-radius: var(--radius-sm);
+
+	/* Dot indicators */
+	--stuic-assets-preview-dot-size: 0.75rem;
+	--stuic-assets-preview-dot-bg: color-mix(
+		in srgb,
+		var(--stuic-color-surface) 50%,
+		transparent
+	);
+	--stuic-assets-preview-dot-bg-active: var(--stuic-color-surface);
+	--stuic-assets-preview-dot-bg-hover: var(--stuic-color-surface-hover);
+	--stuic-assets-preview-dot-border: var(--stuic-color-border);
+
+	/* Transition */
+	--stuic-assets-preview-transition: 150ms;
+}
+
+@layer components {
+	/* ============================================================================
+	   LABELS (filename display, tooltip)
+	   ============================================================================ */
+
+	.stuic-assets-preview-label {
+		background: var(--stuic-assets-preview-label-bg);
+		color: var(--stuic-assets-preview-label-text);
+		border-radius: var(--stuic-assets-preview-label-radius);
+	}
+
+	/* ============================================================================
+	   DOT INDICATORS (pagination dots)
+	   ============================================================================ */
+
+	.stuic-assets-preview-dot {
+		width: var(--stuic-assets-preview-dot-size);
+		height: var(--stuic-assets-preview-dot-size);
+		border-radius: 9999px;
+		background: var(--stuic-assets-preview-dot-bg);
+		border: 1px solid var(--stuic-assets-preview-dot-border);
+		transition: background var(--stuic-assets-preview-transition);
+	}
+
+	.stuic-assets-preview-dot:hover {
+		background: var(--stuic-assets-preview-dot-bg-hover);
+	}
+
+	.stuic-assets-preview-dot.active {
+		background: var(--stuic-assets-preview-dot-bg-active);
+	}
+}

package/dist/components/Avatar/Avatar.svelte

@@ -60,14 +60,19 @@
 		el = $bindable(),
 	}: Props = $props();
 
-	const SIZE_PRESETS: Record<string, { container: string; icon: number }> = {
-		sm: { container: "size-8 text-xs", icon: 16 },
-		md: { container: "size-10 text-base", icon: 20 },
-		lg: { container: "size-12 text-lg", icon: 28 },
-		xl: { container: "size-14 text-xl", icon: 32 },
-		"2xl": { container: "size-16 text-2xl", icon: 36 },
+	// Icon sizes for preset sizes (visual sizes are handled by CSS)
+	const ICON_SIZES: Record<string, number> = {
+		sm: 16,
+		md: 20,
+		lg: 28,
+		xl: 32,
+		"2xl": 36,
 	};
 
+	// Check if size is a known preset
+	const isPresetSize = (s: string): s is "sm" | "md" | "lg" | "xl" | "2xl" =>
+		s in ICON_SIZES;
+
 	// Extract initials from input string (email, name, or raw initials)
 	function extractInitials(input: string, length: number): string {
 		let _input = (input || "").trim();
@@ -145,8 +150,7 @@
 
 	// Get icon size based on preset or custom size
 	let iconSize = $derived.by(() => {
-		const preset = SIZE_PRESETS[size];
-		if (preset) return preset.icon;
+		if (isPresetSize(size)) return ICON_SIZES[size];
 
 		// For custom sizes, try to parse size-N pattern
 		const match = size?.match(/size-(\d+)/);
@@ -162,25 +166,21 @@
 		autoColor ? generateAvatarColors(hashSource || initialsProp || "") : null
 	);
 
-	let sizeClass = $derived(SIZE_PRESETS[size]?.container || size);
-
 	let style = $derived(
 		autoColor && colors
 			? `background-color: ${colors.bg}; color: ${colors.text};`
 			: undefined
 	);
 
+	// Build class string - base class for CSS targeting, allow user overrides via classProp
 	let baseClass = $derived(
 		twMerge(
 			"stuic-avatar",
-			"inline-flex items-center justify-center",
-			"rounded-full font-medium shrink-0 overflow-hidden",
-			!autoColor &&
-				"bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200",
-			sizeClass,
+			// Custom size classes when not using preset (preset sizes handled by data-size in CSS)
+			!isPresetSize(size) && size,
+			// User-provided Tailwind overrides for colors (only when not using autoColor)
 			!autoColor && bg,
 			!autoColor && textColor,
-			onclick && "select-none cursor-pointer",
 			classProp
 		)
 	);
@@ -191,7 +191,15 @@
 </script>
 
 {#if onclick}
-	<button bind:this={el} type="button" class={baseClass} {style} {onclick}>
+	<button
+		bind:this={el}
+		type="button"
+		class={baseClass}
+		{style}
+		{onclick}
+		data-size={isPresetSize(size) ? size : undefined}
+		data-interactive="true"
+	>
 		{#if renderMode === "photo"}
 			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
 		{:else if renderMode === "initials"}
@@ -201,7 +209,12 @@
 		{/if}
 	</button>
 {:else}
-	<div bind:this={el} class={baseClass} {style}>
+	<div
+		bind:this={el}
+		class={baseClass}
+		{style}
+		data-size={isPresetSize(size) ? size : undefined}
+	>
 		{#if renderMode === "photo"}
 			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
 		{:else if renderMode === "initials"}

package/dist/components/Avatar/README.md

@@ -0,0 +1,166 @@
+# Avatar
+
+A flexible avatar component that displays user photos, initials, or icons with automatic fallback handling and optional deterministic color generation.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | - | Photo URL - when provided, renders in photo mode |
+| `alt` | `string` | - | Alt text for photo mode |
+| `initials` | `string` | - | String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com" |
+| `initialsLength` | `number` | `2` | Maximum length of extracted initials |
+| `icon` | `IconFn` | - | Icon function to display - when provided alone, renders in icon mode |
+| `fallback` | `AvatarFallback` | `"icon"` | Fallback when photo fails to load |
+| `hashSource` | `string` | - | String for color hash calculation (e.g., email, user ID). Falls back to `initials` |
+| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| string` | `"md"` | Size preset or custom Tailwind size class |
+| `onclick` | `(event: MouseEvent) => void` | - | Click handler - when provided, renders as a button |
+| `bg` | `string` | - | Background color (Tailwind class). Ignored if `autoColor=true` |
+| `textColor` | `string` | - | Text color (Tailwind class). Ignored if `autoColor=true` |
+| `autoColor` | `boolean` | `false` | Generate deterministic pastel colors from hashSource/initials |
+| `class` | `string` | - | Additional CSS classes |
+| `el` | `HTMLElement` | - | Bindable element reference |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+  import { Avatar } from '@marianmeres/stuic';
+</script>
+
+<!-- Photo -->
+<Avatar src="/path/to/photo.jpg" alt="John Doe" />
+
+<!-- Initials -->
+<Avatar initials="John Doe" />
+
+<!-- Icon (default fallback) -->
+<Avatar />
+```
+
+### Sizes
+
+```svelte
+<Avatar initials="AB" size="sm" />
+<Avatar initials="AB" size="md" />
+<Avatar initials="AB" size="lg" />
+<Avatar initials="AB" size="xl" />
+<Avatar initials="AB" size="2xl" />
+
+<!-- Custom size with Tailwind -->
+<Avatar initials="AB" size="size-20" />
+```
+
+### Auto Color
+
+Generate deterministic pastel colors based on a hash source:
+
+```svelte
+<!-- Same input always produces same color -->
+<Avatar initials="john@example.com" autoColor />
+<Avatar initials="Jane Smith" autoColor hashSource="user-123" />
+```
+
+### Photo with Fallback
+
+```svelte
+<!-- Falls back to icon on error -->
+<Avatar src="/maybe-broken.jpg" fallback="icon" />
+
+<!-- Falls back to initials on error -->
+<Avatar src="/maybe-broken.jpg" fallback="initials" initials="JD" />
+
+<!-- Falls back to specific initials -->
+<Avatar src="/maybe-broken.jpg" fallback={{ initials: "AB" }} />
+```
+
+### As Button
+
+```svelte
+<Avatar
+  src="/photo.jpg"
+  onclick={() => console.log('clicked')}
+/>
+```
+
+### Custom Colors
+
+```svelte
+<!-- Using Tailwind classes -->
+<Avatar initials="AB" bg="bg-blue-500" textColor="text-white" />
+
+<!-- Using inline style for component tokens -->
+<Avatar
+  initials="AB"
+  style="--stuic-avatar-bg: #3b82f6; --stuic-avatar-fg: white;"
+/>
+```
+
+## CSS Variables
+
+### Component Tokens
+
+Override globally in `:root` or locally via `style` prop:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-avatar-radius` | `9999px` | Border radius (circle by default) |
+| `--stuic-avatar-font-weight` | `--font-weight-medium` | Font weight for initials |
+| `--stuic-avatar-transition` | `150ms` | Transition duration |
+| `--stuic-avatar-bg` | `--stuic-color-muted` | Default background color |
+| `--stuic-avatar-fg` | `--stuic-color-muted-foreground` | Default text/icon color |
+| `--stuic-avatar-ring-width` | `3px` | Focus ring width (button mode) |
+| `--stuic-avatar-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Size Tokens
+
+Each size preset has corresponding tokens (font sizes use Tailwind CSS variables):
+
+| Size | Width/Height | Font Size |
+|------|--------------|-----------|
+| `sm` | `--stuic-avatar-size-sm` (2rem) | `--stuic-avatar-font-size-sm` (`--text-xs`) |
+| `md` | `--stuic-avatar-size-md` (2.5rem) | `--stuic-avatar-font-size-md` (`--text-base`) |
+| `lg` | `--stuic-avatar-size-lg` (3rem) | `--stuic-avatar-font-size-lg` (`--text-lg`) |
+| `xl` | `--stuic-avatar-size-xl` (3.5rem) | `--stuic-avatar-font-size-xl` (`--text-xl`) |
+| `2xl` | `--stuic-avatar-size-2xl` (4rem) | `--stuic-avatar-font-size-2xl` (`--text-2xl`) |
+
+### Customization Examples
+
+```css
+/* Global override - square avatars */
+:root {
+  --stuic-avatar-radius: 0.5rem;
+}
+
+/* Global override - larger default size */
+:root {
+  --stuic-avatar-size-md: 3rem;
+  --stuic-avatar-font-size-md: 1.25rem;
+}
+```
+
+```svelte
+<!-- Local override - square avatar -->
+<Avatar initials="AB" style="--stuic-avatar-radius: 0.25rem;" />
+```
+
+## Data Attributes
+
+The component uses data attributes for CSS styling:
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `data-size` | `sm`, `md`, `lg`, `xl`, `2xl` | Size preset (only for preset sizes) |
+| `data-interactive` | `true` | Present when `onclick` is provided |
+
+## Theming
+
+The Avatar component uses theme tokens for default colors:
+
+- Background: `--stuic-color-muted`
+- Foreground: `--stuic-color-muted-foreground`
+- Focus ring: `--stuic-color-ring`
+
+These automatically adapt to light/dark mode when using the theming system.

package/dist/components/Avatar/index.css

@@ -0,0 +1,130 @@
+/* ============================================================================
+   AVATAR COMPONENT TOKENS
+   Override globally: :root { --stuic-avatar-radius: 0.5rem; }
+   Override locally:  <Avatar style="--stuic-avatar-radius: 0;">
+   ============================================================================ */
+
+:root {
+	/* Component-level customization tokens */
+	--stuic-avatar-radius: 9999px;
+	--stuic-avatar-font-weight: var(--font-weight-medium);
+	--stuic-avatar-transition: 150ms;
+
+	/* Default colors (uses muted role colors) */
+	--stuic-avatar-bg: var(--stuic-color-muted);
+	--stuic-avatar-fg: var(--stuic-color-muted-foreground);
+
+	/* Focus ring (for interactive/button mode) */
+	--stuic-avatar-ring-width: 3px;
+	--stuic-avatar-ring-offset: 0px;
+	--stuic-avatar-ring-color: var(--stuic-color-ring);
+
+	/* Size: sm */
+	--stuic-avatar-size-sm: calc(var(--spacing) * 8);
+	--stuic-avatar-font-size-sm: var(--text-xs);
+
+	/* Size: md */
+	--stuic-avatar-size-md: calc(var(--spacing) * 10);
+	--stuic-avatar-font-size-md: var(--text-base);
+
+	/* Size: lg */
+	--stuic-avatar-size-lg: calc(var(--spacing) * 12);
+	--stuic-avatar-font-size-lg: var(--text-lg);
+
+	/* Size: xl */
+	--stuic-avatar-size-xl: calc(var(--spacing) * 14);
+	--stuic-avatar-font-size-xl: var(--text-xl);
+
+	/* Size: 2xl */
+	--stuic-avatar-size-2xl: calc(var(--spacing) * 16);
+	--stuic-avatar-font-size-2xl: var(--text-2xl);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-avatar {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		overflow: hidden;
+
+		/* Typography */
+		font-weight: var(--stuic-avatar-font-weight);
+
+		/* Box model */
+		border-radius: var(--stuic-avatar-radius);
+
+		/* Colors (can be overridden by autoColor inline styles) */
+		background: var(--stuic-avatar-bg);
+		color: var(--stuic-avatar-fg);
+
+		/* Transition for interactive mode */
+		transition:
+			background var(--stuic-avatar-transition),
+			color var(--stuic-avatar-transition),
+			opacity var(--stuic-avatar-transition);
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   ============================================================================ */
+
+	.stuic-avatar[data-size="sm"] {
+		width: var(--stuic-avatar-size-sm);
+		height: var(--stuic-avatar-size-sm);
+		font-size: var(--stuic-avatar-font-size-sm);
+	}
+
+	.stuic-avatar[data-size="md"] {
+		width: var(--stuic-avatar-size-md);
+		height: var(--stuic-avatar-size-md);
+		font-size: var(--stuic-avatar-font-size-md);
+	}
+
+	.stuic-avatar[data-size="lg"] {
+		width: var(--stuic-avatar-size-lg);
+		height: var(--stuic-avatar-size-lg);
+		font-size: var(--stuic-avatar-font-size-lg);
+	}
+
+	.stuic-avatar[data-size="xl"] {
+		width: var(--stuic-avatar-size-xl);
+		height: var(--stuic-avatar-size-xl);
+		font-size: var(--stuic-avatar-font-size-xl);
+	}
+
+	.stuic-avatar[data-size="2xl"] {
+		width: var(--stuic-avatar-size-2xl);
+		height: var(--stuic-avatar-size-2xl);
+		font-size: var(--stuic-avatar-font-size-2xl);
+	}
+
+	/* ============================================================================
+	   INTERACTIVE MODE (button)
+	   ============================================================================ */
+
+	.stuic-avatar[data-interactive] {
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-avatar[data-interactive]:hover {
+		opacity: 0.85;
+	}
+
+	.stuic-avatar[data-interactive]:active {
+		opacity: 0.75;
+	}
+
+	/* Focus styles */
+	.stuic-avatar[data-interactive]:focus-visible {
+		outline: var(--stuic-avatar-ring-width) solid var(--stuic-avatar-ring-color);
+		outline-offset: var(--stuic-avatar-ring-offset);
+	}
+}