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

package/dist/granular/ui/components/SideNavbar/hooks/useResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useResize.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useRef, useEffect } from \"react\";\nimport { clampWidth, validateWidthBounds } from \"../utils\";\n\nexport interface UseResizeOptions {\n  /**\n   * Initial width\n   */\n  initialWidth: number;\n\n  /**\n   * Minimum width constraint\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width constraint\n   */\n  maxWidth?: number;\n\n  /**\n   * Snap points (widths to snap to when dragging)\n   */\n  snapPoints?: number[];\n\n  /**\n   * Snap threshold in pixels\n   * @default 20\n   */\n  snapThreshold?: number;\n\n  /**\n   * Callback when width changes\n   */\n  onWidthChange?: (width: number) => void;\n\n  /**\n   * Whether resize is enabled\n   * @default true\n   */\n  enabled?: boolean;\n}\n\nexport interface UseResizeReturn {\n  /**\n   * Current width\n   */\n  width: number;\n\n  /**\n   * Whether currently resizing\n   */\n  isResizing: boolean;\n\n  /**\n   * Start resize handler (attach to mousedown)\n   */\n  startResize: (event: React.MouseEvent) => void;\n\n  /**\n   * Set width programmatically\n   */\n  setWidth: (width: number) => void;\n}\n\n/**\n * Hook for drag-to-resize functionality\n *\n * Provides resize state and handlers for drag-to-resize interactions.\n * Supports snap points and min/max constraints.\n *\n * @example\n * ```tsx\n * const { width, isResizing, startResize } = useResize({\n *   initialWidth: 320,\n *   minWidth: 200,\n *   maxWidth: 600,\n *   snapPoints: [200, 320, 480],\n *   onWidthChange: (width) => console.log('Width:', width)\n * });\n * ```\n */\nexport function useResize({\n  initialWidth,\n  minWidth,\n  maxWidth,\n  snapPoints,\n  snapThreshold = 20,\n  onWidthChange,\n  enabled = true,\n}: UseResizeOptions): UseResizeReturn {\n  // Validate bounds on first render\n  if (import.meta.env.DEV) {\n    if (!validateWidthBounds(minWidth, maxWidth)) {\n      console.warn(\n        \"[useResize] Invalid bounds: minWidth must be less than maxWidth\",\n        { minWidth, maxWidth },\n      );\n    }\n  }\n\n  // Clamp initial width to valid bounds\n  const clampedInitialWidth = clampWidth(initialWidth, minWidth, maxWidth);\n  const [width, setWidthState] = useState(clampedInitialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n  const startXRef = useRef<number>(0);\n  const startWidthRef = useRef<number>(clampedInitialWidth);\n\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      // Use utility function to clamp width\n      let constrainedWidth = clampWidth(newWidth, minWidth, maxWidth);\n\n      // Check snap points\n      if (snapPoints && snapPoints.length > 0) {\n        const closestSnap = snapPoints.reduce((closest, snap) => {\n          const distanceToSnap = Math.abs(constrainedWidth - snap);\n          const distanceToClosest = Math.abs(constrainedWidth - closest);\n          return distanceToSnap < distanceToClosest ? snap : closest;\n        }, snapPoints[0]);\n\n        if (Math.abs(constrainedWidth - closestSnap) <= snapThreshold) {\n          constrainedWidth = closestSnap;\n        }\n      }\n\n      setWidthState(constrainedWidth);\n      onWidthChange?.(constrainedWidth);\n    },\n    [minWidth, maxWidth, snapPoints, snapThreshold, onWidthChange],\n  );\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent) => {\n      if (!enabled || !isResizing) return;\n\n      const deltaX = event.clientX - startXRef.current;\n      const newWidth = startWidthRef.current + deltaX;\n      setWidth(newWidth);\n    },\n    [enabled, isResizing, setWidth],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    if (!enabled) return;\n\n    setIsResizing(false);\n    startXRef.current = 0;\n    startWidthRef.current = width;\n  }, [enabled, width]);\n\n  const startResize = useCallback(\n    (event: React.MouseEvent) => {\n      if (!enabled) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      setIsResizing(true);\n      startXRef.current = event.clientX;\n      startWidthRef.current = width;\n    },\n    [enabled, width],\n  );\n\n  useEffect(() => {\n    if (!isResizing) return;\n\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    document.addEventListener(\"mouseup\", handleMouseUp);\n\n    // Prevent text selection while resizing\n    document.body.style.userSelect = \"none\";\n    document.body.style.cursor = \"col-resize\";\n\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n      document.body.style.userSelect = \"\";\n      document.body.style.cursor = \"\";\n    };\n  }, [isResizing, handleMouseMove, handleMouseUp]);\n\n  // Update width when initialWidth changes externally\n  useEffect(() => {\n    if (!isResizing) {\n      setWidthState(clampWidth(initialWidth, minWidth, maxWidth));\n    }\n  }, [initialWidth, minWidth, maxWidth, isResizing]);\n\n  return {\n    width,\n    isResizing,\n    startResize,\n    setWidth,\n  };\n}\n"],"names":["useResize","initialWidth","minWidth","maxWidth","snapPoints","snapThreshold","onWidthChange","enabled","clampedInitialWidth","clampWidth","width","setWidthState","useState","isResizing","setIsResizing","startXRef","useRef","startWidthRef","setWidth","useCallback","newWidth","constrainedWidth","closestSnap","closest","snap","distanceToSnap","distanceToClosest","handleMouseMove","event","deltaX","handleMouseUp","startResize","useEffect"],"mappings":";;;AAmFO,SAASA,EAAU;AAAA,EACxB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GAAsC;AAYpC,QAAMC,IAAsBC,EAAWR,GAAcC,GAAUC,CAAQ,GACjE,CAACO,GAAOC,CAAa,IAAIC,EAASJ,CAAmB,GACrD,CAACK,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5CG,IAAYC,EAAe,CAAC,GAC5BC,IAAgBD,EAAeR,CAAmB,GAElDU,IAAWC;AAAA,IACf,CAACC,MAAqB;AAEpB,UAAIC,IAAmBZ,EAAWW,GAAUlB,GAAUC,CAAQ;AAG9D,UAAIC,KAAcA,EAAW,SAAS,GAAG;AACvC,cAAMkB,IAAclB,EAAW,OAAO,CAACmB,GAASC,MAAS;AACvD,gBAAMC,IAAiB,KAAK,IAAIJ,IAAmBG,CAAI,GACjDE,IAAoB,KAAK,IAAIL,IAAmBE,CAAO;AAC7D,iBAAOE,IAAiBC,IAAoBF,IAAOD;AAAA,QACrD,GAAGnB,EAAW,CAAC,CAAC;AAEhB,QAAI,KAAK,IAAIiB,IAAmBC,CAAW,KAAKjB,MAC9CgB,IAAmBC;AAAA,MAEvB;AAEA,MAAAX,EAAcU,CAAgB,GAC9Bf,KAAA,QAAAA,EAAgBe;AAAA,IAClB;AAAA,IACA,CAACnB,GAAUC,GAAUC,GAAYC,GAAeC,CAAa;AAAA,EAAA,GAGzDqB,IAAkBR;AAAA,IACtB,CAACS,MAAsB;AACrB,UAAI,CAACrB,KAAW,CAACM,EAAY;AAE7B,YAAMgB,IAASD,EAAM,UAAUb,EAAU,SACnCK,IAAWH,EAAc,UAAUY;AACzC,MAAAX,EAASE,CAAQ;AAAA,IACnB;AAAA,IACA,CAACb,GAASM,GAAYK,CAAQ;AAAA,EAAA,GAG1BY,IAAgBX,EAAY,MAAM;AACtC,IAAKZ,MAELO,EAAc,EAAK,GACnBC,EAAU,UAAU,GACpBE,EAAc,UAAUP;AAAA,EAC1B,GAAG,CAACH,GAASG,CAAK,CAAC,GAEbqB,IAAcZ;AAAA,IAClB,CAACS,MAA4B;AAC3B,MAAKrB,MAELqB,EAAM,eAAA,GACNA,EAAM,gBAAA,GAENd,EAAc,EAAI,GAClBC,EAAU,UAAUa,EAAM,SAC1BX,EAAc,UAAUP;AAAA,IAC1B;AAAA,IACA,CAACH,GAASG,CAAK;AAAA,EAAA;AAGjB,SAAAsB,EAAU,MAAM;AACd,QAAKnB;AAEL,sBAAS,iBAAiB,aAAac,CAAe,GACtD,SAAS,iBAAiB,WAAWG,CAAa,GAGlD,SAAS,KAAK,MAAM,aAAa,QACjC,SAAS,KAAK,MAAM,SAAS,cAEtB,MAAM;AACX,iBAAS,oBAAoB,aAAaH,CAAe,GACzD,SAAS,oBAAoB,WAAWG,CAAa,GACrD,SAAS,KAAK,MAAM,aAAa,IACjC,SAAS,KAAK,MAAM,SAAS;AAAA,MAC/B;AAAA,EACF,GAAG,CAACjB,GAAYc,GAAiBG,CAAa,CAAC,GAG/CE,EAAU,MAAM;AACd,IAAKnB,KACHF,EAAcF,EAAWR,GAAcC,GAAUC,CAAQ,CAAC;AAAA,EAE9D,GAAG,CAACF,GAAcC,GAAUC,GAAUU,CAAU,CAAC,GAE1C;AAAA,IACL,OAAAH;AAAA,IACA,YAAAG;AAAA,IACA,aAAAkB;AAAA,IACA,UAAAb;AAAA,EAAA;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/hooks/useResponsiveSidebar.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState as u, useCallback as W, useEffect as v } from "react";
+function y({
+  mobileBreakpoint: e = 768,
+  onMobileChange: d,
+  enabled: s = !0
+} = {}) {
+  const [c, o] = u(
+    typeof window != "undefined" ? window.innerWidth : 1024
+  ), [r, f] = u(
+    typeof window != "undefined" ? window.innerWidth < e : !1
+  ), w = W(() => {
+    if (!s || typeof window == "undefined") return;
+    const i = window.innerWidth, t = i < e;
+    o(i), t !== r && (f(t), d == null || d(t));
+  }, [s, e, r, d]);
+  return v(() => {
+    if (!s || typeof window == "undefined") return;
+    const i = window.innerWidth, t = i < e;
+    o(i), f(t), window.addEventListener("resize", w);
+    let n = null;
+    return window.ResizeObserver && (n = new ResizeObserver(() => {
+      w();
+    }), n.observe(document.body)), () => {
+      window.removeEventListener("resize", w), n == null || n.disconnect();
+    };
+  }, [s, e, w]), {
+    isMobile: r,
+    viewportWidth: c
+  };
+}
+export {
+  y as useResponsiveSidebar
+};
+//# sourceMappingURL=useResponsiveSidebar.js.map

