@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/Toast.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { toast, Slide, ToastContainer } from "react-toastify";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+/* empty css                     */
+const TOAST_ICONS = {
+  success: "check_circle",
+  error: "error",
+  warning: "warning",
+  info: "info",
+  default: "check_circle"
+};
+const ToastIcon = ({ type }) => /* @__PURE__ */ jsx("div", { className: "toast-custom-icon", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: TOAST_ICONS[type], size: 20, className: "text-inherit" }) });
+const Toast = ({
+  message,
+  type,
+  onClose,
+  onAction,
+  useAction = false,
+  actionLabel,
+  timeout = 5e3,
+  position = "bottom-center",
+  theme = "light",
+  label
+}) => {
+  const { t } = useTranslation("ui");
+  const Msg = ({ message: message2 }) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("msg-container zIndexMax flex w-full items-center justify-between gap-3", {
+          "text-sm": message2.length > 100,
+          "text-base": message2.length <= 100
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames("msg-title flex-1", {
+                "max-w-[70%]": useAction || label
+              }),
+              children: message2
+            }
+          ),
+          label && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: label }),
+          useAction && onAction && /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              onClick: () => onAction(true),
+              className: "shrink-0 font-semibold underline",
+              children: actionLabel || t("toast.learnMore")
+            }
+          )
+        ]
+      }
+    );
+  };
+  useEffect(() => {
+    toast(/* @__PURE__ */ jsx(Msg, { message }), {
+      type,
+      position,
+      theme,
+      autoClose: timeout,
+      onClose: () => onClose(),
+      hideProgressBar: false,
+      closeOnClick: false,
+      pauseOnHover: true,
+      transition: Slide,
+      icon: /* @__PURE__ */ jsx(ToastIcon, { type })
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(ToastContainer, {});
+};
+export {
+  Toast as default
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/UI/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/components/UI/Toast.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { Slide, Theme, toast, ToastContainer, ToastPosition, TypeOptions } from 'react-toastify';\n\nimport ControlledButton from '../Form/ControlledButton';\n\nimport { MaterialSymbol } from './MaterialSymbol';\n\nimport '../../styles/toast.css';\n\ninterface IToastProps {\n  message: string;\n  type: TypeOptions;\n  onClose: () => void;\n  onAction?: (value: boolean) => void;\n  useAction?: boolean;\n  /** Rótulo do botão de ação. Sem ele o botão usa \"Saiba mais\". */\n  actionLabel?: string;\n  timeout?: number;\n  position?: ToastPosition;\n  theme?: Theme;\n  label?: string;\n}\n\nconst TOAST_ICONS: Record<TypeOptions, 'check_circle' | 'error' | 'warning' | 'info'> = {\n  success: 'check_circle',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  default: 'check_circle',\n};\n\nconst ToastIcon: React.FC<{ type: TypeOptions }> = ({ type }) => (\n  <div className=\"toast-custom-icon\">\n    <MaterialSymbol icon={TOAST_ICONS[type]} size={20} className=\"text-inherit\" />\n  </div>\n);\n\nconst Toast: React.FC<IToastProps> = ({\n  message,\n  type,\n  onClose,\n  onAction,\n  useAction = false,\n  actionLabel,\n  timeout = 5000,\n  position = 'bottom-center',\n  theme = 'light',\n  label,\n}) => {\n  const { t } = useTranslation('ui');\n  const Msg = ({ message }: { message: string }) => {\n    return (\n      <div\n        className={classNames('msg-container zIndexMax flex w-full items-center justify-between gap-3', {\n          'text-sm': message.length > 100,\n          'text-base': message.length <= 100,\n        })}\n      >\n        <span\n          className={classNames('msg-title flex-1', {\n            'max-w-[70%]': useAction || label,\n          })}\n        >\n          {message}\n        </span>\n        {label && <span className=\"font-semibold\">{label}</span>}\n        {useAction && onAction && (\n          <ControlledButton\n            defaultHtmlButton\n            onClick={() => onAction(true)}\n            className=\"shrink-0 font-semibold underline\"\n          >\n            {actionLabel || t('toast.learnMore')}\n          </ControlledButton>\n        )}\n      </div>\n    );\n  };\n\n  // const dimiss = () => {\n  //   toast.dismiss();\n  // };\n\n  useEffect(() => {\n    toast(<Msg message={message} />, {\n      type,\n      position,\n      theme,\n      autoClose: timeout,\n      onClose: () => onClose(),\n      hideProgressBar: false,\n      closeOnClick: false,\n      pauseOnHover: true,\n      transition: Slide,\n      icon: <ToastIcon type={type} />,\n    });\n  }, []);\n\n  return <ToastContainer />;\n};\n\nexport default Toast;\n"],"names":["message"],"mappings":";;;;;;;;AAyBA,MAAM,cAAkF;AAAA,EACtF,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,YAA6C,CAAC,EAAE,WACpD,oBAAC,SAAI,WAAU,qBACb,8BAAC,gBAAA,EAAe,MAAM,YAAY,IAAI,GAAG,MAAM,IAAI,WAAU,gBAAe,GAC9E;AAGF,MAAM,QAA+B,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,MAAM,CAAC,EAAE,SAAAA,eAAmC;AAChD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,0EAA0E;AAAA,UAC9F,WAAWA,SAAQ,SAAS;AAAA,UAC5B,aAAaA,SAAQ,UAAU;AAAA,QAAA,CAChC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,WAAW,oBAAoB;AAAA,gBACxC,eAAe,aAAa;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAAA;AAAAA,YAAA;AAAA,UAAA;AAAA,UAEF,SAAS,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,OAAM;AAAA,UAChD,aAAa,YACZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS,MAAM,SAAS,IAAI;AAAA,cAC5B,WAAU;AAAA,cAET,UAAA,eAAe,EAAE,iBAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,QACrC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAMA,YAAU,MAAM;AACd,UAAM,oBAAC,KAAA,EAAI,QAAA,CAAkB,GAAI;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS,MAAM,QAAA;AAAA,MACf,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,MAAM,oBAAC,WAAA,EAAU,KAAA,CAAY;AAAA,IAAA,CAC9B;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,6BAAQ,gBAAA,EAAe;AACzB;"}

package/dist/components/UI/ToastHost.d.ts

@@ -0,0 +1,2 @@
+declare const ToastHost: () => import("react").JSX.Element | null;
+export default ToastHost;

package/dist/components/UI/ToastHost.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useNotificationStore } from "../../hooks/useNotification.js";
+import Toast from "./Toast.js";
+const ToastHost = () => {
+  const notification = useNotificationStore((s) => s.notification);
+  const closeNotify = useNotificationStore((s) => s.closeNotify);
+  if (!notification) return null;
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      timeout: notification.timeout,
+      message: notification.message,
+      type: notification.type,
+      onClose: closeNotify,
+      useAction: notification.useAction,
+      onAction: notification.onAction,
+      actionLabel: notification.actionLabel
+    },
+    notification.message
+  );
+};
+export {
+  ToastHost as default
+};
+//# sourceMappingURL=ToastHost.js.map

