@fabio.caffarello/react-design-system 3.7.0 → 3.9.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useSidebarRequired } from \"../../contexts/SidebarContext\";\nimport { useSideNavbarStateRequired } from \"../../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../../contexts/SideNavbarThemeContext\";\nimport Collapsible from \"../../../../primitives/Collapsible/Collapsible\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport type { SidebarGroupProps } from \"../../types\";\n\n/**\n * Group component for the Sidebar subcomponent\n *\n * Creates a collapsible section within the sidebar content.\n * State is managed by the root SideNavbar context.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar.Group\n *   id=\"filters\"\n *   title=\"Filters\"\n *   icon={<Filter />}\n *   collapsible\n * >\n *   <FilterList />\n * </SideNavbar.Sidebar.Group>\n * ```\n */\nexport default function SidebarGroup({\n  id,\n  title,\n  icon,\n  actions,\n  collapsible = true,\n  defaultCollapsed = false,\n  children,\n  className = \"\",\n  ...props\n}: SidebarGroupProps) {\n  const {\n    collapsed: sidebarCollapsed,\n    activeGroup,\n    setActiveGroup,\n  } = useSidebarRequired();\n  const { groupStates, toggleGroup, setGroupCollapsed } =\n    useSideNavbarStateRequired();\n  const { animationDuration } = useSideNavbarThemeRequired();\n  const hasInitialized = useRef(false);\n\n  // Initialize group state on mount (only once)\n  useEffect(() => {\n    if (!hasInitialized.current && groupStates[id] === undefined) {\n      hasInitialized.current = true;\n      setGroupCollapsed(id, defaultCollapsed);\n    }\n  }, [id, defaultCollapsed, groupStates, setGroupCollapsed]);\n\n  // Don't render if sidebar is collapsed\n  if (sidebarCollapsed) {\n    return null;\n  }\n\n  const isCollapsed = groupStates[id] ?? defaultCollapsed;\n  const isActive = activeGroup === id;\n\n  const handleHeaderClick = () => {\n    setActiveGroup(id);\n    if (collapsible) {\n      toggleGroup(id);\n    }\n  };\n\n  return (\n    <div\n      className={`\n        border-b\n        border-line-default\n        last:border-b-0\n        ${className}\n      `}\n      {...props}\n    >\n      {title && (\n        <button\n          type=\"button\"\n          onClick={handleHeaderClick}\n          className={`\n            flex\n            items-center\n            justify-between\n            w-full\n            ${getSpacingClass(\"md\", \"px\")}\n            ${getSpacingClass(\"2.5\", \"py\")}\n            text-left\n            transition-colors\n            duration-150\n            ${isActive ? \"bg-surface-active\" : \"hover:bg-surface-active\"}\n            ${!collapsible ? \"cursor-default\" : \"cursor-pointer\"}\n          `}\n          aria-expanded={collapsible ? !isCollapsed : undefined}\n          aria-controls={collapsible ? `sidebar-group-${id}` : undefined}\n        >\n          <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n            {icon && <span className=\"w-4 h-4 text-fg-tertiary\">{icon}</span>}\n            <span className=\"text-sm font-medium text-fg-secondary\">\n              {title}\n            </span>\n          </div>\n          <div className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}>\n            {actions}\n            {collapsible && (\n              <ChevronDown\n                className={`\n                  w-4\n                  h-4\n                  text-fg-tertiary\n                  transition-transform\n                  ${isCollapsed ? \"-rotate-90\" : \"rotate-0\"}\n                `}\n                style={{ transitionDuration: `${animationDuration}ms` }}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n        </button>\n      )}\n\n      {collapsible ? (\n        <Collapsible open={!isCollapsed} duration={animationDuration}>\n          <div\n            id={`sidebar-group-${id}`}\n            className={`${getSpacingClass(\"md\", \"px\")} ${getSpacingClass(\"sm\", \"py\")}`}\n          >\n            {children}\n          </div>\n        </Collapsible>\n      ) : (\n        <div\n          className={`${getSpacingClass(\"md\", \"px\")} ${getSpacingClass(\"sm\", \"py\")}`}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SidebarGroup","_a","_b","id","title","icon","actions","collapsible","defaultCollapsed","children","className","props","__objRest","sidebarCollapsed","activeGroup","setActiveGroup","useSidebarRequired","groupStates","toggleGroup","setGroupCollapsed","useSideNavbarStateRequired","animationDuration","useSideNavbarThemeRequired","hasInitialized","useRef","useEffect","isCollapsed","isActive","handleHeaderClick","jsxs","__spreadProps","__spreadValues","getSpacingClass","jsx","ChevronDown","Collapsible"],"mappings":"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"}

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