package/dist/granular/ui/components/SideNavbar/hooks/useResponsiveSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveSidebar.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useResponsiveSidebar.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\n\nexport interface UseResponsiveSidebarOptions {\n  /**\n   * Breakpoint in pixels for mobile detection\n   * @default 768\n   */\n  mobileBreakpoint?: number;\n\n  /**\n   * Callback when mobile state changes\n   */\n  onMobileChange?: (isMobile: boolean) => void;\n\n  /**\n   * Whether responsive behavior is enabled\n   * @default true\n   */\n  enabled?: boolean;\n}\n\nexport interface UseResponsiveSidebarReturn {\n  /**\n   * Whether current viewport is mobile\n   */\n  isMobile: boolean;\n\n  /**\n   * Current viewport width\n   */\n  viewportWidth: number;\n}\n\n/**\n * Hook for responsive sidebar behavior\n *\n * Detects mobile breakpoints and provides responsive state.\n *\n * @example\n * ```tsx\n * const { isMobile, viewportWidth } = useResponsiveSidebar({\n *   mobileBreakpoint: 768,\n *   onMobileChange: (isMobile) => console.log('Mobile:', isMobile)\n * });\n * ```\n */\nexport function useResponsiveSidebar({\n  mobileBreakpoint = 768,\n  onMobileChange,\n  enabled = true,\n}: UseResponsiveSidebarOptions = {}): UseResponsiveSidebarReturn {\n  const [viewportWidth, setViewportWidth] = useState<number>(\n    typeof window !== \"undefined\" ? window.innerWidth : 1024,\n  );\n  const [isMobile, setIsMobile] = useState<boolean>(\n    typeof window !== \"undefined\"\n      ? window.innerWidth < mobileBreakpoint\n      : false,\n  );\n\n  const handleResize = useCallback(() => {\n    if (!enabled || typeof window === \"undefined\") return;\n\n    const newWidth = window.innerWidth;\n    const newIsMobile = newWidth < mobileBreakpoint;\n\n    setViewportWidth(newWidth);\n\n    if (newIsMobile !== isMobile) {\n      setIsMobile(newIsMobile);\n      onMobileChange?.(newIsMobile);\n    }\n  }, [enabled, mobileBreakpoint, isMobile, onMobileChange]);\n\n  useEffect(() => {\n    if (!enabled || typeof window === \"undefined\") return;\n\n    // Set initial state\n    const initialWidth = window.innerWidth;\n    const initialIsMobile = initialWidth < mobileBreakpoint;\n    setViewportWidth(initialWidth);\n    setIsMobile(initialIsMobile);\n\n    // Listen for resize events\n    window.addEventListener(\"resize\", handleResize);\n\n    // Use ResizeObserver for more accurate detection\n    let resizeObserver: ResizeObserver | null = null;\n    if (window.ResizeObserver) {\n      resizeObserver = new ResizeObserver(() => {\n        handleResize();\n      });\n      resizeObserver.observe(document.body);\n    }\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n      resizeObserver?.disconnect();\n    };\n  }, [enabled, mobileBreakpoint, handleResize]);\n\n  return {\n    isMobile,\n    viewportWidth,\n  };\n}\n"],"names":["useResponsiveSidebar","mobileBreakpoint","onMobileChange","enabled","viewportWidth","setViewportWidth","useState","isMobile","setIsMobile","handleResize","useCallback","newWidth","newIsMobile","useEffect","initialWidth","initialIsMobile","resizeObserver"],"mappings":";;AAgDO,SAASA,EAAqB;AAAA,EACnC,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,IAAiC,IAAgC;AAC/D,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxC,OAAO,UAAW,cAAc,OAAO,aAAa;AAAA,EAAA,GAEhD,CAACC,GAAUC,CAAW,IAAIF;AAAA,IAC9B,OAAO,UAAW,cACd,OAAO,aAAaL,IACpB;AAAA,EAAA,GAGAQ,IAAeC,EAAY,MAAM;AACrC,QAAI,CAACP,KAAW,OAAO,UAAW,YAAa;AAE/C,UAAMQ,IAAW,OAAO,YAClBC,IAAcD,IAAWV;AAE/B,IAAAI,EAAiBM,CAAQ,GAErBC,MAAgBL,MAClBC,EAAYI,CAAW,GACvBV,KAAA,QAAAA,EAAiBU;AAAA,EAErB,GAAG,CAACT,GAASF,GAAkBM,GAAUL,CAAc,CAAC;AAExD,SAAAW,EAAU,MAAM;AACd,QAAI,CAACV,KAAW,OAAO,UAAW,YAAa;AAG/C,UAAMW,IAAe,OAAO,YACtBC,IAAkBD,IAAeb;AACvC,IAAAI,EAAiBS,CAAY,GAC7BN,EAAYO,CAAe,GAG3B,OAAO,iBAAiB,UAAUN,CAAY;AAG9C,QAAIO,IAAwC;AAC5C,WAAI,OAAO,mBACTA,IAAiB,IAAI,eAAe,MAAM;AACxC,MAAAP,EAAA;AAAA,IACF,CAAC,GACDO,EAAe,QAAQ,SAAS,IAAI,IAG/B,MAAM;AACX,aAAO,oBAAoB,UAAUP,CAAY,GACjDO,KAAA,QAAAA,EAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAACb,GAASF,GAAkBQ,CAAY,CAAC,GAErC;AAAA,IACL,UAAAF;AAAA,IACA,eAAAH;AAAA,EAAA;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbar.js

@@ -0,0 +1,21 @@
+"use client";
+import { useSideNavbarThemeRequired as t } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarTheme as S } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as i } from "../contexts/SideNavbarConfigContext.js";
+import { useSideNavbarConfig as p } from "../contexts/SideNavbarConfigContext.js";
+import { useSideNavbarStateRequired as a } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarState as N } from "../contexts/SideNavbarStateContext.js";
+function d() {
+  const e = t(), r = i(), o = a();
+  return { theme: e, config: r, state: o };
+}
+export {
+  d as useSideNavbarCombined,
+  p as useSideNavbarConfig,
+  i as useSideNavbarConfigRequired,
+  N as useSideNavbarState,
+  a as useSideNavbarStateRequired,
+  S as useSideNavbarTheme,
+  t as useSideNavbarThemeRequired
+};
+//# sourceMappingURL=useSideNavbar.js.map

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSideNavbar.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useSideNavbar.ts"],"sourcesContent":["\"use client\";\n\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { useSideNavbarStateRequired } from \"../contexts/SideNavbarStateContext\";\n\n// Layered context hooks\nexport {\n  useSideNavbarTheme,\n  useSideNavbarThemeRequired,\n} from \"../contexts/SideNavbarThemeContext\";\n\nexport {\n  useSideNavbarConfig,\n  useSideNavbarConfigRequired,\n} from \"../contexts/SideNavbarConfigContext\";\n\nexport {\n  useSideNavbarState,\n  useSideNavbarStateRequired,\n} from \"../contexts/SideNavbarStateContext\";\n\n// Subcomponent hooks\nexport { useNavbar, useNavbarRequired } from \"./useNavbar\";\nexport { useSidebar, useSidebarRequired } from \"./useSidebar\";\n\n// Utility hooks\nexport { useResize } from \"./useResize\";\nexport type { UseResizeOptions, UseResizeReturn } from \"./useResize\";\n\nexport { useResponsiveSidebar } from \"./useResponsiveSidebar\";\nexport type {\n  UseResponsiveSidebarOptions,\n  UseResponsiveSidebarReturn,\n} from \"./useResponsiveSidebar\";\n\nexport { useKeyboardShortcut } from \"./useKeyboardShortcut\";\nexport type { UseKeyboardShortcutOptions } from \"./useKeyboardShortcut\";\n\nexport { useFocusManagement } from \"./useFocusManagement\";\nexport type { UseFocusManagementOptions } from \"./useFocusManagement\";\n\nexport { useGroupState } from \"./useGroupState\";\nexport type { UseGroupStateOptions, UseGroupStateReturn } from \"../types\";\n\n// Navigation and content hooks\nexport { useSideNavbarNavigation } from \"./useSideNavbarNavigation\";\nexport { useSideNavbarContent } from \"./useSideNavbarContent\";\n\n/**\n * Combined hook to access all root contexts\n *\n * Returns an object with theme, config, and state contexts.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { theme, config, state } = useSideNavbarCombined();\n *   // Access theme.variant, config.mode, state.collapsed, etc.\n * }\n * ```\n */\nexport function useSideNavbarCombined() {\n  // Import here to avoid circular dependencies\n  const theme = useSideNavbarThemeRequired();\n  const config = useSideNavbarConfigRequired();\n  const state = useSideNavbarStateRequired();\n\n  return { theme, config, state };\n}\n"],"names":["useSideNavbarCombined","theme","useSideNavbarThemeRequired","config","useSideNavbarConfigRequired","state","useSideNavbarStateRequired"],"mappings":";;;;;;;AA8DO,SAASA,IAAwB;AAEtC,QAAMC,IAAQC,EAAA,GACRC,IAASC,EAAA,GACTC,IAAQC,EAAA;AAEd,SAAO,EAAE,OAAAL,GAAO,QAAAE,GAAQ,OAAAE,EAAA;AAC1B;"}

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarContent.js

