@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/SideNavbar/components/SideNavbarToggle.js

@@ -0,0 +1,197 @@
+"use client";
+var k = Object.defineProperty, G = Object.defineProperties;
+var H = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
+var y = (t, o, e) => o in t ? k(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, r = (t, o) => {
+  for (var e in o || (o = {}))
+    S.call(o, e) && y(t, e, o[e]);
+  if (f)
+    for (var e of f(o))
+      z.call(o, e) && y(t, e, o[e]);
+  return t;
+}, N = (t, o) => G(t, H(o));
+var E = (t, o) => {
+  var e = {};
+  for (var a in t)
+    S.call(t, a) && o.indexOf(a) < 0 && (e[a] = t[a]);
+  if (t != null && f)
+    for (var a of f(t))
+      o.indexOf(a) < 0 && z.call(t, a) && (e[a] = t[a]);
+  return e;
+};
+import { jsx as s } from "react/jsx-runtime";
+import { PanelLeftOpen as J, PanelLeftClose as K } from "lucide-react";
+import { useSideNavbarStateRequired as Q } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as U } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as V } from "../contexts/SideNavbarConfigContext.js";
+import { getRadiusClass as W } from "../../../tokens/radius.js";
+import { getShadowClass as O } from "../../../tokens/shadows.js";
+import { getSpacingClass as I } from "../../../tokens/spacing.js";
+import { Z_INDEX_TOKENS as R, getZIndexClass as tt } from "../../../tokens/z-index.js";
+import q from "../../../primitives/Tooltip/Tooltip.js";
+const ot = {
+  xs: "w-5 h-5",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10"
+}, et = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+}, at = {
+  floating: `absolute ${tt("fixed")}`,
+  // Right edge of navbar, vertically centered - position set via style
+  // micro-z: toggle above adjacent siblings in absolute corner position
+  top: "absolute top-2 right-2 z-10",
+  // micro-z: toggle above adjacent siblings in absolute corner position
+  bottom: "absolute bottom-2 right-2 z-10",
+  // micro-z: toggle above sibling content in relative inside position
+  inside: "relative z-10",
+  // micro-z: toggle above sibling content in relative inside position
+  "navigation-top": `relative ${I("sm", "mt")} mx-auto z-10`,
+  // micro-z: toggle above sibling content in relative inside position
+  "navigation-bottom": `relative mt-auto ${I("sm", "mb")} mx-auto z-10`
+}, nt = {
+  default: `bg-surface-raised border border-line-default ${O("sm")} hover:bg-surface-hover hover:shadow`,
+  ghost: "bg-transparent hover:bg-surface-hover border-0",
+  outline: "bg-transparent border border-line-default hover:bg-surface-hover"
+}, rt = {
+  floating: "right",
+  top: "bottom",
+  bottom: "top",
+  inside: "right",
+  "navigation-top": "right",
+  "navigation-bottom": "right"
+};
+function xt(st) {
+  var p = st, {
+    position: t = "floating",
+    offset: o,
+    icon: e,
+    expandIcon: a,
+    collapseIcon: d,
+    size: b = "sm",
+    variant: L = "default",
+    showTooltip: g = !0,
+    tooltipPosition: u,
+    keyboardShortcut: m,
+    enableKeyboardShortcut: c,
+    className: j = "",
+    style: D,
+    "aria-label": P
+  } = p, T = E(p, [
+    "position",
+    "offset",
+    "icon",
+    "expandIcon",
+    "collapseIcon",
+    "size",
+    "variant",
+    "showTooltip",
+    "tooltipPosition",
+    "keyboardShortcut",
+    "enableKeyboardShortcut",
+    "className",
+    "style",
+    "aria-label"
+  ]);
+  var C, v;
+  const { collapsed: n, toggle: Y } = Q(), { animationDuration: Z, animationEasing: _ } = U(), h = V(), A = m != null ? m : h.keyboardShortcut, B = c != null ? c : h.enableKeyboardShortcut, F = () => typeof e == "function" ? e(n) : e || (n && a ? a : !n && d ? d : /* @__PURE__ */ s(
+    n ? J : K,
+    {
+      className: et[b],
+      style: {
+        transition: "none",
+        transform: "none",
+        willChange: "auto"
+      }
+    }
+  )), M = n ? "Expand sidebar" : "Collapse sidebar", x = u != null ? u : rt[t], i = g ? `${n ? "Expand" : "Collapse"} sidebar${B ? ` (${A})` : ""}` : void 0, $ = o ? {
+    transform: `translate(${(C = o.x) != null ? C : 0}px, ${(v = o.y) != null ? v : 0}px)`
+  } : {}, X = t === "floating" ? r({
+    // Toggle sempre na borda direita da sidebar completa (<aside>)
+    // O <aside> é o container pai, então right: -12px sempre posiciona na borda direita da sidebar
+    // Isso faz o toggle acompanhar o resize da sidebar automaticamente
+    right: "-12px",
+    // Posicionar na mesma altura do primeiro ícone (home)
+    // Usando 1rem (16px) para melhor alinhamento com o primeiro item
+    // Considerando p-2 (8px) + gap-2 (8px) + metade do primeiro item = ~16px
+    top: "1rem",
+    transform: "translateY(-50%)",
+    // Transição suave para acompanhar o resize da sidebar
+    transition: `right ${Z}ms ${_}`
+  }, $) : $, l = /* @__PURE__ */ s(
+    "button",
+    N(r({
+      type: "button",
+      onClick: Y,
+      className: `
+        ${ot[b]}
+        ${nt[L]}
+        ${W("full")}
+        flex items-center justify-center
+        text-fg-secondary hover:text-fg-primary
+        focus:outline-none focus:ring-2 focus:ring-line-focus focus:ring-offset-1
+        ${t === "floating" ? "" : at[t]}
+        ${j}
+      `,
+      style: r(r(r(r({}, t === "floating" ? {
+        position: "absolute",
+        // Absolute within the floating wrapper
+        // The custom wrapper is at sidebar's content edge (right: 0 = 319px, sidebar has 1px border)
+        // The Tooltip wrapper (div.static.inline-block) is inside the custom wrapper and doesn't interfere
+        // Position button so its RIGHT edge is 12px outside sidebar's border edge
+        // Sidebar border edge: 320px, desired right edge: 320 - 12 = 308px
+        // Button width: 24px, so left edge should be: 308 - 24 = 284px
+        // Wrapper is at content edge (319px), so button right should be: 319 - (320 - 308) = 307px
+        // But we want right edge at 308px, so: right = -12px - 1px (border) = -13px
+        // Actually, if wrapper is at 319px and we want button right at 308px: 319 - 308 = 11px offset
+        // So: right = -11px (but this positions right edge at 319 - 11 = 308px ✓)
+        right: "-11px",
+        // Position button's right edge 11px outside wrapper (319px) = 308px (12px outside sidebar border)
+        left: "auto"
+        // Ensure left doesn't interfere
+      } : {}), t !== "floating" ? X : {}), t === "floating" ? { zIndex: R.fixed.value } : {}), D),
+      "aria-label": P || M,
+      "aria-expanded": !n,
+      "aria-controls": "side-navbar-sidebar",
+      "data-position": t
+    }, T), {
+      children: F()
+    })
+  );
+  if (t === "floating") {
+    const w = g && i ? /* @__PURE__ */ s(
+      q,
+      {
+        content: i,
+        position: x,
+        preservePositioning: !0,
+        children: l
+      }
+    ) : l;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: "0",
+          // Align to sidebar's content edge (319px with 1px border)
+          // Note: sidebar has box-sizing: border-box, so right: 0 positions at content edge
+          // We compensate by adjusting the button's right value
+          top: "1rem",
+          transform: "translateY(-50%)",
+          zIndex: R.fixed.value
+        },
+        children: w
+      }
+    );
+  }
+  return g && i ? /* @__PURE__ */ s(q, { content: i, position: x, children: l }) : l;
+}
+export {
+  xt as default
+};
+//# sourceMappingURL=SideNavbarToggle.js.map

