@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/layout/left-nav-layout/left-nav-item.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, MouseEvent } from 'react';
+import { Size } from '../../../theme/size-tokens';
+export type LeftNavItemProps = {
+    /** Icon identifier string to display (uses Icon component) */
+    icon?: string;
+    /** Icon size from unified size system */
+    iconSize?: Size;
+    /** Link label text (visible when expanded, hidden when collapsed) */
+    children: ReactNode;
+    /** Whether this item is currently active (highlighted state) */
+    active?: boolean;
+    /** Additional CSS classes applied to the navigation link */
+    className?: string;
+    /** Badge or count component to display on the right side */
+    badge?: ReactNode;
+    /** Destination URL for the navigation link (required for link mode) */
+    href?: string;
+    /** Accessible label override (used for tooltip in collapsed mode) */
+    title?: string;
+    /** Prevent actual navigation for demo/showcase mode (deprecated: use onClick instead) */
+    preventNavigation?: boolean;
+    /** Click handler - when provided, renders as button instead of link */
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Disable active state highlighting (useful for non-navigation items like header buttons) */
+    disableActiveState?: boolean;
+};
+/**
+ * LeftNavItem - Navigation link or button item for LeftNavLayout
+ *
+ * Features:
+ * - Polymorphic: renders as link (with href) or button (with onClick)
+ * - Icon support with proper alignment
+ * - Optional active state styling
+ * - Tooltip on hover in collapsed mode (using Tooltip component with Portal)
+ * - Badge/count support
+ * - Accessible keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * // Link mode
+ * <LeftNavItem icon="home" href="/" active>
+ *   Home
+ * </LeftNavItem>
+ *
+ * // Button mode
+ * <LeftNavItem icon="settings" onClick={() => console.log('clicked')} disableActiveState>
+ *   Settings
+ * </LeftNavItem>
+ * ```
+ */
+declare function LeftNavItem({ icon, iconSize, children, active, className, badge, href, title, preventNavigation, onClick, disableActiveState }: Readonly<LeftNavItemProps>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace LeftNavItem {
+    var displayName: string;
+}
+export default LeftNavItem;
+//# sourceMappingURL=left-nav-item.d.ts.map

package/dist/components/layout/left-nav-layout/left-nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAA6D,MAAM,OAAO,CAAC;AAIzG,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,qEAAqE;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAe,EACf,QAAQ,EACR,MAAc,EACd,SAAc,EACd,KAAK,EACL,IAAI,EACJ,KAAK,EACL,iBAAyB,EACzB,OAAO,EACP,kBAA0B,EAC3B,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kDAgI5B;kBA5IQ,WAAW;;;AAgJpB,eAAe,WAAW,CAAC"}

package/dist/components/layout/left-nav-layout/left-nav-item.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Icon } from "../../system/icon/icon.js";
+import { useRef, useState, useEffect, isValidElement, cloneElement } from "react";
+import { NavLink } from "react-router-dom";
+import Tooltip from "../../feedback/tooltip/tooltip.js";
+function LeftNavItem({
+  icon,
+  iconSize = "sm",
+  children,
+  active = false,
+  className = "",
+  badge,
+  href,
+  title,
+  preventNavigation = false,
+  onClick,
+  disableActiveState = false
+}) {
+  const navRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      const navElement = document.querySelector("nav[data-collapsed]");
+      return navElement?.getAttribute("data-collapsed") === "true";
+    }
+    return false;
+  });
+  useEffect(() => {
+    const checkCollapsed = () => {
+      const navElement2 = navRef.current?.closest("nav");
+      if (navElement2) {
+        setIsCollapsed(navElement2.getAttribute("data-collapsed") === "true");
+      }
+    };
+    checkCollapsed();
+    const navElement = navRef.current?.closest("nav");
+    if (navElement) {
+      const observer = new MutationObserver(checkCollapsed);
+      observer.observe(navElement, {
+        attributes: true,
+        attributeFilter: ["data-collapsed"]
+      });
+      return () => observer.disconnect();
+    }
+    return void 0;
+  }, []);
+  const itemTitle = title || (typeof children === "string" ? children : void 0);
+  const isButtonMode = !!onClick;
+  const isLinkMode = !isButtonMode && !!href;
+  if (process.env.NODE_ENV === "development" && !isButtonMode && !isLinkMode) {
+    console.warn('LeftNavItem: Either "href" or "onClick" prop must be provided');
+  }
+  const getBaseClasses = (isActive) => `group relative flex items-center gap-1 px-2 py-1.5 rounded-lg mx-2 [nav[data-collapsed='true']_&]:mx-2 [nav[data-collapsed='true']_&]:px-0 [nav[data-collapsed='true']_&]:w-12 [nav[data-collapsed='true']_&]:justify-center text-sm font-medium transition-colors duration-200 ${!disableActiveState && (isActive || active) ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground hover:bg-muted hover:text-foreground"} ${className}`;
+  const renderContent = (isActive) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate [nav[data-collapsed='true']_&]:hidden", children }),
+    badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 [nav[data-collapsed='true']_&]:hidden", children: isValidElement(badge) && !disableActiveState && (isActive || active) ? cloneElement(badge, { inverted: true }) : badge })
+  ] });
+  const buttonElement = isButtonMode ? (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref: navRef,
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onClick?.(e);
+        },
+        className: getBaseClasses(active),
+        "aria-current": !disableActiveState && active ? "page" : void 0,
+        "aria-label": itemTitle,
+        role: "button",
+        children: renderContent(active)
+      }
+    )
+  ) : null;
+  const navLink = isLinkMode ? /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      ref: navRef,
+      to: href,
+      onClick: (e) => {
+        if (preventNavigation) {
+          e.preventDefault();
+        }
+      },
+      className: ({ isActive }) => getBaseClasses(isActive),
+      "aria-current": !disableActiveState && active ? "page" : void 0,
+      "aria-label": itemTitle,
+      end: true,
+      children: ({ isActive }) => renderContent(isActive)
+    }
+  ) : null;
+  const element = isButtonMode ? buttonElement : navLink;
+  if (!isCollapsed) {
+    return element;
+  }
+  const tooltipContent = typeof children === "string" ? children : itemTitle || "Menu Item";
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, position: "right", variant: "neutral", className: "w-fit", children: element });
+}
+LeftNavItem.displayName = "LeftNavItem";
+export {
+  LeftNavItem as default
+};
+//# sourceMappingURL=left-nav-item.js.map