@@ -0,0 +1,90 @@
+"use client";
+var S = Object.defineProperty, H = Object.defineProperties;
+var N = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var l = (e, r, s) => r in e ? S(e, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[r] = s, p = (e, r) => {
+  for (var s in r || (r = {}))
+    f.call(r, s) && l(e, s, r[s]);
+  if (n)
+    for (var s of n(r))
+      c.call(r, s) && l(e, s, r[s]);
+  return e;
+}, u = (e, r) => H(e, N(r));
+var g = (e, r) => {
+  var s = {};
+  for (var a in e)
+    f.call(e, a) && r.indexOf(a) < 0 && (s[a] = e[a]);
+  if (e != null && n)
+    for (var a of n(e))
+      r.indexOf(a) < 0 && c.call(e, a) && (s[a] = e[a]);
+  return s;
+};
+import { jsx as o, jsxs as j, Fragment as C } from "react/jsx-runtime";
+import { useEffect as k } from "react";
+import { useSidebarRequired as q } from "../../contexts/SidebarContext.js";
+import { getTypographyClasses as $ } from "../../../../tokens/typography.js";
+import { getSpacingClass as t } from "../../../../tokens/spacing.js";
+function A(v) {
+  var m = v, {
+    title: e,
+    subtitle: r,
+    showBorder: s = !0,
+    children: a,
+    className: b = "",
+    style: h
+  } = m, x = g(m, [
+    "title",
+    "subtitle",
+    "showBorder",
+    "children",
+    "className",
+    "style"
+  ]);
+  const { collapsed: y, registerHeader: i, unregisterHeader: d } = q();
+  return k(() => (i(), () => d()), [i, d]), y ? null : /* @__PURE__ */ o(
+    "div",
+    u(p({
+      className: `
+        flex-shrink-0
+        ${t("md", "px")}
+        ${t("sm", "py")}
+        ${s ? "border-b border-line-default" : ""}
+        bg-surface-subtle
+        ${b}
+      `,
+      style: h
+    }, x), {
+      children: a || /* @__PURE__ */ j(C, { children: [
+        e && /* @__PURE__ */ o(
+          "h2",
+          {
+            className: `
+                ${$("h4")}
+                text-fg-primary
+                ${t("none", "m")}
+                font-semibold
+              `,
+            children: e
+          }
+        ),
+        r && /* @__PURE__ */ o(
+          "p",
+          {
+            className: `
+                ${$("bodySmall")}
+                text-fg-secondary
+                ${t("none", "m")}
+                ${t("xs", "mt")}
+              `,
+            children: r
+          }
+        )
+      ] })
+    })
+  );
+}
+export {
+  A as default
+};
+//# sourceMappingURL=SidebarHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarHeader.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useSidebarRequired } from \"../../contexts/SidebarContext\";\nimport { getSpacingClass, getTypographyClasses } from \"../../../../tokens\";\nimport type { SidebarHeaderProps } from \"../../types\";\n\n/**\n * Header component for the Sidebar subcomponent\n *\n * Displays a title and optional subtitle at the top of the sidebar content.\n * Automatically registers its presence with the Sidebar context.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar.Header title=\"Dashboard\" subtitle=\"Overview\" />\n * ```\n */\nexport default function SidebarHeader({\n  title,\n  subtitle,\n  showBorder = true,\n  children,\n  className = \"\",\n  style,\n  ...props\n}: SidebarHeaderProps) {\n  const { collapsed, registerHeader, unregisterHeader } = useSidebarRequired();\n\n  // Register header presence with Sidebar context\n  useEffect(() => {\n    registerHeader();\n    return () => unregisterHeader();\n  }, [registerHeader, unregisterHeader]);\n\n  if (collapsed) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`\n        flex-shrink-0\n        ${getSpacingClass(\"md\", \"px\")}\n        ${getSpacingClass(\"sm\", \"py\")}\n        ${showBorder ? \"border-b border-line-default\" : \"\"}\n        bg-surface-subtle\n        ${className}\n      `}\n      style={style}\n      {...props}\n    >\n      {children || (\n        <>\n          {title && (\n            <h2\n              className={`\n                ${getTypographyClasses(\"h4\")}\n                text-fg-primary\n                ${getSpacingClass(\"none\", \"m\")}\n                font-semibold\n              `}\n            >\n              {title}\n            </h2>\n          )}\n          {subtitle && (\n            <p\n              className={`\n                ${getTypographyClasses(\"bodySmall\")}\n                text-fg-secondary\n                ${getSpacingClass(\"none\", \"m\")}\n                ${getSpacingClass(\"xs\", \"mt\")}\n              `}\n            >\n              {subtitle}\n            </p>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["SidebarHeader","_a","_b","title","subtitle","showBorder","children","className","style","props","__objRest","collapsed","registerHeader","unregisterHeader","useSidebarRequired","useEffect","jsx","__spreadProps","__spreadValues","getSpacingClass","jsxs","Fragment","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,SAAwBA,EAAcC,GAQf;AARe,MAAAC,IAAAD,GACpC;AAAA,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,MANoCN,GAOjCO,IAAAC,EAPiCR,GAOjC;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,WAAAS,GAAW,gBAAAC,GAAgB,kBAAAC,EAAA,IAAqBC,EAAA;AAQxD,SALAC,EAAU,OACRH,EAAA,GACO,MAAMC,EAAA,IACZ,CAACD,GAAgBC,CAAgB,CAAC,GAEjCF,IACK,OAIP,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEPC,EAAgB,MAAM,IAAI,CAAC;AAAA,UAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA,UAC3Bd,IAAa,iCAAiC,EAAE;AAAA;AAAA,UAEhDE,CAAS;AAAA;AAAA,MAEb,OAAAC;AAAA,OACIC,IAVL;AAAA,MAYE,eACC,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAlB,KACC,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,kBACPM,EAAqB,IAAI,CAAC;AAAA;AAAA,kBAE1BH,EAAgB,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,YAI/B,UAAAhB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJC,KACC,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,kBACPM,EAAqB,WAAW,CAAC;AAAA;AAAA,kBAEjCH,EAAgB,QAAQ,GAAG,CAAC;AAAA,kBAC5BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA,YAG9B,UAAAf;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as n, Fragment as f } from "react/jsx-runtime";
+import { useEffect as i } from "react";
+import { useSidebarSlotRequired as m } from "../../contexts/SidebarSlotContext.js";
+function a({ id: t, children: r }) {
+  const { activeSlot: u, registerSlot: e, unregisterSlot: o } = m();
+  return i(() => (e(t, r), () => o(t)), [t, r, e, o]), u !== t ? null : /* @__PURE__ */ n(f, { children: r });
+}
+export {
+  a as SidebarSlot
+};
+//# sourceMappingURL=SidebarSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSlot.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarSlot.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, type ReactNode } from \"react\";\nimport { useSidebarSlotRequired } from \"../../contexts/SidebarSlotContext\";\n\nexport interface SidebarSlotProps {\n  /** Unique slot identifier */\n  id: string;\n  /** Slot content */\n  children: ReactNode;\n}\n\n/**\n * SidebarSlot Component\n *\n * **Note: Slots are exclusive to the Sidebar component, not the Navbar.**\n *\n * Registers a content slot that can be displayed dynamically within the Sidebar.\n * The slot content is only rendered when it's the active slot.\n * Use this to switch between different content views in the Sidebar based on navigation.\n *\n * @example\n * ```tsx\n * <SideNavbar>\n *   <SideNavbar.Navbar>\n *     <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *   </SideNavbar.Navbar>\n *\n *   <SidebarSlotProvider defaultSlot=\"dashboard\">\n *     <SideNavbar.Sidebar>\n *       <SideNavbar.Sidebar.Content>\n *         <SidebarSlot id=\"dashboard\">\n *           <DashboardContent />\n *         </SidebarSlot>\n *         <SidebarSlot id=\"settings\">\n *           <SettingsContent />\n *         </SidebarSlot>\n *         <SidebarSlotContent />\n *       </SideNavbar.Sidebar.Content>\n *     </SideNavbar.Sidebar>\n *   </SidebarSlotProvider>\n * </SideNavbar>\n * ```\n */\nexport function SidebarSlot({ id, children }: SidebarSlotProps) {\n  const { activeSlot, registerSlot, unregisterSlot } = useSidebarSlotRequired();\n\n  useEffect(() => {\n    registerSlot(id, children);\n    return () => unregisterSlot(id);\n  }, [id, children, registerSlot, unregisterSlot]);\n\n  // Only render if this is the active slot\n  if (activeSlot !== id) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"],"names":["SidebarSlot","id","children","activeSlot","registerSlot","unregisterSlot","useSidebarSlotRequired","useEffect"],"mappings":";;;;AA4CO,SAASA,EAAY,EAAE,IAAAC,GAAI,UAAAC,KAA8B;AAC9D,QAAM,EAAE,YAAAC,GAAY,cAAAC,GAAc,gBAAAC,EAAA,IAAmBC,EAAA;AAQrD,SANAC,EAAU,OACRH,EAAaH,GAAIC,CAAQ,GAClB,MAAMG,EAAeJ,CAAE,IAC7B,CAACA,GAAIC,GAAUE,GAAcC,CAAc,CAAC,GAG3CF,MAAeF,IACV,8BAGC,UAAAC,GAAS;AACrB;"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { useSidebarSlotRequired as i } from "../../contexts/SidebarSlotContext.js";
+function u({
+  fallback: o = null
+}) {
+  const { activeSlot: t, slots: e } = i();
+  return !t || !e.has(t) ? /* @__PURE__ */ r(n, { children: o }) : /* @__PURE__ */ r(n, { children: e.get(t) });
+}
+export {
+  u as SidebarSlotContent
+};
+//# sourceMappingURL=SidebarSlotContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSlotContent.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport { useSidebarSlotRequired } from \"../../contexts/SidebarSlotContext\";\n\nexport interface SidebarSlotContentProps {\n  /** Fallback content when no slot is active */\n  fallback?: ReactNode;\n}\n\n/**\n * SidebarSlotContent Component\n *\n * **Note: This component is exclusive to the Sidebar, not the Navbar.**\n *\n * Container that renders the currently active slot content within the Sidebar.\n * Displays fallback content if no slot is active.\n * Must be used inside a SidebarSlotProvider and within the Sidebar component.\n *\n * @example\n * ```tsx\n * <SideNavbar.Sidebar>\n *   <SideNavbar.Sidebar.Content>\n *     <SidebarSlotProvider defaultSlot=\"dashboard\">\n *       <SidebarSlot id=\"dashboard\">\n *         <DashboardContent />\n *       </SidebarSlot>\n *       <SidebarSlotContent fallback={<EmptyState />} />\n *     </SidebarSlotProvider>\n *   </SideNavbar.Sidebar.Content>\n * </SideNavbar.Sidebar>\n * ```\n */\nexport function SidebarSlotContent({\n  fallback = null,\n}: SidebarSlotContentProps) {\n  const { activeSlot, slots } = useSidebarSlotRequired();\n\n  if (!activeSlot || !slots.has(activeSlot)) {\n    return <>{fallback}</>;\n  }\n\n  return <>{slots.get(activeSlot)}</>;\n}\n"],"names":["SidebarSlotContent","fallback","activeSlot","slots","useSidebarSlotRequired","jsx","Fragment"],"mappings":";;;AAiCO,SAASA,EAAmB;AAAA,EACjC,UAAAC,IAAW;AACb,GAA4B;AAC1B,QAAM,EAAE,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAA;AAE9B,SAAI,CAACF,KAAc,CAACC,EAAM,IAAID,CAAU,2BAC5B,UAAAD,EAAA,CAAS,IAGd,gBAAAI,EAAAC,GAAA,EAAG,UAAAH,EAAM,IAAID,CAAU,GAAE;AAClC;"}

package/dist/granular/ui/components/SideNavbar/contexts/NavbarContext.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext as n, useContext as t } from "react";
+const r = n(null);
+function a() {
+  return t(r);
+}
+function u() {
+  const e = t(r);
+  if (!e)
+    throw new Error(
+      "useNavbarRequired must be used within a SideNavbar.Navbar component"
+    );
+  return e;
+}
+export {
+  r as NavbarContext,
+  a as useNavbar,
+  u as useNavbarRequired
+};
+//# sourceMappingURL=NavbarContext.js.map