@@ -0,0 +1,19 @@
+"use client";
+import { useSidebarSlot as e } from "../contexts/SidebarSlotContext.js";
+import { useSidebar as s } from "../contexts/SidebarContext.js";
+function u() {
+  var l, c, t, r;
+  const o = e(), i = s();
+  return {
+    activeSlot: (l = o == null ? void 0 : o.activeSlot) != null ? l : null,
+    setActiveSlot: (c = o == null ? void 0 : o.setActiveSlot) != null ? c : (() => {
+    }),
+    scrollPosition: (t = i == null ? void 0 : i.scrollPosition) != null ? t : 0,
+    setScrollPosition: (r = i == null ? void 0 : i.setScrollPosition) != null ? r : (() => {
+    })
+  };
+}
+export {
+  u as useSideNavbarContent
+};
+//# sourceMappingURL=useSideNavbarContent.js.map

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSideNavbarContent.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useSideNavbarContent.ts"],"sourcesContent":["\"use client\";\n\nimport { useSidebarSlot } from \"../contexts/SidebarSlotContext\";\nimport { useSidebar } from \"../contexts/SidebarContext\";\n\n/**\n * Hook for content/slot management\n *\n * Provides access to sidebar slot state and scroll position.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { activeSlot, setActiveSlot, scrollPosition } = useSideNavbarContent();\n *\n *   return (\n *     <div>\n *       <p>Active slot: {activeSlot}</p>\n *       <p>Scroll position: {scrollPosition}px</p>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useSideNavbarContent() {\n  const slotContext = useSidebarSlot();\n  const sidebarContext = useSidebar();\n\n  return {\n    activeSlot: slotContext?.activeSlot ?? null,\n    setActiveSlot: slotContext?.setActiveSlot ?? (() => {}),\n    scrollPosition: sidebarContext?.scrollPosition ?? 0,\n    setScrollPosition: sidebarContext?.setScrollPosition ?? (() => {}),\n  };\n}\n"],"names":["useSideNavbarContent","slotContext","useSidebarSlot","sidebarContext","useSidebar","_a","_b","_c","_d"],"mappings":";;;AAwBO,SAASA,IAAuB;;AACrC,QAAMC,IAAcC,EAAA,GACdC,IAAiBC,EAAA;AAEvB,SAAO;AAAA,IACL,aAAYC,IAAAJ,KAAA,gBAAAA,EAAa,eAAb,OAAAI,IAA2B;AAAA,IACvC,gBAAeC,IAAAL,KAAA,gBAAAA,EAAa,kBAAb,OAAAK,KAA+B,MAAM;AAAA,IAAC;AAAA,IACrD,iBAAgBC,IAAAJ,KAAA,gBAAAA,EAAgB,mBAAhB,OAAAI,IAAkC;AAAA,IAClD,oBAAmBC,IAAAL,KAAA,gBAAAA,EAAgB,sBAAhB,OAAAK,KAAsC,MAAM;AAAA,IAAC;AAAA,EAAA;AAEpE;"}

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarNavigation.js

@@ -0,0 +1,21 @@
+"use client";
+import { useCallback as c } from "react";
+import { useNavbarRequired as s } from "../contexts/NavbarContext.js";
+import { useSidebarSlot as m } from "../contexts/SidebarSlotContext.js";
+function f() {
+  const { activeItem: r, setActiveItem: t } = s(), e = m(), a = c(
+    (o, i) => {
+      t(o), i && (e != null && e.setActiveSlot) && e.setActiveSlot(i);
+    },
+    [t, e]
+  );
+  return {
+    activeItem: r,
+    setActiveItem: t,
+    navigate: a
+  };
+}
+export {
+  f as useSideNavbarNavigation
+};
+//# sourceMappingURL=useSideNavbarNavigation.js.map

