@fairmint/ui 0.3.26 → 0.3.27

package/dist/components/layout/SideNav/SideNav.cjs

@@ -3,15 +3,143 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const index = require("../../../theme/index.cjs");
+const useUncontrolled = require("../../../node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
 const Stack = require("../../../node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
-const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const Box = require("../../../node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const Divider = require("../../../node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const IconLayoutSidebarLeftExpand = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftExpand.cjs");
+const IconLayoutSidebarLeftCollapse = require("../../../node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutSidebarLeftCollapse.cjs");
+const Tooltip = require("../../../node_modules/@mantine/core/esm/components/Tooltip/Tooltip.cjs");
+const ActionIcon = require("../../../node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
+const Menu = require("../../../node_modules/@mantine/core/esm/components/Menu/Menu.cjs");
 const NavLink = require("../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.cjs");
+const SIDE_NAV_WIDTH = 260;
+const SIDE_NAV_COLLAPSED_WIDTH = 80;
 function hasActiveDescendant(item) {
   return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;
 }
-function SideNavNode({ color, item, onItemClick }) {
+function getSideNavItemLabelText(item) {
+  if (item.ariaLabel) {
+    return item.ariaLabel;
+  }
+  if (typeof item.label === "string") {
+    return item.label;
+  }
+  if (typeof item.label === "number") {
+    return String(item.label);
+  }
+  return "Item";
+}
+function getSideNavLetterFallback(labelText) {
+  const match = labelText.match(/[\p{L}\p{N}]/u);
+  return match ? match[0].toUpperCase() : "?";
+}
+function LetterFallback({ letter, active = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      component: "span",
+      "aria-hidden": true,
+      "data-active": active || void 0,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 20,
+        height: 20,
+        flexShrink: 0,
+        fontSize: 12,
+        fontWeight: active ? 700 : 600,
+        lineHeight: 1,
+        // Selected chrome lives on the parent control — glyph matches icon sizing.
+        color: active ? index.fairmintVars.colorIconOnSurfaceSelected : "inherit"
+      },
+      children: letter
+    }
+  );
+}
+function CollapseToggle({
+  collapsed,
+  onToggle,
+  visible
+}) {
+  const label = collapsed ? "Expand navigation" : "Collapse navigation";
+  const Icon = collapsed ? IconLayoutSidebarLeftExpand.default : IconLayoutSidebarLeftCollapse.default;
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    UnstyledButton.UnstyledButton,
+    {
+      "data-sidenav-collapse": true,
+      "aria-label": label,
+      "aria-expanded": !collapsed,
+      onClick: onToggle,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 32,
+        flexShrink: 0,
+        borderRadius: index.radii.md,
+        color: index.fairmintVars.colorIconTertiary,
+        opacity: visible ? 1 : 0,
+        pointerEvents: visible ? "auto" : "none",
+        transition: "opacity 120ms ease",
+        // Keep a layout slot when expanded so the wordmark does not shift on hover.
+        // Collapsed: always a fixed control below the logo.
+        width: 32,
+        overflow: "hidden",
+        padding: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20, stroke: 1.5, "aria-hidden": true })
+    }
+  );
+  if (!collapsed) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.Tooltip,
+    {
+      label,
+      position: "right",
+      withArrow: true,
+      events: { hover: true, focus: true, touch: true },
+      disabled: !visible,
+      children: button
+    }
+  );
+}
+function resolveLeftSection(item, labelText, { requireIcon, active }) {
+  if (item.icon) {
+    return item.icon;
+  }
+  if (requireIcon) {
+    return /* @__PURE__ */ jsxRuntime.jsx(LetterFallback, { letter: getSideNavLetterFallback(labelText), active: Boolean(active) });
+  }
+  return void 0;
+}
+const COLLAPSED_ITEM_SIZE = 36;
+const navLinkStyles = (active) => ({
+  root: {
+    color: active ? index.fairmintVars.colorTextPrimary : index.fairmintVars.colorTextSecondary,
+    fontWeight: active ? 500 : 400,
+    borderRadius: index.radii.md,
+    // Prefer Fairmint selected surface over Mantine defaults for active chrome.
+    ...active ? {
+      "--nl-bg": index.fairmintVars.colorSurfaceSelected,
+      "--nl-hover": index.fairmintVars.colorSurfaceSelected,
+      "--nl-color": index.fairmintVars.colorIconOnSurfaceSelected,
+      backgroundColor: index.fairmintVars.colorSurfaceSelected
+    } : {}
+  },
+  section: {
+    color: active ? index.fairmintVars.colorIconOnSurfaceSelected : index.fairmintVars.colorIconTertiary
+  }
+});
+function ExpandedSideNavNode({ color, item, onItemClick }) {
   const containsActiveItem = hasActiveDescendant(item);
   const [opened, setOpened] = React.useState(item.open ?? containsActiveItem);
+  const labelText = getSideNavItemLabelText(item);
   React.useEffect(() => {
     if (item.open !== void 0) {
       setOpened(item.open);
@@ -23,8 +151,13 @@ function SideNavNode({ color, item, onItemClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavLink.NavLink,
     {
+      component: "button",
+      type: "button",
       label: item.label,
-      leftSection: item.icon,
+      leftSection: resolveLeftSection(item, labelText, {
+        requireIcon: false,
+        active: item.active
+      }),
       rightSection: item.rightSection,
       active: item.active,
       disabled: item.disabled,
@@ -32,20 +165,125 @@ function SideNavNode({ color, item, onItemClick }) {
       variant: "light",
       childrenOffset: 16,
       opened: hasChildren ? opened : void 0,
+      "aria-label": item.ariaLabel,
       onClick: hasChildren ? () => setOpened((currentOpened) => !currentOpened) : () => onItemClick(item.id),
-      style: { borderRadius: index.radii.md },
-      styles: {
-        root: {
-          color: item.active ? index.fairmintVars.colorTextPrimary : index.fairmintVars.colorTextSecondary,
-          fontWeight: item.active ? 500 : 400
-        },
-        section: {
-          color: item.active ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorIconTertiary
+      styles: navLinkStyles(item.active),
+      children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(ExpandedSideNavNode, { item: child, color, onItemClick }, child.id))
+    }
+  );
+}
+function collectCollapsedMenuLeaves(items) {
+  return items.flatMap(
+    (item) => item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item]
+  );
+}
+function CollapsedNestedMenuItems({
+  items,
+  onItemClick,
+  color
+}) {
+  return collectCollapsedMenuLeaves(items).map((child) => {
+    const childLabel = getSideNavItemLabelText(child);
+    const isActive = Boolean(child.active);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.Item,
+      {
+        disabled: child.disabled,
+        leftSection: resolveLeftSection(child, childLabel, {
+          requireIcon: true,
+          active: isActive
+        }),
+        onClick: () => onItemClick(child.id),
+        "aria-current": isActive ? "page" : void 0,
+        "data-active": isActive || void 0,
+        color: isActive ? color : void 0,
+        style: isActive ? {
+          backgroundColor: index.fairmintVars.colorSurfaceSelected,
+          color: index.fairmintVars.colorIconOnSurfaceSelected,
+          fontWeight: 600
+        } : void 0,
+        children: child.label
+      },
+      child.id
+    );
+  });
+}
+function CollapsedSideNavNode({ color, item, onItemClick }) {
+  const labelText = getSideNavItemLabelText(item);
+  const hasChildren = Boolean(item.children?.length);
+  const isActive = Boolean(item.active || hasActiveDescendant(item));
+  const leftSection = resolveLeftSection(item, labelText, {
+    requireIcon: true,
+    active: isActive
+  });
+  const link = /* @__PURE__ */ jsxRuntime.jsx(
+    ActionIcon.ActionIcon,
+    {
+      type: "button",
+      variant: "subtle",
+      color,
+      size: COLLAPSED_ITEM_SIZE,
+      radius: "md",
+      disabled: item.disabled,
+      "aria-label": labelText,
+      "aria-current": isActive ? "page" : void 0,
+      "data-active": isActive || void 0,
+      onClick: hasChildren ? void 0 : () => onItemClick(item.id),
+      style: {
+        width: COLLAPSED_ITEM_SIZE,
+        height: COLLAPSED_ITEM_SIZE,
+        minWidth: COLLAPSED_ITEM_SIZE,
+        minHeight: COLLAPSED_ITEM_SIZE,
+        ...isActive ? {
+          "--ai-bg": index.fairmintVars.colorSurfaceSelected,
+          "--ai-hover": index.fairmintVars.colorSurfaceSelected,
+          "--ai-color": index.fairmintVars.colorIconOnSurfaceSelected,
+          "--ai-hover-color": index.fairmintVars.colorIconOnSurfaceSelected,
+          backgroundColor: index.fairmintVars.colorSurfaceSelected,
+          color: index.fairmintVars.colorIconOnSurfaceSelected
+        } : {
+          color: index.fairmintVars.colorIconTertiary
         }
       },
-      children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item: child, color, onItemClick }, child.id))
+      children: leftSection
+    }
+  );
+  const control = hasChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { position: "right-start", offset: 8, withinPortal: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Tooltip.Tooltip,
+      {
+        label: labelText,
+        position: "right",
+        withArrow: true,
+        events: { hover: true, focus: true, touch: true },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Target, { children: link })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsedNestedMenuItems,
+      {
+        items: item.children ?? [],
+        onItemClick,
+        color
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip.Tooltip,
+    {
+      label: labelText,
+      position: "right",
+      withArrow: true,
+      events: { hover: true, focus: true, touch: true },
+      children: link
     }
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { style: { width: "100%", display: "flex", justifyContent: "center" }, children: control });
+}
+function SideNavNode(props) {
+  if (props.collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsedSideNavNode, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ExpandedSideNavNode, { ...props });
 }
 function SideNav({
   items = [],
@@ -53,28 +291,133 @@ function SideNav({
   onItemClick,
   color = "indigo",
   ariaLabel = "Main navigation",
-  withBorder = false
+  withBorder = false,
+  header,
+  cta,
+  profile,
+  footer,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  collapsible = false
 }) {
   const resolvedSections = sections ?? [{ id: "main", items }];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const [collapsedState, setCollapsedState] = useUncontrolled.useUncontrolled({
+    value: collapsed,
+    defaultValue: defaultCollapsed,
+    finalValue: false,
+    onChange: onCollapsedChange
+  });
+  const hasBottomChrome = Boolean(footer || cta || profile);
+  const [headerHovered, setHeaderHovered] = React.useState(false);
+  const showExpandedCollapseControl = headerHovered;
+  const showHeaderChrome = Boolean(header) || collapsible;
+  const collapseToggle = collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+    CollapseToggle,
+    {
+      collapsed: collapsedState,
+      visible: collapsedState ? true : showExpandedCollapseControl,
+      onToggle: () => setCollapsedState(!collapsedState)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Stack.Stack,
     {
       component: "nav",
       gap: "md",
       h: "100%",
-      p: "md",
+      p: collapsedState ? "sm" : "md",
       "aria-label": ariaLabel,
+      "data-collapsed": collapsedState || void 0,
       style: {
         borderRight: withBorder ? "1px solid" : void 0,
         borderRightColor: withBorder ? index.fairmintVars.colorBorderDefault : void 0,
         boxShadow: "none"
       },
-      children: resolvedSections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { gap: 4, children: [
-        section.label && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", fw: 700, tt: "uppercase", c: index.fairmintVars.colorTextTertiary, px: "sm", children: section.label }),
-        section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item, color, onItemClick }, item.id))
-      ] }, section.id))
+      children: [
+        showHeaderChrome ? collapsedState ? /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { gap: 6, align: "center", children: [
+          header ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box.Box,
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%"
+              },
+              children: header
+            }
+          ) : null,
+          collapseToggle
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          Group.Group,
+          {
+            justify: "space-between",
+            wrap: "nowrap",
+            gap: "xs",
+            align: "center",
+            style: { minHeight: 32 },
+            onMouseEnter: () => setHeaderHovered(true),
+            onMouseLeave: () => setHeaderHovered(false),
+            onFocusCapture: () => setHeaderHovered(true),
+            onBlurCapture: (event) => {
+              if (!event.currentTarget.contains(event.relatedTarget)) {
+                setHeaderHovered(false);
+              }
+            },
+            children: [
+              header ? /* @__PURE__ */ jsxRuntime.jsx(
+                Box.Box,
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start"
+                  },
+                  children: header
+                }
+              ) : null,
+              collapseToggle
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 4, style: { flex: 1, minHeight: 0, overflow: "auto" }, children: resolvedSections.flatMap(
+          (section) => section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            SideNavNode,
+            {
+              item,
+              color,
+              onItemClick,
+              collapsed: collapsedState
+            },
+            `${section.id}:${item.id}`
+          ))
+        ) }),
+        hasBottomChrome ? /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: "sm", style: { flexShrink: 0 }, children: footer ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          cta ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box.Box,
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: collapsedState ? "center" : "stretch"
+              },
+              children: cta
+            }
+          ) : null,
+          cta && profile ? /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { color: index.fairmintVars.colorBorderDefault }) : null,
+          profile ? /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { style: { width: "100%" }, children: profile }) : null
+        ] }) }) : null
+      ]
     }
   );
 }