package/dist/granular/ui/components/SideNavbar/contexts/NavbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/NavbarContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext } from \"react\";\nimport type { NavbarContextValue } from \"../types\";\n\n/**\n * Context for the Navbar subcomponent\n *\n * Provides navbar-specific state that inherits from the root SideNavbar context.\n * Must be used within a Navbar component.\n */\nexport const NavbarContext = createContext<NavbarContextValue | null>(null);\n\n/**\n * Hook to access Navbar context (returns null if outside Navbar)\n */\nexport function useNavbar(): NavbarContextValue | null {\n  return useContext(NavbarContext);\n}\n\n/**\n * Hook to access Navbar context (throws if outside Navbar)\n * @throws Error if used outside of Navbar component\n */\nexport function useNavbarRequired(): NavbarContextValue {\n  const context = useContext(NavbarContext);\n  if (!context) {\n    throw new Error(\n      \"useNavbarRequired must be used within a SideNavbar.Navbar component\",\n    );\n  }\n  return context;\n}\n\nexport default NavbarContext;\n"],"names":["NavbarContext","createContext","useNavbar","useContext","useNavbarRequired","context"],"mappings":";;AAYO,MAAMA,IAAgBC,EAAyC,IAAI;AAKnE,SAASC,IAAuC;AACrD,SAAOC,EAAWH,CAAa;AACjC;AAMO,SAASI,IAAwC;AACtD,QAAMC,IAAUF,EAAWH,CAAa;AACxC,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;"}

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarConfigContext.js