package/dist/granular/ui/components/SideNavbar/components/SideNavbarToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarToggle.js","sources":["../../../../../../src/ui/components/SideNavbar/components/SideNavbarToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport { useSideNavbarStateRequired } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { getRadiusClass } from \"../../../tokens/radius\";\nimport { getShadowClass } from \"../../../tokens/shadows\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\nimport { getZIndexClass, Z_INDEX_TOKENS } from \"../../../tokens/z-index\";\nimport Tooltip from \"../../../primitives/Tooltip/Tooltip\";\nimport type {\n  SideNavbarToggleProps,\n  SideNavbarTogglePosition,\n  SideNavbarToggleVariant,\n} from \"../types\";\n\nconst sizeClasses = {\n  xs: \"w-5 h-5\",\n  sm: \"w-6 h-6\",\n  md: \"w-8 h-8\",\n  lg: \"w-10 h-10\",\n};\n\nconst iconSizeClasses = {\n  xs: \"w-3 h-3\",\n  sm: \"w-4 h-4\",\n  md: \"w-5 h-5\",\n  lg: \"w-6 h-6\",\n};\n\nconst positionClasses: Record<SideNavbarTogglePosition, string> = {\n  floating: `absolute ${getZIndexClass(\"fixed\")}`, // Right edge of navbar, vertically centered - position set via style\n  // micro-z: toggle above adjacent siblings in absolute corner position\n  top: \"absolute top-2 right-2 z-10\",\n  // micro-z: toggle above adjacent siblings in absolute corner position\n  bottom: \"absolute bottom-2 right-2 z-10\",\n  // micro-z: toggle above sibling content in relative inside position\n  inside: \"relative z-10\",\n  // micro-z: toggle above sibling content in relative inside position\n  \"navigation-top\": `relative ${getSpacingClass(\"sm\", \"mt\")} mx-auto z-10`,\n  // micro-z: toggle above sibling content in relative inside position\n  \"navigation-bottom\": `relative mt-auto ${getSpacingClass(\"sm\", \"mb\")} mx-auto z-10`,\n};\n\nconst variantClasses: Record<SideNavbarToggleVariant, string> = {\n  default: `bg-surface-raised border border-line-default ${getShadowClass(\"sm\")} hover:bg-surface-hover hover:shadow`,\n  ghost: \"bg-transparent hover:bg-surface-hover border-0\",\n  outline: \"bg-transparent border border-line-default hover:bg-surface-hover\",\n};\n\nconst tooltipPositionMap: Record<\n  SideNavbarTogglePosition,\n  \"top\" | \"right\" | \"bottom\" | \"left\"\n> = {\n  floating: \"right\",\n  top: \"bottom\",\n  bottom: \"top\",\n  inside: \"right\",\n  \"navigation-top\": \"right\",\n  \"navigation-bottom\": \"right\",\n};\n\n/**\n * SideNavbarToggle Component\n *\n * A flexible toggle button for collapsing/expanding the SideNavbar.\n * Supports custom icons, multiple positions, and variants.\n *\n * @example\n * ```tsx\n * // Default usage (with PanelLeft icons)\n * <SideNavbar.Toggle />\n *\n * // Custom icons\n * <SideNavbar.Toggle\n *   icon={(collapsed) => collapsed ? <ChevronRight /> : <ChevronLeft />}\n * />\n *\n * // Or separate icons\n * <SideNavbar.Toggle\n *   expandIcon={<ChevronRight />}\n *   collapseIcon={<ChevronLeft />}\n * />\n *\n * // Inside navigation\n * <SideNavbar.Navbar>\n *   <NavItems />\n *   <SideNavbar.Toggle position=\"navigation-bottom\" variant=\"ghost\" />\n * </SideNavbar.Navbar>\n * ```\n */\nexport default function SideNavbarToggle({\n  position = \"floating\",\n  offset,\n  icon,\n  expandIcon,\n  collapseIcon,\n  size = \"sm\",\n  variant = \"default\",\n  showTooltip = true,\n  tooltipPosition: tooltipPositionOverride,\n  keyboardShortcut: keyboardShortcutOverride,\n  enableKeyboardShortcut: enableKeyboardShortcutOverride,\n  className = \"\",\n  style,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SideNavbarToggleProps) {\n  const { collapsed, toggle } = useSideNavbarStateRequired();\n  const { animationDuration, animationEasing } = useSideNavbarThemeRequired();\n  const config = useSideNavbarConfigRequired();\n\n  // Use config values as defaults, allow prop overrides\n  const keyboardShortcut = keyboardShortcutOverride ?? config.keyboardShortcut;\n  const enableKeyboardShortcut =\n    enableKeyboardShortcutOverride ?? config.enableKeyboardShortcut;\n\n  // Render icon logic\n  const renderIcon = () => {\n    // Custom render function\n    if (typeof icon === \"function\") {\n      return icon(collapsed);\n    }\n\n    // Static custom icon\n    if (icon) {\n      return icon;\n    }\n\n    // Separate expand/collapse icons\n    if (collapsed && expandIcon) {\n      return expandIcon;\n    }\n    if (!collapsed && collapseIcon) {\n      return collapseIcon;\n    }\n\n    // Default Lucide icons - sem animação de transform\n    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;\n    return (\n      <Icon\n        className={iconSizeClasses[size]}\n        style={{\n          transition: \"none\",\n          transform: \"none\",\n          willChange: \"auto\",\n        }}\n      />\n    );\n  };\n\n  const defaultAriaLabel = collapsed ? \"Expand sidebar\" : \"Collapse sidebar\";\n  const tooltipPosition =\n    tooltipPositionOverride ?? tooltipPositionMap[position];\n\n  const tooltipContent = showTooltip\n    ? `${collapsed ? \"Expand\" : \"Collapse\"} sidebar${enableKeyboardShortcut ? ` (${keyboardShortcut})` : \"\"}`\n    : undefined;\n\n  // Calculate offset styles\n  const offsetStyle = offset\n    ? {\n        transform: `translate(${offset.x ?? 0}px, ${offset.y ?? 0}px)`,\n      }\n    : {};\n\n  // Edge-following toggle positioning (right edge of sidebar)\n  // The toggle is now positioned in SideNavbarRoot (at <aside> level), not in <nav>\n  // This means it's positioned relative to the entire sidebar, not just the navbar\n  // When collapsed: sidebar width = nav width, toggle at right edge\n  // When expanded: sidebar width = nav + content, toggle at right edge of full sidebar\n  // Position: right edge of sidebar, aligned with first navbar item (home icon)\n  // The toggle will automatically follow the sidebar's width when resized\n  const edgeFollowingStyle =\n    position === \"floating\"\n      ? {\n          // Toggle sempre na borda direita da sidebar completa (<aside>)\n          // O <aside> é o container pai, então right: -12px sempre posiciona na borda direita da sidebar\n          // Isso faz o toggle acompanhar o resize da sidebar automaticamente\n          right: \"-12px\",\n          // Posicionar na mesma altura do primeiro ícone (home)\n          // Usando 1rem (16px) para melhor alinhamento com o primeiro item\n          // Considerando p-2 (8px) + gap-2 (8px) + metade do primeiro item = ~16px\n          top: \"1rem\",\n          transform: \"translateY(-50%)\",\n          // Transição suave para acompanhar o resize da sidebar\n          transition: `right ${animationDuration}ms ${animationEasing}`,\n          ...offsetStyle,\n        }\n      : offsetStyle;\n\n  const button = (\n    <button\n      type=\"button\"\n      onClick={toggle}\n      className={`\n        ${sizeClasses[size]}\n        ${variantClasses[variant]}\n        ${getRadiusClass(\"full\")}\n        flex items-center justify-center\n        text-fg-secondary hover:text-fg-primary\n        focus:outline-none focus:ring-2 focus:ring-line-focus focus:ring-offset-1\n        ${position === \"floating\" ? \"\" : positionClasses[position]}\n        ${className}\n      `}\n      style={{\n        ...(position === \"floating\"\n          ? {\n              position: \"absolute\", // Absolute within the floating wrapper\n              // The custom wrapper is at sidebar's content edge (right: 0 = 319px, sidebar has 1px border)\n              // The Tooltip wrapper (div.static.inline-block) is inside the custom wrapper and doesn't interfere\n              // Position button so its RIGHT edge is 12px outside sidebar's border edge\n              // Sidebar border edge: 320px, desired right edge: 320 - 12 = 308px\n              // Button width: 24px, so left edge should be: 308 - 24 = 284px\n              // Wrapper is at content edge (319px), so button right should be: 319 - (320 - 308) = 307px\n              // But we want right edge at 308px, so: right = -12px - 1px (border) = -13px\n              // Actually, if wrapper is at 319px and we want button right at 308px: 319 - 308 = 11px offset\n              // So: right = -11px (but this positions right edge at 319 - 11 = 308px ✓)\n              right: \"-11px\", // Position button's right edge 11px outside wrapper (319px) = 308px (12px outside sidebar border)\n              left: \"auto\", // Ensure left doesn't interfere\n            }\n          : {}),\n        ...(position !== \"floating\" ? edgeFollowingStyle : {}),\n        ...(position === \"floating\"\n          ? { zIndex: Z_INDEX_TOKENS.fixed.value }\n          : {}), // Ensure z-index is applied inline for floating position\n        ...style,\n      }}\n      aria-label={ariaLabel || defaultAriaLabel}\n      aria-expanded={!collapsed}\n      aria-controls=\"side-navbar-sidebar\"\n      data-position={position}\n      {...props}\n    >\n      {renderIcon()}\n    </button>\n  );\n\n  // For floating position, wrap in a container positioned relative to the sidebar (<aside>)\n  // This ensures the toggle is always at the right edge of the entire sidebar, not just the nav\n  // The toggle will automatically follow the sidebar's width when resized\n  // The toggle should be positioned 12px outside the sidebar edge (half button width for visual balance)\n  if (position === \"floating\") {\n    // Create a wrapper that positions the toggle at the sidebar's right edge\n    // The wrapper is positioned at sidebar's right edge (<aside>), and the button is positioned 12px outside\n    const floatingButton =\n      showTooltip && tooltipContent ? (\n        <Tooltip\n          content={tooltipContent}\n          position={tooltipPosition}\n          preservePositioning={true}\n        >\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      );\n\n    return (\n      <div\n        style={{\n          position: \"absolute\",\n          right: \"0\", // Align to sidebar's content edge (319px with 1px border)\n          // Note: sidebar has box-sizing: border-box, so right: 0 positions at content edge\n          // We compensate by adjusting the button's right value\n          top: \"1rem\",\n          transform: \"translateY(-50%)\",\n          zIndex: Z_INDEX_TOKENS.fixed.value,\n        }}\n      >\n        {floatingButton}\n      </div>\n    );\n  }\n\n  if (showTooltip && tooltipContent) {\n    return (\n      <Tooltip content={tooltipContent} position={tooltipPosition}>\n        {button}\n      </Tooltip>\n    );\n  }\n\n  return button;\n}\n"],"names":["sizeClasses","iconSizeClasses","positionClasses","getZIndexClass","getSpacingClass","variantClasses","getShadowClass","tooltipPositionMap","SideNavbarToggle","_a","_b","position","offset","icon","expandIcon","collapseIcon","size","variant","showTooltip","tooltipPositionOverride","keyboardShortcutOverride","enableKeyboardShortcutOverride","className","style","ariaLabel","props","__objRest","collapsed","toggle","useSideNavbarStateRequired","animationDuration","animationEasing","useSideNavbarThemeRequired","config","useSideNavbarConfigRequired","keyboardShortcut","enableKeyboardShortcut","renderIcon","jsx","PanelLeftOpen","PanelLeftClose","defaultAriaLabel","tooltipPosition","tooltipContent","offsetStyle","edgeFollowingStyle","__spreadValues","button","__spreadProps","getRadiusClass","Z_INDEX_TOKENS","floatingButton","Tooltip"],"mappings":"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"}

