nexus-shared 3.0.0 → 3.2.0

package/dist/Components/Layouts/Popup.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconMinus, iconSquare, iconSquares, iconX, InlineIcon } from "nexus-icons";
 import { useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { afterAnimation } from "../../Helpers/AnimationHelpers.js";
+import { afterAnimation, motionAllowed } from "../../Helpers/AnimationHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { cssVariablePosition, DRAG_CANCEL_SELECTOR, moveWithin, startDrag, viewportBounds } from "../../Helpers/DragHelpers.js";
 import { HostedPopupContext } from "./PopupContext.js";
@@ -12,9 +12,6 @@ const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([t
 // Where a minimized popup flies to: the newest bar of the dock, at the bottom right.
 const DOCK_EDGE = 16;
 const DOCK_BAR = { width: 300, height: 44 };
-function motionAllowed() {
-    return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function popupPosition(dialog) {
     return cssVariablePosition(dialog, "--nx-popup-x", "--nx-popup-y");
 }

package/dist/Components/Layouts/ThemePicker.d.ts

@@ -4,10 +4,28 @@ export interface ThemePickerProps {
     themes?: readonly ThemeOption[];
     /** Show the Light / Dark / System choice. Default `true`. */
     showMode?: boolean;
+    /** Show Compact / Cozy. Default `true`. */
+    showDensity?: boolean;
+    /** Show Animations: On / Off / System. Default `true`. */
+    showAnimations?: boolean;
+    /** Show the scale grid, a development tool. Default: in a development build only. */
+    showGrid?: boolean;
     className?: string;
 }
 /**
- * Light / Dark / System, and a card per theme with a live preview of its colors.
- * The choice applies at once and is saved in the browser.
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
  */
-export declare function ThemePicker({ themes, showMode, className }: ThemePickerProps): import("react").JSX.Element;
+export declare function ThemePicker({ themes, showMode, showDensity, showAnimations, showGrid, className }: ThemePickerProps): import("react").JSX.Element;
+export interface PreferencesPickerProps {
+    className?: string;
+}
+/**
+ * The person's quick preferences, each applied at once and saved on this device: the interface language and the
+ * calendar; the date picker's language, the clock and the date format (the date settings every date component reads);
+ * the number scale and the thousands separator (every number box, slider and table number without a locale of its
+ * own); and the page size tables open with and whether a row click opens a record (every table, once chosen, over what
+ * the table names itself). `ThemeSwitcher` shows it under the theme.
+ */
+export declare function PreferencesPicker({ className }: PreferencesPickerProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemePicker.js

@@ -1,22 +1,105 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconCheck, iconDeviceDesktop, iconMoon, iconSun, InlineIcon } from "nexus-icons";
+import { iconArrowsMaximize, iconArrowsMinimize, iconCheck, iconCircleCheck, iconCircleX, iconDeviceDesktop, iconEyeOff, iconLayoutGrid, iconMoon, iconSun, iconTable, InlineIcon, } from "nexus-icons";
 import { useId } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
+import { formatDate } from "../../Helpers/DateHelpers.js";
+import { setDatePreferences, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from "../../Helpers/TableHelpers.js";
+import { isDevelopmentBuild } from "../../Helpers/ThemeHelpers.js";
+import { setUserPreferences, useUserPreferences } from "../../Helpers/UserPreferences.js";
+import { DATE_FORMATS, DEFAULT_TIME_FORMAT } from "../../Interfaces/DateInterfaces.js";
+import { ENumberScales } from "../../Interfaces/PreferenceInterfaces.js";
 import { NEXUS_THEMES } from "../../Interfaces/ThemeInterfaces.js";
 import { useTheme } from "../../Services/ThemeService.js";
 import { TabButtons } from "../Documents/TabButtons.js";
+import { Switch } from "../Inputs/CheckBox.js";
+import { Dropdown } from "../Inputs/Dropdown.js";
+import { TextBox } from "../Inputs/TextBox.js";
 const MODES = [
     { value: "light", label: "Light", icon: _jsx(InlineIcon, { icon: iconSun }) },
     { value: "dark", label: "Dark", icon: _jsx(InlineIcon, { icon: iconMoon }) },
     { value: "system", label: "System", icon: _jsx(InlineIcon, { icon: iconDeviceDesktop }), title: "Follow the operating system" },
 ];
+const DENSITIES = [
+    { value: "compact", label: "Compact", icon: _jsx(InlineIcon, { icon: iconArrowsMinimize }) },
+    { value: "cozy", label: "Cozy", icon: _jsx(InlineIcon, { icon: iconArrowsMaximize }), title: "Taller controls and rows, for touch screens and large monitors" },
+];
+const ANIMATIONS = [
+    { value: "on", label: "On", icon: _jsx(InlineIcon, { icon: iconCircleCheck }), title: "Animate, even when the operating system asks for less motion" },
+    { value: "off", label: "Off", icon: _jsx(InlineIcon, { icon: iconCircleX }), title: "Nothing moves" },
+    { value: "system", label: "System", icon: _jsx(InlineIcon, { icon: iconDeviceDesktop }), title: "Follow the operating system's animations setting" },
+];
+const GRIDS = [
+    { value: "off", label: "Off", icon: _jsx(InlineIcon, { icon: iconEyeOff }) },
+    { value: "px", label: "px", icon: _jsx(InlineIcon, { icon: iconLayoutGrid }), title: "A line every 4px, a solid one every 48px" },
+    { value: "cm", label: "mm", icon: _jsx(InlineIcon, { icon: iconTable }), title: "A line every millimetre, a solid one every centimetre" },
+];
+/** A small heading and what it names: a row of tab buttons by default, or the control given. */
+function Choice({ id, legend, options, value, onChange, children }) {
+    return (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: id, className: "nx-theme-picker__legend", children: legend }), children ?? (options && value !== undefined && onChange && _jsx(TabButtons, { "aria-labelledby": id, name: id, options: options, value: value, onChange: onChange, block: true }))] }));
+}
+/** A group of settings under its name: one section of the panel, a line above it. */
+function Section({ title, wide, children }) {
+    const id = useId();
+    return (_jsxs("section", { className: cx("nx-theme-picker__block", wide && "nx-theme-picker__block--wide"), "aria-labelledby": id, children: [_jsx("h3", { id: id, className: "nx-theme-picker__section", children: title }), children] }));
+}
+/**
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
+ */
+export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, showDensity = true, showAnimations = true, showGrid = isDevelopmentBuild(), className }) {
+    const { theme, mode, density, animations, grid, setTheme, setMode, setDensity, setAnimations, setGrid } = useTheme();
+    const name = useId();
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Theme", wide: true, children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Colors" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }), (showDensity || showAnimations || showGrid) && (_jsxs(Section, { title: "Appearance", children: [showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }))] }));
+}
+/* The quick preferences: language, dates, numbers and tables, beside the theme. */
+const LANGUAGES = [
+    { value: "en", label: "English" },
+    { value: "ne", label: _jsx("span", { lang: "ne", children: "\u0928\u0947\u092A\u093E\u0932\u0940" }), title: "Nepali" },
+];
+const CALENDARS = [
+    { value: "ad", label: "AD", title: "Gregorian (AD)" },
+    { value: "bs", label: "BS", title: "Bikram Sambat (BS)" },
+];
+const SCRIPTS = [
+    { value: "latin", label: "English", title: "Month names and digits in English" },
+    { value: "devanagari", label: _jsx("span", { lang: "ne", children: "\u0928\u0947\u092A\u093E\u0932\u0940" }), title: "Month names and digits in Nepali" },
+];
+const CLOCKS = [
+    { value: "12", label: "12-hour", title: "2:30 PM" },
+    { value: "24", label: "24-hour", title: "14:30" },
+];
+const SCALES = [
+    { value: String(ENumberScales.International), label: "International", title: "1,234,567: thousand, million, billion" },
+    { value: String(ENumberScales.SouthAsian), label: "South Asian", title: "12,34,567: thousand, lakh, crore" },
+];
+const SEPARATORS = [
+    { value: "comma", label: "1,200", title: "Comma" },
+    { value: "period", label: "1.200", title: "Period, with a comma for decimals" },
+    { value: "space", label: "1\u00a0200", title: "Space" },
+    { value: "none", label: "1200", title: "None" },
+];
+const PAGE_SIZES = DEFAULT_PAGE_SIZES.map(size => ({ value: size, label: `${size} rows` }));
+const DESIGNS = [
+    { value: "standard", label: "Standard", title: "The label above the box" },
+    { value: "outlined", label: "Outlined", title: "The label on the box's edge" },
+    { value: "inbox", label: "Inbox", title: "The label inside the top of the box" },
+];
+// A fixed day, so the server and the browser write the same examples, and one past the 12th, so day and month differ.
+const SAMPLE_DATE = "2026-09-27";
 /**
- * Light / Dark / System, and a card per theme with a live preview of its colors.
- * The choice applies at once and is saved in the browser.
+ * The person's quick preferences, each applied at once and saved on this device: the interface language and the
+ * calendar; the date picker's language, the clock and the date format (the date settings every date component reads);
+ * the number scale and the thousands separator (every number box, slider and table number without a locale of its
+ * own); and the page size tables open with and whether a row click opens a record (every table, once chosen, over what
+ * the table names itself). `ThemeSwitcher` shows it under the theme.
  */