+exports.SIDE_NAV_COLLAPSED_WIDTH = SIDE_NAV_COLLAPSED_WIDTH;
+exports.SIDE_NAV_WIDTH = SIDE_NAV_WIDTH;
 exports.SideNav = SideNav;
+exports.getSideNavItemLabelText = getSideNavItemLabelText;
+exports.getSideNavLetterFallback = getSideNavLetterFallback;
 //# sourceMappingURL=SideNav.cjs.map

package/dist/components/layout/SideNav/SideNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack, Text } from \"@mantine/core\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: ReactNode;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Optional content rendered at the end of the item, such as a badge. */\n  rightSection?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n  /** Whether the item is unavailable. */\n  disabled?: boolean;\n  /** Nested navigation items. */\n  children?: SideNavItem[];\n  /** Controlled expanded state for items with children. */\n  open?: boolean;\n}\n\nexport interface SideNavSection {\n  /** Unique identifier for the section. */\n  id: string;\n  /** Optional visible section heading. */\n  label?: ReactNode;\n  /** Navigation items in this section. */\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render when section headings are not needed. */\n  items?: SideNavItem[];\n  /** Grouped navigation items with optional section headings. */\n  sections?: SideNavSection[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default colors.primary */\n  color?: string;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Render a light right border when the parent shell does not already own the divider. @default false */\n  withBorder?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\ninterface SideNavNodeProps {\n  color: string;\n  item: SideNavItem;\n  onItemClick: (id: string) => void;\n}\n\nfunction SideNavNode({ color, item, onItemClick }: SideNavNodeProps) {\n  const containsActiveItem = hasActiveDescendant(item);\n  const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n\n  useEffect(() => {\n    if (item.open !== undefined) {\n      setOpened(item.open);\n    } else if (containsActiveItem) {\n      setOpened(true);\n    }\n  }, [containsActiveItem, item.open]);\n\n  const hasChildren = Boolean(item.children?.length);\n\n  return (\n    <NavLink\n      label={item.label}\n      leftSection={item.icon}\n      rightSection={item.rightSection}\n      active={item.active}\n      disabled={item.disabled}\n      color={color}\n      variant=\"light\"\n      childrenOffset={16}\n      opened={hasChildren ? opened : undefined}\n      onClick={\n        hasChildren\n          ? () => setOpened((currentOpened) => !currentOpened)\n          : () => onItemClick(item.id)\n      }\n      style={{ borderRadius: radii.md }}\n      styles={{\n        root: {\n          color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n          fontWeight: item.active ? 500 : 400,\n        },\n        section: {\n          color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n        },\n      }}\n    >\n      {item.children?.map((child) => (\n        <SideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n      ))}\n    </NavLink>\n  );\n}\n\nexport function SideNav({\n  items = [],\n  sections,\n  onItemClick,\n  color = \"indigo\",\n  ariaLabel = \"Main navigation\",\n  withBorder = false,\n}: SideNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n\n  return (\n    <Stack\n      component=\"nav\"\n      gap=\"md\"\n      h=\"100%\"\n      p=\"md\"\n      aria-label={ariaLabel}\n      style={{\n        borderRight: withBorder ? \"1px solid\" : undefined,\n        borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n        boxShadow: \"none\",\n      }}\n    >\n      {resolvedSections.map((section) => (\n        <Stack key={section.id} gap={4}>\n          {section.label && (\n            <Text size=\"xs\" fw={700} tt=\"uppercase\" c={fairmintVars.colorTextTertiary} px=\"sm\">\n              {section.label}\n            </Text>\n          )}\n          {section.items.map((item) => (\n            <SideNavNode key={item.id} item={item} color={color} onItemClick={onItemClick} />\n          ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n"],"names":["useState","useEffect","jsx","NavLink","radii","fairmintVars","Stack","jsxs","Text"],"mappings":";;;;;;;;AA+CA,SAAS,oBAAoB,MAA4B;AACvD,SAAO,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,UAAU,oBAAoB,KAAK,CAAC,KAAK;AACvF;AAQA,SAAS,YAAY,EAAE,OAAO,MAAM,eAAiC;AACnE,QAAM,qBAAqB,oBAAoB,IAAI;AACnD,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,KAAK,QAAQ,kBAAkB;AAEpEC,QAAAA,UAAU,MAAM;AACd,QAAI,KAAK,SAAS,QAAW;AAC3B,gBAAU,KAAK,IAAI;AAAA,IACrB,WAAW,oBAAoB;AAC7B,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,oBAAoB,KAAK,IAAI,CAAC;AAElC,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AAEjD,SACEC,2BAAAA;AAAAA,IAACC,QAAAA;AAAAA,IAAA;AAAA,MACC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,cAAc,KAAK;AAAA,MACnB,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,QAAQ,cAAc,SAAS;AAAA,MAC/B,SACE,cACI,MAAM,UAAU,CAAC,kBAAkB,CAAC,aAAa,IACjD,MAAM,YAAY,KAAK,EAAE;AAAA,MAE/B,OAAO,EAAE,cAAcC,MAAAA,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAASC,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAASA,MAAAA,aAAa,oBAAoBA,MAAAA,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,MAGD,UAAA,KAAK,UAAU,IAAI,CAAC,UACnBH,2BAAAA,IAAC,aAAA,EAA2B,MAAM,OAAO,OAAc,YAAA,GAArC,MAAM,EAAyD,CAClF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,QAAQ;AAAA,EACtB,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AACf,GAAiB;AACf,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAE3D,SACEA,2BAAAA;AAAAA,IAACI,MAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,GAAE;AAAA,MACF,GAAE;AAAA,MACF,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,aAAa,aAAa,cAAc;AAAA,QACxC,kBAAkB,aAAaD,mBAAa,qBAAqB;AAAA,QACjE,WAAW;AAAA,MAAA;AAAA,MAGZ,2BAAiB,IAAI,CAAC,YACrBE,gCAACD,MAAAA,OAAA,EAAuB,KAAK,GAC1B,UAAA;AAAA,QAAA,QAAQ,SACPJ,2BAAAA,IAACM,KAAAA,MAAA,EAAK,MAAK,MAAK,IAAI,KAAK,IAAG,aAAY,GAAGH,MAAAA,aAAa,mBAAmB,IAAG,MAC3E,kBAAQ,OACX;AAAA,QAED,QAAQ,MAAM,IAAI,CAAC,SAClBH,2BAAAA,IAAC,aAAA,EAA0B,MAAY,OAAc,eAAnC,KAAK,EAAwD,CAChF;AAAA,MAAA,EAAA,GARS,QAAQ,EASpB,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Box,\n  Divider,\n  Group,\n  Menu,\n  NavLink,\n  type NavLinkProps,\n  Stack,\n  Tooltip,\n  UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: ReactNode;\n  /**\n   * Accessible name when `label` is not a plain string.\n   * Also used for collapsed tooltips and letter-fallback derivation.\n   */\n  ariaLabel?: string;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Optional content rendered at the end of the item, such as a badge. */\n  rightSection?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n  /** Whether the item is unavailable. */\n  disabled?: boolean;\n  /** Nested navigation items. */\n  children?: SideNavItem[];\n  /** Controlled expanded state for items with children. */\n  open?: boolean;\n}\n\nexport interface SideNavSection {\n  /** Unique identifier for the section. */\n  id: string;\n  /** Navigation items in this section. */\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render when section headings are not needed. */\n  items?: SideNavItem[];\n  /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n  sections?: SideNavSection[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default colors.primary */\n  color?: string;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Render a light right border when the parent shell does not already own the divider. @default false */\n  withBorder?: boolean;\n  /**\n   * Logo or other chrome above the nav list.\n   * Consumers own expanded wordmark vs collapsed mark switching.\n   */\n  header?: ReactNode;\n  /**\n   * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n   * Prefer this over stuffing the CTA into `items`.\n   */\n  cta?: ReactNode;\n  /**\n   * Account / profile control pinned to the bottom of the rail.\n   * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n   */\n  profile?: ReactNode;\n  /**\n   * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n   */\n  footer?: ReactNode;\n  /** Controlled collapsed (icon-rail) state. */\n  collapsed?: boolean;\n  /** Uncontrolled initial collapsed state. @default false */\n  defaultCollapsed?: boolean;\n  /** Called when the user toggles collapse. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n  collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n  if (item.ariaLabel) {\n    return item.ariaLabel;\n  }\n  if (typeof item.label === \"string\") {\n    return item.label;\n  }\n  if (typeof item.label === \"number\") {\n    return String(item.label);\n  }\n  return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n  const match = labelText.match(/[\\p{L}\\p{N}]/u);\n  return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden\n      data-active={active || undefined}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: 20,\n        height: 20,\n        flexShrink: 0,\n        fontSize: 12,\n        fontWeight: active ? 700 : 600,\n        lineHeight: 1,\n        // Selected chrome lives on the parent control — glyph matches icon sizing.\n        color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n      }}\n    >\n      {letter}\n    </Box>\n  );\n}\n\nfunction CollapseToggle({\n  collapsed,\n  onToggle,\n  visible,\n}: {\n  collapsed: boolean;\n  onToggle: () => void;\n  /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n  visible: boolean;\n}) {\n  const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n  const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n  const button = (\n    <UnstyledButton\n      data-sidenav-collapse\n      aria-label={label}\n      aria-expanded={!collapsed}\n      onClick={onToggle}\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: 32,\n        flexShrink: 0,\n        borderRadius: radii.md,\n        color: fairmintVars.colorIconTertiary,\n        opacity: visible ? 1 : 0,\n        pointerEvents: visible ? \"auto\" : \"none\",\n        transition: \"opacity 120ms ease\",\n        // Keep a layout slot when expanded so the wordmark does not shift on hover.\n        // Collapsed: always a fixed control below the logo.\n        width: 32,\n        overflow: \"hidden\",\n        padding: 0,\n      }}\n    >\n      <Icon size={20} stroke={1.5} aria-hidden />\n    </UnstyledButton>\n  );\n\n  if (!collapsed) {\n    return button;\n  }\n\n  return (\n    <Tooltip\n      label={label}\n      position=\"right\"\n      withArrow\n      events={{ hover: true, focus: true, touch: true }}\n      disabled={!visible}\n    >\n      {button}\n    </Tooltip>\n  );\n}\n\nfunction resolveLeftSection(\n  item: SideNavItem,\n  labelText: string,\n  { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n  if (item.icon) {\n    return item.icon;\n  }\n  if (requireIcon) {\n    return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n  }\n  return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n  root: {\n    color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n    fontWeight: active ? 500 : 400,\n    borderRadius: radii.md,\n    // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n    ...(active\n      ? {\n          \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n          \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n          \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n          backgroundColor: fairmintVars.colorSurfaceSelected,\n        }\n      : {}),\n  },\n  section: {\n    color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n  },\n});\n\ninterface SideNavNodeProps {\n  color: string;\n  item: SideNavItem;\n  onItemClick: (id: string) => void;\n  collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n  const containsActiveItem = hasActiveDescendant(item);\n  const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n  const labelText = getSideNavItemLabelText(item);\n\n  useEffect(() => {\n    if (item.open !== undefined) {\n      setOpened(item.open);\n    } else if (containsActiveItem) {\n      setOpened(true);\n    }\n  }, [containsActiveItem, item.open]);\n\n  const hasChildren = Boolean(item.children?.length);\n\n  return (\n    <NavLink\n      component=\"button\"\n      type=\"button\"\n      label={item.label}\n      leftSection={resolveLeftSection(item, labelText, {\n        requireIcon: false,\n        active: item.active,\n      })}\n      rightSection={item.rightSection}\n      active={item.active}\n      disabled={item.disabled}\n      color={color}\n      variant=\"light\"\n      childrenOffset={16}\n      opened={hasChildren ? opened : undefined}\n      aria-label={item.ariaLabel}\n      onClick={\n        hasChildren\n          ? () => setOpened((currentOpened) => !currentOpened)\n          : () => onItemClick(item.id)\n      }\n      styles={navLinkStyles(item.active)}\n    >\n      {item.children?.map((child) => (\n        <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n      ))}\n    </NavLink>\n  );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n  return items.flatMap((item) =>\n    item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n  );\n}\n\nfunction CollapsedNestedMenuItems({\n  items,\n  onItemClick,\n  color,\n}: {\n  items: SideNavItem[];\n  onItemClick: (id: string) => void;\n  color: string;\n}) {\n  return collectCollapsedMenuLeaves(items).map((child) => {\n    const childLabel = getSideNavItemLabelText(child);\n    const isActive = Boolean(child.active);\n    return (\n      <Menu.Item\n        key={child.id}\n        disabled={child.disabled}\n        leftSection={resolveLeftSection(child, childLabel, {\n          requireIcon: true,\n          active: isActive,\n        })}\n        onClick={() => onItemClick(child.id)}\n        aria-current={isActive ? \"page\" : undefined}\n        data-active={isActive || undefined}\n        color={isActive ? color : undefined}\n        style={\n          isActive\n            ? {\n                backgroundColor: fairmintVars.colorSurfaceSelected,\n                color: fairmintVars.colorIconOnSurfaceSelected,\n                fontWeight: 600,\n              }\n            : undefined\n        }\n      >\n        {child.label}\n      </Menu.Item>\n    );\n  });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n  const labelText = getSideNavItemLabelText(item);\n  const hasChildren = Boolean(item.children?.length);\n  const isActive = Boolean(item.active || hasActiveDescendant(item));\n  const leftSection = resolveLeftSection(item, labelText, {\n    requireIcon: true,\n    active: isActive,\n  });\n\n  // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n  // horizontal padding, which makes selected/hover chrome a wide pill.\n  // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n  const link = (\n    <ActionIcon\n      type=\"button\"\n      variant=\"subtle\"\n      color={color}\n      size={COLLAPSED_ITEM_SIZE}\n      radius=\"md\"\n      disabled={item.disabled}\n      aria-label={labelText}\n      aria-current={isActive ? \"page\" : undefined}\n      data-active={isActive || undefined}\n      onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n      style={{\n        width: COLLAPSED_ITEM_SIZE,\n        height: COLLAPSED_ITEM_SIZE,\n        minWidth: COLLAPSED_ITEM_SIZE,\n        minHeight: COLLAPSED_ITEM_SIZE,\n        ...(isActive\n          ? {\n              \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n              \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n              \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n              \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n              backgroundColor: fairmintVars.colorSurfaceSelected,\n              color: fairmintVars.colorIconOnSurfaceSelected,\n            }\n          : {\n              color: fairmintVars.colorIconTertiary,\n            }),\n      }}\n    >\n      {leftSection}\n    </ActionIcon>\n  );\n\n  const control = hasChildren ? (\n    <Menu position=\"right-start\" offset={8} withinPortal>\n      <Tooltip\n        label={labelText}\n        position=\"right\"\n        withArrow\n        events={{ hover: true, focus: true, touch: true }}\n      >\n        <Menu.Target>{link}</Menu.Target>\n      </Tooltip>\n      <Menu.Dropdown>\n        <CollapsedNestedMenuItems\n          items={item.children ?? []}\n          onItemClick={onItemClick}\n          color={color}\n        />\n      </Menu.Dropdown>\n    </Menu>\n  ) : (\n    <Tooltip\n      label={labelText}\n      position=\"right\"\n      withArrow\n      events={{ hover: true, focus: true, touch: true }}\n    >\n      {link}\n    </Tooltip>\n  );\n\n  // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n  return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n  if (props.collapsed) {\n    return <CollapsedSideNavNode {...props} />;\n  }\n  return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n  items = [],\n  sections,\n  onItemClick,\n  color = \"indigo\",\n  ariaLabel = \"Main navigation\",\n  withBorder = false,\n  header,\n  cta,\n  profile,\n  footer,\n  collapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapsible = false,\n}: SideNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n  const [collapsedState, setCollapsedState] = useUncontrolled({\n    value: collapsed,\n    defaultValue: defaultCollapsed,\n    finalValue: false,\n    onChange: onCollapsedChange,\n  });\n\n  const hasBottomChrome = Boolean(footer || cta || profile);\n  const [headerHovered, setHeaderHovered] = useState(false);\n  const showExpandedCollapseControl = headerHovered;\n  const showHeaderChrome = Boolean(header) || collapsible;\n\n  const collapseToggle = collapsible ? (\n    <CollapseToggle\n      collapsed={collapsedState}\n      visible={collapsedState ? true : showExpandedCollapseControl}\n      onToggle={() => setCollapsedState(!collapsedState)}\n    />\n  ) : null;\n\n  return (\n    <Stack\n      component=\"nav\"\n      gap=\"md\"\n      h=\"100%\"\n      p={collapsedState ? \"sm\" : \"md\"}\n      aria-label={ariaLabel}\n      data-collapsed={collapsedState || undefined}\n      style={{\n        borderRight: withBorder ? \"1px solid\" : undefined,\n        borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n        boxShadow: \"none\",\n      }}\n    >\n      {showHeaderChrome ? (\n        collapsedState ? (\n          <Stack gap={6} align=\"center\">\n            {header ? (\n              <Box\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  width: \"100%\",\n                }}\n              >\n                {header}\n              </Box>\n            ) : null}\n            {collapseToggle}\n          </Stack>\n        ) : (\n          <Group\n            justify=\"space-between\"\n            wrap=\"nowrap\"\n            gap=\"xs\"\n            align=\"center\"\n            style={{ minHeight: 32 }}\n            onMouseEnter={() => setHeaderHovered(true)}\n            onMouseLeave={() => setHeaderHovered(false)}\n            onFocusCapture={() => setHeaderHovered(true)}\n            onBlurCapture={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setHeaderHovered(false);\n              }\n            }}\n          >\n            {header ? (\n              <Box\n                style={{\n                  flex: 1,\n                  minWidth: 0,\n                  overflow: \"hidden\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"flex-start\",\n                }}\n              >\n                {header}\n              </Box>\n            ) : null}\n            {collapseToggle}\n          </Group>\n        )\n      ) : null}\n\n      <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n        {resolvedSections.flatMap((section) =>\n          section.items.map((item) => (\n            <SideNavNode\n              key={`${section.id}:${item.id}`}\n              item={item}\n              color={color}\n              onItemClick={onItemClick}\n              collapsed={collapsedState}\n            />\n          )),\n        )}\n      </Stack>\n\n      {hasBottomChrome ? (\n        <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n          {footer ?? (\n            <>\n              {cta ? (\n                <Box\n                  style={{\n                    width: \"100%\",\n                    display: \"flex\",\n                    justifyContent: collapsedState ? \"center\" : \"stretch\",\n                  }}\n                >\n                  {cta}\n                </Box>\n              ) : null}\n              {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n              {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n            </>\n          )}\n        </Stack>\n      ) : null}\n    </Stack>\n  );\n}\n"],"names":["jsx","Box","fairmintVars","IconLayoutSidebarLeftExpand","IconLayoutSidebarLeftCollapse","UnstyledButton","radii","Tooltip","useState","useEffect","NavLink","Menu","ActionIcon","jsxs","useUncontrolled","Stack","Group","Fragment","Divider"],"mappings":"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"}