package/dist/components/UI/ToastHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastHost.js","sources":["../../../src/components/UI/ToastHost.tsx"],"sourcesContent":["import { useNotificationStore } from '@/hooks/useNotification';\n\nimport Toast from './Toast';\n\nconst ToastHost = () => {\n  const notification = useNotificationStore((s) => s.notification);\n  const closeNotify = useNotificationStore((s) => s.closeNotify);\n\n  if (!notification) return null;\n\n  return (\n    <Toast\n      key={notification.message}\n      timeout={notification.timeout}\n      message={notification.message}\n      type={notification.type}\n      onClose={closeNotify}\n      useAction={notification.useAction}\n      onAction={notification.onAction}\n      actionLabel={notification.actionLabel}\n    />\n  );\n};\n\nexport default ToastHost;\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAY,MAAM;AACtB,QAAM,eAAe,qBAAqB,CAAC,MAAM,EAAE,YAAY;AAC/D,QAAM,cAAc,qBAAqB,CAAC,MAAM,EAAE,WAAW;AAE7D,MAAI,CAAC,aAAc,QAAO;AAE1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,aAAa;AAAA,MACtB,SAAS,aAAa;AAAA,MACtB,MAAM,aAAa;AAAA,MACnB,SAAS;AAAA,MACT,WAAW,aAAa;AAAA,MACxB,UAAU,aAAa;AAAA,MACvB,aAAa,aAAa;AAAA,IAAA;AAAA,IAPrB,aAAa;AAAA,EAAA;AAUxB;"}

package/dist/components/UI/TypingEffect.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface ITypingEffectProps {
+    text: string;
+    useHtml?: boolean;
+    useMarkdown?: boolean;
+    className?: string;
+    typingSpeed?: number;
+}
+declare const TypingEffect: FC<ITypingEffectProps>;
+export default TypingEffect;