package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSideNavbarNavigation.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useSideNavbarNavigation.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport { useNavbarRequired } from \"../contexts/NavbarContext\";\nimport { useSidebarSlot } from \"../contexts/SidebarSlotContext\";\n\n/**\n * Hook for navigation-related state and actions\n *\n * Provides convenience methods for navigating between navbar items\n * and managing associated sidebar slots.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { activeItem, navigate } = useSideNavbarNavigation();\n *\n *   return (\n *     <button onClick={() => navigate('dashboard', 'dashboard-content')}>\n *       Go to Dashboard\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useSideNavbarNavigation() {\n  const { activeItem, setActiveItem } = useNavbarRequired();\n  const slotContext = useSidebarSlot();\n\n  const navigate = useCallback(\n    (itemId: string, slotId?: string) => {\n      setActiveItem(itemId);\n      if (slotId && slotContext?.setActiveSlot) {\n        slotContext.setActiveSlot(slotId);\n      }\n    },\n    [setActiveItem, slotContext],\n  );\n\n  return {\n    activeItem,\n    setActiveItem,\n    navigate,\n  };\n}\n"],"names":["useSideNavbarNavigation","activeItem","setActiveItem","useNavbarRequired","slotContext","useSidebarSlot","navigate","useCallback","itemId","slotId"],"mappings":";;;;AAyBO,SAASA,IAA0B;AACxC,QAAM,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC,EAAA,GAChCC,IAAcC,EAAA,GAEdC,IAAWC;AAAA,IACf,CAACC,GAAgBC,MAAoB;AACnC,MAAAP,EAAcM,CAAM,GAChBC,MAAUL,KAAA,QAAAA,EAAa,kBACzBA,EAAY,cAAcK,CAAM;AAAA,IAEpC;AAAA,IACA,CAACP,GAAeE,CAAW;AAAA,EAAA;AAG7B,SAAO;AAAA,IACL,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,UAAAI;AAAA,EAAA;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarConfigProvider.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as g } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { defaultConfigValues as o, SideNavbarConfigContext as b } from "../contexts/SideNavbarConfigContext.js";
+function j({
+  children: C,
+  mode: r = o.mode,
+  resizable: e = o.resizable,
+  minWidth: i = o.minWidth,
+  maxWidth: t = o.maxWidth,
+  snapPoints: n = o.snapPoints,
+  responsive: f = o.responsive,
+  mobileBreakpoint: a = o.mobileBreakpoint,
+  mobileVariant: m = o.mobileVariant,
+  overlayBackdrop: u = o.overlayBackdrop,
+  persistState: d = o.persistState,
+  persistWidth: s = o.persistWidth,
+  storageKey: v = o.storageKey,
+  keyboardShortcut: l = o.keyboardShortcut,
+  enableKeyboardShortcut: p = o.enableKeyboardShortcut
+}) {
+  const c = x(
+    () => ({
+      mode: r,
+      resizable: e,
+      minWidth: i,
+      maxWidth: t,
+      snapPoints: n,
+      responsive: f,
+      mobileBreakpoint: a,
+      mobileVariant: m,
+      overlayBackdrop: u,
+      persistState: d,
+      persistWidth: s,
+      storageKey: v,
+      keyboardShortcut: l,
+      enableKeyboardShortcut: p
+    }),
+    [
+      r,
+      e,
+      i,
+      t,
+      n,
+      f,
+      a,
+      m,
+      u,
+      d,
+      s,
+      v,
+      l,
+      p
+    ]
+  );
+  return /* @__PURE__ */ g(b.Provider, { value: c, children: C });
+}
+export {
+  j as SideNavbarConfigProvider
+};
+//# sourceMappingURL=SideNavbarConfigProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarConfigProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarConfigProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarConfigProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  SideNavbarConfigContext,\n  defaultConfigValues,\n} from \"../contexts/SideNavbarConfigContext\";\nimport type { SideNavbarConfigProviderProps } from \"../types\";\n\n/**\n * Config Provider for SideNavbar\n *\n * Provides behavioral configuration context for the sidebar.\n * Config values are typically set once and don't change during runtime.\n *\n * @example\n * ```tsx\n * <SideNavbarConfigProvider mode=\"full\" resizable responsive>\n *   <SideNavbarStateProvider>\n *     <SideNavbarRoot>...</SideNavbarRoot>\n *   </SideNavbarStateProvider>\n * </SideNavbarConfigProvider>\n * ```\n */\nexport function SideNavbarConfigProvider({\n  children,\n  mode = defaultConfigValues.mode,\n  resizable = defaultConfigValues.resizable,\n  minWidth = defaultConfigValues.minWidth,\n  maxWidth = defaultConfigValues.maxWidth,\n  snapPoints = defaultConfigValues.snapPoints,\n  responsive = defaultConfigValues.responsive,\n  mobileBreakpoint = defaultConfigValues.mobileBreakpoint,\n  mobileVariant = defaultConfigValues.mobileVariant,\n  overlayBackdrop = defaultConfigValues.overlayBackdrop,\n  persistState = defaultConfigValues.persistState,\n  persistWidth = defaultConfigValues.persistWidth,\n  storageKey = defaultConfigValues.storageKey,\n  keyboardShortcut = defaultConfigValues.keyboardShortcut,\n  enableKeyboardShortcut = defaultConfigValues.enableKeyboardShortcut,\n}: SideNavbarConfigProviderProps) {\n  const value = useMemo(\n    () => ({\n      mode,\n      resizable,\n      minWidth,\n      maxWidth,\n      snapPoints,\n      responsive,\n      mobileBreakpoint,\n      mobileVariant,\n      overlayBackdrop,\n      persistState,\n      persistWidth,\n      storageKey,\n      keyboardShortcut,\n      enableKeyboardShortcut,\n    }),\n    [\n      mode,\n      resizable,\n      minWidth,\n      maxWidth,\n      snapPoints,\n      responsive,\n      mobileBreakpoint,\n      mobileVariant,\n      overlayBackdrop,\n      persistState,\n      persistWidth,\n      storageKey,\n      keyboardShortcut,\n      enableKeyboardShortcut,\n    ],\n  );\n\n  return (\n    <SideNavbarConfigContext.Provider value={value}>\n      {children}\n    </SideNavbarConfigContext.Provider>\n  );\n}\n\nexport default SideNavbarConfigProvider;\n"],"names":["SideNavbarConfigProvider","children","mode","defaultConfigValues","resizable","minWidth","maxWidth","snapPoints","responsive","mobileBreakpoint","mobileVariant","overlayBackdrop","persistState","persistWidth","storageKey","keyboardShortcut","enableKeyboardShortcut","value","useMemo","jsx","SideNavbarConfigContext"],"mappings":";;;;AAwBO,SAASA,EAAyB;AAAA,EACvC,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAoB;AAAA,EAC3B,WAAAC,IAAYD,EAAoB;AAAA,EAChC,UAAAE,IAAWF,EAAoB;AAAA,EAC/B,UAAAG,IAAWH,EAAoB;AAAA,EAC/B,YAAAI,IAAaJ,EAAoB;AAAA,EACjC,YAAAK,IAAaL,EAAoB;AAAA,EACjC,kBAAAM,IAAmBN,EAAoB;AAAA,EACvC,eAAAO,IAAgBP,EAAoB;AAAA,EACpC,iBAAAQ,IAAkBR,EAAoB;AAAA,EACtC,cAAAS,IAAeT,EAAoB;AAAA,EACnC,cAAAU,IAAeV,EAAoB;AAAA,EACnC,YAAAW,IAAaX,EAAoB;AAAA,EACjC,kBAAAY,IAAmBZ,EAAoB;AAAA,EACvC,wBAAAa,IAAyBb,EAAoB;AAC/C,GAAkC;AAChC,QAAMc,IAAQC;AAAA,IACZ,OAAO;AAAA,MACL,MAAAhB;AAAA,MACA,WAAAE;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,wBAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEd;AAAA,MACAE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAG,EAACC,EAAwB,UAAxB,EAAiC,OAAAH,GAC/B,UAAAhB,EAAA,CACH;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarProvider.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { SideNavbarThemeProvider as q } from "./SideNavbarThemeProvider.js";
+import { SideNavbarConfigProvider as w } from "./SideNavbarConfigProvider.js";
+import { SideNavbarStateProvider as y } from "./SideNavbarStateProvider.js";
+function E({
+  children: e,
+  // Theme props
+  variant: i,
+  navigationWidth: o,
+  contentWidth: d,
+  animationDuration: t,
+  animationEasing: a,
+  // Config props
+  mode: m,
+  resizable: v,
+  minWidth: n,
+  maxWidth: f,
+  snapPoints: p,
+  responsive: S,
+  mobileBreakpoint: b,
+  mobileVariant: c,
+  overlayBackdrop: N,
+  persistState: P,
+  persistWidth: h,
+  storageKey: l,
+  keyboardShortcut: u,
+  enableKeyboardShortcut: s,
+  // State props
+  defaultCollapsed: x,
+  collapsed: g,
+  onCollapseChange: j,
+  onWidthChange: C,
+  onMobileChange: T,
+  exclusiveGroups: k
+}) {
+  return /* @__PURE__ */ r(
+    q,
+    {
+      variant: i,
+      navigationWidth: o,
+      contentWidth: d,
+      animationDuration: t,
+      animationEasing: a,
+      children: /* @__PURE__ */ r(
+        w,
+        {
+          mode: m,
+          resizable: v,
+          minWidth: n,
+          maxWidth: f,
+          snapPoints: p,
+          responsive: S,
+          mobileBreakpoint: b,
+          mobileVariant: c,
+          overlayBackdrop: N,
+          persistState: P,
+          persistWidth: h,
+          storageKey: l,
+          keyboardShortcut: u,
+          enableKeyboardShortcut: s,
+          children: /* @__PURE__ */ r(
+            y,
+            {
+              defaultCollapsed: x,
+              collapsed: g,
+              onCollapseChange: j,
+              onWidthChange: C,
+              onMobileChange: T,
+              exclusiveGroups: k,
+              children: e
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  E as SideNavbarProvider
+};
+//# sourceMappingURL=SideNavbarProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { SideNavbarThemeProvider } from \"./SideNavbarThemeProvider\";\nimport { SideNavbarConfigProvider } from \"./SideNavbarConfigProvider\";\nimport { SideNavbarStateProvider } from \"./SideNavbarStateProvider\";\nimport type { SideNavbarProviderProps } from \"../types\";\n\n/**\n * Combined Provider for SideNavbar\n *\n * Convenience component that wraps all three context providers\n * (Theme, Config, State) with a single component.\n *\n * For most use cases, use this combined provider.\n * For advanced customization, use individual providers.\n *\n * @example\n * ```tsx\n * <SideNavbarProvider\n *   variant=\"elevated\"\n *   mode=\"full\"\n *   resizable\n *   responsive\n *   defaultCollapsed\n *   onCollapseChange={handleChange}\n * >\n *   <SideNavbarRoot>...</SideNavbarRoot>\n * </SideNavbarProvider>\n * ```\n */\nexport function SideNavbarProvider({\n  children,\n  // Theme props\n  variant,\n  navigationWidth,\n  contentWidth,\n  animationDuration,\n  animationEasing,\n  // Config props\n  mode,\n  resizable,\n  minWidth,\n  maxWidth,\n  snapPoints,\n  responsive,\n  mobileBreakpoint,\n  mobileVariant,\n  overlayBackdrop,\n  persistState,\n  persistWidth,\n  storageKey,\n  keyboardShortcut,\n  enableKeyboardShortcut,\n  // State props\n  defaultCollapsed,\n  collapsed,\n  onCollapseChange,\n  onWidthChange,\n  onMobileChange,\n  exclusiveGroups,\n}: SideNavbarProviderProps) {\n  return (\n    <SideNavbarThemeProvider\n      variant={variant}\n      navigationWidth={navigationWidth}\n      contentWidth={contentWidth}\n      animationDuration={animationDuration}\n      animationEasing={animationEasing}\n    >\n      <SideNavbarConfigProvider\n        mode={mode}\n        resizable={resizable}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        snapPoints={snapPoints}\n        responsive={responsive}\n        mobileBreakpoint={mobileBreakpoint}\n        mobileVariant={mobileVariant}\n        overlayBackdrop={overlayBackdrop}\n        persistState={persistState}\n        persistWidth={persistWidth}\n        storageKey={storageKey}\n        keyboardShortcut={keyboardShortcut}\n        enableKeyboardShortcut={enableKeyboardShortcut}\n      >\n        <SideNavbarStateProvider\n          defaultCollapsed={defaultCollapsed}\n          collapsed={collapsed}\n          onCollapseChange={onCollapseChange}\n          onWidthChange={onWidthChange}\n          onMobileChange={onMobileChange}\n          exclusiveGroups={exclusiveGroups}\n        >\n          {children}\n        </SideNavbarStateProvider>\n      </SideNavbarConfigProvider>\n    </SideNavbarThemeProvider>\n  );\n}\n\nexport default SideNavbarProvider;\n"],"names":["SideNavbarProvider","children","variant","navigationWidth","contentWidth","animationDuration","animationEasing","mode","resizable","minWidth","maxWidth","snapPoints","responsive","mobileBreakpoint","mobileVariant","overlayBackdrop","persistState","persistWidth","storageKey","keyboardShortcut","enableKeyboardShortcut","defaultCollapsed","collapsed","onCollapseChange","onWidthChange","onMobileChange","exclusiveGroups","jsx","SideNavbarThemeProvider","SideNavbarConfigProvider","SideNavbarStateProvider"],"mappings":";;;;;AA8BO,SAASA,EAAmB;AAAA,EACjC,UAAAC;AAAA;AAAA,EAEA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA;AAAA,EAEA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,wBAAAC;AAAA;AAAA,EAEA,kBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AACF,GAA4B;AAC1B,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAA1B;AAAA,MACA,iBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,iBAAAC;AAAA,MAEA,UAAA,gBAAAqB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAAtB;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,UAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UACA,eAAAC;AAAA,UACA,iBAAAC;AAAA,UACA,cAAAC;AAAA,UACA,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UACA,wBAAAC;AAAA,UAEA,UAAA,gBAAAO;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,kBAAAT;AAAA,cACA,WAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,eAAAC;AAAA,cACA,gBAAAC;AAAA,cACA,iBAAAC;AAAA,cAEC,UAAAzB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js

@@ -0,0 +1,165 @@
+"use client";
+var J = Object.defineProperty, L = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var j = Object.getOwnPropertySymbols;
+var Q = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
+var q = (i, s, r) => s in i ? J(i, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : i[s] = r, K = (i, s) => {
+  for (var r in s || (s = {}))
+    Q.call(s, r) && q(i, r, s[r]);
+  if (j)
+    for (var r of j(s))
+      U.call(s, r) && q(i, r, s[r]);
+  return i;
+}, W = (i, s) => L(i, M(s));
+import { jsx as X } from "react/jsx-runtime";
+import { useRef as Y, useState as B, useCallback as f, useEffect as F, useMemo as Z } from "react";
+import { SideNavbarStateContext as _ } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as C } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as tt } from "../contexts/SideNavbarConfigContext.js";
+import { useResize as et } from "../hooks/useResize.js";
+import { useResponsiveSidebar as rt } from "../hooks/useResponsiveSidebar.js";
+import { useFocusManagement as st } from "../hooks/useFocusManagement.js";
+import { useKeyboardShortcut as it } from "../hooks/useKeyboardShortcut.js";
+import { parseKeyboardShortcut as ot } from "../utils/parseKeyboardShortcut.js";
+import { parseWidthToPixels as at } from "../utils/parseWidth.js";
+function ht({
+  children: i,
+  defaultCollapsed: s = !1,
+  collapsed: r,
+  onCollapseChange: d,
+  onWidthChange: S,
+  onMobileChange: y,
+  exclusiveGroups: R = !1
+}) {
+  const O = C(), t = tt(), v = Y(null), a = r !== void 0, V = () => {
+    if (a) return r;
+    if (t.storageKey && t.persistState && typeof window != "undefined") {
+      const e = localStorage.getItem(`${t.storageKey}-collapsed`);
+      if (e !== null)
+        return e === "true";
+    }
+    return s;
+  }, A = () => {
+    if (t.storageKey && t.persistWidth && typeof window != "undefined") {
+      const e = localStorage.getItem(`${t.storageKey}-width`);
+      if (e !== null) {
+        const o = parseInt(e, 10);
+        if (!isNaN(o)) return o;
+      }
+    }
+    return at(O.contentWidth);
+  }, [n, b] = B(
+    V
+  ), [k, g] = B({}), { isMobile: u } = rt({
+    mobileBreakpoint: t.mobileBreakpoint,
+    onMobileChange: (e) => {
+      y == null || y(e), e && t.mobileVariant === "collapse" && !a && b(!0);
+    },
+    enabled: t.responsive
+  }), {
+    width: z,
+    isResizing: N,
+    startResize: x,
+    setWidth: I
+  } = et({
+    initialWidth: A(),
+    minWidth: t.minWidth,
+    maxWidth: t.maxWidth,
+    snapPoints: t.snapPoints,
+    onWidthChange: (e) => {
+      S == null || S(e), t.storageKey && t.persistWidth && typeof window != "undefined" && localStorage.setItem(`${t.storageKey}-width`, String(e));
+    },
+    enabled: t.resizable && !u
+  });
+  st({
+    isActive: u && t.mobileVariant === "overlay" && !n,
+    containerRef: v,
+    restoreFocus: !0
+  });
+  const m = a ? r : n, l = f(
+    (e) => {
+      a || b(e), d == null || d(e);
+    },
+    [a, d]
+  ), h = f(() => {
+    l(!m);
+  }, [m, l]), c = ot(t.keyboardShortcut);
+  it({
+    key: c.key,
+    ctrl: c.ctrl,
+    shift: c.shift,
+    alt: c.alt,
+    meta: c.meta,
+    onTrigger: h,
+    enabled: t.enableKeyboardShortcut
+  });
+  const P = f(
+    (e) => {
+      I(e);
+    },
+    [I]
+  ), $ = f(
+    (e) => {
+      g(R ? (o) => {
+        const H = o[e] === !1, w = {}, T = /* @__PURE__ */ new Set([...Object.keys(o), e]);
+        return H ? T.forEach((p) => {
+          w[p] = !0;
+        }) : T.forEach((p) => {
+          w[p] = p !== e;
+        }), w;
+      } : (o) => W(K({}, o), {
+        [e]: !o[e]
+      }));
+    },
+    [R]
+  ), E = f(
+    (e, o) => {
+      g((G) => W(K({}, G), {
+        [e]: o
+      }));
+    },
+    []
+  );
+  F(() => {
+    a && r !== n && b(r);
+  }, [a, r, n]), F(() => {
+    t.storageKey && t.persistState && typeof window != "undefined" && !a && localStorage.setItem(
+      `${t.storageKey}-collapsed`,
+      String(n)
+    );
+  }, [t.storageKey, t.persistState, n, a]);
+  const D = Z(
+    () => ({
+      collapsed: m,
+      toggle: h,
+      setCollapsed: l,
+      currentWidth: z,
+      setWidth: P,
+      isMobile: u,
+      isResizing: N,
+      startResize: x,
+      groupStates: k,
+      toggleGroup: $,
+      setGroupCollapsed: E,
+      sidebarRef: v
+    }),
+    [
+      m,
+      h,
+      l,
+      z,
+      P,
+      u,
+      N,
+      x,
+      k,
+      $,
+      E
+    ]
+  );
+  return /* @__PURE__ */ X(_.Provider, { value: D, children: i });
+}
+export {
+  ht as SideNavbarStateProvider
+};
+//# sourceMappingURL=SideNavbarStateProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarStateProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarStateProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useEffect, useRef, useMemo } from \"react\";\nimport { SideNavbarStateContext } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { useResize } from \"../hooks/useResize\";\nimport { useResponsiveSidebar } from \"../hooks/useResponsiveSidebar\";\nimport { useFocusManagement } from \"../hooks/useFocusManagement\";\nimport { useKeyboardShortcut } from \"../hooks/useKeyboardShortcut\";\nimport { parseWidthToPixels, parseKeyboardShortcut } from \"../utils\";\nimport type {\n  SideNavbarStateProviderProps,\n  SideNavbarStateContextValue,\n} from \"../types\";\n\n/**\n * State Provider for SideNavbar\n *\n * Provides runtime state management for the sidebar.\n * Manages collapse state, resize, responsive behavior, and group states.\n *\n * Must be nested inside SideNavbarThemeProvider and SideNavbarConfigProvider.\n *\n * @example\n * ```tsx\n * <SideNavbarThemeProvider>\n *   <SideNavbarConfigProvider>\n *     <SideNavbarStateProvider defaultCollapsed onCollapseChange={handleChange}>\n *       <SideNavbarRoot>...</SideNavbarRoot>\n *     </SideNavbarStateProvider>\n *   </SideNavbarConfigProvider>\n * </SideNavbarThemeProvider>\n * ```\n */\nexport function SideNavbarStateProvider({\n  children,\n  defaultCollapsed = false,\n  collapsed: controlledCollapsed,\n  onCollapseChange,\n  onWidthChange,\n  onMobileChange,\n  exclusiveGroups = false,\n}: SideNavbarStateProviderProps) {\n  const theme = useSideNavbarThemeRequired();\n  const config = useSideNavbarConfigRequired();\n  const sidebarRef = useRef<HTMLElement | null>(null);\n\n  // Determine if component is controlled\n  const isControlled = controlledCollapsed !== undefined;\n\n  // Initialize collapsed state from storage or default\n  const getInitialCollapsedState = (): boolean => {\n    if (isControlled) return controlledCollapsed;\n    if (\n      config.storageKey &&\n      config.persistState &&\n      typeof window !== \"undefined\"\n    ) {\n      const stored = localStorage.getItem(`${config.storageKey}-collapsed`);\n      if (stored !== null) {\n        return stored === \"true\";\n      }\n    }\n    return defaultCollapsed;\n  };\n\n  // Initialize width state from storage or default\n  const getInitialWidth = (): number => {\n    if (\n      config.storageKey &&\n      config.persistWidth &&\n      typeof window !== \"undefined\"\n    ) {\n      const stored = localStorage.getItem(`${config.storageKey}-width`);\n      if (stored !== null) {\n        const parsedWidth = parseInt(stored, 10);\n        if (!isNaN(parsedWidth)) return parsedWidth;\n      }\n    }\n    return parseWidthToPixels(theme.contentWidth);\n  };\n\n  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n    getInitialCollapsedState,\n  );\n  const [groupStates, setGroupStates] = useState<Record<string, boolean>>({});\n\n  // Responsive sidebar\n  const { isMobile } = useResponsiveSidebar({\n    mobileBreakpoint: config.mobileBreakpoint,\n    onMobileChange: (mobile) => {\n      onMobileChange?.(mobile);\n      // Auto-collapse on mobile if using collapse variant\n      if (mobile && config.mobileVariant === \"collapse\" && !isControlled) {\n        setInternalCollapsed(true);\n      }\n    },\n    enabled: config.responsive,\n  });\n\n  // Resize functionality\n  const {\n    width: resizeWidth,\n    isResizing,\n    startResize,\n    setWidth: setResizeWidth,\n  } = useResize({\n    initialWidth: getInitialWidth(),\n    minWidth: config.minWidth,\n    maxWidth: config.maxWidth,\n    snapPoints: config.snapPoints,\n    onWidthChange: (newWidth) => {\n      onWidthChange?.(newWidth);\n      // Persist width if enabled\n      if (\n        config.storageKey &&\n        config.persistWidth &&\n        typeof window !== \"undefined\"\n      ) {\n        localStorage.setItem(`${config.storageKey}-width`, String(newWidth));\n      }\n    },\n    enabled: config.resizable && !isMobile,\n  });\n\n  // Focus management for mobile overlay\n  useFocusManagement({\n    isActive:\n      isMobile && config.mobileVariant === \"overlay\" && !internalCollapsed,\n    containerRef: sidebarRef,\n    restoreFocus: true,\n  });\n\n  // Derived collapsed state\n  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;\n\n  // Set collapsed handler\n  const setCollapsed = useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setInternalCollapsed(value);\n      }\n      onCollapseChange?.(value);\n    },\n    [isControlled, onCollapseChange],\n  );\n\n  // Toggle handler\n  const toggle = useCallback(() => {\n    setCollapsed(!collapsed);\n  }, [collapsed, setCollapsed]);\n\n  // Keyboard shortcut\n  const shortcut = parseKeyboardShortcut(config.keyboardShortcut);\n  useKeyboardShortcut({\n    key: shortcut.key,\n    ctrl: shortcut.ctrl,\n    shift: shortcut.shift,\n    alt: shortcut.alt,\n    meta: shortcut.meta,\n    onTrigger: toggle,\n    enabled: config.enableKeyboardShortcut,\n  });\n\n  // Set width handler\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      setResizeWidth(newWidth);\n    },\n    [setResizeWidth],\n  );\n\n  // Group state handlers\n  const toggleGroup = useCallback(\n    (groupId: string) => {\n      if (exclusiveGroups) {\n        // Exclusive behavior: only one group open at a time (like ButtonGroup)\n        // When clicking a group:\n        // - If it's open (false = expanded), close it (all groups closed)\n        // - If it's closed (true = collapsed or undefined), open it and close all others\n        // - After closing, user can click any group (including the same one) to open it again\n        setGroupStates((prev) => {\n          const currentState = prev[groupId];\n          const isCurrentlyOpen = currentState === false; // false means expanded (not collapsed)\n          const newStates: Record<string, boolean> = {};\n\n          // Get all group IDs (from current state and the one being toggled)\n          const allGroupIds = new Set([...Object.keys(prev), groupId]);\n\n          if (isCurrentlyOpen) {\n            // Group is currently open, close it (and all others remain closed)\n            allGroupIds.forEach((id) => {\n              newStates[id] = true; // true = collapsed\n            });\n          } else {\n            // Group is currently closed, open it and close all others\n            allGroupIds.forEach((id) => {\n              newStates[id] = id !== groupId; // true = collapsed, false = expanded\n            });\n          }\n\n          return newStates;\n        });\n      } else {\n        // Default behavior: toggle individual group state\n        setGroupStates((prev) => ({\n          ...prev,\n          [groupId]: !prev[groupId],\n        }));\n      }\n    },\n    [exclusiveGroups],\n  );\n\n  const setGroupCollapsed = useCallback(\n    (groupId: string, isCollapsed: boolean) => {\n      setGroupStates((prev) => ({\n        ...prev,\n        [groupId]: isCollapsed,\n      }));\n    },\n    [],\n  );\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (isControlled && controlledCollapsed !== internalCollapsed) {\n      setInternalCollapsed(controlledCollapsed);\n    }\n  }, [isControlled, controlledCollapsed, internalCollapsed]);\n\n  // Persist collapsed state to storage\n  useEffect(() => {\n    if (\n      config.storageKey &&\n      config.persistState &&\n      typeof window !== \"undefined\" &&\n      !isControlled\n    ) {\n      localStorage.setItem(\n        `${config.storageKey}-collapsed`,\n        String(internalCollapsed),\n      );\n    }\n  }, [config.storageKey, config.persistState, internalCollapsed, isControlled]);\n\n  const value: SideNavbarStateContextValue = useMemo(\n    () => ({\n      collapsed,\n      toggle,\n      setCollapsed,\n      currentWidth: resizeWidth,\n      setWidth,\n      isMobile,\n      isResizing,\n      startResize,\n      groupStates,\n      toggleGroup,\n      setGroupCollapsed,\n      sidebarRef,\n    }),\n    [\n      collapsed,\n      toggle,\n      setCollapsed,\n      resizeWidth,\n      setWidth,\n      isMobile,\n      isResizing,\n      startResize,\n      groupStates,\n      toggleGroup,\n      setGroupCollapsed,\n    ],\n  );\n\n  return (\n    <SideNavbarStateContext.Provider value={value}>\n      {children}\n    </SideNavbarStateContext.Provider>\n  );\n}\n\nexport default SideNavbarStateProvider;\n"],"names":["SideNavbarStateProvider","children","defaultCollapsed","controlledCollapsed","onCollapseChange","onWidthChange","onMobileChange","exclusiveGroups","theme","useSideNavbarThemeRequired","config","useSideNavbarConfigRequired","sidebarRef","useRef","isControlled","getInitialCollapsedState","stored","getInitialWidth","parsedWidth","parseWidthToPixels","internalCollapsed","setInternalCollapsed","useState","groupStates","setGroupStates","isMobile","useResponsiveSidebar","mobile","resizeWidth","isResizing","startResize","setResizeWidth","useResize","newWidth","useFocusManagement","collapsed","setCollapsed","useCallback","value","toggle","shortcut","parseKeyboardShortcut","useKeyboardShortcut","setWidth","toggleGroup","groupId","prev","isCurrentlyOpen","newStates","allGroupIds","id","__spreadProps","__spreadValues","setGroupCollapsed","isCollapsed","useEffect","useMemo","jsx","SideNavbarStateContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCO,SAASA,GAAwB;AAAA,EACtC,UAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AACpB,GAAiC;AAC/B,QAAMC,IAAQC,EAAA,GACRC,IAASC,GAAA,GACTC,IAAaC,EAA2B,IAAI,GAG5CC,IAAeX,MAAwB,QAGvCY,IAA2B,MAAe;AAC9C,QAAID,EAAc,QAAOX;AACzB,QACEO,EAAO,cACPA,EAAO,gBACP,OAAO,UAAW,aAClB;AACA,YAAMM,IAAS,aAAa,QAAQ,GAAGN,EAAO,UAAU,YAAY;AACpE,UAAIM,MAAW;AACb,eAAOA,MAAW;AAAA,IAEtB;AACA,WAAOd;AAAA,EACT,GAGMe,IAAkB,MAAc;AACpC,QACEP,EAAO,cACPA,EAAO,gBACP,OAAO,UAAW,aAClB;AACA,YAAMM,IAAS,aAAa,QAAQ,GAAGN,EAAO,UAAU,QAAQ;AAChE,UAAIM,MAAW,MAAM;AACnB,cAAME,IAAc,SAASF,GAAQ,EAAE;AACvC,YAAI,CAAC,MAAME,CAAW,EAAG,QAAOA;AAAA,MAClC;AAAA,IACF;AACA,WAAOC,GAAmBX,EAAM,YAAY;AAAA,EAC9C,GAEM,CAACY,GAAmBC,CAAoB,IAAIC;AAAA,IAChDP;AAAA,EAAA,GAEI,CAACQ,GAAaC,CAAc,IAAIF,EAAkC,CAAA,CAAE,GAGpE,EAAE,UAAAG,EAAA,IAAaC,GAAqB;AAAA,IACxC,kBAAkBhB,EAAO;AAAA,IACzB,gBAAgB,CAACiB,MAAW;AAC1B,MAAArB,KAAA,QAAAA,EAAiBqB,IAEbA,KAAUjB,EAAO,kBAAkB,cAAc,CAACI,KACpDO,EAAqB,EAAI;AAAA,IAE7B;AAAA,IACA,SAASX,EAAO;AAAA,EAAA,CACjB,GAGK;AAAA,IACJ,OAAOkB;AAAA,IACP,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAUC;AAAA,EAAA,IACRC,GAAU;AAAA,IACZ,cAAcf,EAAA;AAAA,IACd,UAAUP,EAAO;AAAA,IACjB,UAAUA,EAAO;AAAA,IACjB,YAAYA,EAAO;AAAA,IACnB,eAAe,CAACuB,MAAa;AAC3B,MAAA5B,KAAA,QAAAA,EAAgB4B,IAGdvB,EAAO,cACPA,EAAO,gBACP,OAAO,UAAW,eAElB,aAAa,QAAQ,GAAGA,EAAO,UAAU,UAAU,OAAOuB,CAAQ,CAAC;AAAA,IAEvE;AAAA,IACA,SAASvB,EAAO,aAAa,CAACe;AAAA,EAAA,CAC/B;AAGD,EAAAS,GAAmB;AAAA,IACjB,UACET,KAAYf,EAAO,kBAAkB,aAAa,CAACU;AAAA,IACrD,cAAcR;AAAA,IACd,cAAc;AAAA,EAAA,CACf;AAGD,QAAMuB,IAAYrB,IAAeX,IAAsBiB,GAGjDgB,IAAeC;AAAA,IACnB,CAACC,MAAmB;AAClB,MAAKxB,KACHO,EAAqBiB,CAAK,GAE5BlC,KAAA,QAAAA,EAAmBkC;AAAAA,IACrB;AAAA,IACA,CAACxB,GAAcV,CAAgB;AAAA,EAAA,GAI3BmC,IAASF,EAAY,MAAM;AAC/B,IAAAD,EAAa,CAACD,CAAS;AAAA,EACzB,GAAG,CAACA,GAAWC,CAAY,CAAC,GAGtBI,IAAWC,GAAsB/B,EAAO,gBAAgB;AAC9D,EAAAgC,GAAoB;AAAA,IAClB,KAAKF,EAAS;AAAA,IACd,MAAMA,EAAS;AAAA,IACf,OAAOA,EAAS;AAAA,IAChB,KAAKA,EAAS;AAAA,IACd,MAAMA,EAAS;AAAA,IACf,WAAWD;AAAA,IACX,SAAS7B,EAAO;AAAA,EAAA,CACjB;AAGD,QAAMiC,IAAWN;AAAA,IACf,CAACJ,MAAqB;AACpB,MAAAF,EAAeE,CAAQ;AAAA,IACzB;AAAA,IACA,CAACF,CAAc;AAAA,EAAA,GAIXa,IAAcP;AAAA,IAClB,CAACQ,MAAoB;AACnB,MAMErB,EANEjB,IAMa,CAACuC,MAAS;AAEvB,cAAMC,IADeD,EAAKD,CAAO,MACQ,IACnCG,IAAqC,CAAA,GAGrCC,IAAc,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAKH,CAAI,GAAGD,CAAO,CAAC;AAE3D,eAAIE,IAEFE,EAAY,QAAQ,CAACC,MAAO;AAC1B,UAAAF,EAAUE,CAAE,IAAI;AAAA,QAClB,CAAC,IAGDD,EAAY,QAAQ,CAACC,MAAO;AAC1B,UAAAF,EAAUE,CAAE,IAAIA,MAAOL;AAAA,QACzB,CAAC,GAGIG;AAAA,MACT,IAGe,CAACF,MAAUK,EAAAC,EAAA,IACrBN,IADqB;AAAA,QAExB,CAACD,CAAO,GAAG,CAACC,EAAKD,CAAO;AAAA,MAAA,EALzB;AAAA,IAQL;AAAA,IACA,CAACtC,CAAe;AAAA,EAAA,GAGZ8C,IAAoBhB;AAAA,IACxB,CAACQ,GAAiBS,MAAyB;AACzC,MAAA9B,EAAe,CAACsB,MAAUK,EAAAC,EAAA,IACrBN,IADqB;AAAA,QAExB,CAACD,CAAO,GAAGS;AAAA,MAAA,EACX;AAAA,IACJ;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,EAAAC,EAAU,MAAM;AACd,IAAIzC,KAAgBX,MAAwBiB,KAC1CC,EAAqBlB,CAAmB;AAAA,EAE5C,GAAG,CAACW,GAAcX,GAAqBiB,CAAiB,CAAC,GAGzDmC,EAAU,MAAM;AACd,IACE7C,EAAO,cACPA,EAAO,gBACP,OAAO,UAAW,eAClB,CAACI,KAED,aAAa;AAAA,MACX,GAAGJ,EAAO,UAAU;AAAA,MACpB,OAAOU,CAAiB;AAAA,IAAA;AAAA,EAG9B,GAAG,CAACV,EAAO,YAAYA,EAAO,cAAcU,GAAmBN,CAAY,CAAC;AAE5E,QAAMwB,IAAqCkB;AAAA,IACzC,OAAO;AAAA,MACL,WAAArB;AAAA,MACA,QAAAI;AAAA,MACA,cAAAH;AAAA,MACA,cAAcR;AAAA,MACd,UAAAe;AAAA,MACA,UAAAlB;AAAA,MACA,YAAAI;AAAA,MACA,aAAAC;AAAA,MACA,aAAAP;AAAA,MACA,aAAAqB;AAAA,MACA,mBAAAS;AAAA,MACA,YAAAzC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEuB;AAAA,MACAI;AAAA,MACAH;AAAA,MACAR;AAAA,MACAe;AAAA,MACAlB;AAAA,MACAI;AAAA,MACAC;AAAA,MACAP;AAAA,MACAqB;AAAA,MACAS;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAI,EAACC,EAAuB,UAAvB,EAAgC,OAAApB,GAC9B,UAAArC,EAAA,CACH;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { defaultThemeValues as e, SideNavbarThemeContext as f } from "../contexts/SideNavbarThemeContext.js";
+function p({
+  children: a,
+  variant: r = e.variant,
+  navigationWidth: o = e.navigationWidth,
+  contentWidth: t = e.contentWidth,
+  animationDuration: m = e.animationDuration,
+  animationEasing: i = e.animationEasing
+}) {
+  const u = d(
+    () => ({
+      variant: r,
+      navigationWidth: o,
+      contentWidth: t,
+      animationDuration: m,
+      animationEasing: i
+    }),
+    [
+      r,
+      o,
+      t,
+      m,
+      i
+    ]
+  );
+  return /* @__PURE__ */ n(f.Provider, { value: u, children: a });
+}
+export {
+  p as SideNavbarThemeProvider
+};
+//# sourceMappingURL=SideNavbarThemeProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarThemeProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  SideNavbarThemeContext,\n  defaultThemeValues,\n} from \"../contexts/SideNavbarThemeContext\";\nimport type { SideNavbarThemeProviderProps } from \"../types\";\n\n/**\n * Theme Provider for SideNavbar\n *\n * Provides visual customization context for the sidebar.\n * Theme values are typically set once and don't change during runtime.\n *\n * @example\n * ```tsx\n * <SideNavbarThemeProvider variant=\"elevated\" animationDuration={200}>\n *   <SideNavbarConfigProvider>\n *     <SideNavbarStateProvider>\n *       <SideNavbarRoot>...</SideNavbarRoot>\n *     </SideNavbarStateProvider>\n *   </SideNavbarConfigProvider>\n * </SideNavbarThemeProvider>\n * ```\n */\nexport function SideNavbarThemeProvider({\n  children,\n  variant = defaultThemeValues.variant,\n  navigationWidth = defaultThemeValues.navigationWidth,\n  contentWidth = defaultThemeValues.contentWidth,\n  animationDuration = defaultThemeValues.animationDuration,\n  animationEasing = defaultThemeValues.animationEasing,\n}: SideNavbarThemeProviderProps) {\n  const value = useMemo(\n    () => ({\n      variant,\n      navigationWidth,\n      contentWidth,\n      animationDuration,\n      animationEasing,\n    }),\n    [\n      variant,\n      navigationWidth,\n      contentWidth,\n      animationDuration,\n      animationEasing,\n    ],\n  );\n\n  return (\n    <SideNavbarThemeContext.Provider value={value}>\n      {children}\n    </SideNavbarThemeContext.Provider>\n  );\n}\n\nexport default SideNavbarThemeProvider;\n"],"names":["SideNavbarThemeProvider","children","variant","defaultThemeValues","navigationWidth","contentWidth","animationDuration","animationEasing","value","useMemo","jsx","SideNavbarThemeContext"],"mappings":";;;;AA0BO,SAASA,EAAwB;AAAA,EACtC,UAAAC;AAAA,EACA,SAAAC,IAAUC,EAAmB;AAAA,EAC7B,iBAAAC,IAAkBD,EAAmB;AAAA,EACrC,cAAAE,IAAeF,EAAmB;AAAA,EAClC,mBAAAG,IAAoBH,EAAmB;AAAA,EACvC,iBAAAI,IAAkBJ,EAAmB;AACvC,GAAiC;AAC/B,QAAMK,IAAQC;AAAA,IACZ,OAAO;AAAA,MACL,SAAAP;AAAA,MACA,iBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEL;AAAA,MACAE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAG,EAACC,EAAuB,UAAvB,EAAgC,OAAAH,GAC9B,UAAAP,EAAA,CACH;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as S } from "react/jsx-runtime";
+import { useState as m, useRef as f, useCallback as n, useMemo as d } from "react";
+import { SidebarSlotContext as p } from "../contexts/SidebarSlotContext.js";
+function g({
+  children: l,
+  defaultSlot: c = null
+}) {
+  const [o, u] = m(c), t = f(/* @__PURE__ */ new Map()), r = n((e, a) => {
+    t.current.set(e, a);
+  }, []), s = n((e) => {
+    t.current.delete(e);
+  }, []), i = d(
+    () => ({
+      activeSlot: o,
+      setActiveSlot: u,
+      slots: t.current,
+      registerSlot: r,
+      unregisterSlot: s
+    }),
+    [o, r, s]
+  );
+  return /* @__PURE__ */ S(p.Provider, { value: i, children: l });
+}
+export {
+  g as SidebarSlotProvider
+};
+//# sourceMappingURL=SidebarSlotProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSlotProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SidebarSlotProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useCallback, useMemo, type ReactNode } from \"react\";\nimport { SidebarSlotContext } from \"../contexts/SidebarSlotContext\";\nimport type {\n  SidebarSlotContextValue,\n  SidebarSlotProviderProps,\n} from \"../types\";\n\n/**\n * Sidebar Slot Provider\n *\n * **Important: Slots are exclusive to the Sidebar component, not the Navbar.**\n *\n * Manages slot registration and active slot state for dynamic content switching\n * within the Sidebar. This provider should wrap the Sidebar content where slots\n * will be used.\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 SidebarSlotProvider({\n  children,\n  defaultSlot = null,\n}: SidebarSlotProviderProps) {\n  const [activeSlot, setActiveSlot] = useState<string | null>(defaultSlot);\n  const slotsRef = useRef(new Map<string, ReactNode>());\n\n  const registerSlot = useCallback((id: string, content: ReactNode) => {\n    slotsRef.current.set(id, content);\n  }, []);\n\n  const unregisterSlot = useCallback((id: string) => {\n    slotsRef.current.delete(id);\n  }, []);\n\n  const contextValue: SidebarSlotContextValue = useMemo(\n    () => ({\n      activeSlot,\n      setActiveSlot,\n      slots: slotsRef.current,\n      registerSlot,\n      unregisterSlot,\n    }),\n    [activeSlot, registerSlot, unregisterSlot],\n  );\n\n  return (\n    <SidebarSlotContext.Provider value={contextValue}>\n      {children}\n    </SidebarSlotContext.Provider>\n  );\n}\n"],"names":["SidebarSlotProvider","children","defaultSlot","activeSlot","setActiveSlot","useState","slotsRef","useRef","registerSlot","useCallback","id","content","unregisterSlot","contextValue","useMemo","SidebarSlotContext"],"mappings":";;;;AAyCO,SAASA,EAAoB;AAAA,EAClC,UAAAC;AAAA,EACA,aAAAC,IAAc;AAChB,GAA6B;AAC3B,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAwBH,CAAW,GACjEI,IAAWC,EAAO,oBAAI,KAAwB,GAE9CC,IAAeC,EAAY,CAACC,GAAYC,MAAuB;AACnE,IAAAL,EAAS,QAAQ,IAAII,GAAIC,CAAO;AAAA,EAClC,GAAG,CAAA,CAAE,GAECC,IAAiBH,EAAY,CAACC,MAAe;AACjD,IAAAJ,EAAS,QAAQ,OAAOI,CAAE;AAAA,EAC5B,GAAG,CAAA,CAAE,GAECG,IAAwCC;AAAA,IAC5C,OAAO;AAAA,MACL,YAAAX;AAAA,MACA,eAAAC;AAAA,MACA,OAAOE,EAAS;AAAA,MAChB,cAAAE;AAAA,MACA,gBAAAI;AAAA,IAAA;AAAA,IAEF,CAACT,GAAYK,GAAcI,CAAc;AAAA,EAAA;AAG3C,2BACGG,EAAmB,UAAnB,EAA4B,OAAOF,GACjC,UAAAZ,GACH;AAEJ;"}