package/dist/components/layout/left-nav-layout/left-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-item.js","sources":["../../../../src/components/layout/left-nav-layout/left-nav-item.tsx"],"sourcesContent":["import Icon from '../../system/icon/icon';\nimport { ReactNode, MouseEvent, useRef, useState, useEffect, cloneElement, isValidElement } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport Tooltip from '../../feedback/tooltip/tooltip';\nimport { Size } from '@/theme/size-tokens';\n\nexport type LeftNavItemProps = {\n  /** Icon identifier string to display (uses Icon component) */\n  icon?: string;\n  /** Icon size from unified size system */\n  iconSize?: Size;\n  /** Link label text (visible when expanded, hidden when collapsed) */\n  children: ReactNode;\n  /** Whether this item is currently active (highlighted state) */\n  active?: boolean;\n  /** Additional CSS classes applied to the navigation link */\n  className?: string;\n  /** Badge or count component to display on the right side */\n  badge?: ReactNode;\n  /** Destination URL for the navigation link (required for link mode) */\n  href?: string;\n  /** Accessible label override (used for tooltip in collapsed mode) */\n  title?: string;\n  /** Prevent actual navigation for demo/showcase mode (deprecated: use onClick instead) */\n  preventNavigation?: boolean;\n  /** Click handler - when provided, renders as button instead of link */\n  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Disable active state highlighting (useful for non-navigation items like header buttons) */\n  disableActiveState?: boolean;\n};\n\n/**\n * LeftNavItem - Navigation link or button item for LeftNavLayout\n *\n * Features:\n * - Polymorphic: renders as link (with href) or button (with onClick)\n * - Icon support with proper alignment\n * - Optional active state styling\n * - Tooltip on hover in collapsed mode (using Tooltip component with Portal)\n * - Badge/count support\n * - Accessible keyboard navigation\n *\n * @example\n * ```tsx\n * // Link mode\n * <LeftNavItem icon=\"home\" href=\"/\" active>\n *   Home\n * </LeftNavItem>\n *\n * // Button mode\n * <LeftNavItem icon=\"settings\" onClick={() => console.log('clicked')} disableActiveState>\n *   Settings\n * </LeftNavItem>\n * ```\n */\nfunction LeftNavItem({\n  icon,\n  iconSize = 'sm',\n  children,\n  active = false,\n  className = '',\n  badge,\n  href,\n  title,\n  preventNavigation = false,\n  onClick,\n  disableActiveState = false\n}: Readonly<LeftNavItemProps>) {\n  const navRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n  const [isCollapsed, setIsCollapsed] = useState(() => {\n    // Try to get initial collapsed state from nav element if it exists\n    if (typeof window !== 'undefined') {\n      const navElement = document.querySelector('nav[data-collapsed]');\n      return navElement?.getAttribute('data-collapsed') === 'true';\n    }\n    return false;\n  });\n\n  // Check if nav is collapsed by looking at parent nav element\n  useEffect(() => {\n    const checkCollapsed = () => {\n      const navElement = navRef.current?.closest('nav');\n      if (navElement) {\n        setIsCollapsed(navElement.getAttribute('data-collapsed') === 'true');\n      }\n    };\n\n    checkCollapsed();\n\n    // Create observer to watch for attribute changes\n    const navElement = navRef.current?.closest('nav');\n    if (navElement) {\n      const observer = new MutationObserver(checkCollapsed);\n      observer.observe(navElement, {\n        attributes: true,\n        attributeFilter: ['data-collapsed']\n      });\n      return () => observer.disconnect();\n    }\n\n    return undefined;\n  }, []);\n\n  // Use children as fallback title for accessibility\n  const itemTitle = title || (typeof children === 'string' ? children : undefined);\n\n  // Determine mode: button (onClick present) or link (href present)\n  const isButtonMode = !!onClick;\n  const isLinkMode = !isButtonMode && !!href;\n\n  // Warn in development if neither mode is properly configured\n  if (process.env.NODE_ENV === 'development' && !isButtonMode && !isLinkMode) {\n    // eslint-disable-next-line no-console\n    console.warn('LeftNavItem: Either \"href\" or \"onClick\" prop must be provided');\n  }\n\n  // Shared base classes for both button and link modes\n  const getBaseClasses = (isActive: boolean) =>\n    `group relative flex items-center gap-1 px-2 py-1.5 rounded-lg mx-2 [nav[data-collapsed='true']_&]:mx-2 [nav[data-collapsed='true']_&]:px-0 [nav[data-collapsed='true']_&]:w-12 [nav[data-collapsed='true']_&]:justify-center text-sm font-medium transition-colors duration-200 ${\n      !disableActiveState && (isActive || active)\n        ? 'bg-primary text-primary-foreground shadow-sm'\n        : 'text-foreground hover:bg-muted hover:text-foreground'\n    } ${className}`;\n\n  // Shared content renderer\n  const renderContent = (isActive: boolean) => (\n    <>\n      {icon && <Icon name={icon} size={iconSize} />}\n\n      <span className=\"flex-1 truncate [nav[data-collapsed='true']_&]:hidden\">{children}</span>\n\n      {badge && (\n        <span className=\"shrink-0 [nav[data-collapsed='true']_&]:hidden\">\n          {/* Auto-inject inverted prop when nav item is active */}\n          {isValidElement(badge) && !disableActiveState && (isActive || active)\n            ? cloneElement(badge, { inverted: true } as { inverted: boolean })\n            : badge}\n        </span>\n      )}\n    </>\n  );\n\n  // Button mode rendering\n  const buttonElement = isButtonMode ? (\n    // eslint-disable-next-line jsx-a11y/anchor-is-valid\n    <a\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      href=\"#\"\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e as unknown as MouseEvent<HTMLAnchorElement>);\n      }}\n      className={getBaseClasses(active)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      role=\"button\"\n    >\n      {renderContent(active)}\n    </a>\n  ) : null;\n\n  // Link mode rendering\n  const navLink = isLinkMode ? (\n    <NavLink\n      ref={navRef as React.RefObject<HTMLAnchorElement>}\n      to={href!}\n      onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n        if (preventNavigation) {\n          e.preventDefault();\n        }\n      }}\n      className={({ isActive }) => getBaseClasses(isActive)}\n      aria-current={!disableActiveState && active ? 'page' : undefined}\n      aria-label={itemTitle}\n      end\n    >\n      {({ isActive }) => renderContent(isActive)}\n    </NavLink>\n  ) : null;\n\n  const element = isButtonMode ? buttonElement : navLink;\n\n  // Only show tooltip when collapsed\n  if (!isCollapsed) {\n    return element;\n  }\n\n  // Get tooltip content\n  const tooltipContent = typeof children === 'string' ? children : itemTitle || 'Menu Item';\n\n  return (\n    <Tooltip content={tooltipContent} position=\"right\" variant=\"neutral\" className=\"w-fit\">\n      {element}\n    </Tooltip>\n  );\n}\n\nLeftNavItem.displayName = 'LeftNavItem';\n\nexport default LeftNavItem;\n"],"names":["navElement"],"mappings":"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"}

package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+export type LeftNavLayoutProps = {
+    /** Navigation sidebar content */
+    nav: ReactNode;
+    /** Main content area */
+    children: ReactNode;
+    /** Whether sidebar is collapsed (icon-only mode) */
+    collapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Whether to show collapse toggle button */
+    showToggle?: boolean;
+    /** Custom className for the layout container */
+    className?: string;
+    /** Custom className for the nav sidebar */
+    navClassName?: string;
+    /** Custom className for the content area */
+    contentClassName?: string;
+    /** Width of the sidebar when expanded */
+    navWidth?: string;
+    /** Width of the sidebar when collapsed */
+    navWidthCollapsed?: string;
+    /** Hide navigation on mobile (slides in as overlay when toggled) */
+    hideOnMobile?: boolean;
+    /** Auto-collapse to icon-only mode on mobile screens */
+    autoCollapseOnMobile?: boolean;
+    /** Embedded demo mode (no fixed positioning, constrained height) */
+    embedded?: boolean;
+    /** Ref for the main content scrollable element */
+    mainContentRef?: React.RefObject<HTMLDivElement>;
+    /** Optional header text for the navigation sidebar */
+    header?: string;
+};
+/**
+ * LeftNavLayout - Full-featured responsive left navigation layout
+ *
+ * Provides a robust sidebar navigation with:
+ * - Full and collapsed (icon-only) states
+ * - Smooth transitions without janky spacing
+ * - Proper scroll handling
+ * - Responsive mobile behavior
+ * - Accessible keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * <LeftNavLayout
+ *   collapsed={isCollapsed}
+ *   onCollapsedChange={setIsCollapsed}
+ *   nav={
+ *     <>
+ *       <LeftNavSection>
+ *         <LeftNavItem icon={<HomeIcon />} href="/" active>Home</LeftNavItem>
+ *         <LeftNavItem icon={<DashboardIcon />} href="/dashboard">Dashboard</LeftNavItem>
+ *       </LeftNavSection>
+ *     </>
+ *   }
+ * >
+ *   <main>Your content here</main>
+ * </LeftNavLayout>
+ * ```
+ */
+declare function LeftNavLayout({ nav, children, collapsed: controlledCollapsed, onCollapsedChange, showToggle, className, navClassName, contentClassName, navWidth, navWidthCollapsed, hideOnMobile, autoCollapseOnMobile, embedded, header, mainContentRef }: Readonly<LeftNavLayoutProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace LeftNavLayout {
+    var displayName: string;
+}
+export default LeftNavLayout;
+//# sourceMappingURL=left-nav-layout.d.ts.map

package/dist/components/layout/left-nav-layout/left-nav-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAIhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iCAAiC;IACjC,GAAG,EAAE,SAAS,CAAC;IACf,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,EACH,QAAQ,EACR,SAAS,EAAE,mBAAmB,EAC9B,iBAAiB,EACjB,UAAiB,EACjB,SAAc,EACd,YAAiB,EACjB,gBAAqB,EACrB,QAAkB,EAClB,iBAA4B,EAC5B,YAAoB,EACpB,oBAA2B,EAC3B,QAAgB,EAChB,MAAqB,EACrB,cAAc,EACf,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAwN9B;kBAxOQ,aAAa;;;AA4OtB,eAAe,aAAa,CAAC"}

package/dist/components/layout/left-nav-layout/left-nav-layout.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useEffect } from "react";
+import useScrollReset from "../../../hooks/useScrollReset.js";
+import LeftNavItem from "./left-nav-item.js";
+function LeftNavLayout({
+  nav,
+  children,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  showToggle = true,
+  className = "",
+  navClassName = "",
+  contentClassName = "",
+  navWidth = "16rem",
+  navWidthCollapsed = "4.5rem",
+  hideOnMobile = false,
+  autoCollapseOnMobile = true,
+  embedded = false,
+  header = "Navigation",
+  mainContentRef
+}) {
+  const STORAGE_KEY_DESKTOP = "left-nav-desktop-collapsed";
+  const STORAGE_KEY_MOBILE = "left-nav-mobile-collapsed";
+  const [internalCollapsed, setInternalCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_DESKTOP);
+      return saved !== null ? saved === "true" : false;
+    } catch (error) {
+      console.warn("Failed to read desktop collapsed state from localStorage:", error);
+      return false;
+    }
+  });
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(!hideOnMobile);
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);
+  const [mobileCollapsedOverride, setMobileCollapsedOverride] = useState(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_MOBILE);
+      return saved !== null ? saved === "true" : null;
+    } catch (error) {
+      console.warn("Failed to read mobile collapsed state from localStorage:", error);
+      return null;
+    }
+  });
+  const desktopCollapsedRef = useRef(void 0);
+  const navRef = useRef(null);
+  const scrollPosRef = useRef(0);
+  const internalContentRef = useRef(null);
+  const contentRef = mainContentRef || internalContentRef;
+  useLayoutEffect(() => {
+    const checkMobile = () => {
+      const newIsMobile = window.innerWidth < 1024;
+      if (newIsMobile !== isMobile) {
+        const wasDesktop = !isMobile;
+        const isNowDesktop = !newIsMobile;
+        setIsMobile(newIsMobile);
+        if (wasDesktop && autoCollapseOnMobile) {
+          const currentCollapsed = controlledCollapsed ?? internalCollapsed;
+          desktopCollapsedRef.current = currentCollapsed;
+        }
+        if (isNowDesktop && autoCollapseOnMobile && desktopCollapsedRef.current !== void 0) {
+          if (controlledCollapsed === void 0) {
+            setInternalCollapsed(desktopCollapsedRef.current);
+          }
+        }
+        if (!isNowDesktop && autoCollapseOnMobile) {
+          try {
+            const savedMobile = localStorage.getItem(STORAGE_KEY_MOBILE);
+            setMobileCollapsedOverride(savedMobile !== null ? savedMobile === "true" : null);
+          } catch {
+            setMobileCollapsedOverride(null);
+          }
+        } else if (isNowDesktop) {
+          setMobileCollapsedOverride(null);
+        }
+      }
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [isMobile, autoCollapseOnMobile, controlledCollapsed, internalCollapsed]);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = (value) => {
+    if (onCollapsedChange) {
+      onCollapsedChange(value);
+    } else {
+      setInternalCollapsed(value);
+      try {
+        localStorage.setItem(STORAGE_KEY_DESKTOP, String(value));
+      } catch (error) {
+        console.warn("Failed to save desktop collapsed state to localStorage:", error);
+      }
+    }
+  };
+  const effectiveCollapsed = autoCollapseOnMobile && isMobile ? mobileCollapsedOverride !== null ? mobileCollapsedOverride : true : collapsed;
+  const toggleCollapsed = () => setCollapsed(!collapsed);
+  const closeMobileMenu = () => setMobileMenuOpen(false);
+  const handleToggleClick = () => {
+    if (hideOnMobile && isMobile) {
+      closeMobileMenu();
+    } else if (autoCollapseOnMobile && isMobile) {
+      const newMobileState = !effectiveCollapsed;
+      setMobileCollapsedOverride(newMobileState);
+      try {
+        localStorage.setItem(STORAGE_KEY_MOBILE, String(newMobileState));
+      } catch {
+        console.warn("Failed to save mobile collapsed state to localStorage:");
+      }
+    } else {
+      toggleCollapsed();
+    }
+  };
+  useEffect(() => {
+    if (navRef.current) {
+      navRef.current.scrollTop = scrollPosRef.current;
+    }
+  }, [children]);
+  useScrollReset([children], contentRef);
+  const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] bg-background";
+  return /* @__PURE__ */ jsxs("div", { className: `${containerClasses} ${className}`, children: [
+    !embedded && hideOnMobile && mobileMenuOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 z-30 lg:hidden transition-opacity duration-300",
+        onClick: closeMobileMenu,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        className: `${embedded ? "relative flex flex-col h-full" : hideOnMobile ? "fixed lg:relative top-14 md:top-16 lg:top-0 left-0 z-40 lg:z-10 h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] lg:h-full" : "relative h-full"} flex flex-col shrink-0 bg-background border-r border-border transition-all duration-300 ease-in-out ${!embedded && hideOnMobile && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"} ${effectiveCollapsed ? "w-18" : "w-64"} ${navClassName}`,
+        style: !effectiveCollapsed && navWidth !== "16rem" || effectiveCollapsed && navWidthCollapsed !== "4.5rem" ? {
+          width: effectiveCollapsed ? navWidthCollapsed : navWidth
+        } : void 0,
+        "aria-label": "Main navigation",
+        children: /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            ref: navRef,
+            className: "flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin",
+            "data-collapsed": effectiveCollapsed,
+            onScroll: (e) => {
+              scrollPosRef.current = e.currentTarget.scrollTop;
+            },
+            children: [
+              showToggle && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+                /* @__PURE__ */ jsx(
+                  LeftNavItem,
+                  {
+                    icon: effectiveCollapsed ? "layout-sidebar-left-expand" : "layout-sidebar-left-collapse",
+                    iconSize: "md",
+                    onClick: handleToggleClick,
+                    disableActiveState: true,
+                    title: effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                    children: header
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 mt-1.5", "aria-hidden": "true" })
+              ] }) }),
+              nav
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        ref: contentRef,
+        className: `flex-1 overflow-y-auto ${embedded ? "h-60" : ""} ${contentClassName}`,
+        children
+      }
+    )
+  ] });
+}
+LeftNavLayout.displayName = "LeftNavLayout";
+export {
+  LeftNavLayout as default
+};
+//# sourceMappingURL=left-nav-layout.js.map

