@umodeapporg/ui 0.2.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDataCard.js","sources":["../../../src/components/UI/BaseDataCard.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Link } from 'react-router-dom';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport SkeletonLoading from '../UI/SkeletonLoading';\n\nimport CustomCard from './CustomCard';\ninterface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  smallTitle?: boolean;\n  titleIcon?: SymbolCodepoints | null;\n  titleClass?: string;\n  cardIcon?: SymbolCodepoints;\n  iconTooltip?: string;\n  iconColor?: string;\n  iconSize?: number;\n  itsClickable?: boolean;\n  actionIcon?: SymbolCodepoints;\n  actionHref?: string;\n  actionButton?: () => void;\n  onAction?: () => void;\n  actionButtonLabel?: string;\n  showActionButton?: boolean;\n  useScroll?: boolean;\n  loading?: boolean;\n  onSecondarySlot?: React.ReactNode;\n  infoTooltip?: string;\n}\n\nconst BaseDataCard: React.FC<IBaseDataCardProps> = ({\n  title,\n  smallTitle,\n  titleIcon,\n  titleClass,\n  cardIcon,\n  iconTooltip,\n  itsClickable = false,\n  actionIcon = 'edit',\n  actionHref,\n  className,\n  actionButton,\n  actionButtonLabel,\n  showActionButton = false,\n  onAction,\n  useScroll = false,\n  loading = false,\n  children,\n  onSecondarySlot,\n  infoTooltip,\n}) => {\n  const [isArrowUpward, setIsArrowUpward] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleActionClick = () => {\n    const newArrowUpwardState = !isArrowUpward;\n    setIsArrowUpward(newArrowUpwardState);\n    if (actionButton) {\n      actionButton();\n    }\n    if (!newArrowUpwardState && cardRef.current && useScroll) {\n      setTimeout(() => {\n        uiLogger.debug('Scrolling into view');\n        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }, 1);\n    }\n  };\n\n  return (\n    <CustomCard\n      className={classNames('overflow-y-hidden p-5 transition-colors', {\n        [`${className}`]: !!className,\n        'h-[30rem]': useScroll,\n        ['hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow']:\n          itsClickable,\n      })}\n      customRef={cardRef}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <div className=\"flex w-full items-center justify-between\">\n            {loading ? (\n              <SkeletonLoading className=\"!h-4\" />\n            ) : (\n              <div className=\"flex items-center gap-x-1.5\">\n                {titleIcon &&\n                  (iconTooltip ? (\n                    <ControlledTooltip content={iconTooltip} className=\"max-w-80\">\n                      <MaterialSymbol\n                        icon={titleIcon}\n                        size={smallTitle ? 18 : 20}\n                        color=\"rgb(var(--color-foreground-subtle))\"\n                        className=\"!hidden desktop:!block\"\n                      />\n                    </ControlledTooltip>\n                  ) : (\n                    <MaterialSymbol\n                      icon={titleIcon}\n                      size={smallTitle ? 18 : 20}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"!hidden desktop:!block\"\n                    />\n                  ))}\n\n                {title && (\n                  <span\n                    className={classNames(\n                      'font-semibold text-foreground',\n                      {\n                        'text-xs': smallTitle,\n                        'text-lg': !smallTitle,\n                      },\n                      titleClass,\n                    )}\n                  >\n                    {title}\n                  </span>\n                )}\n\n                {infoTooltip && (\n                  <ControlledTooltip content={infoTooltip} className=\"max-w-80\">\n                    <MaterialSymbol\n                      icon=\"info\"\n                      size={smallTitle ? 16 : 18}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"ml-1 cursor-help\"\n                    />\n                  </ControlledTooltip>\n                )}\n              </div>\n            )}\n          </div>\n\n          <div>\n            {loading ? (\n              <SkeletonLoading type=\"circle\" className=\"ml-3\" />\n            ) : (\n              <div className=\"flex items-center space-x-2\">\n                {actionHref && (\n                  <Link to={actionHref}>\n                    <ControlledButton\n                      defaultHtmlButton\n                      onClick={onAction}\n                      className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                    >\n                      <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                    </ControlledButton>\n                  </Link>\n                )}\n\n                {onAction && (\n                  <ControlledButton\n                    defaultHtmlButton\n                    onClick={onAction}\n                    className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                  >\n                    <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                  </ControlledButton>\n                )}\n\n                {onSecondarySlot && <>{onSecondarySlot}</>}\n\n                {cardIcon && <MaterialSymbol icon={cardIcon} size={25} color=\"rgb(var(--color-primary))\" />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div\n          className={classNames('m-auto', {\n            'w-[90%]': useScroll,\n            'w-full': !useScroll,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n\n      {showActionButton && actionButtonLabel && (\n        <div className=\"flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent\">\n          <ControlledButton\n            className=\"flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60\"\n            onClick={handleActionClick}\n          >\n            <MaterialSymbol\n              icon=\"arrow_downward\"\n              size={20}\n              color=\"white\"\n              className={classNames('transition-transform duration-slow', {\n                'rotate-180': isArrowUpward,\n              })}\n            />\n\n            {actionButtonLabel}\n          </ControlledButton>\n        </div>\n      )}\n    </CustomCard>\n  );\n};\n\nexport default BaseDataCard;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDataCard.js","sources":["../../../src/components/UI/BaseDataCard.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport SkeletonLoading from '../UI/SkeletonLoading';\n\nimport CustomCard from './CustomCard';\ninterface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  smallTitle?: boolean;\n  titleIcon?: SymbolCodepoints | null;\n  titleClass?: string;\n  cardIcon?: SymbolCodepoints;\n  iconTooltip?: string;\n  iconColor?: string;\n  iconSize?: number;\n  itsClickable?: boolean;\n  actionIcon?: SymbolCodepoints;\n  actionHref?: string;\n  actionButton?: () => void;\n  onAction?: () => void;\n  actionButtonLabel?: string;\n  showActionButton?: boolean;\n  useScroll?: boolean;\n  loading?: boolean;\n  onSecondarySlot?: React.ReactNode;\n  infoTooltip?: string;\n}\n\nconst BaseDataCard: React.FC<IBaseDataCardProps> = ({\n  title,\n  smallTitle,\n  titleIcon,\n  titleClass,\n  cardIcon,\n  iconTooltip,\n  itsClickable = false,\n  actionIcon = 'edit',\n  actionHref,\n  className,\n  actionButton,\n  actionButtonLabel,\n  showActionButton = false,\n  onAction,\n  useScroll = false,\n  loading = false,\n  children,\n  onSecondarySlot,\n  infoTooltip,\n}) => {\n  const { Link: NavigationLink } = useUiNavigation();\n  const [isArrowUpward, setIsArrowUpward] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleActionClick = () => {\n    const newArrowUpwardState = !isArrowUpward;\n    setIsArrowUpward(newArrowUpwardState);\n    if (actionButton) {\n      actionButton();\n    }\n    if (!newArrowUpwardState && cardRef.current && useScroll) {\n      setTimeout(() => {\n        uiLogger.debug('Scrolling into view');\n        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }, 1);\n    }\n  };\n\n  return (\n    <CustomCard\n      className={classNames('overflow-y-hidden p-5 transition-colors', {\n        [`${className}`]: !!className,\n        'h-[30rem]': useScroll,\n        ['hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow']:\n          itsClickable,\n      })}\n      customRef={cardRef}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <div className=\"flex w-full items-center justify-between\">\n            {loading ? (\n              <SkeletonLoading className=\"!h-4\" />\n            ) : (\n              <div className=\"flex items-center gap-x-1.5\">\n                {titleIcon &&\n                  (iconTooltip ? (\n                    <ControlledTooltip content={iconTooltip} className=\"max-w-80\">\n                      <MaterialSymbol\n                        icon={titleIcon}\n                        size={smallTitle ? 18 : 20}\n                        color=\"rgb(var(--color-foreground-subtle))\"\n                        className=\"!hidden desktop:!block\"\n                      />\n                    </ControlledTooltip>\n                  ) : (\n                    <MaterialSymbol\n                      icon={titleIcon}\n                      size={smallTitle ? 18 : 20}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"!hidden desktop:!block\"\n                    />\n                  ))}\n\n                {title && (\n                  <span\n                    className={classNames(\n                      'font-semibold text-foreground',\n                      {\n                        'text-xs': smallTitle,\n                        'text-lg': !smallTitle,\n                      },\n                      titleClass,\n                    )}\n                  >\n                    {title}\n                  </span>\n                )}\n\n                {infoTooltip && (\n                  <ControlledTooltip content={infoTooltip} className=\"max-w-80\">\n                    <MaterialSymbol\n                      icon=\"info\"\n                      size={smallTitle ? 16 : 18}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"ml-1 cursor-help\"\n                    />\n                  </ControlledTooltip>\n                )}\n              </div>\n            )}\n          </div>\n\n          <div>\n            {loading ? (\n              <SkeletonLoading type=\"circle\" className=\"ml-3\" />\n            ) : (\n              <div className=\"flex items-center space-x-2\">\n                {actionHref && (\n                  <NavigationLink to={actionHref}>\n                    <ControlledButton\n                      defaultHtmlButton\n                      onClick={onAction}\n                      className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                    >\n                      <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                    </ControlledButton>\n                  </NavigationLink>\n                )}\n\n                {onAction && (\n                  <ControlledButton\n                    defaultHtmlButton\n                    onClick={onAction}\n                    className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                  >\n                    <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                  </ControlledButton>\n                )}\n\n                {onSecondarySlot && <>{onSecondarySlot}</>}\n\n                {cardIcon && <MaterialSymbol icon={cardIcon} size={25} color=\"rgb(var(--color-primary))\" />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div\n          className={classNames('m-auto', {\n            'w-[90%]': useScroll,\n            'w-full': !useScroll,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n\n      {showActionButton && actionButtonLabel && (\n        <div className=\"flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent\">\n          <ControlledButton\n            className=\"flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60\"\n            onClick={handleActionClick}\n          >\n            <MaterialSymbol\n              icon=\"arrow_downward\"\n              size={20}\n              color=\"white\"\n              className={classNames('transition-transform duration-slow', {\n                'rotate-180': isArrowUpward,\n              })}\n            />\n\n            {actionButtonLabel}\n          </ControlledButton>\n        </div>\n      )}\n    </CustomCard>\n  );\n};\n\nexport default BaseDataCard;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/DataTable.js

@@ -27,7 +27,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import GridProvider from "./grid/GridProvider.js";
 import { useGridFillApply } from "./grid/useGridFillApply.js";

package/dist/components/UI/DataTable/DataTableBulkEditDialog.js

@@ -24,7 +24,7 @@ import NoDataFound from "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../ControlledPopover.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
 const resolveDefaultRowLabel = (row, columns) => {
   const label = (columns ?? []).filter((column) => column.type !== "actions" && !!column.accessor).map((column) => column.accessor?.(row)).find((value) => typeof value === "string" || typeof value === "number");

package/dist/components/UI/DataTable/DataTableFilters.js

@@ -24,7 +24,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import FiltersPanel from "../../Search/filters/FiltersPanel.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 const DataTableFilters = ({
   filters,
   values,

package/dist/components/UI/DataTable/DataTableToolbar.js

@@ -26,7 +26,7 @@ import SkeletonLoading from "../SkeletonLoading.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
 import DataTableSegmentedTabs from "./DataTableSegmentedTabs.js";
 const DataTableToolbar = ({

package/dist/components/UI/DataTable/applyDataTableFilters.js

@@ -25,7 +25,7 @@ import "../NoDataFound/index.js";
 import "../../Search/filters/FiltersButton.js";
 import "../../../helpers/utilityHelpers.js";
 import "../../Form/ControlledDialog.js";
-import "react-router-dom";
+import "../../Navigation/UiNavigationContext.js";
 const isFieldActive = (field, values) => !isFilterValueEmpty(field, values?.[field.key]);
 const applyDataTableFilters = (rows, filters, values) => {
   if (!filters) return rows;

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

@@ -0,0 +1,48 @@
+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 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,196 @@
+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 UserMenu = ({
+  userName,
+  userEmail,
+  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("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: 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 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/**\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  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          <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            {userInitials}\n          </div>\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/index.d.ts

@@ -14,7 +14,12 @@ export { default as ControlledBreadcrumb } from './components/Navigation/Control
 export { default as ErrorPage } from './components/Navigation/ErrorPage';
 export { default as PageTitle } from './components/Navigation/PageTitle';
 export * from './components/Navigation/PageTitleNavigationContext';
+export * from './components/Navigation/UiNavigationContext';
 export { default as UnifiedSearchBar } from './components/Search/UnifiedSearchBar';
+export { default as AppShell } from './components/Shell/AppShell';
+export { default as ShellLanguageToggle } from './components/Shell/LanguageToggle';
+export * from './components/Shell/SidebarMenu';
+export { default as ShellThemeToggle } from './components/Shell/ThemeToggle';
 export * from './components/UI/access/UiAccessContext';
 export { default as BaseDataCard } from './components/UI/BaseDataCard';
 export { default as OutlinedChip } from './components/UI/Chips/OutlinedChip';
@@ -34,6 +39,7 @@ export { default as LoadingSpinner } from './components/UI/LoadingSpinner';
 export * from './components/UI/MaterialSymbol/index';
 export { default as NoDataFound } from './components/UI/NoDataFound/index';
 export { default as SkeletonLoading } from './components/UI/SkeletonLoading';
+export { default as UserMenu } from './components/UI/UserMenu';
 export * from './helpers/composeRefs';
 export * from './helpers/layeredSurfaces';
 export * from './helpers/themeTokens';

package/dist/index.js

@@ -14,26 +14,32 @@ import { default as default13 } from "./components/Navigation/ControlledBreadcru
 import { default as default14 } from "./components/Navigation/ErrorPage.js";
 import { default as default15 } from "./components/Navigation/PageTitle.js";
 import { PageTitleNavigationProvider, usePageTitleNavigation } from "./components/Navigation/PageTitleNavigationContext.js";
+import { UiNavigationProvider, useUiNavigation } from "./components/Navigation/UiNavigationContext.js";
 import { default as default16 } from "./components/Search/UnifiedSearchBar.js";
+import { default as default17 } from "./components/Shell/AppShell.js";
+import { default as default18 } from "./components/Shell/LanguageToggle.js";
+import { resolveSidebarItemId } from "./components/Shell/SidebarMenu.js";
+import { default as default19 } from "./components/Shell/ThemeToggle.js";
 import { UiAccessProvider, useUiAccess } from "./components/UI/access/UiAccessContext.js";
-import { default as default17 } from "./components/UI/BaseDataCard.js";
-import { default as default18 } from "./components/UI/Chips/OutlinedChip.js";
-import { default as default19 } from "./components/UI/Colors.js";
-import { default as default20 } from "./components/UI/ColorSwatch.js";
-import { default as default21 } from "./components/UI/ControlledAccordion.js";
-import { default as default22 } from "./components/UI/ControlledCollapse.js";
-import { default as default23 } from "./components/UI/ControlledMenu.js";
-import { default as default24 } from "./components/UI/ControlledPopover.js";
-import { default as default25 } from "./components/UI/ControlledProgress.js";
-import { default as default26 } from "./components/UI/ControlledSlider.js";
-import { default as default27 } from "./components/UI/ControlledTooltip.js";
-import { default as default28 } from "./components/UI/CustomBadge.js";
-import { default as default29 } from "./components/UI/CustomCard.js";
-import { default as default30 } from "./components/UI/InformationCard.js";
-import { default as default31 } from "./components/UI/LoadingSpinner.js";
+import { default as default20 } from "./components/UI/BaseDataCard.js";
+import { default as default21 } from "./components/UI/Chips/OutlinedChip.js";
+import { default as default22 } from "./components/UI/Colors.js";
+import { default as default23 } from "./components/UI/ColorSwatch.js";
+import { default as default24 } from "./components/UI/ControlledAccordion.js";
+import { default as default25 } from "./components/UI/ControlledCollapse.js";
+import { default as default26 } from "./components/UI/ControlledMenu.js";
+import { default as default27 } from "./components/UI/ControlledPopover.js";
+import { default as default28 } from "./components/UI/ControlledProgress.js";
+import { default as default29 } from "./components/UI/ControlledSlider.js";
+import { default as default30 } from "./components/UI/ControlledTooltip.js";
+import { default as default31 } from "./components/UI/CustomBadge.js";
+import { default as default32 } from "./components/UI/CustomCard.js";
+import { default as default33 } from "./components/UI/InformationCard.js";
+import { default as default34 } from "./components/UI/LoadingSpinner.js";
 import { MaterialSymbol, combineClasses } from "./components/UI/MaterialSymbol/index.js";
-import { default as default32 } from "./components/UI/NoDataFound/index.js";
-import { default as default33 } from "./components/UI/SkeletonLoading.js";
+import { default as default35 } from "./components/UI/NoDataFound/index.js";
+import { default as default36 } from "./components/UI/SkeletonLoading.js";
+import { default as default37 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
 import { isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
@@ -50,44 +56,49 @@ import { uiLocales } from "./locales/index.js";
 import { collapseVariants, createDrawerVariants, dialogVariants, fadeVariants, floatingVariants, scrimVariants, tooltipVariants } from "./motion/motionPresets.js";
 import { MOTION_OFFSET_PX, enterTransition, exitTransition, motionDuration, motionEase } from "./motion/motionTokens.js";
 export {
+  default17 as AppShell,
   BREAKPOINTS,
-  default17 as BaseDataCard,
-  default20 as ColorSwatch,
-  default19 as Colors,
-  default21 as ControlledAccordion,
+  default20 as BaseDataCard,
+  default23 as ColorSwatch,
+  default22 as Colors,
+  default24 as ControlledAccordion,
   default13 as ControlledBreadcrumb,
   default2 as ControlledButton,
   default3 as ControlledCheckbox,
-  default22 as ControlledCollapse,
+  default25 as ControlledCollapse,
   default4 as ControlledDialog,
   default5 as ControlledDrawer,
   default6 as ControlledImage,
   default7 as ControlledInput,
-  default23 as ControlledMenu,
-  default24 as ControlledPopover,
-  default25 as ControlledProgress,
+  default26 as ControlledMenu,
+  default27 as ControlledPopover,
+  default28 as ControlledProgress,
   default8 as ControlledRadio,
   ControlledSelect,
-  default26 as ControlledSlider,
+  default29 as ControlledSlider,
   default9 as ControlledSwitch,
   default10 as ControlledTabs,
   default11 as ControlledTextarea,
-  default27 as ControlledTooltip,
+  default30 as ControlledTooltip,
   default12 as ControlledViewToggle,
-  default28 as CustomBadge,
-  default29 as CustomCard,
+  default31 as CustomBadge,
+  default32 as CustomCard,
   default14 as ErrorPage,
-  default30 as InformationCard,
-  default31 as LoadingSpinner,
+  default33 as InformationCard,
+  default34 as LoadingSpinner,
   MOTION_OFFSET_PX,
   MaterialSymbol,
-  default32 as NoDataFound,
-  default18 as OutlinedChip,
+  default35 as NoDataFound,
+  default21 as OutlinedChip,
   default15 as PageTitle,
   PageTitleNavigationProvider,
-  default33 as SkeletonLoading,
+  default18 as ShellLanguageToggle,
+  default19 as ShellThemeToggle,
+  default36 as SkeletonLoading,
   UiAccessProvider,
+  UiNavigationProvider,
   default16 as UnifiedSearchBar,
+  default37 as UserMenu,
   collapseVariants,
   combineClasses,
   composeRefs,
@@ -104,6 +115,7 @@ export {
   motionEase,
   readThemeToken,
   readUiPreference,
+  resolveSidebarItemId,
   resolveUiPreferenceScopeId,
   scrimVariants,
   tooltipVariants,
@@ -120,6 +132,7 @@ export {
   useResolvedTheme,
   useThemeChartTokens,
   useUiAccess,
+  useUiNavigation,
   writeUiPreference
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/locales/en/ui.json.d.ts

@@ -366,6 +366,11 @@ declare const _default: {
     "requiredField": "This field is required",
     "loadingInfo": "Loading information..."
   },
+  "language": {
+    "toggle": "Language",
+    "pt_short": "PT",
+    "en_short": "EN"
+  },
   "noDataFound": {
     "variants": {
       "empty": "Nothing here yet",
@@ -438,6 +443,22 @@ declare const _default: {
       "description": "This is usually temporary. Try again and, if it stays like this, contact support and tell them what you were doing."
     }
   },
+  "sidebar": {
+    "home": "Home",
+    "logout": "Sign out",
+    "openSidebar": "Open sidebar",
+    "collapseSidebar": "Collapse sidebar",
+    "sections": {
+      "management": "Management",
+      "registration": "Records"
+    }
+  },
+  "theme": {
+    "toggle": "Theme",
+    "light": "Light theme",
+    "dark": "Dark theme",
+    "system": "Follow system"
+  },
   "toast": {
     "learnMore": "Learn more"
   },
@@ -459,6 +480,13 @@ declare const _default: {
   "urlLinkCell": {
     "clickToAccess": "Click to access"
   },
+  "userMenu": {
+    "loading": "Loading...",
+    "yourAccounts": "Your Accounts",
+    "searchAccount": "Search account",
+    "noAccounts": "No active accounts available",
+    "logout": "Sign out"
+  },
   "voiceInput": {
     "start": "Transcribe by voice",
     "stop": "Stop transcription",