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

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

@@ -0,0 +1,108 @@
+"use client";
+var x = Object.defineProperty, w = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var l = (e, o, r) => o in e ? x(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, u = (e, o) => {
+  for (var r in o || (o = {}))
+    f.call(o, r) && l(e, r, o[r]);
+  if (n)
+    for (var r of n(o))
+      c.call(o, r) && l(e, r, o[r]);
+  return e;
+}, m = (e, o) => w(e, y(o));
+var d = (e, o) => {
+  var r = {};
+  for (var s in e)
+    f.call(e, s) && o.indexOf(s) < 0 && (r[s] = e[s]);
+  if (e != null && n)
+    for (var s of n(e))
+      o.indexOf(s) < 0 && c.call(e, s) && (r[s] = e[s]);
+  return r;
+};
+import { jsx as a } from "react/jsx-runtime";
+import { ChevronRight as $, ChevronLeft as N } from "lucide-react";
+import { useNavbarRequired as I } from "../../contexts/NavbarContext.js";
+import R from "../../../../primitives/Tooltip/Tooltip.js";
+import { getRadiusClass as j } from "../../../../tokens/radius.js";
+import { getShadowClass as E } from "../../../../tokens/shadows.js";
+function F(S) {
+  var i = S, {
+    icon: e,
+    size: o = "sm",
+    variant: r = "ghost",
+    className: s = ""
+  } = i, h = d(i, [
+    "icon",
+    "size",
+    "variant",
+    "className"
+  ]);
+  const { collapsed: t, toggle: g } = I(), p = () => e ? typeof e == "function" ? e(t) : e : /* @__PURE__ */ a(
+    t ? $ : N,
+    {
+      className: v[o],
+      style: {
+        transition: "none",
+        transform: "none",
+        willChange: "auto"
+      }
+    }
+  ), b = {
+    xs: "w-6 h-6",
+    sm: "w-8 h-8",
+    md: "w-10 h-10"
+  }, v = {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-5 h-5"
+  }, C = {
+    default: `bg-surface-base border border-line-default ${E("sm")} hover:bg-surface-hover`,
+    ghost: "hover:bg-surface-active",
+    outline: "border border-line-emphasis hover:bg-surface-hover"
+  };
+  return /* @__PURE__ */ a(
+    R,
+    {
+      content: t ? "Expand sidebar" : "Collapse sidebar",
+      position: "right",
+      children: /* @__PURE__ */ a(
+        "button",
+        m(u({
+          type: "button",
+          onClick: g,
+          className: `
+          flex
+          items-center
+          justify-center
+          ${j("md")}
+          text-fg-secondary
+          hover:text-fg-primary
+          focus:outline-none
+          focus:ring-2
+          focus:ring-line-focus
+          focus:ring-offset-1
+          ${b[o]}
+          ${C[r]}
+          [&:hover]:!transform-none
+          ${s}
+        `,
+          style: {
+            // Remover transições que possam causar movimento
+            willChange: "auto",
+            transform: "none",
+            transition: "none"
+          },
+          "aria-label": t ? "Expand sidebar" : "Collapse sidebar",
+          "aria-expanded": !t
+        }, h), {
+          children: p()
+        })
+      )
+    }
+  );
+}
+export {
+  F as default
+};
+//# sourceMappingURL=NavbarToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarToggle.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/NavbarToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useNavbarRequired } from \"../../contexts/NavbarContext\";\nimport Tooltip from \"../../../../primitives/Tooltip/Tooltip\";\nimport { getRadiusClass } from \"../../../../tokens/radius\";\nimport { getShadowClass } from \"../../../../tokens/shadows\";\nimport type { NavbarToggleProps } from \"../../types\";\n\n/**\n * Toggle button for the Navbar subcomponent\n *\n * Uses the NavbarContext to control the sidebar collapse state.\n * Can be customized with different icons, sizes, and variants.\n *\n * @example\n * ```tsx\n * <SideNavbar.Navbar.Toggle\n *   variant=\"ghost\"\n *   icon={(collapsed) => collapsed ? <ChevronRight /> : <ChevronLeft />}\n * />\n * ```\n */\nexport default function NavbarToggle({\n  icon,\n  size = \"sm\",\n  variant = \"ghost\",\n  className = \"\",\n  ...props\n}: NavbarToggleProps) {\n  const { collapsed, toggle } = useNavbarRequired();\n\n  // Render the icon\n  const renderIcon = () => {\n    if (icon) {\n      return typeof icon === \"function\" ? icon(collapsed) : icon;\n    }\n    const Icon = collapsed ? ChevronRight : ChevronLeft;\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 sizeClasses = {\n    xs: \"w-6 h-6\",\n    sm: \"w-8 h-8\",\n    md: \"w-10 h-10\",\n  };\n\n  const iconSizeClasses = {\n    xs: \"w-3 h-3\",\n    sm: \"w-4 h-4\",\n    md: \"w-5 h-5\",\n  };\n\n  const variantClasses = {\n    default: `bg-surface-base border border-line-default ${getShadowClass(\"sm\")} hover:bg-surface-hover`,\n    ghost: \"hover:bg-surface-active\",\n    outline: \"border border-line-emphasis hover:bg-surface-hover\",\n  };\n\n  return (\n    <Tooltip\n      content={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n      position=\"right\"\n    >\n      <button\n        type=\"button\"\n        onClick={toggle}\n        className={`\n          flex\n          items-center\n          justify-center\n          ${getRadiusClass(\"md\")}\n          text-fg-secondary\n          hover:text-fg-primary\n          focus:outline-none\n          focus:ring-2\n          focus:ring-line-focus\n          focus:ring-offset-1\n          ${sizeClasses[size]}\n          ${variantClasses[variant]}\n          [&:hover]:!transform-none\n          ${className}\n        `}\n        style={{\n          // Remover transições que possam causar movimento\n          willChange: \"auto\",\n          transform: \"none\",\n          transition: \"none\",\n        }}\n        aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n        aria-expanded={!collapsed}\n        {...props}\n      >\n        {renderIcon()}\n      </button>\n    </Tooltip>\n  );\n}\n"],"names":["NavbarToggle","_a","_b","icon","size","variant","className","props","__objRest","collapsed","toggle","useNavbarRequired","renderIcon","jsx","ChevronRight","ChevronLeft","iconSizeClasses","sizeClasses","variantClasses","getShadowClass","Tooltip","__spreadProps","__spreadValues","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAwBA,EAAaC,GAMf;AANe,MAAAC,IAAAD,GACnC;AAAA,UAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MAJuBJ,GAKhCK,IAAAC,EALgCN,GAKhC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,WAAAO,GAAW,QAAAC,EAAA,IAAWC,EAAA,GAGxBC,IAAa,MACbT,IACK,OAAOA,KAAS,aAAaA,EAAKM,CAAS,IAAIN,IAItD,gBAAAU;AAAA,IAFWJ,IAAYK,IAAeC;AAAA,IAErC;AAAA,MACC,WAAWC,EAAgBZ,CAAI;AAAA,MAC/B,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAAA,GAKAa,IAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAD,IAAkB;AAAA,IACtB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAE,IAAiB;AAAA,IACrB,SAAS,8CAA8CC,EAAe,IAAI,CAAC;AAAA,IAC3E,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAGX,SACE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASX,IAAY,mBAAmB;AAAA,MACxC,UAAS;AAAA,MAET,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAAQ,EAAAC,EAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASZ;AAAA,UACT,WAAW;AAAA;AAAA;AAAA;AAAA,YAIPa,EAAe,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOpBN,EAAYb,CAAI,CAAC;AAAA,YACjBc,EAAeb,CAAO,CAAC;AAAA;AAAA,YAEvBC,CAAS;AAAA;AAAA,UAEb,OAAO;AAAA;AAAA,YAEL,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,YAAY;AAAA,UAAA;AAAA,UAEd,cAAYG,IAAY,mBAAmB;AAAA,UAC3C,iBAAe,CAACA;AAAA,WACZF,IA3BL;AAAA,UA6BE,UAAAK,EAAA;AAAA,QAAW;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,63 @@
+"use client";
+var y = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var n = (a, e, o) => e in a ? y(a, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : a[e] = o, r = (a, e) => {
+  for (var o in e || (e = {}))
+    d.call(e, o) && n(a, o, e[o]);
+  if (i)
+    for (var o of i(e))
+      l.call(e, o) && n(a, o, e[o]);
+  return a;
+};
+var m = (a, e) => {
+  var o = {};
+  for (var t in a)
+    d.call(a, t) && e.indexOf(t) < 0 && (o[t] = a[t]);
+  if (a != null && i)
+    for (var t of i(a))
+      e.indexOf(t) < 0 && l.call(a, t) && (o[t] = a[t]);
+  return o;
+};
+import { jsx as C } from "react/jsx-runtime";
+import { useSideNavbarStateRequired as g } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as q } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as R } from "../contexts/SideNavbarConfigContext.js";
+import { getZIndexClass as $ } from "../../../tokens/z-index.js";
+function T(v) {
+  var s = v, {
+    visible: a,
+    onBackdropClick: e,
+    className: o = "",
+    style: t
+  } = s, u = m(s, [
+    "visible",
+    "onBackdropClick",
+    "className",
+    "style"
+  ]);
+  const { collapsed: c, setCollapsed: f, isMobile: p } = g(), { animationDuration: b } = q(), { mobileVariant: S, overlayBackdrop: h } = R(), N = p && S === "overlay", k = a != null ? a : N && h && !c, x = () => {
+    e ? e() : f(!0);
+  };
+  return k ? /* @__PURE__ */ C(
+    "div",
+    r({
+      className: `
+        fixed inset-0
+        bg-scrim
+        ${$("modal-backdrop")}
+        ${o}
+      `,
+      style: r({
+        animation: `fadeIn ${b}ms ease-in-out`
+      }, t),
+      onClick: x,
+      "aria-hidden": "true",
+      "data-testid": "side-navbar-backdrop"
+    }, u)
+  ) : null;
+}
+export {
+  T as default
+};
+//# sourceMappingURL=SideNavbarBackdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarBackdrop.js","sources":["../../../../../../src/ui/components/SideNavbar/components/SideNavbarBackdrop.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes } from \"react\";\nimport { useSideNavbarStateRequired } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { getZIndexClass } from \"../../../tokens/z-index\";\n\nexport interface SideNavbarBackdropProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Override visibility (uses context by default)\n   */\n  visible?: boolean;\n\n  /**\n   * Click handler override\n   */\n  onBackdropClick?: () => void;\n}\n\n/**\n * SideNavbar Backdrop Component\n *\n * Semi-transparent overlay for mobile overlay mode.\n * Automatically manages visibility based on sidebar state.\n *\n * @example\n * ```tsx\n * // Usually rendered automatically by SideNavbarRoot\n * <SideNavbar.Backdrop />\n *\n * // Or with custom click handler\n * <SideNavbar.Backdrop onBackdropClick={() => console.log('clicked')} />\n * ```\n */\nexport default function SideNavbarBackdrop({\n  visible: visibleOverride,\n  onBackdropClick,\n  className = \"\",\n  style,\n  ...props\n}: SideNavbarBackdropProps) {\n  const { collapsed, setCollapsed, isMobile } = useSideNavbarStateRequired();\n  const { animationDuration } = useSideNavbarThemeRequired();\n  const { mobileVariant, overlayBackdrop } = useSideNavbarConfigRequired();\n\n  // Determine visibility\n  const isOverlayMode = isMobile && mobileVariant === \"overlay\";\n  const shouldShow =\n    visibleOverride ?? (isOverlayMode && overlayBackdrop && !collapsed);\n\n  const handleClick = () => {\n    if (onBackdropClick) {\n      onBackdropClick();\n    } else {\n      setCollapsed(true);\n    }\n  };\n\n  if (!shouldShow) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`\n        fixed inset-0\n        bg-scrim\n        ${getZIndexClass(\"modal-backdrop\")}\n        ${className}\n      `}\n      style={{\n        animation: `fadeIn ${animationDuration}ms ease-in-out`,\n        ...style,\n      }}\n      onClick={handleClick}\n      aria-hidden=\"true\"\n      data-testid=\"side-navbar-backdrop\"\n      {...props}\n    />\n  );\n}\n"],"names":["SideNavbarBackdrop","_a","_b","visibleOverride","onBackdropClick","className","style","props","__objRest","collapsed","setCollapsed","isMobile","useSideNavbarStateRequired","animationDuration","useSideNavbarThemeRequired","mobileVariant","overlayBackdrop","useSideNavbarConfigRequired","isOverlayMode","shouldShow","handleClick","jsx","__spreadValues","getZIndexClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAwBA,EAAmBC,GAMf;AANe,MAAAC,IAAAD,GACzC;AAAA,aAASE;AAAA,IACT,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,MAJyCJ,GAKtCK,IAAAC,EALsCN,GAKtC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,WAAAO,GAAW,cAAAC,GAAc,UAAAC,EAAA,IAAaC,EAAA,GACxC,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GACxB,EAAE,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAA,GAGrCC,IAAgBP,KAAYI,MAAkB,WAC9CI,IACJhB,KAAA,OAAAA,IAAoBe,KAAiBF,KAAmB,CAACP,GAErDW,IAAc,MAAM;AACxB,IAAIhB,IACFA,EAAA,IAEAM,EAAa,EAAI;AAAA,EAErB;AAEA,SAAKS,IAKH,gBAAAE;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGPC,EAAe,gBAAgB,CAAC;AAAA,UAChClB,CAAS;AAAA;AAAA,MAEb,OAAOiB,EAAA;AAAA,QACL,WAAW,UAAUT,CAAiB;AAAA,SACnCP;AAAA,MAEL,SAASc;AAAA,MACT,eAAY;AAAA,MACZ,eAAY;AAAA,OACRb;AAAA,EAAA,IAlBC;AAqBX;"}

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