@@ -0,0 +1,37 @@
+"use client";
+import { useContext as t, createContext as i } from "react";
+const o = i(null);
+function a() {
+  return t(o);
+}
+function n() {
+  const e = t(o);
+  if (!e)
+    throw new Error(
+      "useSideNavbarConfigRequired must be used within SideNavbarConfigProvider"
+    );
+  return e;
+}
+const s = {
+  mode: "full",
+  resizable: !1,
+  minWidth: void 0,
+  maxWidth: void 0,
+  snapPoints: void 0,
+  responsive: !1,
+  mobileBreakpoint: 768,
+  mobileVariant: "collapse",
+  overlayBackdrop: !0,
+  persistState: !0,
+  persistWidth: !1,
+  storageKey: void 0,
+  keyboardShortcut: "Ctrl+B",
+  enableKeyboardShortcut: !0
+};
+export {
+  o as SideNavbarConfigContext,
+  s as defaultConfigValues,
+  a as useSideNavbarConfig,
+  n as useSideNavbarConfigRequired
+};
+//# sourceMappingURL=SideNavbarConfigContext.js.map

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarConfigContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarConfigContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SideNavbarConfigContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { SideNavbarConfigContextValue } from \"../types\";\n\n/**\n * Config context for SideNavbar behavior configuration.\n * Contains behavioral settings that typically don't change during runtime.\n */\nexport const SideNavbarConfigContext =\n  createContext<SideNavbarConfigContextValue | null>(null);\n\n/**\n * Hook to access SideNavbar config context.\n * Returns null if used outside of provider.\n */\nexport function useSideNavbarConfig(): SideNavbarConfigContextValue | null {\n  return useContext(SideNavbarConfigContext);\n}\n\n/**\n * Hook to access SideNavbar config context with required check.\n * Throws error if used outside of provider.\n */\nexport function useSideNavbarConfigRequired(): SideNavbarConfigContextValue {\n  const context = useContext(SideNavbarConfigContext);\n  if (!context) {\n    throw new Error(\n      \"useSideNavbarConfigRequired must be used within SideNavbarConfigProvider\",\n    );\n  }\n  return context;\n}\n\n// Default values\nexport const defaultConfigValues: SideNavbarConfigContextValue = {\n  mode: \"full\",\n  resizable: false,\n  minWidth: undefined,\n  maxWidth: undefined,\n  snapPoints: undefined,\n  responsive: false,\n  mobileBreakpoint: 768,\n  mobileVariant: \"collapse\",\n  overlayBackdrop: true,\n  persistState: true,\n  persistWidth: false,\n  storageKey: undefined,\n  keyboardShortcut: \"Ctrl+B\",\n  enableKeyboardShortcut: true,\n};\n"],"names":["SideNavbarConfigContext","createContext","useSideNavbarConfig","useContext","useSideNavbarConfigRequired","context","defaultConfigValues"],"mappings":";;AASO,MAAMA,IACXC,EAAmD,IAAI;AAMlD,SAASC,IAA2D;AACzE,SAAOC,EAAWH,CAAuB;AAC3C;AAMO,SAASI,IAA4D;AAC1E,QAAMC,IAAUF,EAAWH,CAAuB;AAClD,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAGO,MAAMC,IAAoD;AAAA,EAC/D,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,wBAAwB;AAC1B;"}

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarStateContext.js

