@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/chunk-XW6Z6VO4.js

@@ -1,505 +0,0 @@
-import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-P6F6UWV2.js';
-import { useSidebar, SidebarTrigger, DropdownMenuItem, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-ZFYUONPY.js';
-import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-OKB2WTX7.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 ? (
-            // A menu item (not a plain button) so Radix closes the menu on select and
-            // includes the card in keyboard navigation. Negative margins cancel the
-            // custom-item wrapper's padding so the card keeps its position; they sit on
-            // an outer div because the hover highlight is sized from the item's wrapper.
-            /* @__PURE__ */ jsx("div", { className: "-mx-2.5 -my-1.5", children: /* @__PURE__ */ jsx(
-              DropdownMenuItem,
-              {
-                onSelect: onProfileCardClick,
-                className: "px-2.5 py-1.5 cursor-pointer *:flex-1 *:min-w-0",
-                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: 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: 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 SidebarLinkComp = sidebarConfig.linkComponent;
-  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(
-    SidebarLinkComp,
-    {
-      to: sidebarConfig.indexPath,
-      className: "no-underline",
-      children: mobileLogoNode
-    }
-  ) : mobileLogoNode;
-  const headerLeftContent = breadcrumbItems.length > 0 ? /* @__PURE__ */ jsx(
-    WorkspaceBreadcrumbs,
-    {
-      items: breadcrumbItems,
-      linkComponent: SidebarLinkComp,
-      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: SidebarLinkComp
-              }
-            ),
-            headerHeight: "var(--espd-header-height)",
-            footer: sidebarFooter,
-            linkComponent: SidebarLinkComp,
-            collapsible: sidebarConfig.allowCollapsible ? "icon" : "none",
-            variant: sidebarConfig.variant,
-            focusActiveGroup: sidebarConfig.focusActiveGroup
-          }
-        ),
-        /* @__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,
-  customRightPanel,
-  disableBackgroundImage,
-  hideLogo,
-  hideFooter,
-  hideRightPanel
-}) {
-  const bgImage = backgroundImageUrl ?? (disableBackgroundImage ? void 0 : 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 h-screen overflow-hidden w-full${hideRightPanel ? " justify-center" : ""}`,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "w-[40%] flex flex-col overflow-y-auto 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: "main-content-wrapper h-full flex flex-col justify-center", children: [
-          !hideLogo && resolvedLogo !== null && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 shrink-0 flex justify-center py-6 bg-background/75 backdrop-blur-xs w-full logo-wrapper", children: resolvedLogo }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center main-content", children }),
-            !hideFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-center text-xs text-muted-foreground footer-card-wrapper py-10", children: /* @__PURE__ */ jsx(FooterCard, {}) })
-          ] })
-        ] }) }),
-        !hideRightPanel && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-[60%] relative bg-cover bg-center bg-no-repeat max-xl:hidden",
-            style: bgImage ? { backgroundImage: `url(${bgImage})` } : void 0,
-            children: customRightPanel ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: customRightPanel }) : 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 }) }) : null
-          }
-        )
-      ]
-    }
-  );
-}
-
-export { AccountMenu, EntryLayout, Footer, Header, WorkspaceLayout };