package/dist/components/layout/SideNav/SideNav.d.ts

@@ -1,9 +1,21 @@
 import { ReactNode } from 'react';
+/** Expanded product side-nav width (Brand System shell metric). */
+export declare const SIDE_NAV_WIDTH = 260;
+/**
+ * Collapsed icon-rail width.
+ * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.
+ */
+export declare const SIDE_NAV_COLLAPSED_WIDTH = 80;
 export interface SideNavItem {
     /** Unique identifier for this nav item (e.g., route path or slug). */
     id: string;
     /** Display label. */
     label: ReactNode;
+    /**
+     * Accessible name when `label` is not a plain string.
+     * Also used for collapsed tooltips and letter-fallback derivation.
+     */
+    ariaLabel?: string;
     /** Icon element. */
     icon?: ReactNode;
     /** Optional content rendered at the end of the item, such as a badge. */
@@ -20,15 +32,13 @@ export interface SideNavItem {
 export interface SideNavSection {
     /** Unique identifier for the section. */
     id: string;
-    /** Optional visible section heading. */
-    label?: ReactNode;
     /** Navigation items in this section. */
     items: SideNavItem[];
 }
 export interface SideNavProps {
     /** Navigation items to render when section headings are not needed. */
     items?: SideNavItem[];
-    /** Grouped navigation items with optional section headings. */
+    /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */
     sections?: SideNavSection[];
     /** Callback when a nav item is clicked. Receives the item's `id`. */
     onItemClick: (id: string) => void;
@@ -38,6 +48,37 @@ export interface SideNavProps {
     ariaLabel?: string;
     /** Render a light right border when the parent shell does not already own the divider. @default false */
     withBorder?: boolean;
+    /**
+     * Logo or other chrome above the nav list.
+     * Consumers own expanded wordmark vs collapsed mark switching.
+     */
+    header?: ReactNode;
+    /**
+     * Primary nav CTA pinned above the profile (Investor "Add Investment", Studio "New").
+     * Prefer this over stuffing the CTA into `items`.
+     */
+    cta?: ReactNode;
+    /**
+     * Account / profile control pinned to the bottom of the rail.
+     * Product shells keep profile here — not in the scrollable destination list or AppHeader.
+     */
+    profile?: ReactNode;
+    /**
+     * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.
+     */
+    footer?: ReactNode;
+    /** Controlled collapsed (icon-rail) state. */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state. @default false */
+    defaultCollapsed?: boolean;
+    /** Called when the user toggles collapse. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */
+    collapsible?: boolean;
 }
-export declare function SideNav({ items, sections, onItemClick, color, ariaLabel, withBorder, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */
+export declare function getSideNavItemLabelText(item: Pick<SideNavItem, "label" | "ariaLabel">): string;
+/** First letter/number monogram for icon-less items in the collapsed rail. */
+export declare function getSideNavLetterFallback(labelText: string): string;
+export declare function SideNav({ items, sections, onItemClick, color, ariaLabel, withBorder, header, cta, profile, footer, collapsed, defaultCollapsed, onCollapsedChange, collapsible, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SideNav.d.ts.map

package/dist/components/layout/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4DD,wBAAgB,OAAO,CAAC,EACtB,KAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,SAA6B,EAC7B,UAAkB,GACnB,EAAE,YAAY,2CA8Bd"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,mEAAmE;AACnE,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,4GAA4G;IAC5G,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,MAAM,CAW9F;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAGlE;AAqTD,wBAAgB,OAAO,CAAC,EACtB,KAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,SAA6B,EAC7B,UAAkB,EAClB,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,WAAmB,GACpB,EAAE,YAAY,2CA6Hd"}