@@ -0,0 +1,20 @@
+"use client";
+import { useContext as t, createContext as a } from "react";
+const r = a(null);
+function i() {
+  return t(r);
+}
+function o() {
+  const e = t(r);
+  if (!e)
+    throw new Error(
+      "useSideNavbarStateRequired must be used within SideNavbarStateProvider"
+    );
+  return e;
+}
+export {
+  r as SideNavbarStateContext,
+  i as useSideNavbarState,
+  o as useSideNavbarStateRequired
+};
+//# sourceMappingURL=SideNavbarStateContext.js.map

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarStateContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarStateContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SideNavbarStateContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { SideNavbarStateContextValue } from \"../types\";\n\n/**\n * State context for SideNavbar runtime state.\n * Contains mutable state that changes during component lifecycle.\n */\nexport const SideNavbarStateContext =\n  createContext<SideNavbarStateContextValue | null>(null);\n\n/**\n * Hook to access SideNavbar state context.\n * Returns null if used outside of provider.\n */\nexport function useSideNavbarState(): SideNavbarStateContextValue | null {\n  return useContext(SideNavbarStateContext);\n}\n\n/**\n * Hook to access SideNavbar state context with required check.\n * Throws error if used outside of provider.\n */\nexport function useSideNavbarStateRequired(): SideNavbarStateContextValue {\n  const context = useContext(SideNavbarStateContext);\n  if (!context) {\n    throw new Error(\n      \"useSideNavbarStateRequired must be used within SideNavbarStateProvider\",\n    );\n  }\n  return context;\n}\n\n// Default values factory (needs ref)\nexport function createDefaultStateValues(): SideNavbarStateContextValue {\n  return {\n    collapsed: false,\n    toggle: () => {},\n    setCollapsed: () => {},\n    currentWidth: 320,\n    setWidth: () => {},\n    isMobile: false,\n    isResizing: false,\n    startResize: () => {},\n    groupStates: {},\n    toggleGroup: () => {},\n    setGroupCollapsed: () => {},\n    sidebarRef: { current: null },\n  };\n}\n"],"names":["SideNavbarStateContext","createContext","useSideNavbarState","useContext","useSideNavbarStateRequired","context"],"mappings":";;AASO,MAAMA,IACXC,EAAkD,IAAI;AAMjD,SAASC,IAAyD;AACvE,SAAOC,EAAWH,CAAsB;AAC1C;AAMO,SAASI,IAA0D;AACxE,QAAMC,IAAUF,EAAWH,CAAsB;AACjD,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;"}

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarThemeContext.js