-export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, className }) {
-    const { theme, mode, setTheme, setMode } = useTheme();
+export function PreferencesPicker({ className }) {
+    const dates = useDatePreferences();
+    const preferences = useUserPreferences();
     const name = useId();
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: `${name}-mode`, className: "nx-theme-picker__legend", children: "Mode" }), _jsx(TabButtons, { "aria-labelledby": `${name}-mode`, name: `${name}-mode`, options: MODES, value: mode, onChange: setMode, block: true })] })), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }));
+    const formats = DATE_FORMATS.map(format => ({ value: format, label: formatDate(SAMPLE_DATE, { ...dates, format }), description: format }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Language and region", children: [_jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) })] }), _jsxs(Section, { title: "Dates and times", children: [_jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) })] }), _jsxs(Section, { title: "Numbers", children: [_jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) })] }), _jsxs(Section, { title: "Tables", children: [_jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }), _jsxs(Section, { title: "Forms", children: [_jsx(Choice, { id: `${name}-design`, legend: "Input design", options: DESIGNS, value: preferences.inputDesign ?? "standard", onChange: inputDesign => setUserPreferences({ inputDesign }) }), _jsx(TextBox, { label: "Example", placeholder: "Type to try it" })] })] }));
 }

package/dist/Components/Layouts/ThemeScript.d.ts

@@ -4,8 +4,10 @@ export interface ThemeScriptProps extends ThemeScriptOptions {
     nonce?: string;
 }
 /**
- * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
- * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ * Applies the saved theme, mode, density, animations and (in a development build) scale grid before the first paint,
+ * and keeps `data-nx-motion` in step with the system's reduced-motion setting: the stylesheets read that attribute,
+ * not the media query, so an app without this script animates whatever the system says. Render it in `<head>` of the
+ * root layout, and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
  *
  * @example
  * <html lang="en" suppressHydrationWarning>

package/dist/Components/Layouts/ThemeScript.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { themeScript } from "../../Helpers/ThemeHelpers.js";
 /**
- * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
- * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ * Applies the saved theme, mode, density, animations and (in a development build) scale grid before the first paint,
+ * and keeps `data-nx-motion` in step with the system's reduced-motion setting: the stylesheets read that attribute,
+ * not the media query, so an app without this script animates whatever the system says. Render it in `<head>` of the
+ * root layout, and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
  *
  * @example
  * <html lang="en" suppressHydrationWarning>

package/dist/Components/Layouts/ThemeSwitcher.d.ts

@@ -5,9 +5,12 @@ export interface ThemeSwitcherProps extends ThemePickerProps {
     label?: string;
     /** Default `ghost`. */
     variant?: ButtonVariant;
+    /** The quick preferences under the theme: language, dates, numbers and tables (`PreferencesPicker`). Default true. */
+    preferences?: boolean;
 }
 /**
- * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
- * popover: it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens a quick preference panel below it, with the panel's arrow on the button: the theme
+ * (`ThemePicker`) and, under it, the language, dates, numbers and tables (`PreferencesPicker`). The panel is a native
+ * popover: it closes with Esc or a click outside, stays inside the window and scrolls inside itself.
  */
