@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/common/my-account-menu/my-account-menu.js

@@ -1,28 +1,60 @@
 import Avatar from "../../components/avatar/avatar.js";
-import List from "../../components/list/list.js";
+import List$1 from "../../components/list/list.js";
 import { Button } from "../../components/button/button.js";
-import Menu from "../../components/menu/menu.js";
+import Menu$1 from "../../components/menu/menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
 //#region src/common/my-account-menu/my-account-menu.tsx
-function MyAccountMenu({ name, email, imageUrl, minWidth = "200px", menuItems, badgeColor, badgeIcon }) {
-	return /* @__PURE__ */ jsx(Menu, {
-		trigger: /* @__PURE__ */ jsxs(Button, {
+function MyAccountMenu({ name, email, imageUrl, minWidth = "200px", menuItems, avatarColor, badgeColor, badgeIcon, triggerVariant = "avatar", side, align = "end" }) {
+	const avatar = /* @__PURE__ */ jsx(Avatar, {
+		name: name || email,
+		imageUrl,
+		color: avatarColor,
+		badgeColor,
+		badgeIcon
+	});
+	return /* @__PURE__ */ jsx(Menu$1, {
+		trigger: triggerVariant === "card" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "account-menu-card",
+			className: "flex w-full min-w-0 cursor-pointer items-center gap-3 overflow-hidden rounded-[var(--espd-radius-item,var(--radius-md))] p-2 text-left outline-hidden ring-ring transition-colors hover:bg-accent/60 focus-visible:ring-[length:var(--espd-ring-width,2px)] data-[state=open]:bg-accent/60",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0",
+					children: avatar
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "grid min-w-0 flex-1 leading-tight",
+					children: [name && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm font-medium",
+						children: name
+					}), email && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: email
+					})]
+				}),
+				/* @__PURE__ */ jsx(ChevronsUpDown, {
+					className: "size-4 shrink-0 opacity-60",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "My Account"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Button, {
 			variant: "ghost",
 			size: "icon",
 			className: "rounded-full",
-			children: [/* @__PURE__ */ jsx(Avatar, {
-				name: name || email,
-				imageUrl,
-				badgeColor,
-				badgeIcon
-			}), /* @__PURE__ */ jsx("span", {
+			children: [avatar, /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "My Account"
 			})]
 		}),
-		align: "end",
+		side,
+		align,
 		minWidth,
-		children: /* @__PURE__ */ jsx(List, {
+		children: /* @__PURE__ */ jsx(List$1, {
 			items: menuItems,
 			role: "dropdown-list"
 		})

package/dist/common/profile-card/profile-card.js

@@ -1,14 +1,15 @@
 import Avatar from "../../components/avatar/avatar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/common/profile-card/profile-card.tsx
-function ProfileCard({ name, email, imageUrl }) {
+function ProfileCard({ name, email, imageUrl, avatarColor }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "shrink-0",
 			children: /* @__PURE__ */ jsx(Avatar, {
 				name: name || email,
-				imageUrl: imageUrl || ""
+				imageUrl: imageUrl || "",
+				color: avatarColor
 			})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex-1 min-w-0 flex flex-col gap-1",

package/dist/components/accordion/accordion.js

@@ -19,20 +19,29 @@ var sizeStyles = {
 		text: "text-lg font-medium tracking-tight"
 	}
 };
-function Accordion({ items, size = "default", allowMultiple = false, defaultValue, className, triggerClassName, contentClassName }) {
+/** The open ids in the shape the primitive wants for the mode: one string (single), or a list (multiple). */
+function resolveValue(value, allowMultiple) {
+	if (allowMultiple) return Array.isArray(value) ? value : value ? [value] : void 0;
+	return typeof value === "string" ? value : Array.isArray(value) ? value[0] : void 0;
+}
+function Accordion({ items, size = "default", allowMultiple = false, defaultValue, value, onValueChange, className, itemClassName, triggerClassName, contentClassName }) {
 	const styles = sizeStyles[size];
-	const resolvedDefault = allowMultiple ? Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : void 0 : typeof defaultValue === "string" ? defaultValue : Array.isArray(defaultValue) ? defaultValue[0] : void 0;
+	const state = value === void 0 ? { defaultValue: resolveValue(defaultValue, allowMultiple) } : {
+		value: resolveValue(value, allowMultiple) ?? (allowMultiple ? [] : ""),
+		onValueChange
+	};
 	return /* @__PURE__ */ jsx(Accordion$1, {
 		type: allowMultiple ? "multiple" : "single",
 		collapsible: true,
-		defaultValue: resolvedDefault,
+		...state,
 		className: cn("w-full", className),
 		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
 			value: item.id,
+			className: itemClassName,
 			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-				className: cn(styles.trigger, triggerClassName),
+				className: cn("min-w-0 gap-2", styles.trigger, triggerClassName),
 				children: /* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-2",
+					className: "flex min-w-0 flex-1 items-center gap-2",
 					children: [item.icon, typeof item.title === "string" ? /* @__PURE__ */ jsx("span", {
 						className: styles.text,
 						children: item.title

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+
+interface AccordionItem {
+    id: string;
+    title: string | ReactNode;
+    icon?: ReactNode;
+    content: string | ReactNode;
+}
+type AccordionSize = Size;
+interface AccordionProps {
+    items: AccordionItem[];
+    size?: AccordionSize;
+    allowMultiple?: boolean;
+    /** What is open at first, when the accordion keeps its own state. */
+    defaultValue?: string | string[];
+    /**
+     * What is open, when the caller keeps the state (controlled): the open
+     * item's id, or `''` for none; with `allowMultiple`, the open ids. An
+     * accordion the page also opens and closes from elsewhere — a row opened
+     * by a click on a drawing — passes this with `onValueChange`.
+     */
+    value?: string | string[];
+    /** Called with the new `value` on every open or close the person makes. */
+    onValueChange?: (value: string | string[]) => void;
+    className?: string;
+    /** On every item (the row): `data-[state=open]:…` styles the open one. */
+    itemClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+}
+
+declare function Accordion({ items, size, allowMultiple, defaultValue, value, onValueChange, className, itemClassName, triggerClassName, contentClassName, }: AccordionProps): React.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionSize };

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+import { Accordion } from "./accordion.js";
+export { Accordion };

package/dist/components/advanced-search-box/advanced-search-box.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
 import { Button } from "../button/button.js";
 import { outlineSearchShellClasses, searchFieldContainerSizeClasses, searchFieldIconSizeClasses, searchFieldInputTextClasses } from "../search-field-shell.js";
@@ -7,7 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, Search, X } from "lucide-react";
 //#region src/components/advanced-search-box/advanced-search-box.tsx
 var DEBOUNCE_MS = 500;
-function AdvancedSearchBox({ searchMeta, onSearch, size = "default", className, searchOnEnter = false }) {
+function AdvancedSearchBox({ searchMeta, onSearch, size = "default", className, searchOnEnter = false, radius, border }) {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const [selectedId, setSelectedId] = useState(searchMeta[0].id);
 	const [value, setValue] = useState("");
 	const onSearchRef = useRef(onSearch);
@@ -86,7 +91,8 @@ function AdvancedSearchBox({ searchMeta, onSearch, size = "default", className,
 		className: "h-auto w-auto p-0 m-0 shrink-0"
 	}) : /* @__PURE__ */ jsx(Search, { className: cn(iconSize, "text-muted-foreground shrink-0") });
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-md", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		style: axes.style,
 		children: [
 			fieldSelector,
 			/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border shrink-0" }),

package/dist/components/advanced-search-box/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface SearchMeta<TId extends string = string> {
+    id: TId;
+    label: string;
+    type: string;
+    placeholder: string;
+}
+interface AdvancedSearchBoxProps<TId extends string = string> extends Pick<StyleAxisProps, "radius" | "border"> {
+    searchMeta: SearchMeta<TId>[];
+    onSearch: (data: {
+        id: TId;
+        value: string;
+    }) => void;
+    size?: Size;
+    className?: string;
+    /**
+     * When true, onSearch fires only when the user presses Enter (or clicks the
+     * Clear button). Typing and switching the search field do not trigger it.
+     * Default: false (500ms debounced as-you-type behavior).
+     */
+    searchOnEnter?: boolean;
+}
+
+declare function AdvancedSearchBox<TId extends string = string>({ searchMeta, onSearch, size, className, searchOnEnter, radius, border, }: AdvancedSearchBoxProps<TId>): React.JSX.Element;
+
+export { AdvancedSearchBox, type AdvancedSearchBoxProps, type SearchMeta };

package/dist/components/advanced-search-box/index.js

@@ -0,0 +1,2 @@
+import AdvancedSearchBox from "./advanced-search-box.js";
+export { AdvancedSearchBox };

package/dist/components/alert/alert.js

@@ -38,7 +38,7 @@ var dismissButtonSizeClasses = {
 	default: "size-7 [&_svg]:size-4",
 	lg: "size-8 [&_svg]:size-4"
 };
-var Alert = React$1.forwardRef(({ icon, title, description, children, type, color, iconAvatarVariant = "solid", size = "sm", variant = "gradient", hideIcon = false, action, actions, actionsPlacement, dismissible = false, onDismiss, dismissLabel = "Close alert", className }, ref) => {
+var Alert = React$1.forwardRef(({ icon, title, description, children, type, color, iconAvatarVariant = "solid", size = "sm", variant = "gradient", hideIcon = false, action, actions, actionsPlacement, dismissible = false, onDismiss, dismissLabel = "Close alert", className, radius }, ref) => {
 	const [dismissed, setDismissed] = React$1.useState(false);
 	const handleDismiss = React$1.useCallback(() => {
 		setDismissed(true);
@@ -68,6 +68,7 @@ var Alert = React$1.forwardRef(({ icon, title, description, children, type, colo
 	if (dismissed) return null;
 	return /* @__PURE__ */ jsx(IconTextActionCard, {
 		ref,
+		radius,
 		title,
 		description: resolvedDescription,
 		icon: resolvedIcon,

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { b as AlertProps } from '../../alert.props-CcKo49Rb.js';
+export { A as AlertColor, a as AlertIconAvatarVariant, c as AlertSize, d as AlertType, e as AlertVariant } from '../../alert.props-CcKo49Rb.js';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../icon-avatar.props-RYtw2eSW.js';
+import '../../icon-text-action-card.props-B2ggncUK.js';
+
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Alert, AlertProps };

package/dist/components/alert/index.js

@@ -0,0 +1,2 @@
+import { Alert } from "./alert.js";
+export { Alert };

package/dist/components/anchored-panel/anchored-panel.js

@@ -0,0 +1,83 @@
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../../core/popover.js";
+import { Typography } from "../typography/typography.js";
+import { ToolbarButton } from "../toolbar/toolbar-button.js";
+import { Badge } from "../../core/badge.js";
+import { useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/components/anchored-panel/anchored-panel.tsx
+/**
+* A square panel attached to a point by a short leader line — beside the thing
+* it edits, never in a far corner. Non-modal: what is behind it stays live.
+* Focus moves into it on opening; Escape, ✕ or a press elsewhere closes it
+* and focus goes back where it was.
+*/
+function AnchoredPanel({ open, anchorRef, side, title, subtitle, badge, closeLabel, onClose, keepOpenFor, children }) {
+	const titleId = useId();
+	const body = useRef(null);
+	function onOpenFocus(event) {
+		event.preventDefault();
+		body.current?.focus();
+	}
+	function onOutside(event) {
+		if (keepOpenFor && event.target instanceof Element && keepOpenFor(event.target)) event.preventDefault();
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => !next && onClose(),
+		modal: false,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			ref: anchorRef,
+			className: "pointer-events-none absolute top-0 left-0 size-0",
+			children: open && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("absolute top-0 h-px w-4 bg-primary", side === "right" ? "left-0" : "right-0")
+			})
+		}), open && /* @__PURE__ */ jsxs(PopoverContent, {
+			side,
+			align: "center",
+			sideOffset: 16,
+			avoidCollisions: false,
+			"aria-labelledby": titleId,
+			onInteractOutside: onOutside,
+			onOpenAutoFocus: onOpenFocus,
+			"data-slot": "anchored-panel",
+			className: "flex max-h-96 w-80 flex-col overflow-hidden rounded-xs border border-primary bg-background p-0 shadow-sm",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex h-9 shrink-0 items-center gap-2 border-b border-border bg-surface-container-low pr-1 pl-3",
+				children: [
+					/* @__PURE__ */ jsx(Typography, {
+						id: titleId,
+						variant: "subtitle2",
+						as: "h2",
+						className: "m-0 min-w-0 truncate text-sm text-foreground",
+						children: title
+					}),
+					subtitle && /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground-secondary",
+						children: subtitle
+					}),
+					!subtitle && /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					badge && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "shrink-0 rounded-xs font-mono text-xs",
+						children: badge
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						label: closeLabel,
+						icon: /* @__PURE__ */ jsx(X, {}),
+						onClick: onClose
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: body,
+				tabIndex: -1,
+				className: "min-h-0 overflow-y-auto overscroll-contain p-3 outline-none",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+export { AnchoredPanel };

package/dist/components/anchored-panel/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Ref, ReactNode } from 'react';
+
+interface AnchoredPanelProps {
+    open: boolean;
+    /** The point it is attached to: a zero-size element the caller keeps in place (it follows pan and zoom). */
+    anchorRef: Ref<HTMLDivElement>;
+    /** Which side of the anchor it opens on; the caller picks the one with room. */
+    side: "left" | "right";
+    /** Plain words: what this is ("Room sensor"). */
+    title: string;
+    /** The engineering name beside it, monospace (`room_sensor · DHT22`). */
+    subtitle?: string;
+    /** A short tag after the title ("At boot"). */
+    badge?: string;
+    closeLabel: string;
+    onClose: () => void;
+    /** A press outside that should NOT close it (the readout that opened it: its own click toggles it). */
+    keepOpenFor?: (target: Element) => boolean;
+    children: ReactNode;
+}
+
+/**
+ * A square panel attached to a point by a short leader line — beside the thing
+ * it edits, never in a far corner. Non-modal: what is behind it stays live.
+ * Focus moves into it on opening; Escape, ✕ or a press elsewhere closes it
+ * and focus goes back where it was.
+ */
+declare function AnchoredPanel({ open, anchorRef, side, title, subtitle, badge, closeLabel, onClose, keepOpenFor, children }: AnchoredPanelProps): React.JSX.Element;
+
+export { AnchoredPanel, type AnchoredPanelProps };

package/dist/components/anchored-panel/index.js

@@ -0,0 +1,2 @@
+import { AnchoredPanel } from "./anchored-panel.js";
+export { AnchoredPanel };

package/dist/components/animated-containers/index.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+import { Transition } from 'framer-motion';
+
+interface PopCollectionItemProps {
+    index: number;
+    children: React.ReactNode;
+    layout?: boolean;
+    delayMultiplier?: number;
+    transition?: Transition;
+}
+declare function PopCollectionItem({ index, children, layout, delayMultiplier, transition, }: PopCollectionItemProps): React$1.JSX.Element;
+
+export { PopCollectionItem, type PopCollectionItemProps };

package/dist/components/animated-containers/index.js

@@ -0,0 +1,2 @@
+import { PopCollectionItem } from "./pop-collection-item.js";
+export { PopCollectionItem };

package/dist/components/async-multi-select/async-multi-select.js

@@ -1,8 +1,9 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
 import { Badge } from "../../core/badge.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../core/command.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../core/command.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, X } from "lucide-react";
@@ -22,8 +23,13 @@ function normalizeValue(value, multiple) {
 	if (Array.isArray(value)) return value;
 	return multiple ? [value] : [value];
 }
-function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSearchChange, hasMore = false, onLoadMore, isLoading = false, disabled = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, size = "default", className, clearable = false, maxDisplayedBadges = 3, portal = true, renderOption }) {
+function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSearchChange, hasMore = false, onLoadMore, isLoading = false, disabled = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, size = "default", className, clearable = false, maxDisplayedBadges = 3, portal = true, renderOption, action, radius, border }) {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const [open, setOpen] = React$1.useState(false);
+	const triggerId = React$1.useId();
 	const [inputValue, setInputValue] = React$1.useState("");
 	const listRef = React$1.useRef(null);
 	const sentinelRef = React$1.useRef(null);
@@ -63,6 +69,14 @@ function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSe
 			setOpen(false);
 		}
 	};
+	const handleAction = () => {
+		setOpen(false);
+		action?.onSelect();
+	};
+	const emptyContent = isLoading ? /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center py-6",
+		children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-4 border-primary border-t-transparent" })
+	}) : emptyText;
 	const handleRemove = (optionValue, e) => {
 		e.stopPropagation();
 		const next = selected.filter((v) => v !== optionValue);
@@ -118,6 +132,7 @@ function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSe
 		children: [label != null && /* @__PURE__ */ jsx("div", {
 			className: "flex items-center justify-between",
 			children: /* @__PURE__ */ jsxs("label", {
+				htmlFor: triggerId,
 				className: "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
 				children: [label, required && /* @__PURE__ */ jsx("span", {
 					className: "text-destructive",
@@ -130,11 +145,13 @@ function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSe
 			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs("button", {
+					id: triggerId,
 					type: "button",
 					role: "combobox",
 					"aria-expanded": open,
 					disabled,
-					className: cn("flex w-full items-center justify-between rounded-md border border-input bg-transparent ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", !multiple && "whitespace-nowrap [&>span]:line-clamp-1", triggerSizeClasses[size], className),
+					className: cn("flex w-full items-center justify-between rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-transparent ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", !multiple && "whitespace-nowrap [&>span]:line-clamp-1", triggerSizeClasses[size], className),
+					style: axes.style,
 					children: [renderTriggerContent(), /* @__PURE__ */ jsx(ChevronDown, { className: cn("ml-2 shrink-0 opacity-50", chevronSizeClasses[size]) })]
 				})
 			}), /* @__PURE__ */ jsx(PopoverContent, {
@@ -151,10 +168,10 @@ function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSe
 						ref: listRef,
 						className: "overscroll-contain",
 						children: [
-							/* @__PURE__ */ jsx(CommandEmpty, { children: isLoading ? /* @__PURE__ */ jsx("div", {
-								className: "flex items-center justify-center py-6",
-								children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-4 border-primary border-t-transparent" })
-							}) : emptyText }),
+							action ? options.length === 0 && /* @__PURE__ */ jsx("div", {
+								className: "py-6 text-center text-sm",
+								children: emptyContent
+							}) : /* @__PURE__ */ jsx(CommandEmpty, { children: emptyContent }),
 							/* @__PURE__ */ jsx(CommandGroup, {
 								className: "p-0",
 								children: options.map((opt) => {
@@ -187,6 +204,30 @@ function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSe
 							isLoading && options.length > 0 && /* @__PURE__ */ jsx("div", {
 								className: "flex items-center justify-center py-3",
 								children: /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" })
+							}),
+							action && /* @__PURE__ */ jsxs("div", {
+								className: "sticky bottom-0 bg-popover",
+								children: [/* @__PURE__ */ jsx(CommandSeparator, {
+									alwaysRender: true,
+									className: "mx-0 my-1.5"
+								}), /* @__PURE__ */ jsxs(CommandItem, {
+									value: "__async-multi-select-action__",
+									onSelect: handleAction,
+									className: "w-full gap-2.5 py-2 pl-2.5 pr-2.5",
+									children: [action.icon && /* @__PURE__ */ jsx("span", {
+										className: "flex shrink-0 items-center text-muted-foreground",
+										children: action.icon
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 flex-col gap-0.5",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "font-medium leading-relaxed",
+											children: action.label
+										}), action.description && /* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs font-normal text-muted-foreground",
+											children: action.description
+										})]
+									})]
+								})]
 							})
 						]
 					})]

package/dist/components/async-multi-select/index.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface AsyncMultiSelectOption {
+    value: string;
+    /** Primary text (trigger, badges, screen readers). */
+    label: string;
+    /** Optional second line in the dropdown (e.g. id), muted smaller text. */
+    description?: string;
+}
+/** A row pinned under the options that does something instead of selecting (e.g. "Browse all"). */
+interface AsyncMultiSelectAction {
+    label: string;
+    /** Optional second line, muted (e.g. how many there are to browse). */
+    description?: string;
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Called when the row is chosen; the dropdown closes first. */
+    onSelect: () => void;
+}
+interface AsyncMultiSelectProps extends Pick<StyleAxisProps, "radius" | "border"> {
+    options: AsyncMultiSelectOption[];
+    multiple?: boolean;
+    value?: string | string[];
+    onValueChange?: (value: string | string[] | undefined) => void;
+    onSearchChange?: (query: string) => void;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    isLoading?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyText?: string;
+    searchPlaceholder?: string;
+    label?: React.ReactNode;
+    required?: boolean;
+    size?: Size;
+    className?: string;
+    clearable?: boolean;
+    maxDisplayedBadges?: number;
+    /**
+     * Render the dropdown in a portal at the document body. Defaults to `true`,
+     * which is safe inside a modal `Dialog`/`Sheet` too. Set `false` only to keep
+     * the dropdown within a specific stacking context — note that an inline
+     * dropdown is clipped by any scrollable ancestor.
+     */
+    portal?: boolean;
+    /**
+     * When set, replaces the default label/description row in the dropdown list.
+     * Trigger and badges still use `label` / `description` from each option.
+     */
+    renderOption?: (option: AsyncMultiSelectOption) => React.ReactNode;
+    /**
+     * A row pinned under the scrolling options, after a separator — always in
+     * sight and reachable with the arrow keys, also when nothing matches.
+     * Choosing it closes the dropdown and calls `onSelect`; it selects nothing.
+     */
+    action?: AsyncMultiSelectAction;
+}
+
+declare function AsyncMultiSelect({ options, multiple, value, onValueChange, onSearchChange, hasMore, onLoadMore, isLoading, disabled, placeholder, emptyText, searchPlaceholder, label, required, size, className, clearable, maxDisplayedBadges, portal, renderOption, action, radius, border, }: AsyncMultiSelectProps): React.JSX.Element;
+
+export { AsyncMultiSelect, type AsyncMultiSelectOption, type AsyncMultiSelectProps };

package/dist/components/async-multi-select/index.js

@@ -0,0 +1,2 @@
+import { AsyncMultiSelect } from "./async-multi-select.js";
+export { AsyncMultiSelect };

package/dist/components/avatar/avatar.js

@@ -7,21 +7,28 @@ import { User } from "lucide-react";
 var sizeClasses = {
 	sm: "h-5 w-5 text-[10px]",
 	default: "h-7 w-7 text-xs",
-	lg: "h-10 w-10 text-sm"
+	lg: "h-10 w-10 text-sm",
+	xl: "h-19 w-19 text-2xl"
 };
-function Avatar({ name, imageUrl, size = "default", className, badgeColor, badgeIcon }) {
+function Avatar({ name, imageUrl, size = "default", className, badgeColor, badgeIcon, fallback, color = "primary" }) {
 	const displayInitial = name ? name.charAt(0).toUpperCase() : null;
 	const showIconBadge = badgeIcon != null && badgeIcon !== false;
 	const colorResolved = !showIconBadge && badgeColor != null ? resolveColor(badgeColor, "bg") : void 0;
 	const hasBadge = showIconBadge || Boolean(colorResolved);
+	const fill = resolveColor(color, "bg");
+	const onFill = resolveColor(color, "fg");
 	const avatar = /* @__PURE__ */ jsxs(Avatar$1, {
 		className: cn(sizeClasses[size], className),
 		children: [imageUrl && /* @__PURE__ */ jsx(AvatarImage, {
 			src: imageUrl,
 			alt: name ?? "User avatar"
 		}), /* @__PURE__ */ jsx(AvatarFallback, {
-			className: cn("bg-primary text-primary-foreground font-medium", sizeClasses[size], className),
-			children: displayInitial ?? /* @__PURE__ */ jsx(User, { className: "h-3/5 w-3/5" })
+			className: cn(fill.className, onFill.className, "font-medium", sizeClasses[size], className),
+			style: fill.style || onFill.style ? {
+				...fill.style,
+				...onFill.style
+			} : void 0,
+			children: fallback ?? displayInitial ?? /* @__PURE__ */ jsx(User, { className: "h-3/5 w-3/5" })
 		})]
 	});
 	if (!hasBadge) return avatar;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { A as AvatarProps } from '../../avatar.props-2q5BsX-R.js';
+export { a as AvatarSize } from '../../avatar.props-2q5BsX-R.js';
+import '../../index-BQANnKs9.js';
+
+declare function Avatar({ name, imageUrl, size, className, badgeColor, badgeIcon, fallback, color, }: AvatarProps): React.JSX.Element;
+
+export { Avatar, AvatarProps };

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from "./avatar.js";
+export { Avatar };