@@ -0,0 +1,28 @@
+"use client";
+import { useContext as t, createContext as i } from "react";
+const n = i(null);
+function r() {
+  return t(n);
+}
+function o() {
+  const e = t(n);
+  if (!e)
+    throw new Error(
+      "useSideNavbarThemeRequired must be used within SideNavbarThemeProvider"
+    );
+  return e;
+}
+const u = {
+  variant: "default",
+  navigationWidth: "56px",
+  contentWidth: "320px",
+  animationDuration: 300,
+  animationEasing: "ease-in-out"
+};
+export {
+  n as SideNavbarThemeContext,
+  u as defaultThemeValues,
+  r as useSideNavbarTheme,
+  o as useSideNavbarThemeRequired
+};
+//# sourceMappingURL=SideNavbarThemeContext.js.map

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarThemeContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SideNavbarThemeContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { SideNavbarThemeContextValue } from \"../types\";\n\n/**\n * Theme context for SideNavbar styling configuration.\n * Contains visual customization options that typically don't change during runtime.\n */\nexport const SideNavbarThemeContext =\n  createContext<SideNavbarThemeContextValue | null>(null);\n\n/**\n * Hook to access SideNavbar theme context.\n * Returns null if used outside of provider.\n */\nexport function useSideNavbarTheme(): SideNavbarThemeContextValue | null {\n  return useContext(SideNavbarThemeContext);\n}\n\n/**\n * Hook to access SideNavbar theme context with required check.\n * Throws error if used outside of provider.\n */\nexport function useSideNavbarThemeRequired(): SideNavbarThemeContextValue {\n  const context = useContext(SideNavbarThemeContext);\n  if (!context) {\n    throw new Error(\n      \"useSideNavbarThemeRequired must be used within SideNavbarThemeProvider\",\n    );\n  }\n  return context;\n}\n\n// Default values\nexport const defaultThemeValues: SideNavbarThemeContextValue = {\n  variant: \"default\",\n  navigationWidth: \"56px\",\n  contentWidth: \"320px\",\n  animationDuration: 300,\n  animationEasing: \"ease-in-out\",\n};\n"],"names":["SideNavbarThemeContext","createContext","useSideNavbarTheme","useContext","useSideNavbarThemeRequired","context","defaultThemeValues"],"mappings":";;AASO,MAAMA,IACXC,EAAkD,IAAI;AAMjD,SAASC,IAAyD;AACvE,SAAOC,EAAWH,CAAsB;AAC1C;AAMO,SAASI,IAA0D;AACxE,QAAMC,IAAUF,EAAWH,CAAsB;AACjD,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAGO,MAAMC,IAAkD;AAAA,EAC7D,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,iBAAiB;AACnB;"}

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarToggleContext.js

