@zendir/ui 0.1.0

package/dist/react/core/SideNav.js

@@ -0,0 +1,551 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback, useContext, createContext } from "react";
+import { safeAccentText } from "../utils/index.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const SIDENAV_STATUS_COLORS = {
+  off: "#a4abb6",
+  standby: "#2dccff",
+  normal: "#56f000",
+  caution: "#fce83a",
+  serious: "#ffb302",
+  critical: "#ff3838"
+};
+function NavStatusShape({ status, size = 8 }) {
+  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;
+  const glow = `${color}50`;
+  const style = { flexShrink: 0, filter: `drop-shadow(0 0 3px ${glow})` };
+  switch (status) {
+    case "caution":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) });
+    case "serious":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) });
+    case "critical":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) });
+    case "standby":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
+    case "off":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
+    default:
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) });
+  }
+}
+const SIDENAV_BREAKPOINTS = {
+  mobile: 768,
+  tablet: 1024
+};
+function getSideNavMode(width) {
+  if (width < SIDENAV_BREAKPOINTS.mobile) return "mobile";
+  if (width < SIDENAV_BREAKPOINTS.tablet) return "tablet";
+  return "desktop";
+}
+const SideNavContext = createContext({
+  collapsed: false,
+  mobileOpen: false,
+  mode: "desktop",
+  showCollapseToggle: true,
+  setMobileOpen: () => {
+  },
+  toggleCollapse: () => {
+  }
+});
+const SideNavRoot = memo(function SideNav2({
+  collapsed,
+  onCollapsedChange,
+  showCollapseToggle = true,
+  width = 260,
+  collapsedWidth = 64,
+  mobileVariant = "drawer",
+  children,
+  style
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [userCollapsed, setUserCollapsed] = useState(null);
+  const [viewMode, setViewMode] = useState(() => {
+    if (typeof window !== "undefined") return getSideNavMode(window.innerWidth);
+    return "desktop";
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let rafId;
+    const handleResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(rafId);
+    };
+  }, []);
+  const effectiveMode = mobileVariant === "collapsed" && viewMode === "mobile" ? "tablet" : viewMode;
+  useEffect(() => {
+    setUserCollapsed(null);
+  }, [effectiveMode]);
+  useEffect(() => {
+    if (effectiveMode !== "mobile" && mobileOpen) setMobileOpen(false);
+  }, [effectiveMode, mobileOpen]);
+  useEffect(() => {
+    if (!mobileOpen) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [mobileOpen]);
+  const autoCollapsed = effectiveMode === "tablet";
+  const isCollapsed = collapsed !== void 0 ? collapsed : userCollapsed !== null ? userCollapsed : autoCollapsed;
+  const isMobile = effectiveMode === "mobile";
+  const navWidth = isCollapsed ? collapsedWidth : width;
+  const handleToggleCollapse = useCallback(() => {
+    const next = !isCollapsed;
+    setUserCollapsed(next);
+    onCollapsedChange == null ? void 0 : onCollapsedChange(next);
+  }, [isCollapsed, onCollapsedChange]);
+  const navStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: isMobile ? 280 : navWidth,
+    height: "100%",
+    backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.7)" : tokens.colors.background.surface,
+    borderRight: `1px solid ${tokens.colors.border.muted}`,
+    transition: "width 0.25s ease, transform 0.25s ease",
+    overflowX: "hidden",
+    overflowY: "auto",
+    flexShrink: 0,
+    fontFamily: tokens.typography.fontFamily.primary,
+    ...isTransparentTheme ? {
+      backdropFilter: "blur(16px)",
+      WebkitBackdropFilter: "blur(16px)"
+    } : {},
+    ...style
+  };
+  const contextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(SideNavContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": "Open navigation",
+          onClick: () => setMobileOpen(true),
+          style: {
+            position: "fixed",
+            top: tokens.spacing.sm,
+            left: tokens.spacing.sm,
+            zIndex: 1001,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 44,
+            height: 44,
+            border: `1px solid ${tokens.colors.border.muted}`,
+            borderRadius: tokens.borderRadius.md,
+            backgroundColor: tokens.colors.background.elevated,
+            color: tokens.colors.text.primary,
+            cursor: "pointer",
+            transition: tokens.animation.fast
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 1002,
+            backgroundColor: `${tokens.colors.background.base}99`,
+            backdropFilter: "blur(4px)",
+            opacity: mobileOpen ? 1 : 0,
+            pointerEvents: mobileOpen ? "auto" : "none",
+            transition: "opacity 0.25s ease"
+          },
+          onClick: () => setMobileOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          role: "navigation",
+          "aria-label": "Main navigation",
+          style: {
+            ...navStyle,
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: 1003,
+            transform: mobileOpen ? "translateX(0)" : "translateX(-100%)",
+            boxShadow: mobileOpen ? tokens.shadows.xl : "none"
+          },
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SideNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { role: "navigation", "aria-label": "Main navigation", style: navStyle, children }) });
+});
+function CollapseToggleButton() {
+  const { tokens } = useTheme();
+  const { collapsed, toggleCollapse } = useContext(SideNavContext);
+  const [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      onClick: toggleCollapse,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 28,
+        height: 28,
+        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,
+        borderRadius: tokens.borderRadius.md,
+        backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : "transparent",
+        color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,
+        cursor: "pointer",
+        flexShrink: 0,
+        padding: 0,
+        transition: tokens.animation.fast,
+        outline: "none"
+      },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: {
+            transition: "transform 0.25s ease",
+            transform: collapsed ? "rotate(180deg)" : "rotate(0deg)"
+          },
+          children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+        }
+      )
+    }
+  );
+}
+const SideNavHeader = memo(function SideNavHeader2({
+  logo,
+  collapsedLogo,
+  title,
+  subtitle,
+  badge,
+  badgeVariant = "info",
+  children
+}) {
+  const { tokens } = useTheme();
+  const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);
+  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;
+  const showToggle = showCollapseToggle && mode !== "mobile";
+  const badgeColors = {
+    info: tokens.colors.accent.primary,
+    success: tokens.colors.status.normal,
+    warning: tokens.colors.status.caution,
+    caution: tokens.colors.status.serious
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacing.sm,
+    padding: collapsed ? `${tokens.spacing.md} ${tokens.spacing.sm}` : `0 16px 0 15px`,
+    minHeight: 91,
+    borderBottom: `1px solid ${tokens.colors.border.muted}`,
+    flexShrink: 0,
+    justifyContent: collapsed ? "center" : "flex-start",
+    boxSizing: "border-box"
+  }, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    displayLogo && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, cursor: collapsed && showToggle ? "pointer" : void 0 }, onClick: collapsed && showToggle ? toggleCollapse : void 0, children: displayLogo }),
+    !collapsed && /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      title && /* @__PURE__ */ jsx("div", { style: {
+        fontSize: tokens.typography.fontSize.sm,
+        fontWeight: tokens.typography.fontWeight.bold,
+        color: tokens.colors.text.primary,
+        lineHeight: tokens.typography.lineHeight.tight,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }, children: title }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, marginTop: "2px" }, children: [
+        subtitle && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: tokens.typography.fontSize.xxs,
+          color: tokens.colors.text.tertiary
+        }, children: subtitle }),
+        badge && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: "0.6rem",
+          fontWeight: tokens.typography.fontWeight.bold,
+          color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),
+          backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,
+          border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,
+          padding: "1px 6px",
+          borderRadius: tokens.borderRadius.sm,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        }, children: badge })
+      ] })
+    ] }),
+    showToggle && /* @__PURE__ */ jsx(CollapseToggleButton, {})
+  ] }) });
+});
+const TAG_COLORS = {
+  default: { bg: "#ffffff10", fg: "#9590a8", border: "#ffffff15" },
+  info: { bg: "#8a2be218", fg: "#c4a0ff", border: "#8a2be230" },
+  success: { bg: "#56f00018", fg: "#56f000", border: "#56f00030" },
+  warning: { bg: "#fce83a18", fg: "#fce83a", border: "#fce83a30" },
+  danger: { bg: "#ff383818", fg: "#ff3838", border: "#ff383830" }
+};
+const SideNavItem = memo(function SideNavItem2({
+  icon,
+  label,
+  description,
+  tag,
+  tagVariant = "default",
+  href,
+  onClick,
+  active = false,
+  disabled = false,
+  badge,
+  external = false,
+  status,
+  statusLabel,
+  suffix
+}) {
+  const { tokens } = useTheme();
+  const { collapsed, setMobileOpen } = useContext(SideNavContext);
+  const [isHovered, setIsHovered] = useState(false);
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    setMobileOpen(false);
+    onClick == null ? void 0 : onClick();
+  }, [disabled, onClick, setMobileOpen]);
+  const statusColor = status ? SIDENAV_STATUS_COLORS[status] ?? void 0 : void 0;
+  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);
+  const hasDescription = !!description && !collapsed;
+  const iconElement = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: hasDescription ? 22 : 20, color: active ? accentColor : tokens.colors.text.secondary }) : icon;
+  const itemStyle = {
+    display: "flex",
+    alignItems: hasDescription ? "flex-start" : "center",
+    gap: tokens.spacing.sm,
+    padding: collapsed ? `${tokens.spacing.sm} 0` : hasDescription ? `10px 16px 10px 12px` : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,
+    justifyContent: collapsed ? "center" : "flex-start",
+    color: active ? accentColor : disabled ? tokens.colors.text.tertiary : tokens.colors.text.secondary,
+    backgroundColor: active ? `${accentColor}12` : isHovered && !disabled ? `${accentColor}08` : "transparent",
+    fontSize: tokens.typography.fontSize.sm,
+    fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,
+    fontFamily: tokens.typography.fontFamily.primary,
+    cursor: disabled ? "not-allowed" : "pointer",
+    textDecoration: "none",
+    borderTop: "none",
+    borderRight: "none",
+    borderBottom: "none",
+    borderLeft: active ? `3px solid ${accentColor}` : "3px solid transparent",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    transition: tokens.animation.fast,
+    position: "relative",
+    opacity: disabled ? 0.5 : 1
+  };
+  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconElement && /* @__PURE__ */ jsxs("span", { style: { flexShrink: 0, display: "flex", position: "relative", marginTop: hasDescription ? "2px" : 0 }, children: [
+      iconElement,
+      collapsed && status && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: -3,
+            left: -4,
+            lineHeight: 0
+          },
+          title: statusLabel ?? status,
+          children: /* @__PURE__ */ jsx(NavStatusShape, { status, size: 7 })
+        }
+      )
+    ] }),
+    !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
+          tag && /* @__PURE__ */ jsx("span", { style: {
+            fontSize: "0.6rem",
+            fontWeight: tokens.typography.fontWeight.bold,
+            color: tagColors.fg,
+            backgroundColor: tagColors.bg,
+            border: `1px solid ${tagColors.border}`,
+            padding: "1px 5px",
+            borderRadius: tokens.borderRadius.sm,
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            flexShrink: 0,
+            lineHeight: "1.3",
+            whiteSpace: "nowrap"
+          }, children: tag })
+        ] }),
+        description && /* @__PURE__ */ jsx("span", { style: {
+          display: "block",
+          fontSize: tokens.typography.fontSize.xxs,
+          color: tokens.colors.text.tertiary,
+          lineHeight: tokens.typography.lineHeight.normal,
+          marginTop: "2px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          fontWeight: tokens.typography.fontWeight.normal
+        }, children: description })
+      ] }),
+      (badge !== void 0 && badge > 0 || status || suffix || external) && /* @__PURE__ */ jsxs("span", { style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        flexShrink: 0,
+        marginTop: hasDescription ? "2px" : 0
+      }, children: [
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: "0.65rem",
+          fontWeight: tokens.typography.fontWeight.bold,
+          color: "#fff",
+          backgroundColor: tokens.colors.status.critical,
+          borderRadius: tokens.borderRadius.full,
+          minWidth: "18px",
+          height: "18px",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 5px",
+          flexShrink: 0,
+          lineHeight: 1,
+          boxSizing: "border-box"
+        }, children: badge > 99 ? "99+" : badge }),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: { display: "inline-flex", alignItems: "center", flexShrink: 0 },
+            role: "status",
+            "aria-label": `Status: ${statusLabel ?? status}`,
+            title: statusLabel ?? status,
+            children: /* @__PURE__ */ jsx(NavStatusShape, { status, size: 8 })
+          }
+        ),
+        suffix && /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "inline-flex", alignItems: "center" }, children: suffix }),
+        external && /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", style: { flexShrink: 0, opacity: 0.5 }, children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+          /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+          /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+        ] })
+      ] })
+    ] })
+  ] });
+  const props = {
+    style: itemStyle,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    title: collapsed ? label : void 0,
+    "aria-current": active ? "page" : void 0,
+    "aria-disabled": disabled
+  };
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx("a", { href, onClick: handleClick, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, ...props, children: content });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, disabled, ...props, children: content });
+});
+const SideNavSection = memo(function SideNavSection2({
+  title,
+  children
+}) {
+  const { tokens } = useTheme();
+  const { collapsed } = useContext(SideNavContext);
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacing.sm }, children: [
+    title && !collapsed && /* @__PURE__ */ jsx("div", { style: {
+      padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,
+      fontSize: tokens.typography.fontSize.xxs,
+      fontWeight: tokens.typography.fontWeight.bold,
+      color: tokens.colors.text.tertiary,
+      textTransform: "uppercase",
+      letterSpacing: "0.08em"
+    }, children: title }),
+    collapsed && title && /* @__PURE__ */ jsx("div", { style: {
+      width: "60%",
+      height: "1px",
+      backgroundColor: tokens.colors.border.muted,
+      margin: `${tokens.spacing.xs} auto`
+    } }),
+    children
+  ] });
+});
+const SideNavDivider = memo(function SideNavDivider2({
+  label
+}) {
+  const { tokens } = useTheme();
+  const { collapsed } = useContext(SideNavContext);
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      width: "60%",
+      height: "1px",
+      backgroundColor: tokens.colors.border.muted,
+      margin: `${tokens.spacing.sm} auto`
+    } });
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: tokens.spacing.sm,
+      padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
+    }, children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "1px", backgroundColor: tokens.colors.border.muted } }),
+      /* @__PURE__ */ jsx("span", { style: {
+        fontSize: tokens.typography.fontSize.xxs,
+        color: tokens.colors.text.tertiary,
+        textTransform: "uppercase",
+        letterSpacing: "0.06em",
+        whiteSpace: "nowrap"
+      }, children: label }),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, height: "1px", backgroundColor: tokens.colors.border.muted } })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: {
+    height: "1px",
+    backgroundColor: tokens.colors.border.muted,
+    margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`
+  } });
+});
+const SideNavFooter = memo(function SideNavFooter2({
+  children
+}) {
+  const { tokens } = useTheme();
+  return /* @__PURE__ */ jsx("div", { style: {
+    marginTop: "auto",
+    borderTop: `1px solid ${tokens.colors.border.muted}`,
+    paddingTop: tokens.spacing.xs,
+    paddingBottom: tokens.spacing.xs
+  }, children });
+});
+const SideNav = Object.assign(SideNavRoot, {
+  Header: SideNavHeader,
+  Item: SideNavItem,
+  Section: SideNavSection,
+  Divider: SideNavDivider,
+  Footer: SideNavFooter
+});
+export {
+  SideNav
+};
+//# sourceMappingURL=SideNav.js.map