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

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;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SidebarContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext } from \"react\";\nimport type { SidebarContextValue } from \"../types\";\n\n/**\n * Context for the Sidebar subcomponent\n *\n * Provides sidebar-specific state that inherits from the root SideNavbar context.\n * Must be used within a Sidebar component.\n */\nexport const SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access Sidebar context (returns null if outside Sidebar)\n */\nexport function useSidebar(): SidebarContextValue | null {\n  return useContext(SidebarContext);\n}\n\n/**\n * Hook to access Sidebar context (throws if outside Sidebar)\n * @throws Error if used outside of Sidebar component\n */\nexport function useSidebarRequired(): SidebarContextValue {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\n      \"useSidebarRequired must be used within a SideNavbar.Sidebar component\",\n    );\n  }\n  return context;\n}\n\nexport default SidebarContext;\n"],"names":["SidebarContext","createContext","useSidebar","useContext","useSidebarRequired","context"],"mappings":";;AAYO,MAAMA,IAAiBC,EAA0C,IAAI;AAKrE,SAASC,IAAyC;AACvD,SAAOC,EAAWH,CAAc;AAClC;AAMO,SAASI,IAA0C;AACxD,QAAMC,IAAUF,EAAWH,CAAc;AACzC,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { createContext as o, useContext as t } from "react";
+const r = o(
+  null
+);
+function i() {
+  return t(r);
+}
+function u() {
+  const e = t(r);
+  if (!e)
+    throw new Error(
+      "useSidebarSlotRequired must be used within SidebarSlotProvider"
+    );
+  return e;
+}
+export {
+  r as SidebarSlotContext,
+  i as useSidebarSlot,
+  u as useSidebarSlotRequired
+};
+//# sourceMappingURL=SidebarSlotContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSlotContext.js","sources":["../../../../../../src/ui/components/SideNavbar/contexts/SidebarSlotContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { SidebarSlotContextValue } from \"../types\";\n\n/**\n * Sidebar Slot Context\n *\n * Provides slot management for dynamic sidebar content.\n * Allows registering and switching between different content slots.\n */\nexport const SidebarSlotContext = createContext<SidebarSlotContextValue | null>(\n  null,\n);\n\n/**\n * Hook to access sidebar slot context\n * Returns null if used outside provider\n */\nexport function useSidebarSlot(): SidebarSlotContextValue | null {\n  return useContext(SidebarSlotContext);\n}\n\n/**\n * Hook to access sidebar slot context (required)\n * Throws error if used outside provider\n */\nexport function useSidebarSlotRequired(): SidebarSlotContextValue {\n  const context = useContext(SidebarSlotContext);\n  if (!context) {\n    throw new Error(\n      \"useSidebarSlotRequired must be used within SidebarSlotProvider\",\n    );\n  }\n  return context;\n}\n"],"names":["SidebarSlotContext","createContext","useSidebarSlot","useContext","useSidebarSlotRequired","context"],"mappings":";;AAWO,MAAMA,IAAqBC;AAAA,EAChC;AACF;AAMO,SAASC,IAAiD;AAC/D,SAAOC,EAAWH,CAAkB;AACtC;AAMO,SAASI,IAAkD;AAChE,QAAMC,IAAUF,EAAWH,CAAkB;AAC7C,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;"}

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