-export declare function ThemeSwitcher({ label, variant, className, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;
+export declare function ThemeSwitcher({ label, variant, className, preferences, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemeSwitcher.js

@@ -1,15 +1,16 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconPalette, InlineIcon } from "nexus-icons";
 import { useId, useLayoutEffect, useRef, useState } from "react";
-import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor, showPanel } from "../../Helpers/PopoverHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { ThemePicker } from "./ThemePicker.js";
+import { PreferencesPicker, ThemePicker } from "./ThemePicker.js";
 /**
- * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
- * popover: it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens a quick preference panel below it, with the panel's arrow on the button: the theme
+ * (`ThemePicker`) and, under it, the language, dates, numbers and tables (`PreferencesPicker`). The panel is a native
+ * popover: it closes with Esc or a click outside, stays inside the window and scrolls inside itself.
  */
-export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, ...pickerProps }) {
+export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, preferences = true, ...pickerProps }) {
     const panelId = useId();
     const buttonRef = useRef(null);
     const panelRef = useRef(null);
@@ -42,8 +43,8 @@ export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, .
                     else if (isPopoverOpen(panel))
                         panel?.hidePopover();
                     else if (panel && typeof panel.showPopover === "function") {
-                        panel.showPopover();
+                        showPanel(panel);
                         setOpen(true);
                     }
-                } }), _jsx("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onToggle: onToggle, children: _jsx(ThemePicker, { ...pickerProps }) })] }));
+                } }), _jsx("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onToggle: onToggle, children: _jsxs("div", { className: "nx-popover__scroll nx-theme-switcher__body", children: [_jsx(ThemePicker, { ...pickerProps }), preferences && _jsx(PreferencesPicker, {})] }) })] }));
 }

