@espressif/dashboard-ui-components 1.1.2 → 1.2.0

package/dist/chunk-TRTQSARU.js

@@ -0,0 +1,31 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export { __commonJS, __toESM };

package/dist/chunk-W2L5GRI2.js

@@ -0,0 +1,488 @@
+import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-SYEKNRS5.js';
+import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-34PXJOCS.js';
+import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-F5P6S7K2.js';
+import { cn } from './chunk-VU4CZ76T.js';
+import { Menu, Palette, Check, Globe, LogOut } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+
+function Header({
+  leftContent,
+  rightContent,
+  endContent,
+  showSidebarTrigger = false,
+  mobileLogo
+}) {
+  const { state, isMobile, toggleSidebar } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const sidebarWidth = isCollapsed ? "calc(var(--espd-sidebar-width-collapsed) - 1px)" : "calc(var(--espd-sidebar-width) - 1px)";
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: "fixed top-0 z-50 border-b backdrop-blur supports-[backdrop-filter]:bg-header transition-[left,width] duration-200 ease-linear border-header-border",
+      style: {
+        left: isMobile ? 0 : `calc(${sidebarWidth})`,
+        width: isMobile ? "100%" : `calc(100% - ${sidebarWidth})`,
+        height: "var(--espd-header-height)"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center gap-3 pr-4", children: [
+        showSidebarTrigger && /* @__PURE__ */ jsx("div", { className: "sidebar-trigger shrink-0", children: isMobile ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "size-10",
+            onClick: toggleSidebar,
+            children: [
+              /* @__PURE__ */ jsx(Menu, { className: "!size-6" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(SidebarTrigger, {}) }),
+        isMobile && mobileLogo && /* @__PURE__ */ jsx("div", { className: "mobile-logo shrink-0", children: mobileLogo }),
+        leftContent && /* @__PURE__ */ jsx("div", { className: cn("min-w-0", !rightContent && "flex-1"), children: leftContent }),
+        rightContent && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: rightContent }),
+        endContent && /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-auto flex items-center gap-2", children: endContent })
+      ] })
+    }
+  );
+}
+function Footer({ hidden = false }) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "bg-sidebar",
+        hidden ? "h-[var(--espd-hidden-footer-height)]" : "h-[var(--espd-footer-height)]"
+      ),
+      children: !hidden && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground h-full flex items-center justify-center tracking-normal", children: /* @__PURE__ */ jsx(FooterCard, {}) })
+    }
+  );
+}
+function AccountMenu({
+  userName,
+  userEmail,
+  userProfilePictureUrl,
+  avatarBadgeColor,
+  onLogoutClick,
+  onProfileCardClick,
+  onColorThemeChange,
+  colorTheme,
+  onLanguageChange,
+  languages,
+  currentLanguage,
+  additionalItems
+}) {
+  const menuItems = useMemo(() => {
+    const groups = [];
+    if (userName || userEmail) {
+      const profileCard = /* @__PURE__ */ jsx(
+        ProfileCard,
+        {
+          name: userName,
+          email: userEmail,
+          imageUrl: userProfilePictureUrl
+        },
+        "profile"
+      );
+      groups.push({
+        id: "profile",
+        items: [
+          onProfileCardClick ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onProfileCardClick,
+              className: "w-full text-left cursor-pointer",
+              children: profileCard
+            },
+            "profile"
+          ) : profileCard
+        ]
+      });
+    }
+    if (onColorThemeChange) {
+      const isDark = colorTheme === "dark";
+      const themeItems = [
+        {
+          id: "theme-dark",
+          label: "Dark mode",
+          endIcon: isDark ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+          isSelected: isDark,
+          onClick: () => onColorThemeChange("dark")
+        },
+        {
+          id: "theme-light",
+          label: "Light mode",
+          endIcon: !isDark ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+          isSelected: !isDark,
+          onClick: () => onColorThemeChange("light")
+        }
+      ];
+      groups.push({
+        id: "theme",
+        items: [
+          {
+            id: "color-theme",
+            label: "Color theme",
+            startIcon: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" }),
+            items: themeItems
+          }
+        ]
+      });
+    }
+    if (onLanguageChange && languages?.length) {
+      const langItems = languages.map((lang) => ({
+        id: `lang-${lang.code}`,
+        label: lang.label,
+        endIcon: lang.code === currentLanguage ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+        isSelected: lang.code === currentLanguage,
+        onClick: () => onLanguageChange(lang.code)
+      }));
+      groups.push({
+        id: "language",
+        items: [
+          {
+            id: "language",
+            label: "Language",
+            startIcon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }),
+            items: langItems
+          }
+        ]
+      });
+    }
+    if (additionalItems?.length) {
+      groups.push(...additionalItems);
+    }
+    if (onLogoutClick) {
+      groups.push({
+        id: "logout",
+        items: [
+          {
+            id: "logout",
+            label: "Logout",
+            startIcon: /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+            color: "error",
+            onClick: onLogoutClick
+          }
+        ]
+      });
+    }
+    return groups;
+  }, [
+    userName,
+    userEmail,
+    userProfilePictureUrl,
+    onProfileCardClick,
+    onColorThemeChange,
+    colorTheme,
+    onLanguageChange,
+    languages,
+    currentLanguage,
+    additionalItems,
+    onLogoutClick
+  ]);
+  if (menuItems.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    MyAccountMenu,
+    {
+      name: userName,
+      email: userEmail,
+      imageUrl: userProfilePictureUrl,
+      badgeColor: avatarBadgeColor,
+      menuItems,
+      minWidth: "220px"
+    }
+  );
+}
+function WorkspaceBreadcrumbs({
+  items,
+  LinkComponent,
+  collapseOnMobile = false
+}) {
+  const { isMobile } = useSidebar();
+  if (items.length === 0) return null;
+  const visibleItems = collapseOnMobile && isMobile ? items.slice(-1) : items;
+  return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: visibleItems.map((item, index) => {
+    const isLast = index === visibleItems.length - 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.path ? /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, children: item.label }) }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
+    ] }, item.path ?? index);
+  }) }) });
+}
+
+// src/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.ts
+function labelFromPath(path) {
+  const last = path.split("/").filter(Boolean).pop();
+  if (!last) return "Home";
+  return last.charAt(0).toUpperCase() + last.slice(1).replace(/-/g, " ");
+}
+function deriveBreadcrumbs(groups, currentPath, indexPath) {
+  const matches = [];
+  if (indexPath && isPathPrefixOf(indexPath, currentPath)) {
+    const coveredBySidebar = groups.some((entry) => {
+      if (isSidebarGroup(entry)) {
+        return entry.items.some((item) => item.path === indexPath);
+      }
+      return entry.path === indexPath;
+    });
+    if (!coveredBySidebar) {
+      matches.push({ label: labelFromPath(indexPath), path: indexPath });
+    }
+  }
+  for (const entry of groups) {
+    if (isSidebarGroup(entry)) {
+      for (const item of entry.items) {
+        if (isPathPrefixOf(item.path, currentPath)) {
+          matches.push({ label: item.label, path: item.path });
+        }
+      }
+    } else if (isPathPrefixOf(entry.path, currentPath)) {
+      matches.push({ label: entry.label, path: entry.path });
+    }
+  }
+  if (matches.length === 0) return [];
+  matches.sort((a, b) => a.path.length - b.path.length);
+  return matches.map((match) => ({
+    label: match.label,
+    path: match.path === currentPath ? void 0 : match.path
+  }));
+}
+function renderLogoForState({
+  logo,
+  logoCollapsed,
+  logoAssets,
+  appName,
+  darkMode,
+  collapsed
+}) {
+  const nodeOverride = collapsed ? logoCollapsed ?? logo : logo;
+  if (nodeOverride !== void 0) return nodeOverride;
+  if (logoAssets) {
+    return /* @__PURE__ */ jsx(AppLogo, { logo: logoAssets, darkMode, minimal: collapsed });
+  }
+  if (appName) {
+    return /* @__PURE__ */ jsx(AppLogo, { name: appName, darkMode, minimal: collapsed });
+  }
+  return null;
+}
+function SidebarLogo({
+  logo,
+  logoCollapsed,
+  logoAssets,
+  appName,
+  darkMode,
+  indexPath,
+  LinkComponent
+}) {
+  const { state, isMobile } = useSidebar();
+  const node = renderLogoForState({
+    logo,
+    logoCollapsed,
+    logoAssets,
+    appName,
+    darkMode,
+    // The mobile sheet is full-width, so always show the full logo there even if
+    // the desktop sidebar was left collapsed.
+    collapsed: state === "collapsed" && !isMobile
+  });
+  if (node === null) return null;
+  if (indexPath && LinkComponent) {
+    return /* @__PURE__ */ jsx(LinkComponent, { to: indexPath, className: "no-underline", children: node });
+  }
+  return node;
+}
+function EspressifFooterBranding({ darkMode }) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: "https://www.espressif.com/",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "no-underline flex justify-center w-full opacity-25 transition-opacity duration-500 ease-in-out hover:opacity-100",
+      "aria-label": "Espressif",
+      children: /* @__PURE__ */ jsx(
+        AppLogo,
+        {
+          width: 120,
+          darkMode,
+          minimal: state === "collapsed"
+        }
+      )
+    }
+  );
+}
+function WorkspaceLayout({
+  appName,
+  logo,
+  logoCollapsed,
+  logoMobile,
+  logoAssets,
+  footerBranding,
+  children,
+  sidebarConfig,
+  headerConfig,
+  footerConfig,
+  sidebarOpen,
+  defaultSidebarOpen,
+  onSidebarOpenChange,
+  onLogoutClick,
+  onProfileCardClick,
+  onColorThemeChange,
+  colorTheme,
+  onLanguageChange,
+  languages,
+  currentLanguage,
+  accountMenuItems,
+  hideBreadcrumbs
+}) {
+  const hideFooter = footerConfig?.hidden ?? false;
+  const darkMode = colorTheme === "dark";
+  const contentHeight = hideFooter ? "calc(100vh - var(--espd-header-height) - var(--espd-hidden-footer-height))" : "calc(100vh - var(--espd-header-height) - var(--espd-footer-height))";
+  const breadcrumbItems = hideBreadcrumbs ? [] : headerConfig?.breadcrumbs ?? deriveBreadcrumbs(
+    sidebarConfig.items,
+    sidebarConfig.currentPath,
+    sidebarConfig.indexPath
+  );
+  const defaultMobileLogo = logoAssets ? /* @__PURE__ */ jsx(AppLogo, { logo: logoAssets, darkMode, minimal: true, width: 24 }) : appName ? /* @__PURE__ */ jsx(AppLogo, { name: appName, darkMode, minimal: true, width: 24 }) : null;
+  const mobileLogoNode = logoMobile ?? defaultMobileLogo;
+  const mobileLogo = mobileLogoNode && sidebarConfig.indexPath ? /* @__PURE__ */ jsx(
+    sidebarConfig.LinkComponent,
+    {
+      to: sidebarConfig.indexPath,
+      className: "no-underline",
+      children: mobileLogoNode
+    }
+  ) : mobileLogoNode;
+  const headerLeftContent = breadcrumbItems.length > 0 ? /* @__PURE__ */ jsx(
+    WorkspaceBreadcrumbs,
+    {
+      items: breadcrumbItems,
+      LinkComponent: sidebarConfig.LinkComponent,
+      collapseOnMobile: headerConfig?.collapseBreadcrumbsOnMobile ?? false
+    }
+  ) : null;
+  let footerBrandingNode = null;
+  if (footerBranding === false) {
+    footerBrandingNode = null;
+  } else if (footerBranding !== void 0) {
+    footerBrandingNode = footerBranding;
+  } else if (appName && sidebarConfig.hideCompanyBranding !== true) {
+    footerBrandingNode = /* @__PURE__ */ jsx(EspressifFooterBranding, { darkMode });
+  }
+  const sidebarFooter = sidebarConfig.footer != null || footerBrandingNode != null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+    sidebarConfig.footer,
+    footerBrandingNode
+  ] }) : void 0;
+  const accountMenu = /* @__PURE__ */ jsx(
+    AccountMenu,
+    {
+      userName: headerConfig?.userName,
+      userEmail: headerConfig?.userEmail,
+      userProfilePictureUrl: headerConfig?.userProfilePictureUrl,
+      avatarBadgeColor: headerConfig?.avatarBadgeColor,
+      onLogoutClick,
+      onProfileCardClick,
+      onColorThemeChange,
+      colorTheme,
+      onLanguageChange,
+      languages,
+      currentLanguage,
+      additionalItems: accountMenuItems
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    SidebarProvider,
+    {
+      open: sidebarOpen,
+      defaultOpen: defaultSidebarOpen,
+      onOpenChange: onSidebarOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(
+          Sidebar2,
+          {
+            items: sidebarConfig.items,
+            currentPath: sidebarConfig.currentPath,
+            header: /* @__PURE__ */ jsx(
+              SidebarLogo,
+              {
+                logo,
+                logoCollapsed,
+                logoAssets,
+                appName,
+                darkMode,
+                indexPath: sidebarConfig.indexPath,
+                LinkComponent: sidebarConfig.LinkComponent
+              }
+            ),
+            headerHeight: "var(--espd-header-height)",
+            footer: sidebarFooter,
+            LinkComponent: sidebarConfig.LinkComponent,
+            collapsible: sidebarConfig.allowCollapsible ? "icon" : "none",
+            variant: sidebarConfig.variant
+          }
+        ),
+        /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-hidden h-dvh max-h-dvh", children: [
+          /* @__PURE__ */ jsx(
+            Header,
+            {
+              leftContent: headerLeftContent,
+              rightContent: headerConfig?.rightContent,
+              endContent: accountMenu,
+              showSidebarTrigger: sidebarConfig.allowCollapsible,
+              mobileLogo
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex flex-1 flex-col gap-4 bg-sidebar",
+              style: {
+                paddingTop: "var(--espd-header-height)",
+                height: contentHeight
+              },
+              children: /* @__PURE__ */ jsx("main", { className: "flex-1 bg-background h-full overflow-y-auto md:rounded-tl-2xl md:rounded-bl-2xl pb-10", children })
+            }
+          ),
+          /* @__PURE__ */ jsx(Footer, { hidden: hideFooter })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/layouts/entry-layout/entry-layout-bg.webp
+var entry_layout_bg_default = "./assets/entry-layout-bg-JPI7GJ42.webp";
+function EntryLayout({
+  appName,
+  children,
+  backgroundImageUrl,
+  heading,
+  darkMode,
+  logo,
+  logoAssets
+}) {
+  const bgImage = backgroundImageUrl ?? entry_layout_bg_default;
+  const resolvedLogo = logo !== void 0 ? logo : logoAssets ? /* @__PURE__ */ jsx(AppLogo, { logo: logoAssets, darkMode, width: 256 }) : appName ? /* @__PURE__ */ jsx(AppLogo, { name: appName, darkMode, width: 256 }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-[40%] flex flex-col py-12 px-10 bg-gradient-to-b from-background to-transparent max-xl:w-full max-xl:py-8 max-xl:px-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
+        resolvedLogo !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-center mb-12", children: resolvedLogo }),
+        children
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "shrink-0 text-center text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(FooterCard, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-[60%] relative bg-cover bg-center bg-no-repeat max-xl:hidden",
+        style: { backgroundImage: `url(${bgImage})` },
+        children: heading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-black/30 to-transparent flex items-center justify-center p-12", children: /* @__PURE__ */ jsx("h1", { className: "text-white text-[3.25rem] leading-[1.25] text-center max-w-full px-6 font-bold tracking-tight", children: typeof heading === "string" ? parseTextMarkup(heading) : heading }) })
+      }
+    )
+  ] });
+}
+
+export { AccountMenu, EntryLayout, Footer, Header, WorkspaceLayout };

package/dist/common/index.js

@@ -1,7 +1,8 @@
-export { CopyrightCard, PageLoader } from '../chunk-J7YNQMAC.js';
-export { AnimatedRainmakerLogo } from '../chunk-MOYKF2ZC.js';
+export { CopyrightCard, PageLoader } from '../chunk-742PUXQ6.js';
+export { AnimatedRainmakerLogo } from '../chunk-KF3NDMZW.js';
 import '../chunk-JPMN2UMF.js';
 export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from '../chunk-SYEKNRS5.js';
 import '../chunk-34PXJOCS.js';
 import '../chunk-F5P6S7K2.js';
 import '../chunk-VU4CZ76T.js';
+import '../chunk-TRTQSARU.js';