@@ -0,0 +1,43 @@
+"use client";
+import { useRef as s, useEffect as m, useCallback as E } from "react";
+function x({
+  isActive: t,
+  containerRef: n,
+  restoreFocus: f = !0,
+  initialFocusRef: r
+}) {
+  const u = s(null);
+  m(() => {
+    if (t) {
+      if (u.current = document.activeElement, r != null && r.current)
+        r.current.focus();
+      else if (n.current) {
+        const e = n.current.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        e == null || e.focus();
+      }
+    } else f && u.current && (u.current.focus(), u.current = null);
+  }, [t, n, r, f]);
+  const l = E(
+    (e) => {
+      if (!(!t || !n.current) && e.key === "Tab") {
+        const d = n.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        ), c = d[0], o = d[d.length - 1];
+        e.shiftKey ? document.activeElement === c && (e.preventDefault(), o == null || o.focus()) : document.activeElement === o && (e.preventDefault(), c == null || c.focus());
+      }
+    },
+    [t, n]
+  );
+  m(() => {
+    if (t)
+      return document.addEventListener("keydown", l), () => {
+        document.removeEventListener("keydown", l);
+      };
+  }, [t, l]);
+}
+export {
+  x as useFocusManagement
+};
+//# sourceMappingURL=useFocusManagement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusManagement.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useFocusManagement.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useCallback } from \"react\";\n\nexport interface UseFocusManagementOptions {\n  /**\n   * Whether focus trap is active\n   */\n  isActive: boolean;\n\n  /**\n   * Container element to trap focus within\n   */\n  containerRef: React.RefObject<HTMLElement | null>;\n\n  /**\n   * Whether to restore focus to previous element when deactivated\n   * @default true\n   */\n  restoreFocus?: boolean;\n\n  /**\n   * Initial element to focus when activated\n   */\n  initialFocusRef?: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Hook for managing focus within a container (focus trap)\n *\n * Traps focus within a container element, useful for modals and overlays.\n * Supports restoring focus when deactivated.\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * useFocusManagement({\n *   isActive: isOpen,\n *   containerRef,\n *   restoreFocus: true\n * });\n * ```\n */\nexport function useFocusManagement({\n  isActive,\n  containerRef,\n  restoreFocus = true,\n  initialFocusRef,\n}: UseFocusManagementOptions) {\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n\n  // Save previous focus when activating\n  useEffect(() => {\n    if (isActive) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement;\n\n      // Focus initial element if provided\n      if (initialFocusRef?.current) {\n        initialFocusRef.current.focus();\n      } else if (containerRef.current) {\n        // Otherwise focus first focusable element in container\n        const firstFocusable = containerRef.current.querySelector(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        ) as HTMLElement;\n        firstFocusable?.focus();\n      }\n    } else if (restoreFocus && previousActiveElementRef.current) {\n      // Restore focus when deactivating\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [isActive, containerRef, initialFocusRef, restoreFocus]);\n\n  // Trap focus within container\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (!isActive || !containerRef.current) return;\n\n      // Handle Tab key\n      if (event.key === \"Tab\") {\n        const focusableElements = containerRef.current.querySelectorAll(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        const firstFocusable = focusableElements[0] as HTMLElement;\n        const lastFocusable = focusableElements[\n          focusableElements.length - 1\n        ] as HTMLElement;\n\n        if (event.shiftKey) {\n          // Shift + Tab\n          if (document.activeElement === firstFocusable) {\n            event.preventDefault();\n            lastFocusable?.focus();\n          }\n        } else {\n          // Tab\n          if (document.activeElement === lastFocusable) {\n            event.preventDefault();\n            firstFocusable?.focus();\n          }\n        }\n      }\n    },\n    [isActive, containerRef],\n  );\n\n  useEffect(() => {\n    if (!isActive) return;\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [isActive, handleKeyDown]);\n}\n"],"names":["useFocusManagement","isActive","containerRef","restoreFocus","initialFocusRef","previousActiveElementRef","useRef","useEffect","firstFocusable","handleKeyDown","useCallback","event","focusableElements","lastFocusable"],"mappings":";;AA2CO,SAASA,EAAmB;AAAA,EACjC,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AACF,GAA8B;AAC5B,QAAMC,IAA2BC,EAA2B,IAAI;AAGhE,EAAAC,EAAU,MAAM;AACd,QAAIN;AAIF,UAHAI,EAAyB,UAAU,SAAS,eAGxCD,KAAA,QAAAA,EAAiB;AACnB,QAAAA,EAAgB,QAAQ,MAAA;AAAA,eACfF,EAAa,SAAS;AAE/B,cAAMM,IAAiBN,EAAa,QAAQ;AAAA,UAC1C;AAAA,QAAA;AAEF,QAAAM,KAAA,QAAAA,EAAgB;AAAA,MAClB;AAAA,UACF,CAAWL,KAAgBE,EAAyB,YAElDA,EAAyB,QAAQ,MAAA,GACjCA,EAAyB,UAAU;AAAA,EAEvC,GAAG,CAACJ,GAAUC,GAAcE,GAAiBD,CAAY,CAAC;AAG1D,QAAMM,IAAgBC;AAAA,IACpB,CAACC,MAAyB;AACxB,UAAI,GAACV,KAAY,CAACC,EAAa,YAG3BS,EAAM,QAAQ,OAAO;AACvB,cAAMC,IAAoBV,EAAa,QAAQ;AAAA,UAC7C;AAAA,QAAA,GAGIM,IAAiBI,EAAkB,CAAC,GACpCC,IAAgBD,EACpBA,EAAkB,SAAS,CAC7B;AAEA,QAAID,EAAM,WAEJ,SAAS,kBAAkBH,MAC7BG,EAAM,eAAA,GACNE,KAAA,QAAAA,EAAe,WAIb,SAAS,kBAAkBA,MAC7BF,EAAM,eAAA,GACNH,KAAA,QAAAA,EAAgB;AAAA,MAGtB;AAAA,IACF;AAAA,IACA,CAACP,GAAUC,CAAY;AAAA,EAAA;AAGzB,EAAAK,EAAU,MAAM;AACd,QAAKN;AAEL,sBAAS,iBAAiB,WAAWQ,CAAa,GAC3C,MAAM;AACX,iBAAS,oBAAoB,WAAWA,CAAa;AAAA,MACvD;AAAA,EACF,GAAG,CAACR,GAAUQ,CAAa,CAAC;AAC9B;"}

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

