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

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

@@ -0,0 +1,113 @@
+"use client";
+var v = Object.defineProperty, w = Object.defineProperties;
+var R = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var c = (e, r, t) => r in e ? v(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, p = (e, r) => {
+  for (var t in r || (r = {}))
+    l.call(r, t) && c(e, t, r[t]);
+  if (o)
+    for (var t of o(r))
+      u.call(r, t) && c(e, t, r[t]);
+  return e;
+}, d = (e, r) => w(e, R(r));
+var f = (e, r) => {
+  var t = {};
+  for (var i in e)
+    l.call(e, i) && r.indexOf(i) < 0 && (t[i] = e[i]);
+  if (e != null && o)
+    for (var i of o(e))
+      r.indexOf(i) < 0 && u.call(e, i) && (t[i] = e[i]);
+  return t;
+};
+import { jsxs as z, jsx as b } from "react/jsx-runtime";
+import { GripVertical as x } from "lucide-react";
+import { useSideNavbarStateRequired as N } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarConfigRequired as $ } from "../contexts/SideNavbarConfigContext.js";
+import { getRadiusClass as S } from "../../../tokens/radius.js";
+function L(t) {
+  var i = t, {
+    className: e = ""
+  } = i, r = f(i, [
+    "className"
+  ]);
+  const { currentWidth: n, setWidth: m, isResizing: s, startResize: g } = N(), { resizable: h } = $();
+  return h ? (
+    // micro-z: resize handle above sidebar border for grab affordance (see z-10 below)
+    /* @__PURE__ */ z(
+      "div",
+      d(p({
+        className: `
+        group
+        absolute
+        top-0
+        right-0
+        w-1
+        h-full
+        cursor-col-resize
+        hover:bg-surface-brand/50
+        active:bg-surface-brand-emphasis
+        transition-colors
+        duration-150
+        z-10
+        flex
+        items-center
+        justify-center
+        ${s ? "bg-surface-brand-emphasis" : ""}
+        ${e}
+      `,
+        onMouseDown: g,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": "Resize sidebar",
+        "aria-valuenow": n,
+        tabIndex: 0,
+        onKeyDown: (a) => {
+          if (a.key === "ArrowLeft" || a.key === "ArrowRight") {
+            a.preventDefault();
+            const y = a.key === "ArrowLeft" ? -10 : 10;
+            m(n + y);
+          }
+        }
+      }, r), {
+        children: [
+          /* @__PURE__ */ b(
+            "div",
+            {
+              className: `
+          w-0.5
+          h-8
+          bg-line-strong
+          ${S("full")}
+          opacity-0
+          group-hover:opacity-100
+          transition-opacity
+          ${s ? "opacity-100" : ""}
+        `
+            }
+          ),
+          /* @__PURE__ */ b(
+            x,
+            {
+              className: `
+          h-4
+          w-4
+          text-fg-tertiary
+          opacity-0
+          group-hover:opacity-100
+          transition-opacity
+          absolute
+          ${s ? "opacity-100" : ""}
+        `,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      })
+    )
+  ) : null;
+}
+export {
+  L as default
+};
+//# sourceMappingURL=SideNavbarResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarResizeHandle.js","sources":["../../../../../../src/ui/components/SideNavbar/components/SideNavbarResizeHandle.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes } from \"react\";\nimport { GripVertical } from \"lucide-react\";\nimport { useSideNavbarStateRequired } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { getRadiusClass } from \"../../../tokens/radius\";\n\nexport type SideNavbarResizeHandleProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * SideNavbar Resize Handle Component\n *\n * Drag handle for resizing the sidebar width.\n * Uses context for state management - no props needed for resize configuration.\n *\n * @example\n * ```tsx\n * <SideNavbar resizable minWidth={200} maxWidth={600}>\n *   <SideNavbar.ResizeHandle />\n *   ...\n * </SideNavbar>\n * ```\n */\nexport default function SideNavbarResizeHandle({\n  className = \"\",\n  ...props\n}: SideNavbarResizeHandleProps) {\n  const { currentWidth, setWidth, isResizing, startResize } =\n    useSideNavbarStateRequired();\n  const { resizable } = useSideNavbarConfigRequired();\n\n  if (!resizable) {\n    return null;\n  }\n\n  return (\n    // micro-z: resize handle above sidebar border for grab affordance (see z-10 below)\n    <div\n      className={`\n        group\n        absolute\n        top-0\n        right-0\n        w-1\n        h-full\n        cursor-col-resize\n        hover:bg-surface-brand/50\n        active:bg-surface-brand-emphasis\n        transition-colors\n        duration-150\n        z-10\n        flex\n        items-center\n        justify-center\n        ${isResizing ? \"bg-surface-brand-emphasis\" : \"\"}\n        ${className}\n      `}\n      onMouseDown={startResize}\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize sidebar\"\n      aria-valuenow={currentWidth}\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n          e.preventDefault();\n          const delta = e.key === \"ArrowLeft\" ? -10 : 10;\n          setWidth(currentWidth + delta);\n        }\n      }}\n      {...props}\n    >\n      <div\n        className={`\n          w-0.5\n          h-8\n          bg-line-strong\n          ${getRadiusClass(\"full\")}\n          opacity-0\n          group-hover:opacity-100\n          transition-opacity\n          ${isResizing ? \"opacity-100\" : \"\"}\n        `}\n      />\n      <GripVertical\n        className={`\n          h-4\n          w-4\n          text-fg-tertiary\n          opacity-0\n          group-hover:opacity-100\n          transition-opacity\n          absolute\n          ${isResizing ? \"opacity-100\" : \"\"}\n        `}\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n"],"names":["SideNavbarResizeHandle","_a","_b","className","props","__objRest","currentWidth","setWidth","isResizing","startResize","useSideNavbarStateRequired","resizable","useSideNavbarConfigRequired","jsxs","__spreadProps","__spreadValues","e","delta","jsx","getRadiusClass","GripVertical"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAwBA,EAAuBC,GAGf;AAHe,MAAAC,IAAAD,GAC7C;AAAA,eAAAE,IAAY;AAAA,MADiCD,GAE1CE,IAAAC,EAF0CH,GAE1C;AAAA,IADH;AAAA;AAGA,QAAM,EAAE,cAAAI,GAAc,UAAAC,GAAU,YAAAC,GAAY,aAAAC,EAAA,IAC1CC,EAAA,GACI,EAAE,WAAAC,EAAA,IAAcC,EAAA;AAEtB,SAAKD;AAAA;AAAA,IAMH,gBAAAE;AAAA,MAAC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAgBPP,IAAa,8BAA8B,EAAE;AAAA,UAC7CL,CAAS;AAAA;AAAA,QAEb,aAAaM;AAAA,QACb,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,cAAW;AAAA,QACX,iBAAeH;AAAA,QACf,UAAU;AAAA,QACV,WAAW,CAACU,MAAM;AAChB,cAAIA,EAAE,QAAQ,eAAeA,EAAE,QAAQ,cAAc;AACnD,YAAAA,EAAE,eAAA;AACF,kBAAMC,IAAQD,EAAE,QAAQ,cAAc,MAAM;AAC5C,YAAAT,EAASD,IAAeW,CAAK;AAAA,UAC/B;AAAA,QACF;AAAA,SACIb,IAjCL;AAAA,QAmCC,UAAA;AAAA,UAAA,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA;AAAA,YAIPC,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,YAItBX,IAAa,gBAAgB,EAAE;AAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGrC,gBAAAU;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQPZ,IAAa,gBAAgB,EAAE;AAAA;AAAA,cAEnC,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,MAhEK;AAmEX;"}

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

@@ -0,0 +1,150 @@
+"use client";
+var L = Object.defineProperty, Q = Object.defineProperties;
+var X = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var M = Object.prototype.hasOwnProperty, O = Object.prototype.propertyIsEnumerable;
+var W = (e, o, i) => o in e ? L(e, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[o] = i, b = (e, o) => {
+  for (var i in o || (o = {}))
+    M.call(o, i) && W(e, i, o[i]);
+  if (u)
+    for (var i of u(o))
+      O.call(o, i) && W(e, i, o[i]);
+  return e;
+}, P = (e, o) => Q(e, X(o));
+var _ = (e, o) => {
+  var i = {};
+  for (var t in e)
+    M.call(e, t) && o.indexOf(t) < 0 && (i[t] = e[t]);
+  if (e != null && u)
+    for (var t of u(e))
+      o.indexOf(t) < 0 && O.call(e, t) && (i[t] = e[t]);
+  return i;
+};
+import { jsxs as E, Fragment as Y, jsx as v } from "react/jsx-runtime";
+import { useState as ee, useEffect as oe, Children as V, isValidElement as k } from "react";
+import { useSideNavbarStateRequired as ie } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as te } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as re } from "../contexts/SideNavbarConfigContext.js";
+import { useSideNavbarToggleContextRequired as ae } from "../contexts/SideNavbarToggleContext.js";
+import { getShadowClass as ne } from "../../../tokens/shadows.js";
+import { getZIndexClass as se } from "../../../tokens/z-index.js";
+import le from "./SideNavbarResizeHandle.js";
+import de from "./SideNavbarBackdrop.js";
+import ce from "./SideNavbarToggle.js";
+import { cn as fe } from "../../../utils/cn.js";
+function $(e) {
+  return !k(e) || typeof e.type == "string" ? !1 : e.type.__SIDENAVBAR_KIND__ === "navbar";
+}
+function ue(e) {
+  let o, i, t = 0, c = !1;
+  for (const s of V.toArray(e)) {
+    if ($(s)) {
+      const { showMainToggle: r, mainTogglePosition: a } = s.props;
+      if (!(r !== void 0 || a !== void 0)) continue;
+      t++, t === 1 && (o = r, i = a);
+      continue;
+    }
+    if (!k(s)) continue;
+    const l = s.props;
+    if (l.children !== void 0)
+      for (const r of V.toArray(l.children)) {
+        if (!$(r)) continue;
+        const { showMainToggle: a, mainTogglePosition: f } = r.props;
+        if (a !== void 0 || f !== void 0) {
+          c = !0;
+          break;
+        }
+      }
+  }
+  return {
+    show: o,
+    position: i,
+    overrideCount: t,
+    wrappedNavbarWithOverride: c
+  };
+}
+const ve = {
+  default: "",
+  compact: "text-sm",
+  elevated: ne("lg"),
+  minimal: "border-0",
+  bordered: "border-2"
+};
+function Oe(s) {
+  var l = s, {
+    children: e,
+    className: o = "",
+    style: i,
+    "aria-label": t
+  } = l, c = _(l, [
+    "children",
+    "className",
+    "style",
+    "aria-label"
+  ]);
+  var T, R;
+  const r = ie(), a = te(), f = re(), h = ae(), x = ue(e), q = (T = x.show) != null ? T : h.showMainToggle, A = (R = x.position) != null ? R : h.mainTogglePosition, {
+    collapsed: n,
+    setCollapsed: me,
+    currentWidth: D,
+    isResizing: I,
+    sidebarRef: z,
+    isMobile: B
+  } = r, {
+    variant: F,
+    navigationWidth: m,
+    contentWidth: p,
+    animationDuration: j,
+    animationEasing: H
+  } = a, { mode: d, resizable: w, mobileVariant: K, overlayBackdrop: U } = f, N = typeof m == "number" ? `${m}px` : m, Z = typeof p == "number" ? `${p}px` : p, S = d === "navigation" || n ? N : w ? `${D}px` : Z, [y, G] = ee(!1);
+  oe(() => {
+    G(!0);
+  }, []);
+  const C = B && K === "overlay", g = y && C, J = g ? `fixed left-0 top-0 ${se("fixed")}` : "relative";
+  return /* @__PURE__ */ E(Y, { children: [
+    y && C && U && !n && /* @__PURE__ */ v(de, {}),
+    /* @__PURE__ */ E(
+      "aside",
+      P(b({
+        ref: z,
+        id: "side-navbar-sidebar",
+        className: fe(
+          J,
+          "flex",
+          "h-full",
+          "overflow-visible",
+          ve[F],
+          g && n ? "-translate-x-full" : "translate-x-0",
+          o
+        ),
+        style: b({
+          // Em desktop: sempre 'relative' para ficar no mesmo plano do conteúdo
+          // Em mobile overlay: 'fixed' para sobrepor o conteúdo
+          position: g ? "fixed" : "relative",
+          backgroundColor: "var(--color-surface-subtle)",
+          borderRight: "1px solid var(--color-line-default)",
+          width: S,
+          minWidth: S,
+          transitionProperty: I ? "none" : "width, min-width, transform",
+          transitionDuration: `${j}ms`,
+          transitionTimingFunction: H
+        }, i),
+        role: "complementary",
+        "aria-label": t || "Sidebar navigation",
+        "aria-expanded": d !== "navigation" ? !n : void 0,
+        "data-mode": d,
+        "data-collapsed": n
+      }, c), {
+        children: [
+          w && d !== "navigation" && !n && /* @__PURE__ */ v(le, {}),
+          q && d !== "navigation" && /* @__PURE__ */ v(ce, { position: A }),
+          /* @__PURE__ */ v("div", { className: "flex h-full w-full overflow-visible", children: e })
+        ]
+      })
+    )
+  ] });
+}
+export {
+  Oe as default
+};
+//# sourceMappingURL=SideNavbarRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarRoot.js","sources":["../../../../../../src/ui/components/SideNavbar/components/SideNavbarRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  Children,\n  isValidElement,\n  useState,\n  useEffect,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useSideNavbarStateRequired } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { useSideNavbarToggleContextRequired } from \"../contexts/SideNavbarToggleContext\";\nimport { cn } from \"../../../utils\";\nimport { getShadowClass } from \"../../../tokens/shadows\";\nimport { getZIndexClass } from \"../../../tokens/z-index\";\nimport SideNavbarResizeHandle from \"./SideNavbarResizeHandle\";\nimport SideNavbarBackdrop from \"./SideNavbarBackdrop\";\nimport SideNavbarToggle from \"./SideNavbarToggle\";\nimport type {\n  SideNavbarRootProps,\n  SideNavbarTogglePosition,\n  NavbarProps,\n} from \"../types\";\n\n// ---------------------------------------------------------------------------\n// Per-Navbar override resolution (render-driven, see Phase 2C Treatment 2)\n// ---------------------------------------------------------------------------\n\n/**\n * Type guard: is `child` a `<SideNavbar.Navbar>` element?\n *\n * Uses the static `__SIDENAVBAR_KIND__ === \"navbar\"` marker attached to\n * the Navbar component (set in Navbar.tsx). String tag is resilient to\n * React DevTools displayName mutations and survives function-identity\n * wrapping better than `element.type === Navbar` reference comparison.\n * The single `as` cast is confined to this guard with a `typeof !==\n * \"string\"` short-circuit guarding against host elements (which would\n * otherwise satisfy `isValidElement` but never carry our marker).\n */\nfunction isNavbarElement(\n  child: ReactNode,\n): child is ReactElement<\n  Pick<NavbarProps, \"showMainToggle\" | \"mainTogglePosition\">\n> {\n  if (!isValidElement(child)) return false;\n  if (typeof child.type === \"string\") return false;\n  return (\n    (child.type as { __SIDENAVBAR_KIND__?: string }).__SIDENAVBAR_KIND__ ===\n    \"navbar\"\n  );\n}\n\n/**\n * Walk the direct `children` of SideNavbarRoot and return the first\n * `<SideNavbar.Navbar>` override (`showMainToggle` / `mainTogglePosition`)\n * in tree order, plus the count of overrides seen and a hint about\n * wrapper-nesting.\n *\n * Scope is deliberately ONLY direct children — deeper levels aren't\n * inspected (predictable behaviour; matches the documented compound\n * pattern of <SideNavbar><SideNavbar.Navbar/><SideNavbar.Sidebar/>...).\n *\n * The wrapper-nesting hint is a SHALLOW one-level peek: if a direct\n * child is NOT a Navbar but is an element with children that include\n * a Navbar carrying an override, we surface the fact so the caller\n * can warn the dev (Treatment 2 directive: silent failure is the\n * same defect class as the DataGrid dead button).\n *\n * Synchronous and pure — no effects, no state, no context. Correct on\n * the first render (including SSR), no hydration mismatch.\n */\nfunction resolveNavbarOverride(children: ReactNode): {\n  show?: boolean;\n  position?: SideNavbarTogglePosition;\n  overrideCount: number;\n  wrappedNavbarWithOverride: boolean;\n} {\n  let firstShow: boolean | undefined = undefined;\n  let firstPosition: SideNavbarTogglePosition | undefined = undefined;\n  let count = 0;\n  let wrappedHit = false;\n\n  for (const child of Children.toArray(children)) {\n    if (isNavbarElement(child)) {\n      const { showMainToggle, mainTogglePosition } = child.props;\n      const hasOverride =\n        showMainToggle !== undefined || mainTogglePosition !== undefined;\n      if (!hasOverride) continue;\n      count++;\n      if (count === 1) {\n        firstShow = showMainToggle;\n        firstPosition = mainTogglePosition;\n      }\n      continue;\n    }\n    // Wrapper-nesting peek: only one level deep, only if the direct\n    // child is itself an element with children. Cheap and bounded.\n    if (!isValidElement(child)) continue;\n    const props = child.props as { children?: ReactNode };\n    if (props.children === undefined) continue;\n    for (const grandchild of Children.toArray(props.children)) {\n      if (!isNavbarElement(grandchild)) continue;\n      const { showMainToggle, mainTogglePosition } = grandchild.props;\n      if (showMainToggle !== undefined || mainTogglePosition !== undefined) {\n        wrappedHit = true;\n        break;\n      }\n    }\n  }\n\n  return {\n    show: firstShow,\n    position: firstPosition,\n    overrideCount: count,\n    wrappedNavbarWithOverride: wrappedHit,\n  };\n}\n\nconst variantClasses = {\n  default: \"\",\n  compact: \"text-sm\",\n  elevated: getShadowClass(\"lg\"),\n  minimal: \"border-0\",\n  bordered: \"border-2\",\n};\n\n/**\n * SideNavbar Root Component\n *\n * The inner container component that renders the sidebar structure.\n * Uses all three contexts (Theme, Config, State) for rendering.\n *\n * This component is typically used internally by SideNavbar,\n * but can be used directly with individual providers for advanced customization.\n *\n * @example\n * ```tsx\n * // Usually wrapped by SideNavbar\n * <SideNavbar>\n *   <SideNavbar.Navbar>...</SideNavbar.Navbar>\n *   <SideNavbar.Sidebar>\n *     <SideNavbar.Sidebar.Content>...</SideNavbar.Sidebar.Content>\n *   </SideNavbar.Sidebar>\n * </SideNavbar>\n *\n * // Or with individual providers\n * <SideNavbar.ThemeProvider variant=\"elevated\">\n *   <SideNavbar.ConfigProvider mode=\"full\" resizable>\n *     <SideNavbar.StateProvider>\n *       <SideNavbarRoot>...</SideNavbarRoot>\n *     </SideNavbar.StateProvider>\n *   </SideNavbar.ConfigProvider>\n * </SideNavbar.ThemeProvider>\n * ```\n */\nexport default function SideNavbarRoot({\n  children,\n  className = \"\",\n  style,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SideNavbarRootProps) {\n  // Get context values\n  const state = useSideNavbarStateRequired();\n  const theme = useSideNavbarThemeRequired();\n  const config = useSideNavbarConfigRequired();\n  const toggleContext = useSideNavbarToggleContextRequired();\n\n  // Resolve per-Navbar main-toggle override synchronously from the\n  // children of this Root render. Render-driven (no effect, no state,\n  // no context roundtrip) so it's correct on the first commit and on\n  // SSR — see resolveNavbarOverride header for the design rationale.\n  const navbarOverride = resolveNavbarOverride(children);\n\n  // Dev warnings, both synchronous in render so they fire identically\n  // on SSR and client. Two distinct cases:\n  // - Multi-Navbar with overrides: tree-order-first wins; the rest are\n  //   silently dropped. Warn so the dev sees the conflict instead of\n  //   having to debug why only the first override applies.\n  // - Wrapper-nested Navbar: only DIRECT children are inspected. If a\n  //   wrapper hides a Navbar that carries an override, it falls back\n  //   to the global toggle context with no visible signal — same\n  //   silent-failure class the DataGrid dead button had. Warn.\n  if (import.meta.env.DEV) {\n    if (navbarOverride.overrideCount > 1) {\n      console.error(\n        \"SideNavbar: multiple <SideNavbar.Navbar> children set \" +\n          \"main-toggle overrides (showMainToggle / mainTogglePosition). \" +\n          \"Only the first in tree order applies; the rest are ignored. \" +\n          \"Override is a single-Navbar feature — pass these props on at \" +\n          \"most one <SideNavbar.Navbar>.\",\n      );\n    }\n    if (navbarOverride.wrappedNavbarWithOverride) {\n      console.error(\n        \"SideNavbar: a <SideNavbar.Navbar> with a main-toggle override \" +\n          \"appears nested inside a wrapper element. Overrides are only \" +\n          \"read from DIRECT <SideNavbar.Navbar> children — move the \" +\n          \"props up to the Navbar at the SideNavbar root, or remove the \" +\n          \"wrapper.\",\n      );\n    }\n  }\n\n  // First override (if any) wins; otherwise fall back to the global\n  // toggle context (the existing pre-override behaviour).\n  const resolvedShowMainToggle =\n    navbarOverride.show ?? toggleContext.showMainToggle;\n  const resolvedMainTogglePosition =\n    navbarOverride.position ?? toggleContext.mainTogglePosition;\n\n  const {\n    collapsed,\n    setCollapsed: _setCollapsed,\n    currentWidth,\n    isResizing,\n    sidebarRef,\n    isMobile,\n  } = state;\n\n  const {\n    variant,\n    navigationWidth,\n    contentWidth,\n    animationDuration,\n    animationEasing,\n  } = theme;\n\n  const { mode, resizable, mobileVariant, overlayBackdrop } = config;\n\n  // Parse widths\n  const navWidthValue =\n    typeof navigationWidth === \"number\"\n      ? `${navigationWidth}px`\n      : navigationWidth;\n\n  const contentWidthValue =\n    typeof contentWidth === \"number\" ? `${contentWidth}px` : contentWidth;\n\n  // Calculate displayed width based on mode\n  const calculateWidth = () => {\n    if (mode === \"navigation\") {\n      // Navigation-only mode: always show just navigation\n      return navWidthValue;\n    }\n\n    if (collapsed) {\n      return navWidthValue;\n    }\n\n    // Use resize width if resizable, otherwise configured width\n    return resizable ? `${currentWidth}px` : contentWidthValue;\n  };\n\n  const displayedWidth = calculateWidth();\n\n  // Mobile overlay mode\n  // Usar estado para evitar hydration mismatch - só renderizar backdrop após mount\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  const isMobileOverlay = isMobile && mobileVariant === \"overlay\";\n\n  // Durante SSR e antes do mount, sempre usar 'relative' para evitar hydration mismatch\n  // Após mount, usar a classe correta baseada em isMobileOverlay\n  // IMPORTANTE: Em desktop, sempre usar 'relative' para ficar no mesmo plano do conteúdo\n  // Apenas em mobile overlay usar 'fixed' para sobrepor o conteúdo\n  const shouldUseFixed = isMounted && isMobileOverlay;\n  const positionClass = shouldUseFixed\n    ? `fixed left-0 top-0 ${getZIndexClass(\"fixed\")}`\n    : \"relative\";\n\n  return (\n    <>\n      {/* Mobile overlay backdrop - só renderizar após mount para evitar hydration mismatch */}\n      {isMounted && isMobileOverlay && overlayBackdrop && !collapsed && (\n        <SideNavbarBackdrop />\n      )}\n\n      <aside\n        ref={sidebarRef as React.RefObject<HTMLElement>}\n        // SideNavbarToggle's `aria-controls=\"side-navbar-sidebar\"` must\n        // resolve to an element that is ALWAYS in the DOM whenever the\n        // toggle is rendered — independent of whether the consumer\n        // composes in `<SideNavbar.Sidebar>` (the collapsible content\n        // area) or only `<SideNavbar.Navbar>` (the icon strip, the\n        // pattern DashboardLayout uses). The outer `<aside>` is that\n        // anchor: it always renders, and structurally the toggle DOES\n        // control this region's collapsed state. Previously the id\n        // lived on Sidebar.tsx's inner `<div>`, which is conditional —\n        // when Sidebar wasn't composed, the toggle's aria-controls was\n        // a dangling reference (axe `aria-valid-attr-value`, critical).\n        id=\"side-navbar-sidebar\"\n        className={cn(\n          positionClass,\n          \"flex\",\n          \"h-full\",\n          \"overflow-visible\",\n          variantClasses[variant],\n          shouldUseFixed && collapsed ? \"-translate-x-full\" : \"translate-x-0\",\n          className,\n        )}\n        style={\n          {\n            // Em desktop: sempre 'relative' para ficar no mesmo plano do conteúdo\n            // Em mobile overlay: 'fixed' para sobrepor o conteúdo\n            position: shouldUseFixed ? \"fixed\" : \"relative\",\n            backgroundColor: \"var(--color-surface-subtle)\",\n            borderRight: \"1px solid var(--color-line-default)\",\n            width: displayedWidth,\n            minWidth: displayedWidth,\n            transitionProperty: isResizing\n              ? \"none\"\n              : \"width, min-width, transform\",\n            transitionDuration: `${animationDuration}ms`,\n            transitionTimingFunction: animationEasing,\n            ...style,\n          } as React.CSSProperties\n        }\n        role=\"complementary\"\n        aria-label={ariaLabel || \"Sidebar navigation\"}\n        aria-expanded={mode !== \"navigation\" ? !collapsed : undefined}\n        data-mode={mode}\n        data-collapsed={collapsed}\n        {...props}\n      >\n        {/* Resize handle */}\n        {resizable && mode !== \"navigation\" && !collapsed && (\n          <SideNavbarResizeHandle />\n        )}\n\n        {/* Main toggle button at right edge of sidebar — show/position\n            resolved synchronously from children-inspected override OR\n            (when no override) the global toggle context. Always\n            rendered here at the <aside> level; per-Navbar override\n            does NOT relocate the DOM. */}\n        {resolvedShowMainToggle && mode !== \"navigation\" && (\n          <SideNavbarToggle position={resolvedMainTogglePosition} />\n        )}\n\n        {/* Content wrapper */}\n        <div className=\"flex h-full w-full overflow-visible\">{children}</div>\n      </aside>\n    </>\n  );\n}\n"],"names":["isNavbarElement","child","isValidElement","resolveNavbarOverride","children","firstShow","firstPosition","count","wrappedHit","Children","showMainToggle","mainTogglePosition","props","grandchild","variantClasses","getShadowClass","SideNavbarRoot","_a","_b","className","style","ariaLabel","__objRest","state","useSideNavbarStateRequired","theme","useSideNavbarThemeRequired","config","useSideNavbarConfigRequired","toggleContext","useSideNavbarToggleContextRequired","navbarOverride","resolvedShowMainToggle","resolvedMainTogglePosition","collapsed","_setCollapsed","currentWidth","isResizing","sidebarRef","isMobile","variant","navigationWidth","contentWidth","animationDuration","animationEasing","mode","resizable","mobileVariant","overlayBackdrop","navWidthValue","contentWidthValue","displayedWidth","isMounted","setIsMounted","useState","useEffect","isMobileOverlay","shouldUseFixed","positionClass","getZIndexClass","jsxs","Fragment","SideNavbarBackdrop","__spreadProps","__spreadValues","cn","SideNavbarResizeHandle","jsx","SideNavbarToggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAASA,EACPC,GAGA;AAEA,SADI,CAACC,EAAeD,CAAK,KACrB,OAAOA,EAAM,QAAS,WAAiB,KAExCA,EAAM,KAA0C,wBACjD;AAEJ;AAqBA,SAASE,GAAsBC,GAK7B;AACA,MAAIC,GACAC,GACAC,IAAQ,GACRC,IAAa;AAEjB,aAAWP,KAASQ,EAAS,QAAQL,CAAQ,GAAG;AAC9C,QAAIJ,EAAgBC,CAAK,GAAG;AAC1B,YAAM,EAAE,gBAAAS,GAAgB,oBAAAC,EAAA,IAAuBV,EAAM;AAGrD,UAAI,EADFS,MAAmB,UAAaC,MAAuB,QACvC;AAClB,MAAAJ,KACIA,MAAU,MACZF,IAAYK,GACZJ,IAAgBK;AAElB;AAAA,IACF;AAGA,QAAI,CAACT,EAAeD,CAAK,EAAG;AAC5B,UAAMW,IAAQX,EAAM;AACpB,QAAIW,EAAM,aAAa;AACvB,iBAAWC,KAAcJ,EAAS,QAAQG,EAAM,QAAQ,GAAG;AACzD,YAAI,CAACZ,EAAgBa,CAAU,EAAG;AAClC,cAAM,EAAE,gBAAAH,GAAgB,oBAAAC,EAAA,IAAuBE,EAAW;AAC1D,YAAIH,MAAmB,UAAaC,MAAuB,QAAW;AACpE,UAAAH,IAAa;AACb;AAAA,QACF;AAAA,MACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAMH;AAAA,IACN,UAAUC;AAAA,IACV,eAAeC;AAAA,IACf,2BAA2BC;AAAA,EAAA;AAE/B;AAEA,MAAMM,KAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAUC,GAAe,IAAI;AAAA,EAC7B,SAAS;AAAA,EACT,UAAU;AACZ;AA+BA,SAAwBC,GAAeC,GAMf;AANe,MAAAC,IAAAD,GACrC;AAAA,cAAAb;AAAA,IACA,WAAAe,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,cAAcC;AAAA,MAJuBH,GAKlCN,IAAAU,EALkCJ,GAKlC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;;AAIA,QAAMK,IAAQC,GAAA,GACRC,IAAQC,GAAA,GACRC,IAASC,GAAA,GACTC,IAAgBC,GAAA,GAMhBC,IAAiB5B,GAAsBC,CAAQ,GAkC/C4B,KACJf,IAAAc,EAAe,SAAf,OAAAd,IAAuBY,EAAc,gBACjCI,KACJf,IAAAa,EAAe,aAAf,OAAAb,IAA2BW,EAAc,oBAErC;AAAA,IACJ,WAAAK;AAAA,IACA,cAAcC;AAAA,IACd,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEhB,GAEE;AAAA,IACJ,SAAAiB;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACEnB,GAEE,EAAE,MAAAoB,GAAM,WAAAC,GAAW,eAAAC,GAAe,iBAAAC,MAAoBrB,GAGtDsB,IACJ,OAAOR,KAAoB,WACvB,GAAGA,CAAe,OAClBA,GAEAS,IACJ,OAAOR,KAAiB,WAAW,GAAGA,CAAY,OAAOA,GAiBrDS,IAbAN,MAAS,gBAKTX,IACKe,IAIFH,IAAY,GAAGV,CAAY,OAAOc,GAOrC,CAACE,GAAWC,CAAY,IAAIC,GAAS,EAAK;AAEhD,EAAAC,GAAU,MAAM;AACd,IAAAF,EAAa,EAAI;AAAA,EACnB,GAAG,CAAA,CAAE;AAEL,QAAMG,IAAkBjB,KAAYQ,MAAkB,WAMhDU,IAAiBL,KAAaI,GAC9BE,IAAgBD,IAClB,sBAAsBE,GAAe,OAAO,CAAC,KAC7C;AAEJ,SACE,gBAAAC,EAAAC,GAAA,EAEG,UAAA;AAAA,IAAAT,KAAaI,KAAmBR,KAAmB,CAACd,uBAClD4B,IAAA,EAAmB;AAAA,IAGtB,gBAAAF;AAAA,MAAC;AAAA,MAAAG,EAAAC,EAAA;AAAA,QACC,KAAK1B;AAAA,QAYL,IAAG;AAAA,QACH,WAAW2B;AAAA,UACTP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA5C,GAAe0B,CAAO;AAAA,UACtBiB,KAAkBvB,IAAY,sBAAsB;AAAA,UACpDf;AAAA,QAAA;AAAA,QAEF,OACE6C,EAAA;AAAA;AAAA;AAAA,UAGE,UAAUP,IAAiB,UAAU;AAAA,UACrC,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAON;AAAA,UACP,UAAUA;AAAA,UACV,oBAAoBd,IAChB,SACA;AAAA,UACJ,oBAAoB,GAAGM,CAAiB;AAAA,UACxC,0BAA0BC;AAAA,WACvBxB;AAAA,QAGP,MAAK;AAAA,QACL,cAAYC,KAAa;AAAA,QACzB,iBAAewB,MAAS,eAAe,CAACX,IAAY;AAAA,QACpD,aAAWW;AAAA,QACX,kBAAgBX;AAAA,SACZtB,IA7CL;AAAA,QAgDE,UAAA;AAAA,UAAAkC,KAAaD,MAAS,gBAAgB,CAACX,uBACrCgC,IAAA,EAAuB;AAAA,UAQzBlC,KAA0Ba,MAAS,gBAClC,gBAAAsB,EAACC,IAAA,EAAiB,UAAUnC,GAA4B;AAAA,4BAIzD,OAAA,EAAI,WAAU,uCAAuC,UAAA7B,GAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjE,GACF;AAEJ;"}

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

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

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

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

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

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