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

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

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