package/dist/components/UI/TypingEffect.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import remarkGfm from "remark-gfm";
+import LazyMarkdown from "./LazyMarkdown.js";
+const TypingEffect = ({ text, useHtml, useMarkdown, className, typingSpeed = 10 }) => {
+  const [displayedContent, setDisplayedContent] = useState("");
+  useEffect(() => {
+    const content = useMarkdown ? text : text.trim();
+    setDisplayedContent("");
+    let index = 0;
+    const timer = setInterval(() => {
+      if (index < content.length) {
+        setDisplayedContent(content.slice(0, index + 1));
+        index++;
+      } else {
+        clearInterval(timer);
+      }
+    }, typingSpeed);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [text, typingSpeed, useMarkdown]);
+  if (useMarkdown) {
+    return /* @__PURE__ */ jsx(LazyMarkdown, { remarkPlugins: [remarkGfm], children: displayedContent });
+  }
+  return useHtml ? /* @__PURE__ */ jsx("div", { className, dangerouslySetInnerHTML: { __html: displayedContent } }) : /* @__PURE__ */ jsx("p", { className, children: displayedContent });
+};
+export {
+  TypingEffect as default
+};
+//# sourceMappingURL=TypingEffect.js.map

package/dist/components/UI/TypingEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingEffect.js","sources":["../../../src/components/UI/TypingEffect.tsx"],"sourcesContent":["import { FC, useEffect, useState } from 'react';\nimport remarkGfm from 'remark-gfm';\n\nimport LazyMarkdown from './LazyMarkdown';\n\ninterface ITypingEffectProps {\n  text: string;\n  useHtml?: boolean;\n  useMarkdown?: boolean;\n  className?: string;\n  typingSpeed?: number;\n}\n\nconst TypingEffect: FC<ITypingEffectProps> = ({ text, useHtml, useMarkdown, className, typingSpeed = 10 }) => {\n  const [displayedContent, setDisplayedContent] = useState<string>('');\n\n  useEffect(() => {\n    const content = useMarkdown ? text : text.trim();\n\n    setDisplayedContent('');\n\n    let index = 0;\n    const timer = setInterval(() => {\n      if (index < content.length) {\n        setDisplayedContent(content.slice(0, index + 1));\n        index++;\n      } else {\n        clearInterval(timer);\n      }\n    }, typingSpeed);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, [text, typingSpeed, useMarkdown]);\n\n  if (useMarkdown) {\n    return <LazyMarkdown remarkPlugins={[remarkGfm]}>{displayedContent}</LazyMarkdown>;\n  }\n\n  return useHtml ? (\n    <div className={className} dangerouslySetInnerHTML={{ __html: displayedContent }} />\n  ) : (\n    <p className={className}>{displayedContent}</p>\n  );\n};\n\nexport default TypingEffect;\n"],"names":[],"mappings":";;;;AAaA,MAAM,eAAuC,CAAC,EAAE,MAAM,SAAS,aAAa,WAAW,cAAc,SAAS;AAC5G,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,EAAE;AAEnE,YAAU,MAAM;AACd,UAAM,UAAU,cAAc,OAAO,KAAK,KAAA;AAE1C,wBAAoB,EAAE;AAEtB,QAAI,QAAQ;AACZ,UAAM,QAAQ,YAAY,MAAM;AAC9B,UAAI,QAAQ,QAAQ,QAAQ;AAC1B,4BAAoB,QAAQ,MAAM,GAAG,QAAQ,CAAC,CAAC;AAC/C;AAAA,MACF,OAAO;AACL,sBAAc,KAAK;AAAA,MACrB;AAAA,IACF,GAAG,WAAW;AAEd,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,WAAW,CAAC;AAEnC,MAAI,aAAa;AACf,+BAAQ,cAAA,EAAa,eAAe,CAAC,SAAS,GAAI,UAAA,kBAAiB;AAAA,EACrE;AAEA,SAAO,UACL,oBAAC,OAAA,EAAI,WAAsB,yBAAyB,EAAE,QAAQ,iBAAA,EAAiB,CAAG,IAElF,oBAAC,KAAA,EAAE,WAAuB,UAAA,kBAAiB;AAE/C;"}

package/dist/components/UI/UmodeLogo.d.ts

@@ -0,0 +1,10 @@
+interface IUmodeLogoProps {
+    className?: string;
+}
+/**
+ * Inline instead of an <img> so the mark inherits `currentColor`: the host names a text token
+ * and the logo follows the theme by itself, with no second asset and no swap on toggle. The
+ * fade in the symbol is the same colour going to zero opacity, so it survives any ink.
+ */
+declare const UmodeLogo: React.FC<IUmodeLogoProps>;
+export default UmodeLogo;

package/dist/components/UI/UmodeLogo.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import classNames from "classnames";
+const UmodeLogo = ({ className }) => {
+  const instanceId = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const fadeId = (index) => `umode-logo-fade-${index}-${instanceId}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 624.4 116.2",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      focusable: "false",
+      className: classNames("h-5 w-auto", className),
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: fadeId(1),
+              gradientUnits: "userSpaceOnUse",
+              x1: "57.5777",
+              y1: "112.6504",
+              x2: "57.5777",
+              y2: "7.5835",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: fadeId(2),
+              gradientUnits: "userSpaceOnUse",
+              x1: "1144.3041",
+              y1: "-492.217",
+              x2: "1144.3041",
+              y2: "-597.7056",
+              gradientTransform: "matrix(-1 0 0 -1 1248.4246 -485.0552)",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: fadeId(3),
+              gradientUnits: "userSpaceOnUse",
+              x1: "1096.2793",
+              y1: "-492.217",
+              x2: "1096.2793",
+              y2: "-597.7056",
+              gradientTransform: "matrix(-1 0 0 -1 1248.4246 -485.0552)",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: `url(#${fadeId(1)})`,
+            d: "M58.4,112.7h-1.6C28.2,112.7,5,89.5,5,60.9V7.6h105.1v53.3C110.1,89.5,86.9,112.7,58.4,112.7z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: `url(#${fadeId(2)})`,
+            d: "M103.4,7.2h1.4 c28.6,0,51.9,23.2,51.9,51.9v53.6H51.6V59C51.6,30.4,74.8,7.2,103.4,7.2z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: `url(#${fadeId(3)})`,
+            d: "M151.5,7.2h1.4 c28.6,0,51.9,23.2,51.9,51.9v53.6H99.6V59C99.6,30.4,122.8,7.2,151.5,7.2z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M293.5,95l-0.1-12.5h-0.3c-4.4,8.9-12.7,13.8-24.2,13.8c-16.3,0-26.3-10.5-26.3-27.7V33.2h6.8v34.8 c0,13.9,7.8,22.3,20.7,22.3c13.8,0,22.6-9.8,22.6-25.5V33.2h6.8V95H293.5z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M409.6,59v36h-6.8V59.6c0-14.1-6.2-21.6-18.3-21.6c-12.9,0-20,8.8-20,24.8V95h-6.8V59.6 c0-14.1-6.4-21.6-18.3-21.6c-12.9,0-19.9,8.8-19.9,24.6V95h-6.8V33.2h6l0.1,10.9h0.3c3.8-7.8,11.3-12.2,21.6-12.2 c10.8,0,18.2,5.2,21.5,14.6h0.3c3.7-9.6,11.3-14.6,23.2-14.6C401.2,31.8,409.6,41.5,409.6,59z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M482.1,64.1c0,19-13.5,32.3-32.7,32.3c-19,0-32.5-13.3-32.5-32.3c0-18.8,13.5-32.3,32.5-32.3 C468.5,31.8,482.1,45.2,482.1,64.1z M423.8,64.1c0,15.4,10.8,26.1,25.6,26.1c15,0,25.8-10.8,25.8-26.1s-10.8-26.2-25.8-26.2 C434.6,37.9,423.8,48.7,423.8,64.1z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M545.7,95l-0.1-12.7h-0.3c-4.9,8.8-14.3,14.1-26.7,14.1c-18.5,0-31.7-13.4-31.7-32.3s13.3-32.3,31.7-32.3 c11.9,0,21.1,5,26,13.1h0.3V2.1h6.8V95H545.7z M545.3,64.1c0-15.4-10.8-26.2-25.9-26.2c-14.9,0-25.6,10.8-25.6,26.2 s10.8,26.1,25.6,26.1C534.5,90.2,545.3,79.5,545.3,64.1z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M567.6,65.8c0.8,15,11.7,24.4,28.5,24.4c9.6,0,17.4-3.1,23.8-9.2h0.4v7.2c-5.7,5.2-14.5,8.1-24.2,8.1 c-21.6,0-35.4-12.6-35.4-32.3c0-18.8,13.4-32.3,32.3-32.3c19.1,0,31.5,11.8,31.5,29.9v4.1H567.6z M567.6,60h50.6 c-0.8-13.3-10.6-22-25.1-22C579.2,37.9,569.3,47,567.6,60z"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  UmodeLogo as default
+};
+//# sourceMappingURL=UmodeLogo.js.map

package/dist/components/UI/UmodeLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UmodeLogo.js","sources":["../../../src/components/UI/UmodeLogo.tsx"],"sourcesContent":["import { useId } from 'react';\nimport classNames from 'classnames';\n\ninterface IUmodeLogoProps {\n  className?: string;\n}\n\n/**\n * Inline instead of an <img> so the mark inherits `currentColor`: the host names a text token\n * and the logo follows the theme by itself, with no second asset and no swap on toggle. The\n * fade in the symbol is the same colour going to zero opacity, so it survives any ink.\n */\nconst UmodeLogo: React.FC<IUmodeLogoProps> = ({ className }) => {\n  const instanceId = useId().replace(/[^a-zA-Z0-9]/g, '');\n  const fadeId = (index: number) => `umode-logo-fade-${index}-${instanceId}`;\n\n  return (\n    <svg\n      viewBox=\"0 0 624.4 116.2\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden\n      focusable=\"false\"\n      className={classNames('h-5 w-auto', className)}\n    >\n      <defs>\n        <linearGradient\n          id={fadeId(1)}\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"57.5777\"\n          y1=\"112.6504\"\n          x2=\"57.5777\"\n          y2=\"7.5835\"\n        >\n          <stop offset=\"0\" stopColor=\"currentColor\" />\n          <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id={fadeId(2)}\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"1144.3041\"\n          y1=\"-492.217\"\n          x2=\"1144.3041\"\n          y2=\"-597.7056\"\n          gradientTransform=\"matrix(-1 0 0 -1 1248.4246 -485.0552)\"\n        >\n          <stop offset=\"0\" stopColor=\"currentColor\" />\n          <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id={fadeId(3)}\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"1096.2793\"\n          y1=\"-492.217\"\n          x2=\"1096.2793\"\n          y2=\"-597.7056\"\n          gradientTransform=\"matrix(-1 0 0 -1 1248.4246 -485.0552)\"\n        >\n          <stop offset=\"0\" stopColor=\"currentColor\" />\n          <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n        </linearGradient>\n      </defs>\n\n      <path\n        fill={`url(#${fadeId(1)})`}\n        d=\"M58.4,112.7h-1.6C28.2,112.7,5,89.5,5,60.9V7.6h105.1v53.3C110.1,89.5,86.9,112.7,58.4,112.7z\"\n      />\n      <path\n        fill={`url(#${fadeId(2)})`}\n        d=\"M103.4,7.2h1.4 c28.6,0,51.9,23.2,51.9,51.9v53.6H51.6V59C51.6,30.4,74.8,7.2,103.4,7.2z\"\n      />\n      <path\n        fill={`url(#${fadeId(3)})`}\n        d=\"M151.5,7.2h1.4 c28.6,0,51.9,23.2,51.9,51.9v53.6H99.6V59C99.6,30.4,122.8,7.2,151.5,7.2z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M293.5,95l-0.1-12.5h-0.3c-4.4,8.9-12.7,13.8-24.2,13.8c-16.3,0-26.3-10.5-26.3-27.7V33.2h6.8v34.8 c0,13.9,7.8,22.3,20.7,22.3c13.8,0,22.6-9.8,22.6-25.5V33.2h6.8V95H293.5z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M409.6,59v36h-6.8V59.6c0-14.1-6.2-21.6-18.3-21.6c-12.9,0-20,8.8-20,24.8V95h-6.8V59.6 c0-14.1-6.4-21.6-18.3-21.6c-12.9,0-19.9,8.8-19.9,24.6V95h-6.8V33.2h6l0.1,10.9h0.3c3.8-7.8,11.3-12.2,21.6-12.2 c10.8,0,18.2,5.2,21.5,14.6h0.3c3.7-9.6,11.3-14.6,23.2-14.6C401.2,31.8,409.6,41.5,409.6,59z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M482.1,64.1c0,19-13.5,32.3-32.7,32.3c-19,0-32.5-13.3-32.5-32.3c0-18.8,13.5-32.3,32.5-32.3 C468.5,31.8,482.1,45.2,482.1,64.1z M423.8,64.1c0,15.4,10.8,26.1,25.6,26.1c15,0,25.8-10.8,25.8-26.1s-10.8-26.2-25.8-26.2 C434.6,37.9,423.8,48.7,423.8,64.1z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M545.7,95l-0.1-12.7h-0.3c-4.9,8.8-14.3,14.1-26.7,14.1c-18.5,0-31.7-13.4-31.7-32.3s13.3-32.3,31.7-32.3 c11.9,0,21.1,5,26,13.1h0.3V2.1h6.8V95H545.7z M545.3,64.1c0-15.4-10.8-26.2-25.9-26.2c-14.9,0-25.6,10.8-25.6,26.2 s10.8,26.1,25.6,26.1C534.5,90.2,545.3,79.5,545.3,64.1z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M567.6,65.8c0.8,15,11.7,24.4,28.5,24.4c9.6,0,17.4-3.1,23.8-9.2h0.4v7.2c-5.7,5.2-14.5,8.1-24.2,8.1 c-21.6,0-35.4-12.6-35.4-32.3c0-18.8,13.4-32.3,32.3-32.3c19.1,0,31.5,11.8,31.5,29.9v4.1H567.6z M567.6,60h50.6 c-0.8-13.3-10.6-22-25.1-22C579.2,37.9,569.3,47,567.6,60z\"\n      />\n    </svg>\n  );\n};\n\nexport default UmodeLogo;\n"],"names":[],"mappings":";;;AAYA,MAAM,YAAuC,CAAC,EAAE,gBAAgB;AAC9D,QAAM,aAAa,MAAA,EAAQ,QAAQ,iBAAiB,EAAE;AACtD,QAAM,SAAS,CAAC,UAAkB,mBAAmB,KAAK,IAAI,UAAU;AAExE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAW;AAAA,MACX,WAAU;AAAA,MACV,WAAW,WAAW,cAAc,SAAS;AAAA,MAE7C,UAAA;AAAA,QAAA,qBAAC,QAAA,EACC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,OAAO,CAAC;AAAA,cACZ,eAAc;AAAA,cACd,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cAEH,UAAA;AAAA,gBAAA,oBAAC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe;AAAA,oCACzC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe,aAAY,IAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAE5D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,OAAO,CAAC;AAAA,cACZ,eAAc;AAAA,cACd,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,mBAAkB;AAAA,cAElB,UAAA;AAAA,gBAAA,oBAAC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe;AAAA,oCACzC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe,aAAY,IAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAE5D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,OAAO,CAAC;AAAA,cACZ,eAAc;AAAA,cACd,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,IAAG;AAAA,cACH,mBAAkB;AAAA,cAElB,UAAA;AAAA,gBAAA,oBAAC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe;AAAA,oCACzC,QAAA,EAAK,QAAO,KAAI,WAAU,gBAAe,aAAY,IAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5D,GACF;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,QAAQ,OAAO,CAAC,CAAC;AAAA,YACvB,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,QAAQ,OAAO,CAAC,CAAC;AAAA,YACvB,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,QAAQ,OAAO,CAAC,CAAC;AAAA,YACvB,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/UI/UserMenu.d.ts

@@ -0,0 +1,50 @@
+export interface IUserMenuAccount {
+    id: string;
+    name: string;
+    logoUrl?: string;
+}
+export interface IUserMenuItem {
+    key: string;
+    label: string;
+    /** Internal route, rendered through the navigation port's Link. */
+    to?: string;
+    onClick?: () => void;
+    tone?: 'default' | 'danger';
+}
+interface IUserMenuProps {
+    userName?: string;
+    userEmail?: string;
+    /** The person's photo beside their name in the open menu; without one, or if it fails to load, the initials. */
+    userAvatarUrl?: string;
+    /** The active account/tenant shown in the trigger, beside the user identity. */
+    accountName?: string;
+    accountLogoUrl?: string;
+    /** Role chip in the trigger; omitted when empty. */
+    roleLabel?: string;
+    /** Account switcher list; omit (undefined) to hide the whole section. */
+    accounts?: Array<IUserMenuAccount>;
+    activeAccountId?: string;
+    /** Account being switched to; disables the list and shows its spinner. */
+    switchingAccountId?: string | null;
+    loadingAccounts?: boolean;
+    onSwitchAccount?: (accountId: string) => void;
+    /** Fired when the popover opens/closes, e.g. to lazily fetch the accounts. */
+    onOpenChange?: (open: boolean) => void;
+    open: boolean;
+    /** Extra rows in the footer (profile, settings...), before the logout row. */
+    menuItems?: Array<IUserMenuItem>;
+    onLogout?: () => void;
+    logoutLabel?: string;
+    /** Renders only the identity summary, with no popover (e.g. admin mode). */
+    readOnly?: boolean;
+    className?: string;
+}
+/**
+ * The uMode account menu: identity summary as the trigger, account switcher (with search past
+ * five entries), custom rows and logout in a popover. Everything app-shaped (who the user is,
+ * what switching does, where profile lives) arrives as props, so any host renders the same
+ * surface the dashboard does.
+ */
+declare const UserMenu: React.FC<IUserMenuProps>;
+export default UserMenu;
+export type { IUserMenuProps };

package/dist/components/UI/UserMenu.js

@@ -0,0 +1,212 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import UnifiedSearchBar from "../Search/UnifiedSearchBar.js";
+import OutlinedChip from "./Chips/OutlinedChip.js";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "./ControlledPopover.js";
+import LoadingSpinner from "./LoadingSpinner.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import NoDataFound from "./NoDataFound/index.js";
+import { getUserAvatarLetters } from "../../helpers/stringHelpers.js";
+const SEARCH_THRESHOLD = 5;
+const AccountRow = ({ account, isActive, switchingAccountId, onSwitchAccount }) => /* @__PURE__ */ jsxs(
+  ControlledButton,
+  {
+    defaultHtmlButton: true,
+    type: "button",
+    disabled: !!switchingAccountId,
+    onClick: () => onSwitchAccount?.(account.id),
+    className: classNames("flex w-full items-center gap-x-3 rounded-lg px-2 py-2.5 transition-colors", {
+      "bg-brand-soft": isActive,
+      "hover:bg-muted": !isActive,
+      "disabled:cursor-not-allowed disabled:opacity-60": !!switchingAccountId
+    }),
+    children: [
+      account.logoUrl ? /* @__PURE__ */ jsx(
+        ControlledImage,
+        {
+          src: account.logoUrl,
+          className: "size-8 shrink-0 rounded-full border border-brand-border bg-surface object-cover"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-hover text-xs font-bold text-brand-fg", children: getUserAvatarLetters(account.name) }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: /* @__PURE__ */ jsx("span", { className: "w-full truncate text-left text-sm text-foreground", children: account.name }) }),
+      switchingAccountId === account.id && /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "foreground-faint" }),
+      isActive && !switchingAccountId && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 18, color: "rgb(var(--color-primary))" })
+    ]
+  }
+);
+const UserIdentityAvatar = ({ photoUrl, initials }) => {
+  const [failedUrl, setFailedUrl] = useState(null);
+  if (photoUrl && photoUrl !== failedUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: photoUrl,
+        alt: "",
+        onError: () => setFailedUrl(photoUrl),
+        className: "size-11 shrink-0 rounded-full object-cover"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand text-sm font-bold text-white", children: initials });
+};
+const UserMenu = ({
+  userName,
+  userEmail,
+  userAvatarUrl,
+  accountName,
+  accountLogoUrl,
+  roleLabel,
+  accounts,
+  activeAccountId,
+  switchingAccountId,
+  loadingAccounts = false,
+  onSwitchAccount,
+  onOpenChange,
+  open,
+  menuItems,
+  onLogout,
+  logoutLabel,
+  readOnly = false,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const { Link: NavigationLink } = useUiNavigation();
+  const userInitials = userName ? getUserAvatarLetters(userName) : "??";
+  const showAccounts = Array.isArray(accounts);
+  const safeAccounts = accounts ?? [];
+  const [filtered, setFiltered] = useState(safeAccounts);
+  useEffect(() => {
+    setFiltered(accounts ?? []);
+  }, [accounts, open]);
+  const accountSummary = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand", children: accountLogoUrl && /* @__PURE__ */ jsx(ControlledImage, { src: accountLogoUrl, className: "size-9 rounded-full" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 flex-1 flex-col items-start gap-y-0.5 tablet:flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-full truncate text-left text-sm font-semibold text-foreground", children: userName }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-x-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-xs text-foreground-subtle", children: accountName }),
+        roleLabel && /* @__PURE__ */ jsx(
+          OutlinedChip,
+          {
+            label: roleLabel,
+            chipIcon: "verified_user",
+            truncate: true,
+            tooltip: roleLabel,
+            className: "max-w-[15rem] shrink-0 whitespace-nowrap border border-brand-border bg-brand-soft text-brand-emphasis"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  if (readOnly) {
+    return /* @__PURE__ */ jsx("div", { className: classNames("flex min-w-0 items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]", className), children: accountSummary });
+  }
+  const footerRow = (item) => {
+    const rowClass = classNames(
+      "rounded-lg px-2 py-2.5 text-left text-sm transition-colors",
+      item.tone === "danger" ? "text-danger-emphasis hover:bg-danger-soft" : "text-foreground-muted hover:bg-muted"
+    );
+    if (item.to) {
+      return /* @__PURE__ */ jsx(NavigationLink, { to: item.to, onClick: () => onOpenChange?.(false), className: rowClass, children: item.label }, item.key);
+    }
+    return /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        type: "button",
+        onClick: () => {
+          onOpenChange?.(false);
+          item.onClick?.();
+        },
+        className: classNames("cursor-pointer", rowClass),
+        children: item.label
+      },
+      item.key
+    );
+  };
+  return /* @__PURE__ */ jsxs(ControlledPopoverRoot, { placement: "bottom-end", open, handler: (next) => onOpenChange?.(next), children: [
+    /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        type: "button",
+        className: classNames(
+          "flex min-w-0 cursor-pointer items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]",
+          className
+        ),
+        children: [
+          accountSummary,
+          /* @__PURE__ */ jsx(
+            MaterialSymbol,
+            {
+              icon: open ? "expand_less" : "expand_more",
+              size: 20,
+              color: "rgb(var(--color-foreground-subtle))"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ControlledPopoverContent, { className: "z-[9999] w-72 max-w-[calc(100vw-1.5rem)] rounded-xl border border-border p-0 shadow-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 px-5 pb-4 pt-5", children: [
+        /* @__PURE__ */ jsx(UserIdentityAvatar, { photoUrl: userAvatarUrl, initials: userInitials }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: userName || t("userMenu.loading") }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground-faint", children: userEmail || "" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "border-border-subtle" }),
+      showAccounts && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-5 pb-2 pt-4", children: /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wider text-foreground-faint", children: t("userMenu.yourAccounts") }) }),
+        safeAccounts.length > SEARCH_THRESHOLD && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsx(
+          UnifiedSearchBar,
+          {
+            mode: "default",
+            searchableItems: safeAccounts,
+            searchKeys: ["name"],
+            setFilteredItems: setFiltered,
+            label: t("userMenu.searchAccount"),
+            debounceTime: 300,
+            minSearchLength: 1,
+            containerClassName: "relative flex gap-x-2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto px-3 pb-2", children: loadingAccounts ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5, color: "foreground-faint" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("userMenu.noAccounts") }) : filtered.map((account) => /* @__PURE__ */ jsx(
+          AccountRow,
+          {
+            account,
+            isActive: account.id === activeAccountId,
+            switchingAccountId,
+            onSwitchAccount
+          },
+          account.id
+        )) }),
+        /* @__PURE__ */ jsx("hr", { className: "border-border-subtle" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-3 py-2", children: [
+        (menuItems ?? []).map(footerRow),
+        onLogout && /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            type: "button",
+            onClick: () => {
+              onOpenChange?.(false);
+              onLogout();
+            },
+            className: "cursor-pointer rounded-lg px-2 py-2.5 text-left text-sm text-danger-emphasis transition-colors hover:bg-danger-soft",
+            children: logoutLabel || t("userMenu.logout")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  UserMenu as default
+};
+//# sourceMappingURL=UserMenu.js.map

package/dist/components/UI/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sources":["../../../src/components/UI/UserMenu.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport UnifiedSearchBar from '@/components/Search/UnifiedSearchBar';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { getUserAvatarLetters } from '@/helpers/stringHelpers';\n\nconst SEARCH_THRESHOLD = 5;\n\nexport interface IUserMenuAccount {\n  id: string;\n  name: string;\n  logoUrl?: string;\n}\n\nexport interface IUserMenuItem {\n  key: string;\n  label: string;\n  /** Internal route, rendered through the navigation port's Link. */\n  to?: string;\n  onClick?: () => void;\n  tone?: 'default' | 'danger';\n}\n\ninterface IUserMenuProps {\n  userName?: string;\n  userEmail?: string;\n  /** The person's photo beside their name in the open menu; without one, or if it fails to load, the initials. */\n  userAvatarUrl?: string;\n  /** The active account/tenant shown in the trigger, beside the user identity. */\n  accountName?: string;\n  accountLogoUrl?: string;\n  /** Role chip in the trigger; omitted when empty. */\n  roleLabel?: string;\n  /** Account switcher list; omit (undefined) to hide the whole section. */\n  accounts?: Array<IUserMenuAccount>;\n  activeAccountId?: string;\n  /** Account being switched to; disables the list and shows its spinner. */\n  switchingAccountId?: string | null;\n  loadingAccounts?: boolean;\n  onSwitchAccount?: (accountId: string) => void;\n  /** Fired when the popover opens/closes, e.g. to lazily fetch the accounts. */\n  onOpenChange?: (open: boolean) => void;\n  open: boolean;\n  /** Extra rows in the footer (profile, settings...), before the logout row. */\n  menuItems?: Array<IUserMenuItem>;\n  onLogout?: () => void;\n  logoutLabel?: string;\n  /** Renders only the identity summary, with no popover (e.g. admin mode). */\n  readOnly?: boolean;\n  className?: string;\n}\n\nconst AccountRow: React.FC<{\n  account: IUserMenuAccount;\n  isActive: boolean;\n  switchingAccountId?: string | null;\n  onSwitchAccount?: (accountId: string) => void;\n}> = ({ account, isActive, switchingAccountId, onSwitchAccount }) => (\n  <ControlledButton\n    defaultHtmlButton\n    type=\"button\"\n    disabled={!!switchingAccountId}\n    onClick={() => onSwitchAccount?.(account.id)}\n    className={classNames('flex w-full items-center gap-x-3 rounded-lg px-2 py-2.5 transition-colors', {\n      'bg-brand-soft': isActive,\n      'hover:bg-muted': !isActive,\n      'disabled:cursor-not-allowed disabled:opacity-60': !!switchingAccountId,\n    })}\n  >\n    {account.logoUrl ? (\n      <ControlledImage\n        src={account.logoUrl}\n        className=\"size-8 shrink-0 rounded-full border border-brand-border bg-surface object-cover\"\n      />\n    ) : (\n      <div className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-brand-hover text-xs font-bold text-brand-fg\">\n        {getUserAvatarLetters(account.name)}\n      </div>\n    )}\n\n    <div className=\"flex min-w-0 flex-1 flex-col items-start\">\n      <span className=\"w-full truncate text-left text-sm text-foreground\">{account.name}</span>\n    </div>\n\n    {switchingAccountId === account.id && <LoadingSpinner size={4} color=\"foreground-faint\" />}\n    {isActive && !switchingAccountId && <MaterialSymbol icon=\"check\" size={18} color=\"rgb(var(--color-primary))\" />}\n  </ControlledButton>\n);\n\n/** The person at the top of the open menu. A new URL gets its own chance after an old one failed. */\nconst UserIdentityAvatar: React.FC<{ photoUrl?: string; initials: string }> = ({ photoUrl, initials }) => {\n  const [failedUrl, setFailedUrl] = useState<string | null>(null);\n\n  if (photoUrl && photoUrl !== failedUrl) {\n    return (\n      <img\n        src={photoUrl}\n        alt=\"\"\n        onError={() => setFailedUrl(photoUrl)}\n        className=\"size-11 shrink-0 rounded-full object-cover\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand text-sm font-bold text-white\">\n      {initials}\n    </div>\n  );\n};\n\n/**\n * The uMode account menu: identity summary as the trigger, account switcher (with search past\n * five entries), custom rows and logout in a popover. Everything app-shaped (who the user is,\n * what switching does, where profile lives) arrives as props, so any host renders the same\n * surface the dashboard does.\n */\nconst UserMenu: React.FC<IUserMenuProps> = ({\n  userName,\n  userEmail,\n  userAvatarUrl,\n  accountName,\n  accountLogoUrl,\n  roleLabel,\n  accounts,\n  activeAccountId,\n  switchingAccountId,\n  loadingAccounts = false,\n  onSwitchAccount,\n  onOpenChange,\n  open,\n  menuItems,\n  onLogout,\n  logoutLabel,\n  readOnly = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const { Link: NavigationLink } = useUiNavigation();\n\n  const userInitials = userName ? getUserAvatarLetters(userName) : '??';\n  const showAccounts = Array.isArray(accounts);\n  const safeAccounts = accounts ?? [];\n\n  const [filtered, setFiltered] = useState<Array<IUserMenuAccount>>(safeAccounts);\n\n  useEffect(() => {\n    setFiltered(accounts ?? []);\n  }, [accounts, open]);\n\n  const accountSummary = (\n    <>\n      <div className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-tl from-brand to-brand\">\n        {accountLogoUrl && <ControlledImage src={accountLogoUrl} className=\"size-9 rounded-full\" />}\n      </div>\n      {/* Below the tablet edge the header only has room for the avatar; the same identity is\n          one tap away inside the popover, so nothing is lost. */}\n      <div className=\"hidden min-w-0 flex-1 flex-col items-start gap-y-0.5 tablet:flex\">\n        <span className=\"w-full truncate text-left text-sm font-semibold text-foreground\">{userName}</span>\n        <div className=\"flex w-full items-center justify-between gap-x-2\">\n          <span className=\"min-w-0 flex-1 truncate text-left text-xs text-foreground-subtle\">{accountName}</span>\n          {roleLabel && (\n            <OutlinedChip\n              label={roleLabel}\n              chipIcon=\"verified_user\"\n              truncate\n              tooltip={roleLabel}\n              className=\"max-w-[15rem] shrink-0 whitespace-nowrap border border-brand-border bg-brand-soft text-brand-emphasis\"\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  if (readOnly) {\n    return (\n      <div className={classNames('flex min-w-0 items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]', className)}>\n        {accountSummary}\n      </div>\n    );\n  }\n\n  const footerRow = (item: IUserMenuItem): ReactNode => {\n    const rowClass = classNames(\n      'rounded-lg px-2 py-2.5 text-left text-sm transition-colors',\n      item.tone === 'danger' ? 'text-danger-emphasis hover:bg-danger-soft' : 'text-foreground-muted hover:bg-muted',\n    );\n\n    if (item.to) {\n      return (\n        <NavigationLink key={item.key} to={item.to} onClick={() => onOpenChange?.(false)} className={rowClass}>\n          {item.label}\n        </NavigationLink>\n      );\n    }\n    return (\n      <ControlledButton\n        defaultHtmlButton\n        key={item.key}\n        type=\"button\"\n        onClick={() => {\n          onOpenChange?.(false);\n          item.onClick?.();\n        }}\n        className={classNames('cursor-pointer', rowClass)}\n      >\n        {item.label}\n      </ControlledButton>\n    );\n  };\n\n  return (\n    <ControlledPopoverRoot placement=\"bottom-end\" open={open} handler={(next) => onOpenChange?.(next)}>\n      <ControlledPopoverHandler>\n        <ControlledButton\n          defaultHtmlButton\n          type=\"button\"\n          className={classNames(\n            'flex min-w-0 cursor-pointer items-center gap-x-2.5 px-2.5 py-1.5 tablet:min-w-[300px]',\n            className,\n          )}\n        >\n          {accountSummary}\n          <MaterialSymbol\n            icon={open ? 'expand_less' : 'expand_more'}\n            size={20}\n            color=\"rgb(var(--color-foreground-subtle))\"\n          />\n        </ControlledButton>\n      </ControlledPopoverHandler>\n\n      <ControlledPopoverContent className=\"z-[9999] w-72 max-w-[calc(100vw-1.5rem)] rounded-xl border border-border p-0 shadow-xl\">\n        <div className=\"flex items-center gap-x-3 px-5 pb-4 pt-5\">\n          <UserIdentityAvatar photoUrl={userAvatarUrl} initials={userInitials} />\n          <div className=\"flex min-w-0 flex-1 flex-col overflow-hidden\">\n            <span className=\"truncate text-sm font-semibold text-foreground\">{userName || t('userMenu.loading')}</span>\n            <span className=\"truncate text-xs text-foreground-faint\">{userEmail || ''}</span>\n          </div>\n        </div>\n\n        <hr className=\"border-border-subtle\" />\n\n        {showAccounts && (\n          <>\n            <div className=\"px-5 pb-2 pt-4\">\n              <span className=\"text-xxs font-semibold uppercase tracking-wider text-foreground-faint\">\n                {t('userMenu.yourAccounts')}\n              </span>\n            </div>\n\n            {safeAccounts.length > SEARCH_THRESHOLD && (\n              <div className=\"px-3 pb-2\">\n                <UnifiedSearchBar\n                  mode=\"default\"\n                  searchableItems={safeAccounts}\n                  searchKeys={['name']}\n                  setFilteredItems={setFiltered}\n                  label={t('userMenu.searchAccount')}\n                  debounceTime={300}\n                  minSearchLength={1}\n                  containerClassName=\"relative flex gap-x-2\"\n                />\n              </div>\n            )}\n\n            <div className=\"max-h-48 overflow-y-auto px-3 pb-2\">\n              {loadingAccounts ? (\n                <div className=\"flex items-center justify-center py-4\">\n                  <LoadingSpinner size={5} color=\"foreground-faint\" />\n                </div>\n              ) : filtered.length === 0 ? (\n                <NoDataFound compact message={t('userMenu.noAccounts')} />\n              ) : (\n                filtered.map((account) => (\n                  <AccountRow\n                    key={account.id}\n                    account={account}\n                    isActive={account.id === activeAccountId}\n                    switchingAccountId={switchingAccountId}\n                    onSwitchAccount={onSwitchAccount}\n                  />\n                ))\n              )}\n            </div>\n\n            <hr className=\"border-border-subtle\" />\n          </>\n        )}\n\n        <div className=\"flex flex-col px-3 py-2\">\n          {(menuItems ?? []).map(footerRow)}\n\n          {onLogout && (\n            <ControlledButton\n              defaultHtmlButton\n              type=\"button\"\n              onClick={() => {\n                onOpenChange?.(false);\n                onLogout();\n              }}\n              className=\"cursor-pointer rounded-lg px-2 py-2.5 text-left text-sm text-danger-emphasis transition-colors hover:bg-danger-soft\"\n            >\n              {logoutLabel || t('userMenu.logout')}\n            </ControlledButton>\n          )}\n        </div>\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default UserMenu;\nexport type { IUserMenuProps };\n"],"names":[],"mappings":"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"}

package/dist/components/UI/UsersAvatar.d.ts

@@ -0,0 +1,7 @@
+interface IUsersAvatarProps {
+    className?: string;
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    users: Array<string>;
+}
+declare const UsersAvatar: React.FC<IUsersAvatarProps>;
+export default UsersAvatar;