package/dist/granular/ui/components/SideNavbar/components/Sidebar/Sidebar.js

@@ -0,0 +1,108 @@
+"use client";
+var k = Object.defineProperty, A = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var F = (e, t, o) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, c = (e, t) => {
+  for (var o in t || (t = {}))
+    y.call(t, o) && F(e, o, t[o]);
+  if (n)
+    for (var o of n(t))
+      C.call(t, o) && F(e, o, t[o]);
+  return e;
+}, P = (e, t) => A(e, E(t));
+var G = (e, t) => {
+  var o = {};
+  for (var r in e)
+    y.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && n)
+    for (var r of n(e))
+      t.indexOf(r) < 0 && C.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import { jsx as M } from "react/jsx-runtime";
+import { useRef as V, useState as l, useCallback as d, useMemo as $ } from "react";
+import { SidebarContext as z } from "../../contexts/SidebarContext.js";
+import { useSideNavbarStateRequired as B } from "../../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as I } from "../../contexts/SideNavbarThemeContext.js";
+import J from "./SidebarHeader.js";
+import K from "./SidebarContent.js";
+import L from "./SidebarFooter.js";
+import O from "./SidebarGroup.js";
+import { SidebarSlot as Q } from "./SidebarSlot.js";
+import { SidebarSlotContent as U } from "./SidebarSlotContent.js";
+import { parseWidthToPixels as R } from "../../utils/parseWidth.js";
+import { cn as X } from "../../../../utils/cn.js";
+function s(Y) {
+  var m = Y, { children: e, className: t = "", style: o } = m, r = G(m, ["children", "className", "style"]);
+  const i = B(), a = I(), u = V(null), [p, T] = l(0), [f, b] = l(!1), [h, S] = l(!1), [v, w] = l(null), W = d(() => b(!0), []), g = d(() => b(!1), []), H = d(() => S(!0), []), x = d(() => S(!1), []), N = $(
+    () => ({
+      // Inherited from root
+      collapsed: i.collapsed,
+      currentWidth: i.currentWidth,
+      isMobile: i.isMobile,
+      // Sidebar-specific
+      sidebarRef: u,
+      scrollPosition: p,
+      setScrollPosition: T,
+      hasHeader: f,
+      hasFooter: h,
+      registerHeader: W,
+      unregisterHeader: g,
+      registerFooter: H,
+      unregisterFooter: x,
+      activeGroup: v,
+      setActiveGroup: w
+    }),
+    [
+      i.collapsed,
+      i.currentWidth,
+      i.isMobile,
+      p,
+      f,
+      h,
+      W,
+      g,
+      H,
+      x,
+      v
+    ]
+  ), q = R(a.contentWidth), D = R(a.navigationWidth), j = q - D;
+  return /* @__PURE__ */ M(z.Provider, { value: N, children: /* @__PURE__ */ M(
+    "div",
+    P(c({
+      ref: u,
+      className: X(
+        "flex",
+        "flex-col",
+        "h-full",
+        "bg-surface-subtle",
+        "border-r",
+        "border-line-default",
+        "overflow-hidden",
+        t
+      ),
+      style: c({
+        width: i.collapsed ? 0 : j,
+        opacity: i.collapsed ? 0 : 1,
+        visibility: i.collapsed ? "hidden" : "visible",
+        transitionProperty: "width, opacity, visibility",
+        transitionDuration: `${a.animationDuration}ms`,
+        transitionTimingFunction: a.animationEasing
+      }, o),
+      "aria-hidden": i.collapsed
+    }, r), {
+      children: e
+    })
+  ) });
+}
+s.Header = J;
+s.Content = K;
+s.Footer = L;
+s.Group = O;
+s.Slot = Q;
+s.SlotContent = U;
+export {
+  s as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/granular/ui/components/SideNavbar/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/Sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useMemo, useCallback } from \"react\";\nimport { SidebarContext } from \"../../contexts/SidebarContext\";\nimport { useSideNavbarStateRequired } from \"../../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../../contexts/SideNavbarThemeContext\";\nimport { parseWidthToPixels } from \"../../utils\";\nimport type { SidebarProps, SidebarContextValue } from \"../../types\";\nimport SidebarHeader from \"./SidebarHeader\";\nimport SidebarContent from \"./SidebarContent\";\nimport SidebarFooter from \"./SidebarFooter\";\nimport SidebarGroup from \"./SidebarGroup\";\nimport { SidebarSlot } from \"./SidebarSlot\";\nimport { SidebarSlotContent } from \"./SidebarSlotContent\";\nimport { cn } from \"../../../../utils\";\n\n/**\n * Sidebar subcomponent for SideNavbar\n *\n * Provides its own context that inherits from the root SideNavbar context.\n * Contains the expandable content area with header, content, and footer.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar>\n *   <SideNavbar.Sidebar.Header title=\"Dashboard\" />\n *   <SideNavbar.Sidebar.Content>\n *     <SideNavbar.Sidebar.Group id=\"filters\" title=\"Filters\">\n *       <FilterList />\n *     </SideNavbar.Sidebar.Group>\n *   </SideNavbar.Sidebar.Content>\n *   <SideNavbar.Sidebar.Footer>\n *     <Button>Apply</Button>\n *   </SideNavbar.Sidebar.Footer>\n * </SideNavbar.Sidebar>\n * ```\n */\nfunction Sidebar({ children, className = \"\", style, ...props }: SidebarProps) {\n  const rootState = useSideNavbarStateRequired();\n  const rootTheme = useSideNavbarThemeRequired();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [hasHeader, setHasHeader] = useState(false);\n  const [hasFooter, setHasFooter] = useState(false);\n  const [activeGroup, setActiveGroup] = useState<string | null>(null);\n\n  const registerHeader = useCallback(() => setHasHeader(true), []);\n  const unregisterHeader = useCallback(() => setHasHeader(false), []);\n  const registerFooter = useCallback(() => setHasFooter(true), []);\n  const unregisterFooter = useCallback(() => setHasFooter(false), []);\n\n  const contextValue: SidebarContextValue = useMemo(\n    () => ({\n      // Inherited from root\n      collapsed: rootState.collapsed,\n      currentWidth: rootState.currentWidth,\n      isMobile: rootState.isMobile,\n      // Sidebar-specific\n      sidebarRef,\n      scrollPosition,\n      setScrollPosition,\n      hasHeader,\n      hasFooter,\n      registerHeader,\n      unregisterHeader,\n      registerFooter,\n      unregisterFooter,\n      activeGroup,\n      setActiveGroup,\n    }),\n    [\n      rootState.collapsed,\n      rootState.currentWidth,\n      rootState.isMobile,\n      scrollPosition,\n      hasHeader,\n      hasFooter,\n      registerHeader,\n      unregisterHeader,\n      registerFooter,\n      unregisterFooter,\n      activeGroup,\n    ],\n  );\n\n  // Calculate sidebar width (total width minus navigation width)\n  const totalWidth = parseWidthToPixels(rootTheme.contentWidth);\n  const navWidth = parseWidthToPixels(rootTheme.navigationWidth);\n  const sidebarWidth = totalWidth - navWidth;\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      {/* This inner container was previously an `<aside>` — a second\n       * landmark nested inside SideNavbarRoot's outer `<aside\n       * role=\"complementary\" aria-label=\"Sidebar navigation\">`. axe\n       * `landmark-complementary-is-top-level` flagged it across all 20+\n       * SideNavbar stories. The outer aside already provides the\n       * landmark; this inner div is purely a layout container for the\n       * collapsible content area. */}\n      <div\n        ref={sidebarRef}\n        className={cn(\n          \"flex\",\n          \"flex-col\",\n          \"h-full\",\n          \"bg-surface-subtle\",\n          \"border-r\",\n          \"border-line-default\",\n          \"overflow-hidden\",\n          className,\n        )}\n        style={{\n          width: rootState.collapsed ? 0 : sidebarWidth,\n          opacity: rootState.collapsed ? 0 : 1,\n          visibility: rootState.collapsed ? \"hidden\" : \"visible\",\n          transitionProperty: \"width, opacity, visibility\",\n          transitionDuration: `${rootTheme.animationDuration}ms`,\n          transitionTimingFunction: rootTheme.animationEasing,\n          ...style,\n        }}\n        aria-hidden={rootState.collapsed}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\n// Attach compound components\nSidebar.Header = SidebarHeader;\nSidebar.Content = SidebarContent;\nSidebar.Footer = SidebarFooter;\nSidebar.Group = SidebarGroup;\n// Slot components (exclusive to Sidebar, not Navbar)\nSidebar.Slot = SidebarSlot;\nSidebar.SlotContent = SidebarSlotContent;\n\nexport default Sidebar;\n"],"names":["Sidebar","_a","_b","children","className","style","props","__objRest","rootState","useSideNavbarStateRequired","rootTheme","useSideNavbarThemeRequired","sidebarRef","useRef","scrollPosition","setScrollPosition","useState","hasHeader","setHasHeader","hasFooter","setHasFooter","activeGroup","setActiveGroup","registerHeader","useCallback","unregisterHeader","registerFooter","unregisterFooter","contextValue","useMemo","totalWidth","parseWidthToPixels","navWidth","sidebarWidth","jsx","SidebarContext","__spreadProps","__spreadValues","cn","SidebarHeader","SidebarContent","SidebarFooter","SidebarGroup","SidebarSlot","SidebarSlotContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAASA,EAAQC,GAA6D;AAA7D,MAAAC,IAAAD,GAAE,YAAAE,GAAU,WAAAC,IAAY,IAAI,OAAAC,MAA5BH,GAAsCI,IAAAC,EAAtCL,GAAsC,CAApC,YAAU,aAAgB;AAC3C,QAAMM,IAAYC,EAAA,GACZC,IAAYC,EAAA,GACZC,IAAaC,EAAuB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAChD,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1C,CAACK,GAAaC,CAAc,IAAIN,EAAwB,IAAI,GAE5DO,IAAiBC,EAAY,MAAMN,EAAa,EAAI,GAAG,CAAA,CAAE,GACzDO,IAAmBD,EAAY,MAAMN,EAAa,EAAK,GAAG,CAAA,CAAE,GAC5DQ,IAAiBF,EAAY,MAAMJ,EAAa,EAAI,GAAG,CAAA,CAAE,GACzDO,IAAmBH,EAAY,MAAMJ,EAAa,EAAK,GAAG,CAAA,CAAE,GAE5DQ,IAAoCC;AAAA,IACxC,OAAO;AAAA;AAAA,MAEL,WAAWrB,EAAU;AAAA,MACrB,cAAcA,EAAU;AAAA,MACxB,UAAUA,EAAU;AAAA;AAAA,MAEpB,YAAAI;AAAA,MACA,gBAAAE;AAAA,MACA,mBAAAC;AAAA,MACA,WAAAE;AAAA,MACA,WAAAE;AAAA,MACA,gBAAAI;AAAA,MACA,kBAAAE;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,aAAAN;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEd,EAAU;AAAA,MACVA,EAAU;AAAA,MACVA,EAAU;AAAA,MACVM;AAAA,MACAG;AAAA,MACAE;AAAA,MACAI;AAAA,MACAE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAN;AAAA,IAAA;AAAA,EACF,GAIIS,IAAaC,EAAmBrB,EAAU,YAAY,GACtDsB,IAAWD,EAAmBrB,EAAU,eAAe,GACvDuB,IAAeH,IAAaE;AAElC,SACE,gBAAAE,EAACC,EAAe,UAAf,EAAwB,OAAOP,GAQ9B,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAAE,EAAAC,EAAA;AAAA,MACC,KAAKzB;AAAA,MACL,WAAW0B;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAlC;AAAA,MAAA;AAAA,MAEF,OAAOiC,EAAA;AAAA,QACL,OAAO7B,EAAU,YAAY,IAAIyB;AAAA,QACjC,SAASzB,EAAU,YAAY,IAAI;AAAA,QACnC,YAAYA,EAAU,YAAY,WAAW;AAAA,QAC7C,oBAAoB;AAAA,QACpB,oBAAoB,GAAGE,EAAU,iBAAiB;AAAA,QAClD,0BAA0BA,EAAU;AAAA,SACjCL;AAAA,MAEL,eAAaG,EAAU;AAAA,OACnBF,IAtBL;AAAA,MAwBE,UAAAH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAGAH,EAAQ,SAASuC;AACjBvC,EAAQ,UAAUwC;AAClBxC,EAAQ,SAASyC;AACjBzC,EAAQ,QAAQ0C;AAEhB1C,EAAQ,OAAO2C;AACf3C,EAAQ,cAAc4C;"}

