@snksergio/design-system 0.53.0 → 0.54.0

package/dist-lib/index.cjs

@@ -6,7 +6,7 @@ const avatar = require("./chunks/avatar-DAmZ7fBZ.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const sheet = require("./chunks/sheet-rg6uupt1.cjs");
-const toggleGroup = require("./chunks/toggle-group-C9rrkkmh.cjs");
+const toggleGroup = require("./chunks/toggle-group-BTnqY_nt.cjs");
 const lucideReact = require("lucide-react");
 const input = require("./chunks/input-Ci_2-5Te.cjs");
 const kpiDelta = require("./chunks/kpi-delta-1-gsPFvU.cjs");
@@ -5412,6 +5412,618 @@ const ScreenLoader = React.forwardRef(
   }
 );
 ScreenLoader.displayName = "ScreenLoader";
+const TabsNavigationContext = React.createContext(null);
+function useArrastarParaRolar(trilho, ativo = true, limiarPx = 6) {
+  const engolirClique = React.useRef(false);
+  React.useEffect(() => {
+    if (!ativo) return;
+    const el = trilho.current;
+    if (!el) return;
+    if (typeof window === "undefined") return;
+    if (window.matchMedia?.("(pointer: coarse)").matches) return;
+    let arrastando = false;
+    let passouLimiar = false;
+    let xInicial = 0;
+    let scrollInicial = 0;
+    const ehInterativo = (alvo) => alvo instanceof Element && !!alvo.closest(
+      'button, a, input, select, textarea, [role="button"], [role="menuitem"], [data-radix-popper-content-wrapper], [role="dialog"], [role="menu"], [role="tooltip"]'
+    );
+    const onPointerDown = (e) => {
+      if (e.button !== 0 || ehInterativo(e.target)) return;
+      arrastando = true;
+      passouLimiar = false;
+      xInicial = e.clientX;
+      scrollInicial = el.scrollLeft;
+    };
+    const onPointerMove = (e) => {
+      if (!arrastando) return;
+      const delta = e.clientX - xInicial;
+      if (!passouLimiar) {
+        if (Math.abs(delta) < limiarPx) return;
+        passouLimiar = true;
+        engolirClique.current = true;
+        el.setPointerCapture?.(e.pointerId);
+        el.style.cursor = "grabbing";
+        el.style.userSelect = "none";
+      }
+      el.scrollLeft = scrollInicial - delta;
+    };
+    const encerrar = (e) => {
+      if (!arrastando) return;
+      arrastando = false;
+      el.releasePointerCapture?.(e.pointerId);
+      el.style.cursor = "";
+      el.style.userSelect = "";
+    };
+    const onClickCapture = (e) => {
+      if (!engolirClique.current) return;
+      engolirClique.current = false;
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", encerrar);
+    el.addEventListener("pointercancel", encerrar);
+    el.addEventListener("click", onClickCapture, true);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", encerrar);
+      el.removeEventListener("pointercancel", encerrar);
+      el.removeEventListener("click", onClickCapture, true);
+      el.style.cursor = "";
+      el.style.userSelect = "";
+    };
+  }, [trilho, ativo, limiarPx]);
+}
+const tabsNavigationRoot = avatar.tv({
+  base: "flex gap-gp-2xs px-pad-lg",
+  variants: {
+    /**
+     * O RESPIRO DO TOPO É DO COMPONENTE, não do consumidor — e isso é o que torna a peça
+     * independente da superfície onde ela cai.
+     *
+     * Enquanto o padding vinha de um wrapper por fora, aquela faixa de 8px acima das abas
+     * ficava com a cor do container (a superfície do card) enquanto a tira ficava com o
+     * recuo: duas cores na mesma banda, e a aba inativa parecia "um botão de outra cor
+     * pousado num fundo diferente". Trazendo o padding pra cá, o recuo cobre a banda inteira
+     * e a ÚNICA coisa com fundo próprio passa a ser a aba ativa.
+     */
+    respiro: {
+      comfortable: "pt-pad-md",
+      compact: "pt-pad-sm",
+      nenhum: ""
+    },
+    /**
+     * `items-stretch` é o que faz a aba de altura total valer: com `items-end` ela encolheria
+     * pro próprio conteúdo e o `h-full` não teria contra o que medir. A régua some junto.
+     */
+    fill: {
+      true: "items-stretch",
+      false: "items-end border-b border-border-default"
+    },
+    /**
+     * Fundo recuado da tira — o par por modo explicado no cabeçalho deste arquivo.
+     *
+     * No claro é `bg-emphasis` (0.94), não `bg-subtle` (0.973): contra a aba ativa branca, o
+     * delta de 0.027 do subtle quase não se lia. Com `emphasis` o recuo é 0.06 e a aba
+     * selecionada salta. No escuro `emphasis` é branco a 12% **sobre** o que está atrás, ou
+     * seja mais CLARO que a superfície (0.28 contra 0.225) — inverteria a hierarquia; ali quem
+     * recua continua sendo `canvas`, e o reforço vem da sombra na aba ativa.
+     */
+    chrome: {
+      true: "bg-bg-emphasis dark:bg-bg-canvas",
+      false: ""
+    }
+  },
+  defaultVariants: { fill: false, chrome: true, respiro: "comfortable" }
+});
+const tabsNavigationTrilho = avatar.tv({
+  /**
+   * `scrollbar-none` não é preferência: a barra ocupa 11px DENTRO do trilho e empurra as abas
+   * pra cima da régua, matando a união. A affordance de navegação são as setas + a lista.
+   */
+  base: "flex min-w-0 flex-1 gap-gp-2xs overflow-x-auto scrollbar-none",
+  variants: {
+    /** o `pb-px` só existe pra o `-mb-px` da aba não ser cortado pelo overflow. */
+    fill: {
+      true: "items-stretch",
+      false: "items-end pb-px"
+    }
+  },
+  defaultVariants: { fill: false }
+});
+const tabsNavigationTab = avatar.tv({
+  base: [
+    "group/aba relative flex shrink-0 cursor-pointer select-none",
+    "items-center gap-gp-sm border border-transparent px-pad-xl",
+    "text-fg-muted transition-colors",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
+  ],
+  variants: {
+    /**
+     * A largura é fixa (aba que cresce com o título faz a fila dançar a cada troca) — mas
+     * fixa em DOIS degraus: no celular, 228px é quase a tela inteira e o usuário vê uma aba
+     * e meia, sem noção de que há uma fila. Abaixo de `sm` a aba cai pra ~168/148px, que
+     * mostra duas e meia e deixa o gesto de arrastar fazer sentido.
+     */
+    density: {
+      comfortable: "w-[168px] sm:w-[228px]",
+      compact: "w-[148px] sm:w-[196px]"
+    },
+    fill: {
+      true: "h-full self-stretch",
+      false: "-mb-px rounded-t-radius-lg"
+    },
+    /** A superfície da aba ATIVA — tem que casar com o conteúdo logo abaixo dela. */
+    surface: {
+      surface: "",
+      canvas: ""
+    },
+    ativa: {
+      /**
+       * `shadow-sh-sm` faz o trabalho que a cor não consegue no escuro: ali a ativa (0.225) e
+       * o recuo (0.205) distam 0.02, e mudar a cor da ativa quebraria a união com o conteúdo,
+       * que é o ponto do componente. A sombra separa sem mexer na cor — e no dark ela vem
+       * amplificada por token (L-011).
+       */
+      true: "border-border-default text-fg-strong shadow-sh-sm",
+      false: "hover:bg-bg-subtle"
+    }
+  },
+  compoundVariants: [
+    { fill: false, density: "comfortable", class: "min-h-comp-3xl" },
+    { fill: false, density: "compact", class: "min-h-comp-xl" },
+    /**
+     * ⚠️ A borda de baixo da aba ativa é **transparente**, não "da cor do conteúdo".
+     *
+     * A primeira versão pintava `border-b-bg-surface` pra apagar a régua. Funcionava só quando
+     * o conteúdo logo abaixo era exatamente aquela cor — nos exemplos em que a tira ficava
+     * sobre container transparente, ou separada do painel por um gap, sobrava um traço claro
+     * embaixo da aba selecionada. Com a borda transparente é o **fundo da aba** que cobre a
+     * régua (o background pinta sob a border-box, e o `-mb-px` a coloca por cima da linha):
+     * funciona igual em qualquer superfície, que é o comportamento que se espera por padrão —
+     * a aba emenda no conteúdo, sem linha entre os dois.
+     */
+    { ativa: true, surface: "surface", class: "bg-bg-surface border-b-transparent" },
+    { ativa: true, surface: "canvas", class: "bg-bg-canvas border-b-transparent" }
+  ],
+  defaultVariants: { density: "comfortable", fill: false, surface: "surface", ativa: false }
+});
+const tabsNavigationDivisoria = avatar.tv({
+  base: "w-px shrink-0 bg-border-default",
+  variants: {
+    fill: {
+      true: "h-[20px] self-center",
+      false: "h-[20px] mb-[14px]"
+    },
+    /** Ao lado da aba ativa some: encostada na borda dela vira uma sombra falsa. */
+    oculta: {
+      true: "bg-transparent",
+      false: ""
+    }
+  },
+  defaultVariants: { fill: false, oculta: false }
+});
+const tabsNavigationControles = avatar.tv({
+  base: "flex shrink-0 items-center gap-gp-2xs",
+  variants: {
+    fill: { true: "h-full", false: "" },
+    density: { comfortable: "h-comp-3xl", compact: "h-comp-xl" }
+  },
+  compoundVariants: [
+    { fill: true, density: "comfortable", class: "h-full" },
+    { fill: true, density: "compact", class: "h-full" }
+  ],
+  defaultVariants: { fill: false, density: "comfortable" }
+});
+const tabsNavigationAcao = avatar.tv({
+  base: [
+    "inline-flex size-comp-xs items-center justify-center rounded-radius-sm",
+    "transition-colors focus-visible:outline-none focus-visible:ring-4"
+  ],
+  variants: {
+    tom: {
+      neutro: "text-fg-muted hover:bg-bg-muted hover:text-fg-default focus-visible:ring-ring-brand",
+      success: "text-fg-success hover:bg-bg-success-muted focus-visible:ring-ring-success",
+      danger: "text-fg-danger hover:bg-bg-danger-muted focus-visible:ring-ring-danger"
+    }
+  },
+  defaultVariants: { tom: "neutro" }
+});
+const tabsNavigationAcoes = avatar.tv({
+  base: "grid transition-[grid-template-columns,opacity] duration-150 ease-out",
+  variants: {
+    visivel: {
+      true: "grid-cols-[1fr] opacity-100",
+      false: "grid-cols-[0fr] opacity-0 group-hover/aba:grid-cols-[1fr] group-hover/aba:opacity-100 group-focus-within/aba:grid-cols-[1fr] group-focus-within/aba:opacity-100"
+    }
+  },
+  defaultVariants: { visivel: false }
+});
+const tabsNavigationStatus = avatar.tv({
+  base: "size-icon-2xs shrink-0",
+  variants: {
+    status: {
+      success: "fill-bg-success text-bg-success",
+      warning: "fill-bg-warning text-bg-warning",
+      danger: "fill-bg-danger text-bg-danger",
+      info: "fill-bg-info text-bg-info",
+      neutral: "fill-fg-subtle text-fg-subtle"
+    }
+  },
+  defaultVariants: { status: "neutral" }
+});
+const STATUS_CONHECIDOS = ["success", "warning", "danger", "info", "neutral"];
+const ehStatusConhecido = (s) => typeof s === "string" && STATUS_CONHECIDOS.includes(s);
+function TabsNavigationTitle({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: [
+        "block truncate text-body-sm font-medium",
+        "group-aria-selected/aba:font-semibold",
+        className ?? ""
+      ].join(" "),
+      ...rest,
+      children
+    }
+  );
+}
+TabsNavigationTitle.displayName = "TabsNavigation.Title";
+function TabsNavigationSubtitle({ children, className, ...rest }) {
+  const ctx = React.useContext(TabsNavigationContext);
+  if (ctx?.density === "compact") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: ["block truncate text-caption-md text-fg-subtle", className ?? ""].join(" "),
+      ...rest,
+      children
+    }
+  );
+}
+TabsNavigationSubtitle.displayName = "TabsNavigation.Subtitle";
+const TabsNavigationAction = React.forwardRef(function TabsNavigationAction2({ tom = "neutro", className, onClick, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: tabsNavigationAcao({ tom, className }),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+      },
+      ...rest
+    }
+  );
+});
+TabsNavigationAction.displayName = "TabsNavigation.Action";
+function TabsNavigationActions({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+TabsNavigationActions.displayName = "TabsNavigation.Actions";
+function TabsNavigationPanel({ value, children, className, ...rest }) {
+  const ctx = React.useContext(TabsNavigationContext);
+  if (!ctx || ctx.value !== value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tabpanel",
+      "aria-labelledby": ctx.idTab(value),
+      tabIndex: 0,
+      className,
+      ...rest,
+      children
+    }
+  );
+}
+TabsNavigationPanel.displayName = "TabsNavigation.Panel";
+const TabsNavigationTab = React.forwardRef(function TabsNavigationTab2({
+  value,
+  leading,
+  status,
+  badge,
+  actions,
+  onClose,
+  menu,
+  panelId,
+  actionsAlwaysVisible = false,
+  hoverCard,
+  children,
+  className,
+  ...rest
+}, ref) {
+  const ctx = React.useContext(TabsNavigationContext);
+  if (!ctx) throw new Error("<TabsNavigation.Tab> só funciona dentro de <TabsNavigation>.");
+  const ativa = ctx.value === value;
+  const temAcoesPadrao = !actions && typeof onClose === "function";
+  const conteudoAcoes = actions ?? (temAcoesPadrao ? /* @__PURE__ */ jsxRuntime.jsx(AcoesPadrao, { onClose, menu }) : null);
+  const aba = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tab",
+      id: ctx.idTab(value),
+      "data-value": value,
+      "aria-selected": ativa,
+      "aria-controls": panelId,
+      tabIndex: ativa ? 0 : -1,
+      onClick: () => ctx.onValueChange(value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ctx.onValueChange(value);
+        }
+      },
+      className: tabsNavigationTab({
+        density: ctx.density,
+        fill: ctx.fill,
+        surface: ctx.surface,
+        ativa,
+        className
+      }),
+      ...rest,
+      children: [
+        leading,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: status !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-sm", children: [
+          ehStatusConhecido(status) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: tabsNavigationStatus({ status }), "aria-hidden": true }) : status,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children })
+        ] }) : children }),
+        !ativa && badge !== void 0 && badge !== null && badge !== 0 ? typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-flex min-w-[18px] items-center justify-center rounded-radius-full bg-bg-brand px-pad-xs text-caption-sm font-semibold text-fg-on-brand",
+            "aria-hidden": true,
+            children: badge
+          }
+        ) : badge : null,
+        conteudoAcoes ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tabsNavigationAcoes({
+              visivel: ativa || actionsAlwaysVisible || ctx.actionsMode === "persistent"
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-gp-2xs overflow-hidden", children: conteudoAcoes })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!hoverCard || ativa) return aba;
+  return /* @__PURE__ */ jsxRuntime.jsxs(toggleGroup.HoverCard, { openDelay: 500, closeDelay: 120, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.HoverCardTrigger, { asChild: true, children: aba }),
+    /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.HoverCardContent, { align: "start", className: "w-[300px]", children: hoverCard })
+  ] });
+});
+TabsNavigationTab.displayName = "TabsNavigation.Tab";
+function AcoesPadrao({ onClose, menu }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsNavigationAction, { "aria-label": "Opções da aba", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "size-icon-sm" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuContent, { align: "start", className: "w-[196px]", children: [
+        menu,
+        menu ? /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuSeparator, {}) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          avatar.DropdownMenuItem,
+          {
+            onSelect: onClose,
+            className: "text-fg-danger focus:bg-bg-danger-muted focus:text-fg-danger",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }),
+              " Fechar aba"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabsNavigationAction, { "aria-label": "Fechar aba", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) })
+  ] });
+}
+const TabsNavigationRoot = React.forwardRef(function TabsNavigation2({
+  value,
+  onValueChange,
+  surface = "surface",
+  density = "comfortable",
+  fill = false,
+  actionsMode = "hover",
+  chrome = true,
+  onNewTab,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const prefixo = React.useId();
+  const trilho = React.useRef(null);
+  const ctx = React.useMemo(
+    () => ({
+      value,
+      onValueChange,
+      surface,
+      density,
+      fill,
+      actionsMode,
+      idTab: (v) => `${prefixo}-${v}`
+    }),
+    [value, onValueChange, surface, density, fill, actionsMode, prefixo]
+  );
+  const { abas, acoesGlobais } = React.useMemo(() => {
+    const abas2 = [];
+    let acoesGlobais2 = null;
+    for (const filho of React.Children.toArray(children)) {
+      if (!React.isValidElement(filho)) continue;
+      if (filho.type === TabsNavigationActions) acoesGlobais2 = filho;
+      else abas2.push(filho);
+    }
+    return { abas: abas2, acoesGlobais: acoesGlobais2 };
+  }, [children]);
+  const [rolagem, setRolagem] = React.useState({ transborda: false, esq: false, dir: false });
+  const medir = React.useCallback(() => {
+    const el = trilho.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    setRolagem({ transborda: max > 1, esq: el.scrollLeft > 1, dir: el.scrollLeft < max - 1 });
+  }, []);
+  React.useEffect(() => {
+    const el = trilho.current;
+    if (!el) return;
+    medir();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(medir);
+    ro.observe(el);
+    for (const filho of Array.from(el.children)) ro.observe(filho);
+    return () => ro.disconnect();
+  }, [medir, abas.length]);
+  React.useEffect(() => {
+    const el = trilho.current;
+    const alvo = el?.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    alvo?.scrollIntoView({ inline: "nearest", block: "nearest", behavior: "smooth" });
+    if (el?.contains(document.activeElement) && alvo !== document.activeElement) alvo?.focus();
+  }, [value]);
+  useArrastarParaRolar(trilho);
+  const rolar = (dir) => trilho.current?.scrollBy({ left: dir * 240, behavior: "smooth" });
+  const onKeyDown = (e) => {
+    const valores = abas.map((a) => a.props.value);
+    const i = valores.indexOf(value);
+    if (i < 0) return;
+    const proximo = e.key === "ArrowRight" ? valores[(i + 1) % valores.length] : e.key === "ArrowLeft" ? valores[(i - 1 + valores.length) % valores.length] : e.key === "Home" ? valores[0] : e.key === "End" ? valores[valores.length - 1] : null;
+    if (!proximo) return;
+    e.preventDefault();
+    onValueChange(proximo);
+  };
+  const controles = tabsNavigationControles({ fill, density });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsNavigationContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "aria-label": ariaLabel,
+      "aria-orientation": "horizontal",
+      onKeyDown,
+      className: tabsNavigationRoot({
+        fill,
+        chrome,
+        // em `fill` a aba vai de ponta a ponta: respiro no topo desmontaria justamente isso
+        respiro: fill ? "nenhum" : density,
+        className
+      }),
+      ...rest,
+      children: [
+        rolagem.esq ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${controles} hidden pr-pad-xs sm:flex`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            avatar.Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Abas anteriores",
+              onClick: () => rolar(-1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: trilho, onScroll: medir, className: tabsNavigationTrilho({ fill }), children: abas.map((aba, i) => {
+          const vizinhaDaAtiva = aba.props.value === value || abas[i + 1]?.props.value === value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: ["flex shrink-0", fill ? "items-stretch" : "items-end"].join(" "),
+              children: [
+                aba,
+                i < abas.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill, oculta: vizinhaDaAtiva }) }) : null
+              ]
+            },
+            aba.props.value
+          );
+        }) }),
+        rolagem.dir ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${controles} hidden pl-pad-xs sm:flex`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            avatar.Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Próximas abas",
+              onClick: () => rolar(1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {})
+            }
+          )
+        ] }) : null,
+        onNewTab || rolagem.transborda && abas.length || acoesGlobais ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: controles, children: [
+          onNewTab ? /* @__PURE__ */ jsxRuntime.jsx(
+            avatar.Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Abrir nova aba",
+              onClick: onNewTab,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {})
+            }
+          ) : null,
+          rolagem.transborda && abas.length ? /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              avatar.Button,
+              {
+                variant: "ghost",
+                color: "secondary",
+                size: "icon-sm",
+                "aria-label": `Listar as ${abas.length} abas abertas`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              avatar.DropdownMenuContent,
+              {
+                align: "end",
+                className: "max-h-[320px] w-[264px] overflow-y-auto scrollbar-thin",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuLabel, { children: [
+                    abas.length,
+                    " abas abertas"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuSeparator, {}),
+                  abas.map((aba) => {
+                    const p = aba.props;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      avatar.DropdownMenuItem,
+                      {
+                        onSelect: () => onValueChange(p.value),
+                        className: p.value === value ? "bg-bg-brand-subtle text-fg-brand" : void 0,
+                        children: [
+                          ehStatusConhecido(p.status) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: tabsNavigationStatus({ status: p.status }), "aria-hidden": true }) : null,
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: p.children })
+                        ]
+                      },
+                      p.value
+                    );
+                  })
+                ]
+              }
+            )
+          ] }) : null,
+          acoesGlobais ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill, className: "mx-pad-xs" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-2xs", children: acoesGlobais })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  ) });
+});
+const TabsNavigation = Object.assign(TabsNavigationRoot, {
+  Tab: TabsNavigationTab,
+  Title: TabsNavigationTitle,
+  Subtitle: TabsNavigationSubtitle,
+  Action: TabsNavigationAction,
+  Actions: TabsNavigationActions,
+  Panel: TabsNavigationPanel
+});
 class Adder {
   constructor() {
     this._partials = new Float64Array(32);
@@ -8470,6 +9082,15 @@ exports.Modal = Modal;
 exports.MonthYearPicker = MonthYearPicker;
 exports.ScreenLoader = ScreenLoader;
 exports.Spinner = Spinner;
+exports.TabsNavigation = TabsNavigation;
+exports.TabsNavigationAction = TabsNavigationAction;
+exports.TabsNavigationActions = TabsNavigationActions;
+exports.TabsNavigationContext = TabsNavigationContext;
+exports.TabsNavigationPanel = TabsNavigationPanel;
+exports.TabsNavigationRoot = TabsNavigationRoot;
+exports.TabsNavigationSubtitle = TabsNavigationSubtitle;
+exports.TabsNavigationTab = TabsNavigationTab;
+exports.TabsNavigationTitle = TabsNavigationTitle;
 exports.ToastCard = ToastCard;
 exports.ToolbarFilterControl = ToolbarFilterControl;
 exports.ToolbarMobileDialog = ToolbarMobileDialog;
@@ -8497,6 +9118,14 @@ exports.messageVariablesPickerStyles = messageVariablesPickerStyles;
 exports.numberColumn = numberColumn;
 exports.phoneColumn = phoneColumn;
 exports.statusColumn = statusColumn;
+exports.tabsNavigationAcao = tabsNavigationAcao;
+exports.tabsNavigationAcoes = tabsNavigationAcoes;
+exports.tabsNavigationControles = tabsNavigationControles;
+exports.tabsNavigationDivisoria = tabsNavigationDivisoria;
+exports.tabsNavigationRoot = tabsNavigationRoot;
+exports.tabsNavigationStatus = tabsNavigationStatus;
+exports.tabsNavigationTab = tabsNavigationTab;
+exports.tabsNavigationTrilho = tabsNavigationTrilho;
 exports.textColumn = textColumn;
 exports.toast = toast;
 exports.toastVariants = toastVariants;