@marianmeres/stuic 2.13.0 → 2.16.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/components/DropdownMenu/DropdownMenu.svelte

@@ -159,8 +159,8 @@
 		onOpen?: () => void;
 		/** Called when menu closes */
 		onClose?: () => void;
-		/** Called when any action item is selected */
-		onSelect?: (item: DropdownMenuActionItem) => void;
+		/** Called when any action item is selected (fallback if item has no onSelect) */
+		onSelect?: (item: DropdownMenuActionItem) => void | boolean;
 		/** Reference to trigger element */
 		triggerEl?: HTMLButtonElement;
 		/** Reference to dropdown element */
@@ -213,7 +213,7 @@
 		bg-white dark:bg-neutral-800
 		text-neutral-900 dark:text-neutral-100
 		border border-neutral-200 dark:border-neutral-700
-		rounded-md shadow-lg
+		rounded-md shadow-md
 		p-1
 		overflow-y-auto
 		z-50
@@ -299,7 +299,7 @@
 	let wrapperEl: HTMLDivElement = $state()!;
 	let activeItemEl: HTMLButtonElement | undefined = $state();
 	const reducedMotion = prefersReducedMotion();
-	const isSupported = !forceFallback && isAnchorPositioningSupported();
+	const isSupported = untrack(() => !forceFallback && isAnchorPositioningSupported());
 
 	// Track expanded sections (independent toggle - multiple can be open)
 	let expandedSections = $state<Set<string | number>>(new Set());
@@ -432,8 +432,8 @@
 	function selectItem(item: DropdownMenuActionItem) {
 		if (item.disabled) return;
 
-		const result = item.onSelect?.();
-		onSelect?.(item);
+		// Call item's onSelect if defined, otherwise fall back to component's onSelect
+		const result = item.onSelect ? item.onSelect() : onSelect?.(item);
 
 		if (result !== false && closeOnSelect) {
 			isOpen = false;

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

@@ -129,8 +129,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     onOpen?: () => void;
     /** Called when menu closes */
     onClose?: () => void;
-    /** Called when any action item is selected */
-    onSelect?: (item: DropdownMenuActionItem) => void;
+    /** Called when any action item is selected (fallback if item has no onSelect) */
+    onSelect?: (item: DropdownMenuActionItem) => void | boolean;
     /** Reference to trigger element */
     triggerEl?: HTMLButtonElement;
     /** Reference to dropdown element */
@@ -138,7 +138,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
 }
 export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
 export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\t";
-export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-lg\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
+export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-md\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
 export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-2 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left text-sm\n\t\trounded-sm\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";

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.16.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",