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

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

@@ -0,0 +1,173 @@
+"use client";
+var C = Object.defineProperty, M = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var S = (e, o, t) => o in e ? C(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, v = (e, o) => {
+  for (var t in o || (o = {}))
+    y.call(o, t) && S(e, t, o[t]);
+  if (n)
+    for (var t of n(o))
+      I.call(o, t) && S(e, t, o[t]);
+  return e;
+}, T = (e, o) => M(e, q(o));
+var _ = (e, o) => {
+  var t = {};
+  for (var r in e)
+    y.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && n)
+    for (var r of n(e))
+      o.indexOf(r) < 0 && I.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { useRef as G, useState as w, useMemo as H } from "react";
+import { NavbarContext as V } from "../../contexts/NavbarContext.js";
+import { useSideNavbarStateRequired as z } from "../../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as F } from "../../contexts/SideNavbarThemeContext.js";
+import { getSpacingClass as m } from "../../../../tokens/spacing.js";
+import d from "./NavbarToggle.js";
+import K from "./NavbarItem.js";
+import L from "./NavbarSeparator.js";
+import { NavbarGroup as P } from "./NavbarGroup.js";
+import { cn as R } from "../../../../utils/cn.js";
+function i(J) {
+  var b = J, {
+    children: e,
+    showMainToggle: o,
+    mainTogglePosition: t,
+    showToggle: r = !1,
+    togglePosition: s = "bottom",
+    labelMode: c = "tooltip",
+    expandedWidth: f = 200,
+    className: k = "",
+    style: D
+  } = b, E = _(b, [
+    "children",
+    // showMainToggle and mainTogglePosition are read by SideNavbarRoot
+    // via children inspection (render-driven override resolution — see
+    // resolveNavbarOverride in SideNavbarRoot.tsx). They're declared in
+    // the destructure so TS6133 doesn't flag the unused names, and so
+    // that consumers passing them as JSX attributes remain in the
+    // public NavbarProps signature. The Navbar function body itself
+    // does not consume them. Same pattern as `_multiSort` / `_reorderable`
+    // in DataGrid.
+    "showMainToggle",
+    "mainTogglePosition",
+    "showToggle",
+    "togglePosition",
+    "labelMode",
+    "expandedWidth",
+    "className",
+    "style"
+  ]);
+  const l = z(), p = F(), x = G(null), [g, $] = w(null), [h, N] = w(!1), u = c === "inline" && !l.collapsed, j = u ? typeof f == "number" ? `${f}px` : f : p.navigationWidth, A = H(
+    () => ({
+      // Inherited from root
+      collapsed: l.collapsed,
+      toggle: l.toggle,
+      // Navbar-specific
+      navbarRef: x,
+      activeItem: g,
+      setActiveItem: $,
+      isHovered: h,
+      showInternalToggle: r,
+      togglePosition: s,
+      labelMode: c
+    }),
+    [
+      l.collapsed,
+      l.toggle,
+      g,
+      h,
+      r,
+      s,
+      c
+    ]
+  );
+  return /* @__PURE__ */ a(V.Provider, { value: A, children: /* @__PURE__ */ B(
+    "nav",
+    T(v({
+      ref: x,
+      className: R(
+        "relative",
+        "flex-shrink-0",
+        "flex",
+        "flex-col",
+        "h-full",
+        u ? "items-stretch" : "items-center",
+        k
+      ),
+      style: v({
+        position: "relative",
+        // Ensure relative positioning for absolute children (toggle)
+        backgroundColor: "var(--color-surface-raised)",
+        borderRight: "1px solid var(--color-line-default)",
+        width: j,
+        transitionProperty: "width",
+        transitionDuration: `${p.animationDuration}ms`,
+        transitionTimingFunction: p.animationEasing
+      }, D),
+      onMouseEnter: () => N(!0),
+      onMouseLeave: () => N(!1),
+      "aria-label": "Side navigation"
+    }, E), {
+      children: [
+        r && s === "top" && /* @__PURE__ */ a(
+          "div",
+          {
+            className: `flex-shrink-0 ${m("sm", "p")}`,
+            style: { borderBottom: "1px solid var(--color-line-default)" },
+            children: /* @__PURE__ */ a(d, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: R(
+              "relative",
+              // Create new stacking context
+              "flex-1",
+              "flex",
+              "flex-col",
+              "overflow-y-auto",
+              "overflow-x-hidden",
+              m("sm", "p"),
+              // 0.5rem (8px)
+              m("sm", "gap"),
+              // 0.5rem (8px) between items
+              "w-full",
+              "min-w-0",
+              // Prevent flex items from overflowing
+              u ? "items-stretch" : "items-center",
+              "justify-start"
+            ),
+            style: {
+              // micro-z: navbar content above toggle within parent container
+              zIndex: 1
+            },
+            children: e
+          }
+        ),
+        r && s === "bottom" && /* @__PURE__ */ a(
+          "div",
+          {
+            className: `flex-shrink-0 ${m("sm", "p")}`,
+            style: { borderTop: "1px solid var(--color-line-default)" },
+            children: /* @__PURE__ */ a(d, {})
+          }
+        )
+      ]
+    })
+  ) });
+}
+i.Toggle = d;
+i.Item = K;
+i.Separator = L;
+i.Group = P;
+i.displayName = "Navbar";
+i.__SIDENAVBAR_KIND__ = "navbar";
+export {
+  i as default
+};
+//# sourceMappingURL=Navbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useMemo } from \"react\";\nimport { NavbarContext } from \"../../contexts/NavbarContext\";\nimport { useSideNavbarStateRequired } from \"../../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../../contexts/SideNavbarThemeContext\";\nimport { cn } from \"../../../../utils\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport type { NavbarProps, NavbarContextValue } from \"../../types\";\nimport NavbarToggle from \"./NavbarToggle\";\nimport NavbarItem from \"./NavbarItem\";\nimport NavbarSeparator from \"./NavbarSeparator\";\nimport { NavbarGroup } from \"./NavbarGroup\";\n\n/**\n * Navbar subcomponent for SideNavbar\n *\n * Provides its own context that inherits from the root SideNavbar context.\n * Contains the icon navigation column with optional internal toggle.\n *\n * @example\n * ```tsx\n * <SideNavbar.Navbar showToggle togglePosition=\"bottom\">\n *   <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *   <SideNavbar.Navbar.Item icon={<Settings />} label=\"Settings\" />\n * </SideNavbar.Navbar>\n * ```\n */\nfunction Navbar({\n  children,\n  // showMainToggle and mainTogglePosition are read by SideNavbarRoot\n  // via children inspection (render-driven override resolution — see\n  // resolveNavbarOverride in SideNavbarRoot.tsx). They're declared in\n  // the destructure so TS6133 doesn't flag the unused names, and so\n  // that consumers passing them as JSX attributes remain in the\n  // public NavbarProps signature. The Navbar function body itself\n  // does not consume them. Same pattern as `_multiSort` / `_reorderable`\n  // in DataGrid.\n  showMainToggle: _showMainToggle,\n  mainTogglePosition: _mainTogglePosition,\n  showToggle = false,\n  togglePosition = \"bottom\",\n  labelMode = \"tooltip\",\n  expandedWidth = 200,\n  className = \"\",\n  style,\n  ...props\n}: NavbarProps) {\n  const rootState = useSideNavbarStateRequired();\n  const rootTheme = useSideNavbarThemeRequired();\n  const navbarRef = useRef<HTMLElement>(null);\n  const [activeItem, setActiveItem] = useState<string | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  // When labelMode is 'inline', navbar should expand\n  const shouldExpand = labelMode === \"inline\" && !rootState.collapsed;\n  const navbarWidth = shouldExpand\n    ? typeof expandedWidth === \"number\"\n      ? `${expandedWidth}px`\n      : expandedWidth\n    : rootTheme.navigationWidth;\n\n  const contextValue: NavbarContextValue = useMemo(\n    () => ({\n      // Inherited from root\n      collapsed: rootState.collapsed,\n      toggle: rootState.toggle,\n      // Navbar-specific\n      navbarRef,\n      activeItem,\n      setActiveItem,\n      isHovered,\n      showInternalToggle: showToggle,\n      togglePosition,\n      labelMode,\n    }),\n    [\n      rootState.collapsed,\n      rootState.toggle,\n      activeItem,\n      isHovered,\n      showToggle,\n      togglePosition,\n      labelMode,\n    ],\n  );\n\n  return (\n    <NavbarContext.Provider value={contextValue}>\n      <nav\n        ref={navbarRef}\n        className={cn(\n          \"relative\",\n          \"flex-shrink-0\",\n          \"flex\",\n          \"flex-col\",\n          \"h-full\",\n          shouldExpand ? \"items-stretch\" : \"items-center\",\n          className,\n        )}\n        style={{\n          position: \"relative\", // Ensure relative positioning for absolute children (toggle)\n          backgroundColor: \"var(--color-surface-raised)\",\n          borderRight: \"1px solid var(--color-line-default)\",\n          width: navbarWidth,\n          transitionProperty: \"width\",\n          transitionDuration: `${rootTheme.animationDuration}ms`,\n          transitionTimingFunction: rootTheme.animationEasing,\n          ...style,\n        }}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        aria-label=\"Side navigation\"\n        {...props}\n      >\n        {/* Top toggle position (internal) */}\n        {showToggle && togglePosition === \"top\" && (\n          <div\n            className={`flex-shrink-0 ${getSpacingClass(\"sm\", \"p\")}`}\n            style={{ borderBottom: \"1px solid var(--color-line-default)\" }}\n          >\n            <NavbarToggle />\n          </div>\n        )}\n\n        {/* Navigation items - vertical layout */}\n        <div\n          className={cn(\n            \"relative\", // Create new stacking context\n            \"flex-1\",\n            \"flex\",\n            \"flex-col\",\n            \"overflow-y-auto\",\n            \"overflow-x-hidden\",\n            getSpacingClass(\"sm\", \"p\"), // 0.5rem (8px)\n            getSpacingClass(\"sm\", \"gap\"), // 0.5rem (8px) between items\n            \"w-full\",\n            \"min-w-0\", // Prevent flex items from overflowing\n            shouldExpand ? \"items-stretch\" : \"items-center\",\n            \"justify-start\",\n          )}\n          style={{\n            // micro-z: navbar content above toggle within parent container\n            zIndex: 1,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Bottom toggle position (internal) */}\n        {showToggle && togglePosition === \"bottom\" && (\n          <div\n            className={`flex-shrink-0 ${getSpacingClass(\"sm\", \"p\")}`}\n            style={{ borderTop: \"1px solid var(--color-line-default)\" }}\n          >\n            <NavbarToggle />\n          </div>\n        )}\n      </nav>\n    </NavbarContext.Provider>\n  );\n}\n\n// Attach compound components\nNavbar.Toggle = NavbarToggle;\nNavbar.Item = NavbarItem;\nNavbar.Separator = NavbarSeparator;\nNavbar.Group = NavbarGroup;\n\n// Add displayName for easier identification in cloneElement\nNavbar.displayName = \"Navbar\";\n\n// Stable tag SideNavbarRoot uses to identify Navbar children during\n// render-driven override resolution. A static-string marker survives\n// React DevTools displayName mutations and avoids the brittle\n// `element.type === Navbar` reference comparison that breaks under\n// HOC wrapping. Today this works because Navbar is a plain function;\n// if it's ever wrapped in `memo` / `forwardRef` (or any HOC that\n// produces a new wrapper object), MOVE this marker assignment onto\n// the wrapper that gets exported, not the inner function — otherwise\n// Root won't find it.\nNavbar.__SIDENAVBAR_KIND__ = \"navbar\" as const;\n\nexport default Navbar;\n"],"names":["Navbar","_a","_b","children","_showMainToggle","_mainTogglePosition","showToggle","togglePosition","labelMode","expandedWidth","className","style","props","__objRest","rootState","useSideNavbarStateRequired","rootTheme","useSideNavbarThemeRequired","navbarRef","useRef","activeItem","setActiveItem","useState","isHovered","setIsHovered","shouldExpand","navbarWidth","contextValue","useMemo","jsx","NavbarContext","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","NavbarToggle","NavbarItem","NavbarSeparator","NavbarGroup"],"mappings":"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"}

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarGroup.js

@@ -0,0 +1,87 @@
+"use client";
+var y = Object.defineProperty, w = Object.defineProperties;
+var k = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var m = (e, s, r) => s in e ? y(e, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[s] = r, d = (e, s) => {
+  for (var r in s || (s = {}))
+    f.call(s, r) && m(e, r, s[r]);
+  if (o)
+    for (var r of o(s))
+      p.call(s, r) && m(e, r, s[r]);
+  return e;
+}, x = (e, s) => w(e, k(s));
+var h = (e, s) => {
+  var r = {};
+  for (var n in e)
+    f.call(e, n) && s.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && o)
+    for (var n of o(e))
+      s.indexOf(n) < 0 && p.call(e, n) && (r[n] = e[n]);
+  return r;
+};
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import { useState as j } from "react";
+import { ChevronRight as S, ChevronDown as D } from "lucide-react";
+import { getSpacingClass as a } from "../../../../tokens/spacing.js";
+import { cn as c } from "../../../../utils/cn.js";
+function B(G) {
+  var l = G, {
+    id: e,
+    label: s,
+    collapsible: r = !1,
+    defaultCollapsed: n = !1,
+    children: g,
+    className: N
+  } = l, u = h(l, [
+    "id",
+    "label",
+    "collapsible",
+    "defaultCollapsed",
+    "children",
+    "className"
+  ]);
+  const [i, C] = j(n);
+  return /* @__PURE__ */ v("div", x(d({ id: e, className: c("flex flex-col", N) }, u), { children: [
+    s && /* @__PURE__ */ t(
+      "div",
+      {
+        className: c(
+          a("sm", "px"),
+          a("1.5", "py"),
+          "text-xs text-fg-tertiary uppercase tracking-wider",
+          r && "cursor-pointer hover:text-fg-secondary"
+        ),
+        onClick: r ? () => C(!i) : void 0,
+        children: /* @__PURE__ */ v(
+          "div",
+          {
+            className: c("flex items-center", a("1.5", "gap")),
+            children: [
+              " ",
+              r && /* @__PURE__ */ t("span", { className: "shrink-0", children: i ? /* @__PURE__ */ t(
+                S,
+                {
+                  className: "w-3 h-3",
+                  style: { transition: "none", transform: "none" }
+                }
+              ) : /* @__PURE__ */ t(
+                D,
+                {
+                  className: "w-3 h-3",
+                  style: { transition: "none", transform: "none" }
+                }
+              ) }),
+              /* @__PURE__ */ t("span", { children: s })
+            ]
+          }
+        )
+      }
+    ),
+    !i && /* @__PURE__ */ t("div", { className: `flex flex-col ${a("sm", "gap")}`, children: g })
+  ] }));
+}
+export {
+  B as NavbarGroup
+};
+//# sourceMappingURL=NavbarGroup.js.map

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarGroup.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/NavbarGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../../../utils\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport type { NavbarGroupProps } from \"../../types\";\n\n/**\n * NavbarGroup Component\n *\n * Groups navbar items with optional label and collapsible behavior.\n *\n * @example\n * ```tsx\n * <SideNavbar.Navbar>\n *   <SideNavbar.Navbar.Group label=\"Main\" collapsible>\n *     <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *     <SideNavbar.Navbar.Item icon={<Settings />} label=\"Settings\" />\n *   </SideNavbar.Navbar.Group>\n * </SideNavbar.Navbar>\n * ```\n */\nexport function NavbarGroup({\n  id,\n  label,\n  collapsible = false,\n  defaultCollapsed = false,\n  children,\n  className,\n  ...props\n}: NavbarGroupProps) {\n  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} {...props}>\n      {label && (\n        <div\n          className={cn(\n            getSpacingClass(\"sm\", \"px\"),\n            getSpacingClass(\"1.5\", \"py\"),\n            \"text-xs text-fg-tertiary uppercase tracking-wider\",\n            collapsible && \"cursor-pointer hover:text-fg-secondary\",\n          )}\n          onClick={collapsible ? () => setIsCollapsed(!isCollapsed) : undefined}\n        >\n          <div\n            className={cn(\"flex items-center\", getSpacingClass(\"1.5\", \"gap\"))}\n          >\n            {\" \"}\n            {collapsible && (\n              <span className=\"shrink-0\">\n                {isCollapsed ? (\n                  <ChevronRight\n                    className=\"w-3 h-3\"\n                    style={{ transition: \"none\", transform: \"none\" }}\n                  />\n                ) : (\n                  <ChevronDown\n                    className=\"w-3 h-3\"\n                    style={{ transition: \"none\", transform: \"none\" }}\n                  />\n                )}\n              </span>\n            )}\n            <span>{label}</span>\n          </div>\n        </div>\n      )}\n      {!isCollapsed && (\n        <div className={`flex flex-col ${getSpacingClass(\"sm\", \"gap\")}`}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["NavbarGroup","_a","_b","id","label","collapsible","defaultCollapsed","children","className","props","__objRest","isCollapsed","setIsCollapsed","useState","jsxs","cn","jsx","getSpacingClass","ChevronRight","ChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAASA,EAAYC,GAQP;AARO,MAAAC,IAAAD,GAC1B;AAAA,QAAAE;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,WAAAC;AAAA,MAN0BN,GAOvBO,IAAAC,EAPuBR,GAOvB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAACS,GAAaC,CAAc,IAAIC,EAASP,CAAgB;AAE/D,SACE,gBAAAQ,EAAC,aAAI,IAAAX,GAAQ,WAAWY,EAAG,iBAAiBP,CAAS,KAAOC,MACzD,UAAA;AAAA,IAAAL,KACC,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACTE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,OAAO,IAAI;AAAA,UAC3B;AAAA,UACAZ,KAAe;AAAA,QAAA;AAAA,QAEjB,SAASA,IAAc,MAAMO,EAAe,CAACD,CAAW,IAAI;AAAA,QAE5D,UAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,qBAAqBE,EAAgB,OAAO,KAAK,CAAC;AAAA,YAE/D,UAAA;AAAA,cAAA;AAAA,cACAZ,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACb,UAAAL,IACC,gBAAAK;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,QAAQ,WAAW,OAAA;AAAA,gBAAO;AAAA,cAAA,IAGjD,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,QAAQ,WAAW,OAAA;AAAA,gBAAO;AAAA,cAAA,GAGrD;AAAA,cAEF,gBAAAH,EAAC,UAAM,UAAAZ,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,IAGH,CAACO,KACA,gBAAAK,EAAC,OAAA,EAAI,WAAW,iBAAiBC,EAAgB,MAAM,KAAK,CAAC,IAC1D,UAAAV,EAAA,CACH;AAAA,EAAA,IAEJ;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarItem.js

@@ -0,0 +1,242 @@
+"use client";
+var W = Object.defineProperty, Y = Object.defineProperties;
+var J = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var A = (e, n, t) => n in e ? W(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, E = (e, n) => {
+  for (var t in n || (n = {}))
+    I.call(n, t) && A(e, t, n[t]);
+  if (m)
+    for (var t of m(n))
+      j.call(n, t) && A(e, t, n[t]);
+  return e;
+}, L = (e, n) => Y(e, J(n));
+var k = (e, n) => {
+  var t = {};
+  for (var r in e)
+    I.call(e, r) && n.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && m)
+    for (var r of m(e))
+      n.indexOf(r) < 0 && j.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import { jsx as c, jsxs as K, Fragment as O } from "react/jsx-runtime";
+import { useNavbarRequired as P } from "../../contexts/NavbarContext.js";
+import { getRadiusClass as _ } from "../../../../tokens/radius.js";
+import { getSpacingClass as l } from "../../../../tokens/spacing.js";
+import { getZIndexClass as Q } from "../../../../tokens/z-index.js";
+import U from "../../../../primitives/Tooltip/Tooltip.js";
+import { cn as a } from "../../../../utils/cn.js";
+const X = {
+  sm: {
+    container: "w-8 h-8",
+    icon: "w-4 h-4",
+    badge: "min-w-3.5 h-3.5 text-2xs"
+  },
+  md: {
+    container: "w-10 h-10",
+    icon: "w-5 h-5",
+    badge: "min-w-5 h-5 text-xs"
+  },
+  lg: {
+    container: "w-12 h-12",
+    icon: "w-6 h-6",
+    badge: "min-w-5 h-5 text-xs"
+  }
+}, M = {
+  default: "bg-error",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-error-dark"
+}, ee = {
+  tooltip: "",
+  // Uses existing tooltip behavior
+  inline: `flex-row ${l("sm", "gap")} w-full ${l("md", "px")}`,
+  below: `flex-col ${l("1.5", "gap")}`
+};
+function fe(te) {
+  var d = te, {
+    id: e,
+    icon: n,
+    label: t,
+    labelMode: r,
+    showLabel: $ = !0,
+    active: z = !1,
+    showTooltip: R = !0,
+    badge: u,
+    badgeVariant: T = "default",
+    variant: h = "default",
+    size: B = "md",
+    href: x,
+    target: p,
+    onClick: g,
+    disabled: s = !1,
+    className: D = ""
+  } = d, Z = k(d, [
+    "id",
+    "icon",
+    "label",
+    "labelMode",
+    "showLabel",
+    "active",
+    "showTooltip",
+    "badge",
+    "badgeVariant",
+    "variant",
+    "size",
+    "href",
+    "target",
+    "onClick",
+    "disabled",
+    "className"
+  ]);
+  var N;
+  const {
+    activeItem: q,
+    setActiveItem: F,
+    labelMode: G
+  } = P(), o = (N = r != null ? r : G) != null ? N : "tooltip", f = z || e && q === e, i = X[B], v = (V) => {
+    if (s) {
+      V.preventDefault();
+      return;
+    }
+    e && F(e), g == null || g();
+  }, H = o !== "tooltip" && $ && t && /* @__PURE__ */ c(
+    "span",
+    {
+      className: a(
+        "text-xs",
+        "flex-shrink-0",
+        // Prevenir que label encolha
+        // micro-z: label above icon within navbar item
+        "relative z-10",
+        o === "below" && "text-center",
+        o === "inline" && "truncate"
+      ),
+      style: {
+        // Garantir que label não seja afetada por transformações
+        willChange: "auto",
+        transform: "none"
+      },
+      children: t
+    }
+  ), w = a(
+    "relative",
+    "flex",
+    "items-center",
+    o === "inline" ? "justify-start" : "justify-center",
+    o === "below" && "flex-col",
+    _("lg"),
+    "box-border",
+    // Garantir box-sizing consistente
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-line-focus",
+    "focus:ring-offset-1",
+    "w-full",
+    // Ensure full width for vertical layout
+    "flex-shrink-0",
+    // Prevent items from shrinking
+    "min-w-0",
+    // Prevent flex items from overflowing
+    // Remover todas as transições que possam causar movimento
+    "[&>*]:!transition-none",
+    "[&>*]:!transform-none",
+    o === "tooltip" ? i.container : a(l("sm", "px"), l("1.5", "py")),
+    o !== "tooltip" && ee[o],
+    s ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+    D
+  ), b = {
+    default: f ? "bg-surface-brand-muted text-fg-brand-emphasis" : s ? "text-fg-disabled" : "text-fg-secondary hover:bg-surface-active hover:text-fg-primary [&:hover]:!transform-none",
+    ghost: f ? "text-fg-brand-emphasis" : s ? "text-fg-disabled" : "text-fg-secondary hover:text-fg-primary [&:hover]:!transform-none",
+    subtle: f ? "bg-surface-active text-fg-primary" : s ? "text-fg-disabled" : "text-fg-tertiary hover:bg-surface-hover hover:text-fg-primary [&:hover]:!transform-none"
+  }, y = /* @__PURE__ */ K(O, { children: [
+    /* @__PURE__ */ c(
+      "span",
+      {
+        className: a(
+          "flex-shrink-0",
+          i.icon,
+          "[&>svg]:transition-none",
+          "[&>svg]:!transform-none",
+          "[&>svg]:!will-change-auto",
+          "box-border",
+          "flex items-center justify-center",
+          // Garantir que ícone não sobreponha label - z-index menor que label
+          `relative ${Q("base")}`
+        ),
+        style: {
+          // Garantir dimensões mínimas fixas para evitar "pular"
+          minWidth: i.icon === "w-4 h-4" ? "1rem" : i.icon === "w-5 h-5" ? "1.25rem" : "1.5rem",
+          minHeight: i.icon === "w-4 h-4" ? "1rem" : i.icon === "w-5 h-5" ? "1.25rem" : "1.5rem",
+          // Forçar sem animações ou transformações
+          willChange: "auto",
+          transform: "none",
+          transition: "none",
+          // micro-z: conditional stacking per label mode — base layer when
+          // label visible inline; 'auto' when in tooltip mode to skip
+          // stacking context creation (tooltip portals to body).
+          zIndex: o !== "tooltip" ? 0 : "auto"
+        },
+        children: n
+      }
+    ),
+    H,
+    u != null && /* @__PURE__ */ c(
+      "span",
+      {
+        className: a(
+          "absolute",
+          "-top-1",
+          "-right-1",
+          "flex",
+          "items-center",
+          "justify-center",
+          l("xs", "px"),
+          "font-medium",
+          "text-fg-inverse",
+          _("full"),
+          i.badge,
+          M[T]
+        ),
+        children: u
+      }
+    )
+  ] }), C = {
+    willChange: "auto",
+    transform: "none",
+    transition: "none"
+  }, S = x ? /* @__PURE__ */ c(
+    "a",
+    {
+      href: x,
+      target: p,
+      rel: p === "_blank" ? "noopener noreferrer" : void 0,
+      onClick: v,
+      className: a(w, b[h]),
+      style: C,
+      "aria-label": t,
+      "aria-current": f ? "page" : void 0,
+      "aria-disabled": s,
+      children: y
+    }
+  ) : /* @__PURE__ */ c(
+    "button",
+    L(E({
+      type: "button",
+      onClick: v,
+      disabled: s,
+      className: a(w, b[h]),
+      style: C,
+      "aria-label": t,
+      "aria-current": f ? "page" : void 0
+    }, Z), {
+      children: y
+    })
+  );
+  return o === "tooltip" && R && t && !s ? /* @__PURE__ */ c(U, { content: t, position: "right", children: S }) : S;
+}
+export {
+  fe as default
+};
+//# sourceMappingURL=NavbarItem.js.map

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarItem.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/NavbarItem.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { useNavbarRequired } from \"../../contexts/NavbarContext\";\nimport { cn } from \"../../../../utils\";\nimport { getRadiusClass } from \"../../../../tokens/radius\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport { getZIndexClass } from \"../../../../tokens/z-index\";\nimport Tooltip from \"../../../../primitives/Tooltip/Tooltip\";\nimport type { NavbarItemProps, NavbarLabelMode } from \"../../types\";\n\n/**\n * Size configuration for navbar items\n */\nconst SIZE_CLASSES = {\n  sm: {\n    container: \"w-8 h-8\",\n    icon: \"w-4 h-4\",\n    badge: \"min-w-3.5 h-3.5 text-2xs\",\n  },\n  md: {\n    container: \"w-10 h-10\",\n    icon: \"w-5 h-5\",\n    badge: \"min-w-5 h-5 text-xs\",\n  },\n  lg: {\n    container: \"w-12 h-12\",\n    icon: \"w-6 h-6\",\n    badge: \"min-w-5 h-5 text-xs\",\n  },\n} as const;\n\n/**\n * Badge variant colors\n */\nconst BADGE_VARIANTS = {\n  default: \"bg-error\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-error-dark\",\n} as const;\n\n/**\n * Navigation item for the Navbar subcomponent\n *\n * Displays an icon button with optional tooltip, badge, and active state.\n * Supports multiple sizes, variants, and can render as a link when href is provided.\n *\n * @example\n * ```tsx\n * // Basic button\n * <SideNavbar.Navbar.Item\n *   icon={<Home />}\n *   label=\"Home\"\n *   onClick={() => navigate('/')}\n * />\n *\n * // As a link\n * <SideNavbar.Navbar.Item\n *   icon={<Docs />}\n *   label=\"Documentation\"\n *   href=\"/docs\"\n * />\n *\n * // With badge\n * <SideNavbar.Navbar.Item\n *   icon={<Bell />}\n *   label=\"Notifications\"\n *   badge={5}\n *   badgeVariant=\"danger\"\n * />\n * ```\n */\nconst LABEL_STYLES: Record<NavbarLabelMode, string> = {\n  tooltip: \"\", // Uses existing tooltip behavior\n  inline: `flex-row ${getSpacingClass(\"sm\", \"gap\")} w-full ${getSpacingClass(\"md\", \"px\")}`,\n  below: `flex-col ${getSpacingClass(\"1.5\", \"gap\")}`,\n};\n\nexport default function NavbarItem({\n  id,\n  icon,\n  label,\n  labelMode,\n  showLabel = true,\n  active = false,\n  showTooltip = true,\n  badge,\n  badgeVariant = \"default\",\n  variant = \"default\",\n  size = \"md\",\n  href,\n  target,\n  onClick,\n  disabled = false,\n  className = \"\",\n  ...props\n}: NavbarItemProps) {\n  const {\n    activeItem,\n    setActiveItem,\n    labelMode: contextLabelMode,\n  } = useNavbarRequired();\n\n  // Use prop labelMode or fallback to context labelMode or 'tooltip'\n  const effectiveLabelMode = labelMode ?? contextLabelMode ?? \"tooltip\";\n\n  const isActive = active || (id && activeItem === id);\n  const sizeConfig = SIZE_CLASSES[size];\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n    if (id) {\n      setActiveItem(id);\n    }\n    onClick?.();\n  };\n\n  // Label element (for inline and below modes)\n  const labelElement = effectiveLabelMode !== \"tooltip\" &&\n    showLabel &&\n    label && (\n      <span\n        className={cn(\n          \"text-xs\",\n          \"flex-shrink-0\", // Prevenir que label encolha\n          // micro-z: label above icon within navbar item\n          \"relative z-10\",\n          effectiveLabelMode === \"below\" && \"text-center\",\n          effectiveLabelMode === \"inline\" && \"truncate\",\n        )}\n        style={{\n          // Garantir que label não seja afetada por transformações\n          willChange: \"auto\",\n          transform: \"none\",\n        }}\n      >\n        {label}\n      </span>\n    );\n\n  // Base classes for the item\n  // Removido transition-colors e duration-150 para eliminar animações\n  // Adicionado box-border para estabilidade dimensional\n  const baseClasses = cn(\n    \"relative\",\n    \"flex\",\n    \"items-center\",\n    effectiveLabelMode === \"inline\" ? \"justify-start\" : \"justify-center\",\n    effectiveLabelMode === \"below\" && \"flex-col\",\n    getRadiusClass(\"lg\"),\n    \"box-border\", // Garantir box-sizing consistente\n    \"focus:outline-none\",\n    \"focus:ring-2\",\n    \"focus:ring-line-focus\",\n    \"focus:ring-offset-1\",\n    \"w-full\", // Ensure full width for vertical layout\n    \"flex-shrink-0\", // Prevent items from shrinking\n    \"min-w-0\", // Prevent flex items from overflowing\n    // Remover todas as transições que possam causar movimento\n    \"[&>*]:!transition-none\",\n    \"[&>*]:!transform-none\",\n    effectiveLabelMode === \"tooltip\"\n      ? sizeConfig.container\n      : cn(getSpacingClass(\"sm\", \"px\"), getSpacingClass(\"1.5\", \"py\")),\n    effectiveLabelMode !== \"tooltip\" && LABEL_STYLES[effectiveLabelMode],\n    disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n    className,\n  );\n\n  // Variant-specific classes usando variáveis CSS via Tailwind arbitrary values\n  // Estados hover/active sem transições para evitar movimento\n  const variantClasses = {\n    default: isActive\n      ? \"bg-surface-brand-muted text-fg-brand-emphasis\"\n      : disabled\n        ? \"text-fg-disabled\"\n        : \"text-fg-secondary hover:bg-surface-active hover:text-fg-primary [&:hover]:!transform-none\",\n    ghost: isActive\n      ? \"text-fg-brand-emphasis\"\n      : disabled\n        ? \"text-fg-disabled\"\n        : \"text-fg-secondary hover:text-fg-primary [&:hover]:!transform-none\",\n    subtle: isActive\n      ? \"bg-surface-active text-fg-primary\"\n      : disabled\n        ? \"text-fg-disabled\"\n        : \"text-fg-tertiary hover:bg-surface-hover hover:text-fg-primary [&:hover]:!transform-none\",\n  };\n\n  const content = (\n    <>\n      {/* Wrapper do ícone - sem animações, com estabilidade dimensional */}\n      <span\n        className={cn(\n          \"flex-shrink-0\",\n          sizeConfig.icon,\n          \"[&>svg]:transition-none\",\n          \"[&>svg]:!transform-none\",\n          \"[&>svg]:!will-change-auto\",\n          \"box-border\",\n          \"flex items-center justify-center\",\n          // Garantir que ícone não sobreponha label - z-index menor que label\n          `relative ${getZIndexClass(\"base\")}`,\n        )}\n        style={{\n          // Garantir dimensões mínimas fixas para evitar \"pular\"\n          minWidth:\n            sizeConfig.icon === \"w-4 h-4\"\n              ? \"1rem\"\n              : sizeConfig.icon === \"w-5 h-5\"\n                ? \"1.25rem\"\n                : \"1.5rem\",\n          minHeight:\n            sizeConfig.icon === \"w-4 h-4\"\n              ? \"1rem\"\n              : sizeConfig.icon === \"w-5 h-5\"\n                ? \"1.25rem\"\n                : \"1.5rem\",\n          // Forçar sem animações ou transformações\n          willChange: \"auto\",\n          transform: \"none\",\n          transition: \"none\",\n          // micro-z: conditional stacking per label mode — base layer when\n          // label visible inline; 'auto' when in tooltip mode to skip\n          // stacking context creation (tooltip portals to body).\n          zIndex: effectiveLabelMode !== \"tooltip\" ? 0 : \"auto\",\n        }}\n      >\n        {icon}\n      </span>\n\n      {/* Label (for inline and below modes) - posicionada após o ícone */}\n      {labelElement}\n\n      {/* Badge */}\n      {badge !== undefined && badge !== null && (\n        <span\n          className={cn(\n            \"absolute\",\n            \"-top-1\",\n            \"-right-1\",\n            \"flex\",\n            \"items-center\",\n            \"justify-center\",\n            getSpacingClass(\"xs\", \"px\"),\n            \"font-medium\",\n            \"text-fg-inverse\",\n            getRadiusClass(\"full\"),\n            sizeConfig.badge,\n            BADGE_VARIANTS[badgeVariant],\n          )}\n        >\n          {badge}\n        </span>\n      )}\n    </>\n  );\n\n  // Render as link if href is provided\n  // Adicionar style inline para garantir que não há transformações em hover\n  const elementStyle = {\n    willChange: \"auto\",\n    transform: \"none\",\n    transition: \"none\",\n  };\n\n  const element = href ? (\n    <a\n      href={href}\n      target={target}\n      rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n      onClick={handleClick}\n      className={cn(baseClasses, variantClasses[variant])}\n      style={elementStyle}\n      aria-label={label}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-disabled={disabled}\n    >\n      {content}\n    </a>\n  ) : (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={cn(baseClasses, variantClasses[variant])}\n      style={elementStyle}\n      aria-label={label}\n      aria-current={isActive ? \"page\" : undefined}\n      {...props}\n    >\n      {content}\n    </button>\n  );\n\n  // Wrap with tooltip only if mode is 'tooltip'\n  if (effectiveLabelMode === \"tooltip\" && showTooltip && label && !disabled) {\n    return (\n      <Tooltip content={label} position=\"right\">\n        {element}\n      </Tooltip>\n    );\n  }\n\n  return element;\n}\n"],"names":["SIZE_CLASSES","BADGE_VARIANTS","LABEL_STYLES","getSpacingClass","NavbarItem","_a","_b","id","icon","label","labelMode","showLabel","active","showTooltip","badge","badgeVariant","variant","size","href","target","onClick","disabled","className","props","__objRest","activeItem","setActiveItem","contextLabelMode","useNavbarRequired","effectiveLabelMode","isActive","sizeConfig","handleClick","e","labelElement","jsx","cn","baseClasses","getRadiusClass","variantClasses","content","jsxs","Fragment","getZIndexClass","elementStyle","element","__spreadProps","__spreadValues","Tooltip"],"mappings":"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"}

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarSeparator.js

@@ -0,0 +1,66 @@
+"use client";
+var c = Object.defineProperty;
+var o = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var n = (a, t, r) => t in a ? c(a, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[t] = r, i = (a, t) => {
+  for (var r in t || (t = {}))
+    s.call(t, r) && n(a, r, t[r]);
+  if (o)
+    for (var r of o(t))
+      f.call(t, r) && n(a, r, t[r]);
+  return a;
+};
+var m = (a, t) => {
+  var r = {};
+  for (var e in a)
+    s.call(a, e) && t.indexOf(e) < 0 && (r[e] = a[e]);
+  if (a != null && o)
+    for (var e of o(a))
+      t.indexOf(e) < 0 && f.call(a, e) && (r[e] = a[e]);
+  return r;
+};
+import { jsx as u } from "react/jsx-runtime";
+import { getSpacingClass as h } from "../../../../tokens/spacing.js";
+import { cn as p } from "../../../../utils/cn.js";
+function b(e) {
+  var l = e, {
+    orientation: a = "horizontal",
+    className: t = ""
+  } = l, r = m(l, [
+    "orientation",
+    "className"
+  ]);
+  return a === "vertical" ? /* @__PURE__ */ u(
+    "div",
+    i({
+      className: p("w-px", "h-6", "bg-line-default", "mx-auto", t),
+      role: "separator",
+      "aria-orientation": "vertical"
+    }, r)
+  ) : /* @__PURE__ */ u(
+    "div",
+    i({
+      className: p(
+        "w-full",
+        "h-px",
+        "bg-line-default",
+        h("sm", "my"),
+        // my-2 (8px) para consistência com gap-2 usado em outros lugares
+        "flex-shrink-0",
+        // Prevenir que separator encolha
+        t
+      ),
+      role: "separator",
+      "aria-orientation": "horizontal",
+      style: {
+        // Garantir que separator não seja afetado por transformações
+        willChange: "auto",
+        transform: "none"
+      }
+    }, r)
+  );
+}
+export {
+  b as default
+};
+//# sourceMappingURL=NavbarSeparator.js.map

package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarSeparator.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/NavbarSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../../../utils\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport type { NavbarSeparatorProps } from \"../../types\";\n\n/**\n * Separator for the Navbar subcomponent\n *\n * Creates visual separation between groups of navigation items.\n *\n * @example\n * ```tsx\n * <SideNavbar.Navbar>\n *   <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *   <SideNavbar.Navbar.Separator />\n *   <SideNavbar.Navbar.Item icon={<Settings />} label=\"Settings\" />\n * </SideNavbar.Navbar>\n * ```\n */\nexport default function NavbarSeparator({\n  orientation = \"horizontal\",\n  className = \"\",\n  ...props\n}: NavbarSeparatorProps) {\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        className={cn(\"w-px\", \"h-6\", \"bg-line-default\", \"mx-auto\", className)}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        \"w-full\",\n        \"h-px\",\n        \"bg-line-default\",\n        getSpacingClass(\"sm\", \"my\"), // my-2 (8px) para consistência com gap-2 usado em outros lugares\n        \"flex-shrink-0\", // Prevenir que separator encolha\n        className,\n      )}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      style={{\n        // Garantir que separator não seja afetado por transformações\n        willChange: \"auto\",\n        transform: \"none\",\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["NavbarSeparator","_a","_b","orientation","className","props","__objRest","jsx","__spreadValues","cn","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAwBA,EAAgBC,GAIf;AAJe,MAAAC,IAAAD,GACtC;AAAA,iBAAAE,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,MAF0BF,GAGnCG,IAAAC,EAHmCJ,GAGnC;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SAAIC,MAAgB,aAEhB,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,QAAQ,OAAO,mBAAmB,WAAWL,CAAS;AAAA,MACpE,MAAK;AAAA,MACL,oBAAiB;AAAA,OACbC;AAAA,EAAA,IAMR,gBAAAE;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAC,EAAgB,MAAM,IAAI;AAAA;AAAA,QAC1B;AAAA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,OAAO;AAAA;AAAA,QAEL,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,OAETC;AAAA,EAAA;AAGV;"}