package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarContent.js

@@ -0,0 +1,71 @@
+"use client";
+var w = Object.defineProperty, g = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var e = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var i = (o, r, t) => r in o ? w(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t, n = (o, r) => {
+  for (var t in r || (r = {}))
+    a.call(r, t) && i(o, t, r[t]);
+  if (e)
+    for (var t of e(r))
+      d.call(r, t) && i(o, t, r[t]);
+  return o;
+}, f = (o, r) => g(o, y(r));
+var m = (o, r) => {
+  var t = {};
+  for (var l in o)
+    a.call(o, l) && r.indexOf(l) < 0 && (t[l] = o[l]);
+  if (o != null && e)
+    for (var l of e(o))
+      r.indexOf(l) < 0 && d.call(o, l) && (t[l] = o[l]);
+  return t;
+};
+import { jsx as T } from "react/jsx-runtime";
+import { useSidebarRequired as E } from "../../contexts/SidebarContext.js";
+import { SIDEBAR_TOKENS as s } from "../../../../tokens/sidebar.js";
+import { getSpacingClass as I } from "../../../../tokens/spacing.js";
+function B(N) {
+  var c = N, {
+    scrollable: o = !0,
+    padding: r = "md",
+    children: t,
+    className: l = "",
+    style: u
+  } = c, p = m(c, [
+    "scrollable",
+    "padding",
+    "children",
+    "className",
+    "style"
+  ]);
+  const { collapsed: S, setScrollPosition: b } = E();
+  if (S)
+    return null;
+  const h = r !== "none" ? I(r, "p") : "", v = o ? "overflow-y-auto overflow-x-hidden" : "overflow-hidden", x = o ? {
+    scrollbarWidth: s.content.scrollbar.width,
+    scrollbarColor: `${s.content.scrollbar.color.thumb} ${s.content.scrollbar.color.track}`
+  } : {}, C = ($) => {
+    o && b($.currentTarget.scrollTop);
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    f(n({
+      className: `
+        flex-1
+        min-h-0
+        ${v}
+        ${h}
+        ${l}
+      `,
+      style: n(n({}, x), u),
+      onScroll: C,
+      tabIndex: o ? 0 : void 0
+    }, p), {
+      children: t
+    })
+  );
+}
+export {
+  B as default
+};
+//# sourceMappingURL=SidebarContent.js.map

package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContent.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarContent.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { useSidebarRequired } from \"../../contexts/SidebarContext\";\nimport { getSpacingClass } from \"../../../../tokens\";\nimport { SIDEBAR_TOKENS } from \"../../../../tokens/sidebar\";\nimport type { SidebarContentProps } from \"../../types\";\n\n/**\n * Content component for the Sidebar subcomponent\n *\n * The main scrollable area of the sidebar.\n * Supports configurable padding and scroll tracking.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar.Content padding=\"md\" scrollable>\n *   <SideNavbar.Sidebar.Group id=\"filters\" title=\"Filters\">\n *     <FilterList />\n *   </SideNavbar.Sidebar.Group>\n * </SideNavbar.Sidebar.Content>\n * ```\n */\nexport default function SidebarContent({\n  scrollable = true,\n  padding = \"md\",\n  children,\n  className = \"\",\n  style,\n  ...props\n}: SidebarContentProps) {\n  const { collapsed, setScrollPosition } = useSidebarRequired();\n\n  if (collapsed) {\n    return null;\n  }\n\n  const paddingClass = padding !== \"none\" ? getSpacingClass(padding, \"p\") : \"\";\n\n  const scrollClasses = scrollable\n    ? \"overflow-y-auto overflow-x-hidden\"\n    : \"overflow-hidden\";\n\n  const scrollbarStyles = scrollable\n    ? {\n        scrollbarWidth: SIDEBAR_TOKENS.content.scrollbar.width as \"thin\",\n        scrollbarColor: `${SIDEBAR_TOKENS.content.scrollbar.color.thumb} ${SIDEBAR_TOKENS.content.scrollbar.color.track}`,\n      }\n    : {};\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    if (scrollable) {\n      setScrollPosition(e.currentTarget.scrollTop);\n    }\n  };\n\n  return (\n    <div\n      className={`\n        flex-1\n        min-h-0\n        ${scrollClasses}\n        ${paddingClass}\n        ${className}\n      `}\n      style={{\n        ...scrollbarStyles,\n        ...style,\n      }}\n      onScroll={handleScroll}\n      // Defensive `tabIndex={0}` on the scrollable container so keyboard\n      // users can enter the region and scroll with arrow keys. Required\n      // by axe `scrollable-region-focusable` (serious) whenever the\n      // content inside doesn't include focusable elements (the\n      // LongContent story rendered plain text with no actionable items;\n      // a keyboard user had no way to reach the scrollbar). When the\n      // content DOES include focusable elements axe is also satisfied,\n      // so the attribute is harmless then. Only set when scrollable\n      // (a non-scrollable container has no region to enter).\n      tabIndex={scrollable ? 0 : undefined}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["SidebarContent","_a","_b","scrollable","padding","children","className","style","props","__objRest","collapsed","setScrollPosition","useSidebarRequired","paddingClass","getSpacingClass","scrollClasses","scrollbarStyles","SIDEBAR_TOKENS","handleScroll","e","jsx","__spreadProps","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAwBA,EAAeC,GAOf;AAPe,MAAAC,IAAAD,GACrC;AAAA,gBAAAE,IAAa;AAAA,IACb,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,MALqCL,GAMlCM,IAAAC,EANkCP,GAMlC;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,WAAAQ,GAAW,mBAAAC,EAAA,IAAsBC,EAAA;AAEzC,MAAIF;AACF,WAAO;AAGT,QAAMG,IAAeT,MAAY,SAASU,EAAgBV,GAAS,GAAG,IAAI,IAEpEW,IAAgBZ,IAClB,sCACA,mBAEEa,IAAkBb,IACpB;AAAA,IACE,gBAAgBc,EAAe,QAAQ,UAAU;AAAA,IACjD,gBAAgB,GAAGA,EAAe,QAAQ,UAAU,MAAM,KAAK,IAAIA,EAAe,QAAQ,UAAU,MAAM,KAAK;AAAA,EAAA,IAEjH,CAAA,GAEEC,IAAe,CAACC,MAAqC;AACzD,IAAIhB,KACFQ,EAAkBQ,EAAE,cAAc,SAAS;AAAA,EAE/C;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGPP,CAAa;AAAA,UACbF,CAAY;AAAA,UACZP,CAAS;AAAA;AAAA,MAEb,OAAOgB,IAAA,IACFN,IACAT;AAAA,MAEL,UAAUW;AAAA,MAUV,UAAUf,IAAa,IAAI;AAAA,OACvBK,IAvBL;AAAA,MAyBE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarFooter.js

@@ -0,0 +1,64 @@
+"use client";
+var F = Object.defineProperty, S = Object.defineProperties;
+var $ = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var l = (e, r, t) => r in e ? F(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, d = (e, r) => {
+  for (var t in r || (r = {}))
+    a.call(r, t) && l(e, t, r[t]);
+  if (s)
+    for (var t of s(r))
+      f.call(r, t) && l(e, t, r[t]);
+  return e;
+}, m = (e, r) => S(e, $(r));
+var c = (e, r) => {
+  var t = {};
+  for (var o in e)
+    a.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && s)
+    for (var o of s(e))
+      r.indexOf(o) < 0 && f.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import { jsx as C } from "react/jsx-runtime";
+import { useEffect as h } from "react";
+import { useSidebarRequired as j } from "../../contexts/SidebarContext.js";
+import { getSpacingClass as k } from "../../../../tokens/spacing.js";
+function y(q) {
+  var i = q, {
+    padding: e = "md",
+    showBorder: r = !0,
+    children: t,
+    className: o = "",
+    style: p
+  } = i, b = c(i, [
+    "padding",
+    "showBorder",
+    "children",
+    "className",
+    "style"
+  ]);
+  const { collapsed: g, registerFooter: n, unregisterFooter: u } = j();
+  if (h(() => (n(), () => u()), [n, u]), g)
+    return null;
+  const x = e !== "none" ? k(e, "p") : "";
+  return /* @__PURE__ */ C(
+    "div",
+    m(d({
+      className: `
+        flex-shrink-0
+        ${x}
+        ${r ? "border-t border-line-default" : ""}
+        bg-surface-subtle
+        ${o}
+      `,
+      style: p
+    }, b), {
+      children: t
+    })
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=SidebarFooter.js.map

package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useSidebarRequired } from \"../../contexts/SidebarContext\";\nimport { getSpacingClass } from \"../../../../tokens\";\nimport type { SidebarFooterProps } from \"../../types\";\n\n/**\n * Footer component for the Sidebar subcomponent\n *\n * Displays content at the bottom of the sidebar.\n * Automatically registers its presence with the Sidebar context.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar.Footer>\n *   <Button variant=\"primary\">Apply Changes</Button>\n * </SideNavbar.Sidebar.Footer>\n * ```\n */\nexport default function SidebarFooter({\n  padding = \"md\",\n  showBorder = true,\n  children,\n  className = \"\",\n  style,\n  ...props\n}: SidebarFooterProps) {\n  const { collapsed, registerFooter, unregisterFooter } = useSidebarRequired();\n\n  // Register footer presence with Sidebar context\n  useEffect(() => {\n    registerFooter();\n    return () => unregisterFooter();\n  }, [registerFooter, unregisterFooter]);\n\n  if (collapsed) {\n    return null;\n  }\n\n  const paddingClass = padding !== \"none\" ? getSpacingClass(padding, \"p\") : \"\";\n\n  return (\n    <div\n      className={`\n        flex-shrink-0\n        ${paddingClass}\n        ${showBorder ? \"border-t border-line-default\" : \"\"}\n        bg-surface-subtle\n        ${className}\n      `}\n      style={style}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["SidebarFooter","_a","_b","padding","showBorder","children","className","style","props","__objRest","collapsed","registerFooter","unregisterFooter","useSidebarRequired","useEffect","paddingClass","getSpacingClass","jsx","__spreadProps","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAwBA,EAAcC,GAOf;AAPe,MAAAC,IAAAD,GACpC;AAAA,aAAAE,IAAU;AAAA,IACV,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,MALoCL,GAMjCM,IAAAC,EANiCP,GAMjC;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,WAAAQ,GAAW,gBAAAC,GAAgB,kBAAAC,EAAA,IAAqBC,EAAA;AAQxD,MALAC,EAAU,OACRH,EAAA,GACO,MAAMC,EAAA,IACZ,CAACD,GAAgBC,CAAgB,CAAC,GAEjCF;AACF,WAAO;AAGT,QAAMK,IAAeZ,MAAY,SAASa,EAAgBb,GAAS,GAAG,IAAI;AAE1E,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEPJ,CAAY;AAAA,UACZX,IAAa,iCAAiC,EAAE;AAAA;AAAA,UAEhDE,CAAS;AAAA;AAAA,MAEb,OAAAC;AAAA,OACIC,IATL;AAAA,MAWE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarGroup.js

@@ -0,0 +1,141 @@
+"use client";
+var A = Object.defineProperty, z = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, r, t) => r in e ? A(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, N = (e, r) => {
+  for (var t in r || (r = {}))
+    h.call(r, t) && g(e, t, r[t]);
+  if (n)
+    for (var t of n(r))
+      b.call(r, t) && g(e, t, r[t]);
+  return e;
+}, y = (e, r) => z(e, E(r));
+var S = (e, r) => {
+  var t = {};
+  for (var s in e)
+    h.call(e, s) && r.indexOf(s) < 0 && (t[s] = e[s]);
+  if (e != null && n)
+    for (var s of n(e))
+      r.indexOf(s) < 0 && b.call(e, s) && (t[s] = e[s]);
+  return t;
+};
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useRef as H, useEffect as I } from "react";
+import { ChevronDown as T } from "lucide-react";
+import { useSidebarRequired as B } from "../../contexts/SidebarContext.js";
+import { useSideNavbarStateRequired as F } from "../../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as J } from "../../contexts/SideNavbarThemeContext.js";
+import K from "../../../../primitives/Collapsible/Collapsible.js";
+import { getSpacingClass as a } from "../../../../tokens/spacing.js";
+function Z(L) {
+  var p = L, {
+    id: e,
+    title: r,
+    icon: t,
+    actions: s,
+    collapsible: o = !0,
+    defaultCollapsed: c = !1,
+    children: f,
+    className: C = ""
+  } = p, w = S(p, [
+    "id",
+    "title",
+    "icon",
+    "actions",
+    "collapsible",
+    "defaultCollapsed",
+    "children",
+    "className"
+  ]);
+  var $;
+  const {
+    collapsed: G,
+    activeGroup: R,
+    setActiveGroup: j
+  } = B(), { groupStates: u, toggleGroup: q, setGroupCollapsed: l } = F(), { animationDuration: v } = J(), x = H(!1);
+  if (I(() => {
+    !x.current && u[e] === void 0 && (x.current = !0, l(e, c));
+  }, [e, c, u, l]), G)
+    return null;
+  const d = ($ = u[e]) != null ? $ : c, D = R === e, k = () => {
+    j(e), o && q(e);
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    y(N({
+      className: `
+        border-b
+        border-line-default
+        last:border-b-0
+        ${C}
+      `
+    }, w), {
+      children: [
+        r && /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            onClick: k,
+            className: `
+            flex
+            items-center
+            justify-between
+            w-full
+            ${a("md", "px")}
+            ${a("2.5", "py")}
+            text-left
+            transition-colors
+            duration-150
+            ${D ? "bg-surface-active" : "hover:bg-surface-active"}
+            ${o ? "cursor-pointer" : "cursor-default"}
+          `,
+            "aria-expanded": o ? !d : void 0,
+            "aria-controls": o ? `sidebar-group-${e}` : void 0,
+            children: [
+              /* @__PURE__ */ m("div", { className: `flex items-center ${a("sm", "gap")}`, children: [
+                t && /* @__PURE__ */ i("span", { className: "w-4 h-4 text-fg-tertiary", children: t }),
+                /* @__PURE__ */ i("span", { className: "text-sm font-medium text-fg-secondary", children: r })
+              ] }),
+              /* @__PURE__ */ m("div", { className: `flex items-center ${a("sm", "gap")}`, children: [
+                s,
+                o && /* @__PURE__ */ i(
+                  T,
+                  {
+                    className: `
+                  w-4
+                  h-4
+                  text-fg-tertiary
+                  transition-transform
+                  ${d ? "-rotate-90" : "rotate-0"}
+                `,
+                    style: { transitionDuration: `${v}ms` },
+                    "aria-hidden": "true"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        o ? /* @__PURE__ */ i(K, { open: !d, duration: v, children: /* @__PURE__ */ i(
+          "div",
+          {
+            id: `sidebar-group-${e}`,
+            className: `${a("md", "px")} ${a("sm", "py")}`,
+            children: f
+          }
+        ) }) : /* @__PURE__ */ i(
+          "div",
+          {
+            className: `${a("md", "px")} ${a("sm", "py")}`,
+            children: f
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  Z as default
+};
+//# sourceMappingURL=SidebarGroup.js.map