package/dist/Components/Viewers/Avatar.d.ts

@@ -0,0 +1,21 @@
+export interface AvatarProps {
+    /** Whose picture it is: the initials stand in without one, and the name picks their tone. */
+    name: string;
+    /** Address of the picture. Anything but a non-empty string is no picture. */
+    src?: unknown;
+    /** `sm` 22px, `md` 28px, `lg` 44px. Default `md`; `--nx-avatar-size` sets any other. */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    /** Makes the picture a button that offers to change it: a camera shows over it on hover, and a click calls this. */
+    onChangePicture?: () => void;
+    /** The button's name. Default "Change picture". */
+    changeLabel?: string;
+    /** For the button inside a menu: `role="menuitem"` and `tabIndex={-1}` let the arrow keys reach it. */
+    role?: string;
+    tabIndex?: number;
+}
+/**
+ * A person: a round picture, or their initials on a soft tone when there is none or it fails to load. The chat,
+ * the dropdown's avatar column and the admin bar all draw this one.
+ */
+export declare function Avatar({ name, src, size, className, onChangePicture, changeLabel, role, tabIndex }: AvatarProps): import("react").JSX.Element;

package/dist/Components/Viewers/Avatar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import { useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { avatarTone, initials } from "../../Helpers/DropdownHelpers.js";
+/**
+ * A person: a round picture, or their initials on a soft tone when there is none or it fails to load. The chat,
+ * the dropdown's avatar column and the admin bar all draw this one.
+ */
+export function Avatar({ name, src, size = "md", className, onChangePicture, changeLabel = "Change picture", role, tabIndex }) {
+    const url = typeof src === "string" ? src.trim() : "";
+    const [failed, setFailed] = useState(null);
+    const photo = url !== "" && failed !== url;
+    const face = photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name);
+    const shared = { className: cx("nx-avatar", size !== "md" && `nx-avatar--${size}`, className), "data-tone": photo ? undefined : avatarTone(name) };
+    if (!onChangePicture) {
+        return (_jsx("span", { ...shared, "aria-hidden": "true", children: face }));
+    }
+    return (_jsxs("button", { ...shared, type: "button", role: role, tabIndex: tabIndex, "aria-label": changeLabel, title: changeLabel, onClick: onChangePicture, children: [face, _jsx("span", { className: "nx-avatar__veil", "aria-hidden": "true", children: _jsx(Icon, { name: "camera", size: "40%" }) })] }));
+}