@@ -0,0 +1,19 @@
+"use client";
+import { useContext as t, createContext as n } from "react";
+const o = n(null);
+function i() {
+  return t(o);
+}
+function u() {
+  const e = t(o);
+  return e || {
+    showMainToggle: !0,
+    mainTogglePosition: "floating"
+  };
+}
+export {
+  o as SideNavbarToggleContext,
+  i as useSideNavbarToggleContext,
+  u as useSideNavbarToggleContextRequired
+};
+//# sourceMappingURL=SideNavbarToggleContext.js.map

package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarToggleContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarToggleContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SideNavbarToggleContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { SideNavbarTogglePosition } from \"../types\";\n\nexport interface SideNavbarToggleContextValue {\n  showMainToggle: boolean;\n  mainTogglePosition: SideNavbarTogglePosition;\n}\n\nexport const SideNavbarToggleContext =\n  createContext<SideNavbarToggleContextValue | null>(null);\n\nexport function useSideNavbarToggleContext(): SideNavbarToggleContextValue | null {\n  return useContext(SideNavbarToggleContext);\n}\n\nexport function useSideNavbarToggleContextRequired(): SideNavbarToggleContextValue {\n  const context = useContext(SideNavbarToggleContext);\n  if (!context) {\n    // Return defaults if context is not available (for backward compatibility)\n    return {\n      showMainToggle: true,\n      mainTogglePosition: \"floating\",\n    };\n  }\n  return context;\n}\n"],"names":["SideNavbarToggleContext","createContext","useSideNavbarToggleContext","useContext","useSideNavbarToggleContextRequired","context"],"mappings":";;AAUO,MAAMA,IACXC,EAAmD,IAAI;AAElD,SAASC,IAAkE;AAChF,SAAOC,EAAWH,CAAuB;AAC3C;AAEO,SAASI,IAAmE;AACjF,QAAMC,IAAUF,EAAWH,CAAuB;AAClD,SAAKK,KAEI;AAAA,IACL,gBAAgB;AAAA,IAChB,oBAAoB;AAAA,EAAA;AAI1B;"}