@marianmeres/stuic 2.13.0 → 2.14.0

package/dist/components/AvatarInitials/AvatarInitials.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" module>
+	export interface Props {
+		/** String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com" */
+		input: string;
+		/** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
+		hashSource?: string;
+		/** Size preset or custom Tailwind size class */
+		size?: "sm" | "md" | "lg" | string;
+		/** Click handler - when provided, renders as a button */
+		onclick?: (event: MouseEvent) => void;
+		/** Background color (Tailwind class). Ignored if autoColor=true */
+		bg?: string;
+		/** Text color (Tailwind class). Ignored if autoColor=true */
+		textColor?: string;
+		/** Generate deterministic pastel colors from hashSource/input */
+		autoColor?: boolean;
+		/** CSS class override */
+		class?: string;
+		/** Bindable element reference */
+		el?: HTMLDivElement | HTMLButtonElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { generateAvatarColors } from "../../utils/avatar-colors.js";
+
+	let {
+		input,
+		hashSource,
+		size = "md",
+		onclick,
+		bg,
+		textColor,
+		autoColor = false,
+		class: classProp,
+		el = $bindable(),
+	}: Props = $props();
+
+	const SIZE_PRESETS: Record<string, string> = {
+		sm: "size-8 text-xs",
+		md: "size-10 text-sm",
+		lg: "size-14 text-base",
+	};
+
+	let initials = $derived.by(() => {
+		let _input = (input || "").trim();
+
+		if (!_input) return "?";
+
+		// Check if input looks like an email
+		if (_input.includes("@")) {
+			const username = _input.split("@")[0];
+			// Split by common separators (., _, -)
+			const parts = username.split(/[._-]/).filter(Boolean);
+			if (parts.length > 1) {
+				_input = parts.map((p) => p.charAt(0)).join("");
+			} else {
+				_input = username;
+			}
+		}
+		// Check if input looks like a full name (multiple words)
+		else if (_input.length > 2 && /\s/.test(_input)) {
+			_input = _input
+				.split(/\s/)
+				.map((v) => v.trim())
+				.filter(Boolean)
+				.map((v) => v.charAt(0))
+				.join("");
+		}
+
+		// Extract first 2 chars, uppercase
+		return _input.slice(0, 2).toUpperCase();
+	});
+
+	let colors = $derived(
+		autoColor ? generateAvatarColors(hashSource || input || "") : null
+	);
+
+	let sizeClass = $derived(SIZE_PRESETS[size] || size);
+
+	let style = $derived(
+		autoColor && colors
+			? `background-color: ${colors.bg}; color: ${colors.text};`
+			: undefined
+	);
+
+	let baseClass = $derived(
+		twMerge(
+			"stuic-avatar-initials",
+			"inline-flex items-center justify-center",
+			"rounded-full font-medium shrink-0",
+			!autoColor &&
+				"bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200",
+			sizeClass,
+			!autoColor && bg,
+			!autoColor && textColor,
+			onclick && "select-none cursor-pointer",
+			classProp
+		)
+	);
+</script>
+
+{#if onclick}
+	<button bind:this={el} type="button" class={baseClass} {style} {onclick}>
+		{initials}
+	</button>
+{:else}
+	<div bind:this={el} class={baseClass} {style}>
+		{initials}
+	</div>
+{/if}

package/dist/components/AvatarInitials/AvatarInitials.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface Props {
+    /** String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com" */
+    input: string;
+    /** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
+    hashSource?: string;
+    /** Size preset or custom Tailwind size class */
+    size?: "sm" | "md" | "lg" | string;
+    /** Click handler - when provided, renders as a button */
+    onclick?: (event: MouseEvent) => void;
+    /** Background color (Tailwind class). Ignored if autoColor=true */
+    bg?: string;
+    /** Text color (Tailwind class). Ignored if autoColor=true */
+    textColor?: string;
+    /** Generate deterministic pastel colors from hashSource/input */
+    autoColor?: boolean;
+    /** CSS class override */
+    class?: string;
+    /** Bindable element reference */
+    el?: HTMLDivElement | HTMLButtonElement;
+}
+declare const AvatarInitials: import("svelte").Component<Props, {}, "el">;
+type AvatarInitials = ReturnType<typeof AvatarInitials>;
+export default AvatarInitials;

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

@@ -0,0 +1 @@
+export { default as AvatarInitials, type Props as AvatarInitialsProps, } from "./AvatarInitials.svelte";

package/dist/components/AvatarInitials/index.js

@@ -0,0 +1 @@
+export { default as AvatarInitials, } from "./AvatarInitials.svelte";

package/dist/index.d.ts

@@ -24,6 +24,7 @@
 export * from "./components/AlertConfirmPrompt/index.js";
 export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
+export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";

package/dist/index.js

@@ -25,6 +25,7 @@
 export * from "./components/AlertConfirmPrompt/index.js";
 export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
+export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";

package/dist/utils/avatar-colors.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Generates deterministic, harmonious pastel colors for avatar backgrounds.
+ *
+ * The colors are derived from a hash of the input string, ensuring the same
+ * input always produces the same color combination. The background is a pastel
+ * color (high lightness, moderate saturation) and the text is a darker shade
+ * of the same hue for visual harmony and good contrast.
+ *
+ * @param source - The string to hash for color generation (e.g., email, user ID)
+ * @returns Object with `bg` and `text` CSS color strings in HSL format
+ *
+ * @example
+ * ```ts
+ * generateAvatarColors("user@example.com");
+ * // { bg: "hsl(142, 52%, 68%)", text: "hsl(142, 62%, 28%)" }
+ *
+ * generateAvatarColors("another@example.com");
+ * // { bg: "hsl(287, 48%, 71%)", text: "hsl(287, 58%, 28%)" }
+ * ```
+ */
+export declare function generateAvatarColors(source: string): {
+    bg: string;
+    text: string;
+};

package/dist/utils/avatar-colors.js

@@ -0,0 +1,37 @@
+import { strHash } from "./str-hash.js";
+/**
+ * Generates deterministic, harmonious pastel colors for avatar backgrounds.
+ *
+ * The colors are derived from a hash of the input string, ensuring the same
+ * input always produces the same color combination. The background is a pastel
+ * color (high lightness, moderate saturation) and the text is a darker shade
+ * of the same hue for visual harmony and good contrast.
+ *
+ * @param source - The string to hash for color generation (e.g., email, user ID)
+ * @returns Object with `bg` and `text` CSS color strings in HSL format
+ *
+ * @example
+ * ```ts
+ * generateAvatarColors("user@example.com");
+ * // { bg: "hsl(142, 52%, 68%)", text: "hsl(142, 62%, 28%)" }
+ *
+ * generateAvatarColors("another@example.com");
+ * // { bg: "hsl(287, 48%, 71%)", text: "hsl(287, 58%, 28%)" }
+ * ```
+ */
+export function generateAvatarColors(source) {
+    // Get hash as hex string and convert to number
+    const hashHex = strHash(source || "");
+    const hash = parseInt(hashHex, 16);
+    // Derive hue (0-360) from hash
+    const hue = hash % 360;
+    // Derive saturation and lightness variations from hash for slight variety
+    // Saturation: 40-55% (pastel range - soft, not too vivid)
+    const saturation = 40 + (hash % 15);
+    // Lightness: 75-82% (high lightness ensures dark text is always readable)
+    const lightness = 75 + (hash % 7);
+    const bg = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    // Text: same hue, more saturated, very dark for strong contrast
+    const text = `hsl(${hue}, ${saturation + 15}%, 22%)`;
+    return { bg, text };
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./avatar-colors.js";
 export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./avatar-colors.js";
 export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",