@@ -0,0 +1,59 @@
+"use client";
+var m = Object.defineProperty, w = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, J = Object.prototype.propertyIsEnumerable;
+var l = (e, t, o) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, s = (e, t) => {
+  for (var o in t || (t = {}))
+    I.call(t, o) && l(e, o, t[o]);
+  if (f)
+    for (var o of f(t))
+      J.call(t, o) && l(e, o, t[o]);
+  return e;
+}, i = (e, t) => w(e, C(t));
+import { useState as N, useEffect as O, useCallback as p } from "react";
+function h({
+  defaultStates: e = {},
+  persist: t = !1,
+  storageKey: o
+} = {}) {
+  const a = () => {
+    if (t && o && typeof window != "undefined") {
+      const n = localStorage.getItem(`${o}-groups`);
+      if (n)
+        try {
+          const r = JSON.parse(n);
+          return s(s({}, e), r);
+        } catch (r) {
+        }
+    }
+    return e;
+  }, [c, u] = N(a);
+  O(() => {
+    t && o && typeof window != "undefined" && localStorage.setItem(`${o}-groups`, JSON.stringify(c));
+  }, [t, o, c]);
+  const S = p((n) => {
+    u((r) => i(s({}, r), {
+      [n]: !r[n]
+    }));
+  }, []), d = p(
+    (n, r) => {
+      u((G) => i(s({}, G), {
+        [n]: r
+      }));
+    },
+    []
+  ), g = p(() => {
+    u(e);
+  }, [e]);
+  return {
+    groupStates: c,
+    toggleGroup: S,
+    setGroupCollapsed: d,
+    resetGroups: g
+  };
+}
+export {
+  h as useGroupState
+};
+//# sourceMappingURL=useGroupState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupState.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useGroupState.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useEffect } from \"react\";\nimport type { UseGroupStateOptions, UseGroupStateReturn } from \"../types\";\n\n/**\n * Hook for managing collapsible group states\n *\n * Manages collapsed/expanded state for multiple groups with optional persistence.\n * Used internally by SideNavbarStateProvider, but can be used standalone.\n *\n * @example\n * ```tsx\n * const { groupStates, toggleGroup, setGroupCollapsed } = useGroupState({\n *   defaultStates: { filters: false, settings: true },\n *   persist: true,\n *   storageKey: 'my-sidebar-groups',\n * });\n *\n * // Check if group is collapsed\n * const isFiltersCollapsed = groupStates['filters'] ?? false;\n *\n * // Toggle a group\n * toggleGroup('filters');\n *\n * // Set specific state\n * setGroupCollapsed('settings', false);\n * ```\n */\nexport function useGroupState({\n  defaultStates = {},\n  persist = false,\n  storageKey,\n}: UseGroupStateOptions = {}): UseGroupStateReturn {\n  // Initialize state from storage or defaults\n  const getInitialStates = (): Record<string, boolean> => {\n    if (persist && storageKey && typeof window !== \"undefined\") {\n      const stored = localStorage.getItem(`${storageKey}-groups`);\n      if (stored) {\n        try {\n          const parsed = JSON.parse(stored);\n          return { ...defaultStates, ...parsed };\n        } catch {\n          // Invalid JSON, use defaults\n        }\n      }\n    }\n    return defaultStates;\n  };\n\n  const [groupStates, setGroupStates] =\n    useState<Record<string, boolean>>(getInitialStates);\n\n  // Persist state changes\n  useEffect(() => {\n    if (persist && storageKey && typeof window !== \"undefined\") {\n      localStorage.setItem(`${storageKey}-groups`, JSON.stringify(groupStates));\n    }\n  }, [persist, storageKey, groupStates]);\n\n  const toggleGroup = useCallback((groupId: string) => {\n    setGroupStates((prev) => ({\n      ...prev,\n      [groupId]: !prev[groupId],\n    }));\n  }, []);\n\n  const setGroupCollapsed = useCallback(\n    (groupId: string, collapsed: boolean) => {\n      setGroupStates((prev) => ({\n        ...prev,\n        [groupId]: collapsed,\n      }));\n    },\n    [],\n  );\n\n  const resetGroups = useCallback(() => {\n    setGroupStates(defaultStates);\n  }, [defaultStates]);\n\n  return {\n    groupStates,\n    toggleGroup,\n    setGroupCollapsed,\n    resetGroups,\n  };\n}\n\nexport default useGroupState;\n"],"names":["useGroupState","defaultStates","persist","storageKey","getInitialStates","stored","parsed","__spreadValues","e","groupStates","setGroupStates","useState","useEffect","toggleGroup","useCallback","groupId","prev","__spreadProps","setGroupCollapsed","collapsed","resetGroups"],"mappings":";;;;;;;;;;;;;;AA6BO,SAASA,EAAc;AAAA,EAC5B,eAAAC,IAAgB,CAAA;AAAA,EAChB,SAAAC,IAAU;AAAA,EACV,YAAAC;AACF,IAA0B,IAAyB;AAEjD,QAAMC,IAAmB,MAA+B;AACtD,QAAIF,KAAWC,KAAc,OAAO,UAAW,aAAa;AAC1D,YAAME,IAAS,aAAa,QAAQ,GAAGF,CAAU,SAAS;AAC1D,UAAIE;AACF,YAAI;AACF,gBAAMC,IAAS,KAAK,MAAMD,CAAM;AAChC,iBAAOE,IAAA,IAAKN,IAAkBK;AAAA,QAChC,SAAQE,GAAA;AAAA,QAER;AAAA,IAEJ;AACA,WAAOP;AAAA,EACT,GAEM,CAACQ,GAAaC,CAAc,IAChCC,EAAkCP,CAAgB;AAGpD,EAAAQ,EAAU,MAAM;AACd,IAAIV,KAAWC,KAAc,OAAO,UAAW,eAC7C,aAAa,QAAQ,GAAGA,CAAU,WAAW,KAAK,UAAUM,CAAW,CAAC;AAAA,EAE5E,GAAG,CAACP,GAASC,GAAYM,CAAW,CAAC;AAErC,QAAMI,IAAcC,EAAY,CAACC,MAAoB;AACnD,IAAAL,EAAe,CAACM,MAAUC,EAAAV,EAAA,IACrBS,IADqB;AAAA,MAExB,CAACD,CAAO,GAAG,CAACC,EAAKD,CAAO;AAAA,IAAA,EACxB;AAAA,EACJ,GAAG,CAAA,CAAE,GAECG,IAAoBJ;AAAA,IACxB,CAACC,GAAiBI,MAAuB;AACvC,MAAAT,EAAe,CAACM,MAAUC,EAAAV,EAAA,IACrBS,IADqB;AAAA,QAExB,CAACD,CAAO,GAAGI;AAAA,MAAA,EACX;AAAA,IACJ;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAcN,EAAY,MAAM;AACpC,IAAAJ,EAAeT,CAAa;AAAA,EAC9B,GAAG,CAACA,CAAa,CAAC;AAElB,SAAO;AAAA,IACL,aAAAQ;AAAA,IACA,aAAAI;AAAA,IACA,mBAAAK;AAAA,IACA,aAAAE;AAAA,EAAA;AAEJ;"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { useCallback as w, useEffect as k } from "react";
+function M({
+  key: o,
+  ctrl: s = !1,
+  shift: e = !1,
+  alt: y = !1,
+  meta: a = !1,
+  onTrigger: f,
+  enabled: i = !0,
+  preventDefault: u = !0
+}) {
+  const c = w(
+    (t) => {
+      if (!i) return;
+      const r = t.target;
+      if ((r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.isContentEditable) && !s && !a)
+        return;
+      const l = o.length === 1 ? t.key.toLowerCase() === o.toLowerCase() : t.key === o, n = s ? t.ctrlKey || t.metaKey : !t.ctrlKey && !t.metaKey, h = e ? t.shiftKey : !t.shiftKey, K = y ? t.altKey : !t.altKey, d = a ? t.metaKey : !t.metaKey, m = s ? (t.ctrlKey || t.metaKey) && !a : n && d;
+      l && m && h && K && (u && (t.preventDefault(), t.stopPropagation()), f());
+    },
+    [i, o, s, e, y, a, f, u]
+  );
+  k(() => {
+    if (i)
+      return window.addEventListener("keydown", c), () => {
+        window.removeEventListener("keydown", c);
+      };
+  }, [i, c]);
+}
+export {
+  M as useKeyboardShortcut
+};
+//# sourceMappingURL=useKeyboardShortcut.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcut.js","sources":["../../../../../../src/ui/components/SideNavbar/hooks/useKeyboardShortcut.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useCallback } from \"react\";\n\nexport interface UseKeyboardShortcutOptions {\n  /**\n   * Key to listen for (e.g., 'b', 'Escape', 'Enter')\n   */\n  key: string;\n\n  /**\n   * Whether Ctrl/Cmd key should be pressed\n   * @default false\n   */\n  ctrl?: boolean;\n\n  /**\n   * Whether Shift key should be pressed\n   * @default false\n   */\n  shift?: boolean;\n\n  /**\n   * Whether Alt key should be pressed\n   * @default false\n   */\n  alt?: boolean;\n\n  /**\n   * Whether Meta key should be pressed (Cmd on Mac)\n   * @default false\n   */\n  meta?: boolean;\n\n  /**\n   * Callback when shortcut is triggered\n   */\n  onTrigger: () => void;\n\n  /**\n   * Whether the shortcut is enabled\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Whether to prevent default behavior\n   * @default true\n   */\n  preventDefault?: boolean;\n}\n\n/**\n * Hook for keyboard shortcuts\n *\n * Listens for keyboard combinations and triggers callbacks.\n * Automatically ignores input fields unless explicitly allowed.\n *\n * @example\n * ```tsx\n * useKeyboardShortcut({\n *   key: 'b',\n *   ctrl: true,\n *   onTrigger: () => toggleSidebar(),\n * });\n * ```\n */\nexport function useKeyboardShortcut({\n  key: targetKey,\n  ctrl = false,\n  shift = false,\n  alt = false,\n  meta = false,\n  onTrigger,\n  enabled = true,\n  preventDefault = true,\n}: UseKeyboardShortcutOptions) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (!enabled) return;\n\n      // Don't trigger in input fields (unless it's a system shortcut)\n      const target = event.target as HTMLElement;\n      const isInputField =\n        target.tagName === \"INPUT\" ||\n        target.tagName === \"TEXTAREA\" ||\n        target.isContentEditable;\n\n      // Allow Ctrl/Cmd shortcuts in inputs (like Ctrl+B)\n      if (isInputField && !ctrl && !meta) {\n        return;\n      }\n\n      // Check key match (case-insensitive for letter keys)\n      const keyMatch =\n        targetKey.length === 1\n          ? event.key.toLowerCase() === targetKey.toLowerCase()\n          : event.key === targetKey;\n\n      // Check modifier keys\n      const ctrlMatch = ctrl\n        ? event.ctrlKey || event.metaKey\n        : !event.ctrlKey && !event.metaKey;\n      const shiftMatch = shift ? event.shiftKey : !event.shiftKey;\n      const altMatch = alt ? event.altKey : !event.altKey;\n      const metaMatch = meta ? event.metaKey : !event.metaKey;\n\n      // If ctrl is true, allow either Ctrl or Meta (Cmd on Mac)\n      const modifierMatch = ctrl\n        ? (event.ctrlKey || event.metaKey) && !meta\n        : ctrlMatch && metaMatch;\n\n      if (keyMatch && modifierMatch && shiftMatch && altMatch) {\n        if (preventDefault) {\n          event.preventDefault();\n          event.stopPropagation();\n        }\n        onTrigger();\n      }\n    },\n    [enabled, targetKey, ctrl, shift, alt, meta, onTrigger, preventDefault],\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [enabled, handleKeyDown]);\n}\n"],"names":["useKeyboardShortcut","targetKey","ctrl","shift","alt","meta","onTrigger","enabled","preventDefault","handleKeyDown","useCallback","event","target","keyMatch","ctrlMatch","shiftMatch","altMatch","metaMatch","modifierMatch","useEffect"],"mappings":";;AAmEO,SAASA,EAAoB;AAAA,EAClC,KAAKC;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,gBAAAC,IAAiB;AACnB,GAA+B;AAC7B,QAAMC,IAAgBC;AAAA,IACpB,CAACC,MAAyB;AACxB,UAAI,CAACJ,EAAS;AAGd,YAAMK,IAASD,EAAM;AAOrB,WALEC,EAAO,YAAY,WACnBA,EAAO,YAAY,cACnBA,EAAO,sBAGW,CAACV,KAAQ,CAACG;AAC5B;AAIF,YAAMQ,IACJZ,EAAU,WAAW,IACjBU,EAAM,IAAI,YAAA,MAAkBV,EAAU,YAAA,IACtCU,EAAM,QAAQV,GAGda,IAAYZ,IACdS,EAAM,WAAWA,EAAM,UACvB,CAACA,EAAM,WAAW,CAACA,EAAM,SACvBI,IAAaZ,IAAQQ,EAAM,WAAW,CAACA,EAAM,UAC7CK,IAAWZ,IAAMO,EAAM,SAAS,CAACA,EAAM,QACvCM,IAAYZ,IAAOM,EAAM,UAAU,CAACA,EAAM,SAG1CO,IAAgBhB,KACjBS,EAAM,WAAWA,EAAM,YAAY,CAACN,IACrCS,KAAaG;AAEjB,MAAIJ,KAAYK,KAAiBH,KAAcC,MACzCR,MACFG,EAAM,eAAA,GACNA,EAAM,gBAAA,IAERL,EAAA;AAAA,IAEJ;AAAA,IACA,CAACC,GAASN,GAAWC,GAAMC,GAAOC,GAAKC,GAAMC,GAAWE,CAAc;AAAA,EAAA;AAGxE,EAAAW,EAAU,MAAM;AACd,QAAKZ;AAEL,oBAAO,iBAAiB,WAAWE,CAAa,GACzC,MAAM;AACX,eAAO,oBAAoB,WAAWA,CAAa;AAAA,MACrD;AAAA,EACF,GAAG,CAACF,GAASE,CAAa,CAAC;AAC7B;"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { useState as b, useRef as w, useCallback as m, useEffect as I } from "react";
+import { clampWidth as R } from "../utils/parseWidth.js";
+function q({
+  initialWidth: d,
+  minWidth: c,
+  maxWidth: o,
+  snapPoints: u,
+  snapThreshold: M = 20,
+  onWidthChange: f,
+  enabled: s = !0
+}) {
+  const S = R(d, c, o), [n, z] = b(S), [t, E] = b(!1), i = w(0), a = w(S), v = m(
+    (r) => {
+      let e = R(r, c, o);
+      if (u && u.length > 0) {
+        const l = u.reduce((L, X) => {
+          const D = Math.abs(e - X), T = Math.abs(e - L);
+          return D < T ? X : L;
+        }, u[0]);
+        Math.abs(e - l) <= M && (e = l);
+      }
+      z(e), f == null || f(e);
+    },
+    [c, o, u, M, f]
+  ), y = m(
+    (r) => {
+      if (!s || !t) return;
+      const e = r.clientX - i.current, l = a.current + e;
+      v(l);
+    },
+    [s, t, v]
+  ), p = m(() => {
+    s && (E(!1), i.current = 0, a.current = n);
+  }, [s, n]), k = m(
+    (r) => {
+      s && (r.preventDefault(), r.stopPropagation(), E(!0), i.current = r.clientX, a.current = n);
+    },
+    [s, n]
+  );
+  return I(() => {
+    if (t)
+      return document.addEventListener("mousemove", y), document.addEventListener("mouseup", p), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", () => {
+        document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", p), document.body.style.userSelect = "", document.body.style.cursor = "";
+      };
+  }, [t, y, p]), I(() => {
+    t || z(R(d, c, o));
+  }, [d, c, o, t]), {
+    width: n,
+    isResizing: t,
+    startResize: k,
+    setWidth: v
+  };
+}
+export {
+  q as useResize
+};
+//# sourceMappingURL=useResize.js.map