package/dist/components/layout/left-nav-layout/left-nav-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-layout.js","sources":["../../../../src/components/layout/left-nav-layout/left-nav-layout.tsx"],"sourcesContent":["import { ReactNode, useState, useRef, useEffect, useLayoutEffect } from 'react';\nimport useScrollReset from '@/hooks/useScrollReset';\nimport LeftNavItem from './left-nav-item';\n\nexport type LeftNavLayoutProps = {\n  /** Navigation sidebar content */\n  nav: ReactNode;\n  /** Main content area */\n  children: ReactNode;\n  /** Whether sidebar is collapsed (icon-only mode) */\n  collapsed?: boolean;\n  /** Callback when collapse state changes */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Whether to show collapse toggle button */\n  showToggle?: boolean;\n  /** Custom className for the layout container */\n  className?: string;\n  /** Custom className for the nav sidebar */\n  navClassName?: string;\n  /** Custom className for the content area */\n  contentClassName?: string;\n  /** Width of the sidebar when expanded */\n  navWidth?: string;\n  /** Width of the sidebar when collapsed */\n  navWidthCollapsed?: string;\n  /** Hide navigation on mobile (slides in as overlay when toggled) */\n  hideOnMobile?: boolean;\n  /** Auto-collapse to icon-only mode on mobile screens */\n  autoCollapseOnMobile?: boolean;\n  /** Embedded demo mode (no fixed positioning, constrained height) */\n  embedded?: boolean;\n  /** Ref for the main content scrollable element */\n  mainContentRef?: React.RefObject<HTMLDivElement>;\n  /** Optional header text for the navigation sidebar */\n  header?: string;\n};\n\n/**\n * LeftNavLayout - Full-featured responsive left navigation layout\n *\n * Provides a robust sidebar navigation with:\n * - Full and collapsed (icon-only) states\n * - Smooth transitions without janky spacing\n * - Proper scroll handling\n * - Responsive mobile behavior\n * - Accessible keyboard navigation\n *\n * @example\n * ```tsx\n * <LeftNavLayout\n *   collapsed={isCollapsed}\n *   onCollapsedChange={setIsCollapsed}\n *   nav={\n *     <>\n *       <LeftNavSection>\n *         <LeftNavItem icon={<HomeIcon />} href=\"/\" active>Home</LeftNavItem>\n *         <LeftNavItem icon={<DashboardIcon />} href=\"/dashboard\">Dashboard</LeftNavItem>\n *       </LeftNavSection>\n *     </>\n *   }\n * >\n *   <main>Your content here</main>\n * </LeftNavLayout>\n * ```\n */\nfunction LeftNavLayout({\n  nav,\n  children,\n  collapsed: controlledCollapsed,\n  onCollapsedChange,\n  showToggle = true,\n  className = '',\n  navClassName = '',\n  contentClassName = '',\n  navWidth = '16rem',\n  navWidthCollapsed = '4.5rem',\n  hideOnMobile = false,\n  autoCollapseOnMobile = true,\n  embedded = false,\n  header = 'Navigation',\n  mainContentRef\n}: Readonly<LeftNavLayoutProps>) {\n  const STORAGE_KEY_DESKTOP = 'left-nav-desktop-collapsed';\n  const STORAGE_KEY_MOBILE = 'left-nav-mobile-collapsed';\n\n  // Initialize desktop collapsed state from localStorage (defaults to false = expanded)\n  const [internalCollapsed, setInternalCollapsed] = useState(() => {\n    if (typeof window === 'undefined') return false;\n    try {\n      const saved = localStorage.getItem(STORAGE_KEY_DESKTOP);\n      return saved !== null ? saved === 'true' : false;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.warn('Failed to read desktop collapsed state from localStorage:', error);\n      return false;\n    }\n  });\n\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(!hideOnMobile);\n  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);\n\n  // Initialize mobile collapsed state from localStorage (defaults to true = collapsed)\n  const [mobileCollapsedOverride, setMobileCollapsedOverride] = useState<boolean | null>(() => {\n    if (typeof window === 'undefined') return null;\n    try {\n      const saved = localStorage.getItem(STORAGE_KEY_MOBILE);\n      // If user has never toggled, return null to use default (collapsed)\n      // If they have toggled, use their saved preference\n      return saved !== null ? saved === 'true' : null;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.warn('Failed to read mobile collapsed state from localStorage:', error);\n      return null;\n    }\n  });\n\n  const desktopCollapsedRef = useRef<boolean | undefined>(undefined);\n\n  const navRef = useRef<HTMLDivElement | null>(null);\n  const scrollPosRef = useRef<number>(0);\n  const internalContentRef = useRef<HTMLElement | null>(null);\n  const contentRef = mainContentRef || internalContentRef;\n\n  // Detect mobile screen size\n  // Use useLayoutEffect to run synchronously before paint, preventing layout shift\n  useLayoutEffect(() => {\n    const checkMobile = () => {\n      const newIsMobile = window.innerWidth < 1024; // lg breakpoint\n      if (newIsMobile !== isMobile) {\n        const wasDesktop = !isMobile;\n        const isNowDesktop = !newIsMobile;\n\n        setIsMobile(newIsMobile);\n\n        // When switching from desktop to mobile, save the desktop state\n        if (wasDesktop && autoCollapseOnMobile) {\n          const currentCollapsed = controlledCollapsed ?? internalCollapsed;\n          desktopCollapsedRef.current = currentCollapsed;\n        }\n\n        // When switching from mobile to desktop, restore the desktop state\n        if (isNowDesktop && autoCollapseOnMobile && desktopCollapsedRef.current !== undefined) {\n          if (controlledCollapsed === undefined) {\n            // Only restore if using uncontrolled state\n            setInternalCollapsed(desktopCollapsedRef.current);\n          }\n        }\n\n        // When switching to mobile, restore mobile state from localStorage\n        if (!isNowDesktop && autoCollapseOnMobile) {\n          try {\n            const savedMobile = localStorage.getItem(STORAGE_KEY_MOBILE);\n            setMobileCollapsedOverride(savedMobile !== null ? savedMobile === 'true' : null);\n          } catch {\n            setMobileCollapsedOverride(null);\n          }\n        } else if (isNowDesktop) {\n          // When switching to desktop, clear mobile override (not needed on desktop)\n          setMobileCollapsedOverride(null);\n        }\n      }\n    };\n\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n    return () => window.removeEventListener('resize', checkMobile);\n  }, [isMobile, autoCollapseOnMobile, controlledCollapsed, internalCollapsed]);\n\n  // Use controlled or uncontrolled collapsed state\n  const collapsed = controlledCollapsed ?? internalCollapsed;\n  const setCollapsed = (value: boolean) => {\n    if (onCollapsedChange) {\n      onCollapsedChange(value);\n    } else {\n      setInternalCollapsed(value);\n      // Persist desktop state to localStorage\n      try {\n        localStorage.setItem(STORAGE_KEY_DESKTOP, String(value));\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.warn('Failed to save desktop collapsed state to localStorage:', error);\n      }\n    }\n  };\n\n  // Determine effective collapsed state\n  // On mobile with autoCollapseOnMobile: use override if set, otherwise default to collapsed\n  // On desktop or without autoCollapseOnMobile: use normal collapsed state\n  const effectiveCollapsed =\n    autoCollapseOnMobile && isMobile ? (mobileCollapsedOverride !== null ? mobileCollapsedOverride : true) : collapsed;\n\n  const toggleCollapsed = () => setCollapsed(!collapsed);\n  const closeMobileMenu = () => setMobileMenuOpen(false);\n\n  // On mobile with hideOnMobile, toggle closes the overlay; on desktop, it collapses\n  // On mobile with autoCollapseOnMobile, toggle the mobile override state\n  const handleToggleClick = () => {\n    if (hideOnMobile && isMobile) {\n      // Hide on mobile mode - close the overlay\n      closeMobileMenu();\n    } else if (autoCollapseOnMobile && isMobile) {\n      // Auto-collapse mode - toggle the mobile override\n      const newMobileState = !effectiveCollapsed;\n      setMobileCollapsedOverride(newMobileState);\n      // Persist mobile state to localStorage\n      try {\n        localStorage.setItem(STORAGE_KEY_MOBILE, String(newMobileState));\n      } catch {\n        // eslint-disable-next-line no-console\n        console.warn('Failed to save mobile collapsed state to localStorage:');\n      }\n    } else {\n      // Desktop or normal mode - toggle regular collapsed state\n      toggleCollapsed();\n    }\n  };\n\n  // Restore nav scroll position after children change (route switch) & reset scroll\n  useEffect(() => {\n    if (navRef.current) {\n      navRef.current.scrollTop = scrollPosRef.current;\n    }\n  }, [children]);\n\n  // Robust scroll reset for main content area on children change\n  // Pass the ref object (not .current) to avoid reading ref during render\n  useScrollReset([children], contentRef as React.RefObject<HTMLElement | null>);\n\n  const containerClasses = embedded\n    ? 'flex bg-background border border-border rounded-lg overflow-hidden'\n    : 'flex h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] bg-background';\n\n  return (\n    <div className={`${containerClasses} ${className}`}>\n      {/* Mobile Backdrop Overlay - Only shows on mobile when menu is open */}\n      {!embedded && hideOnMobile && mobileMenuOpen && (\n        <div\n          className=\"fixed inset-0 bg-black/50 z-30 lg:hidden transition-opacity duration-300\"\n          onClick={closeMobileMenu}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      {/* Sidebar Navigation */}\n      <aside\n        className={`${embedded ? 'relative flex flex-col h-full' : hideOnMobile ? 'fixed lg:relative top-14 md:top-16 lg:top-0 left-0 z-40 lg:z-10 h-[calc(100vh-3.5rem)] md:h-[calc(100vh-4rem)] lg:h-full' : 'relative h-full'} flex flex-col shrink-0 bg-background border-r border-border transition-all duration-300 ease-in-out ${!embedded && hideOnMobile && !mobileMenuOpen ? '-translate-x-full lg:translate-x-0' : 'translate-x-0'} ${effectiveCollapsed ? 'w-18' : 'w-64'} ${navClassName}`}\n        style={\n          (!effectiveCollapsed && navWidth !== '16rem') || (effectiveCollapsed && navWidthCollapsed !== '4.5rem')\n            ? ({\n                width: effectiveCollapsed ? navWidthCollapsed : navWidth\n              } as React.CSSProperties)\n            : undefined\n        }\n        aria-label=\"Main navigation\"\n      >\n        {/* Nav Header with Toggle */}\n\n        {/* Nav Content - Scrollable */}\n        <nav\n          ref={navRef}\n          className=\"flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin\"\n          data-collapsed={effectiveCollapsed}\n          onScroll={(e) => {\n            scrollPosRef.current = (e.currentTarget as HTMLDivElement).scrollTop;\n          }}\n        >\n          {showToggle && (\n            <>\n              <div className=\"py-2\">\n                <LeftNavItem\n                  icon={effectiveCollapsed ? 'layout-sidebar-left-expand' : 'layout-sidebar-left-collapse'}\n                  iconSize=\"md\"\n                  onClick={handleToggleClick}\n                  disableActiveState\n                  title={effectiveCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n                >\n                  {header}\n                </LeftNavItem>\n\n                {/* Divider - Subtle separator between sections */}\n                <div className=\"h-px bg-border mx-3 mt-1.5\" aria-hidden=\"true\" />\n              </div>\n            </>\n          )}\n          {nav}\n        </nav>\n      </aside>\n\n      {/* Main Content Area */}\n      <main\n        ref={contentRef as React.RefObject<HTMLDivElement>}\n        className={`flex-1 overflow-y-auto ${embedded ? 'h-60' : ''} ${contentClassName}`}\n      >\n        {children}\n      </main>\n    </div>\n  );\n}\n\nLeftNavLayout.displayName = 'LeftNavLayout';\n\nexport default LeftNavLayout;\n"],"names":[],"mappings":"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"}

package/dist/components/layout/left-nav-layout/left-nav-section.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+export type LeftNavSectionProps = {
+    /** Section content (typically LeftNavItem components) */
+    children: ReactNode;
+    /** Optional section header label (hidden in collapsed mode) */
+    label?: string;
+    /** Additional CSS classes applied to the section container */
+    className?: string;
+    /** Enable collapsible behavior for the section */
+    collapsible?: boolean;
+    /** Default collapsed state (only applies when collapsible is true) */
+    defaultCollapsed?: boolean;
+    /** Unique identifier for localStorage persistence. If not provided, label is used. */
+    id?: string;
+};
+/**
+ * LeftNavSection - Section grouping for LeftNavLayout navigation items
+ *
+ * Groups related navigation items together with an optional label.
+ * In collapsed mode, the label is hidden but the grouping is preserved.
+ * Supports collapsible behavior with smooth animations and localStorage persistence.
+ *
+ * @example
+ * ```tsx
+ * <LeftNavSection label="Main">
+ *   <LeftNavItem icon={<HomeIcon />} href="/">Home</LeftNavItem>
+ *   <LeftNavItem icon={<DashboardIcon />} href="/dashboard">Dashboard</LeftNavItem>
+ * </LeftNavSection>
+ *
+ * <LeftNavSection label="Settings" collapsible defaultCollapsed id="settings-section">
+ *   <LeftNavItem icon={<SettingsIcon />} href="/settings">Settings</LeftNavItem>
+ * </LeftNavSection>
+ * ```
+ */
+declare function LeftNavSection({ children, label, className, collapsible, defaultCollapsed, id }: Readonly<LeftNavSectionProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace LeftNavSection {
+    var displayName: string;
+}
+export default LeftNavSection;
+//# sourceMappingURL=left-nav-section.d.ts.map

package/dist/components/layout/left-nav-layout/left-nav-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/left-nav-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAG/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,yDAAyD;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,SAAc,EACd,WAAmB,EACnB,gBAAwB,EACxB,EAAE,EACH,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAqI/B;kBA5IQ,cAAc;;;AAgJvB,eAAe,cAAc,CAAC"}

package/dist/components/layout/left-nav-layout/left-nav-section.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Icon } from "../../system/icon/icon.js";
+function LeftNavSection({
+  children,
+  label,
+  className = "",
+  collapsible = false,
+  defaultCollapsed = false,
+  id
+}) {
+  const STORAGE_KEY = "left-nav-sections";
+  const sectionId = id || label || null;
+  const getSectionStates = () => {
+    if (typeof window === "undefined") return {};
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? JSON.parse(stored) : {};
+    } catch (error) {
+      console.warn("Failed to read section states from localStorage:", error);
+      return {};
+    }
+  };
+  const saveSectionState = (sectionKey, collapsed) => {
+    try {
+      const states = getSectionStates();
+      states[sectionKey] = collapsed;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(states));
+    } catch (error) {
+      console.warn("Failed to save section state to localStorage:", error);
+    }
+  };
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (!collapsible || !sectionId) return defaultCollapsed;
+    const states = getSectionStates();
+    return sectionId in states ? states[sectionId] : defaultCollapsed;
+  });
+  const [isNavCollapsed, setIsNavCollapsed] = useState(false);
+  const contentRef = useRef(null);
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    const checkNavCollapsed = () => {
+      const navElement2 = sectionRef.current?.closest("nav");
+      if (navElement2) {
+        setIsNavCollapsed(navElement2.getAttribute("data-collapsed") === "true");
+      }
+    };
+    checkNavCollapsed();
+    const navElement = sectionRef.current?.closest("nav");
+    if (navElement) {
+      const observer = new MutationObserver(checkNavCollapsed);
+      observer.observe(navElement, {
+        attributes: true,
+        attributeFilter: ["data-collapsed"]
+      });
+      return () => observer.disconnect();
+    }
+    return void 0;
+  }, []);
+  const toggleCollapsed = () => {
+    if (collapsible) {
+      const newState = !isCollapsed;
+      setIsCollapsed(newState);
+      if (sectionId) {
+        saveSectionState(sectionId, newState);
+      }
+    }
+  };
+  const effectiveCollapsed = isNavCollapsed ? false : isCollapsed;
+  return /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: `py-1 [&:last-child>*:last-child]:hidden ${className}`, children: [
+    label && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+            px-3 mb-1.5 mt-1
+            text-xs font-semibold uppercase tracking-wider
+            text-muted-foreground
+            [nav[data-collapsed='true']_&]:hidden
+            ${collapsible ? "cursor-pointer hover:text-foreground transition-colors flex items-center justify-between gap-2" : ""}
+          `,
+        onClick: toggleCollapsed,
+        role: collapsible ? "button" : void 0,
+        "aria-expanded": collapsible ? !effectiveCollapsed : void 0,
+        tabIndex: collapsible ? 0 : void 0,
+        onKeyDown: collapsible ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleCollapsed();
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          collapsible && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "chevron-down",
+              size: "xs",
+              className: `transition-transform duration-200 ${effectiveCollapsed ? "-rotate-90" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: `space-y-0.5 overflow-hidden transition-all duration-200 ${effectiveCollapsed && collapsible ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"}`,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 mt-1.5", "aria-hidden": "true" })
+  ] });
+}
+LeftNavSection.displayName = "LeftNavSection";
+export {
+  LeftNavSection as default
+};
+//# sourceMappingURL=left-nav-section.js.map