@snksergio/design-system 0.52.0 → 0.54.0

package/dist-lib/index.mjs

@@ -1,17 +1,17 @@
-import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-DA6K3a3n.mjs";
-import { t, A, B, u, C, v, w, x, D, y, z, E, G, H, I, J, K, M, d, N, O, Q, R, S, F, b, U, c, V, W, P, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, p, ai, aj, ak, al, am } from "./chunks/panel-DA6K3a3n.mjs";
+import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-DsOKm4Im.mjs";
+import { t, A, u, B, v, C, w, x, y, D, z, E, G, H, I, J, K, M, N, d, O, Q, R, S, U, F, b, V, c, W, X, P, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, p, al, am, an, ao, ap } from "./chunks/panel-DsOKm4Im.mjs";
 import { C as Chip } from "./chunks/useTheme-Bk8AYqLr.mjs";
 import { A as A2, a, b as b2, H as H2, c as c2, d as d2, e, f, g, M as M2, S as S2, h, i, j, k, l, m, n, U as U2, o, p as p2, q, r, s, t as t2, v as v2, w as w2, u as u2 } from "./chunks/useTheme-Bk8AYqLr.mjs";
-import { a8 as tv, c as cn, V as Popover, Z as PopoverTrigger, Y as PopoverContent, a7 as Button, D as Dialog, w as DialogTrigger, p as DialogContent, v as DialogTitle, W as PopoverAnchor, o as DialogClose, q as DialogDescription, x as DropdownMenu, O as DropdownMenuTrigger, z as DropdownMenuContent, J as DropdownMenuSeparator, E as DropdownMenuItem } from "./chunks/avatar-FPbG1TRy.mjs";
-import { P as P2, Q as Q2, R as R2, S as S3, T, U as U3, y as y2, F as F2, H as H3, I as I2, a9 as a92, a6 as a62 } from "./chunks/avatar-FPbG1TRy.mjs";
+import { a8 as tv, c as cn, V as Popover, Z as PopoverTrigger, Y as PopoverContent, a7 as Button, D as Dialog, w as DialogTrigger, p as DialogContent, v as DialogTitle, W as PopoverAnchor, o as DialogClose, q as DialogDescription, x as DropdownMenu, O as DropdownMenuTrigger, z as DropdownMenuContent, F as DropdownMenuLabel, J as DropdownMenuSeparator, E as DropdownMenuItem } from "./chunks/avatar-FPbG1TRy.mjs";
+import { P as P2, Q as Q2, R as R2, S as S3, T, U as U3, y as y2, H as H3, I as I2, a9 as a92, a6 as a62 } from "./chunks/avatar-FPbG1TRy.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, forwardRef, useContext, useId, useState, Fragment as Fragment$1, isValidElement, useCallback, useMemo, createElement, useRef, useEffect, useLayoutEffect } from "react";
+import { createContext, forwardRef, useContext, useId, useState, Fragment as Fragment$1, isValidElement, useCallback, useMemo, createElement, useRef, useEffect, useLayoutEffect, Children } from "react";
 import { Q as Switch, l as Checkbox, C as Calendar, T as Textarea } from "./chunks/sheet-DIpYkRYS.mjs";
-import { G as G2, H as H4, F as F3, O as O2 } from "./chunks/sheet-DIpYkRYS.mjs";
-import { av as RadioGroup, aw as RadioGroupItem, az as Separator, aA as Skeleton } from "./chunks/toggle-group-mXbG8_Jm.mjs";
-import { B as B2, aJ } from "./chunks/toggle-group-mXbG8_Jm.mjs";
-import { Check, MoreHorizontal, SlidersHorizontal, Calendar as Calendar$1, AlertCircle, CheckCheck, Clock, MoreVertical, Ban, X as X2, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, RefreshCw, OctagonX, TriangleAlert, CircleCheck, Info, Bell } from "lucide-react";
+import { G as G2, H as H4, F as F2, O as O2 } from "./chunks/sheet-DIpYkRYS.mjs";
+import { av as RadioGroup, aw as RadioGroupItem, az as Separator, aA as Skeleton, _ as HoverCard, a0 as HoverCardTrigger, $ as HoverCardContent } from "./chunks/toggle-group-BYmj8142.mjs";
+import { B as B2, aJ } from "./chunks/toggle-group-BYmj8142.mjs";
+import { Check, MoreHorizontal, SlidersHorizontal, Calendar as Calendar$1, AlertCircle, CheckCheck, Clock, MoreVertical, Ban, X as X2, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, Circle, Plus, RefreshCw, OctagonX, TriangleAlert, CircleCheck, Info, Bell } from "lucide-react";
 import { Reply } from "lucide-react";
 import { I as Input } from "./chunks/input-tjIT8HNE.mjs";
 import { i as i2 } from "./chunks/input-tjIT8HNE.mjs";
@@ -5400,6 +5400,618 @@ const ScreenLoader = forwardRef(
   }
 );
 ScreenLoader.displayName = "ScreenLoader";
+const TabsNavigationContext = createContext(null);
+function useArrastarParaRolar(trilho, ativo = true, limiarPx = 6) {
+  const engolirClique = useRef(false);
+  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 = (e2) => {
+      if (e2.button !== 0 || ehInterativo(e2.target)) return;
+      arrastando = true;
+      passouLimiar = false;
+      xInicial = e2.clientX;
+      scrollInicial = el.scrollLeft;
+    };
+    const onPointerMove = (e2) => {
+      if (!arrastando) return;
+      const delta = e2.clientX - xInicial;
+      if (!passouLimiar) {
+        if (Math.abs(delta) < limiarPx) return;
+        passouLimiar = true;
+        engolirClique.current = true;
+        el.setPointerCapture?.(e2.pointerId);
+        el.style.cursor = "grabbing";
+        el.style.userSelect = "none";
+      }
+      el.scrollLeft = scrollInicial - delta;
+    };
+    const encerrar = (e2) => {
+      if (!arrastando) return;
+      arrastando = false;
+      el.releasePointerCapture?.(e2.pointerId);
+      el.style.cursor = "";
+      el.style.userSelect = "";
+    };
+    const onClickCapture = (e2) => {
+      if (!engolirClique.current) return;
+      engolirClique.current = false;
+      e2.stopPropagation();
+      e2.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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = (s2) => typeof s2 === "string" && STATUS_CONHECIDOS.includes(s2);
+function TabsNavigationTitle({ children, className, ...rest }) {
+  return /* @__PURE__ */ 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 = useContext(TabsNavigationContext);
+  if (ctx?.density === "compact") return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["block truncate text-caption-md text-fg-subtle", className ?? ""].join(" "),
+      ...rest,
+      children
+    }
+  );
+}
+TabsNavigationSubtitle.displayName = "TabsNavigation.Subtitle";
+const TabsNavigationAction = forwardRef(function TabsNavigationAction2({ tom = "neutro", className, onClick, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: tabsNavigationAcao({ tom, className }),
+      onClick: (e2) => {
+        e2.stopPropagation();
+        onClick?.(e2);
+      },
+      ...rest
+    }
+  );
+});
+TabsNavigationAction.displayName = "TabsNavigation.Action";
+function TabsNavigationActions({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+TabsNavigationActions.displayName = "TabsNavigation.Actions";
+function TabsNavigationPanel({ value, children, className, ...rest }) {
+  const ctx = useContext(TabsNavigationContext);
+  if (!ctx || ctx.value !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      "aria-labelledby": ctx.idTab(value),
+      tabIndex: 0,
+      className,
+      ...rest,
+      children
+    }
+  );
+}
+TabsNavigationPanel.displayName = "TabsNavigation.Panel";
+const TabsNavigationTab = forwardRef(function TabsNavigationTab2({
+  value,
+  leading,
+  status,
+  badge,
+  actions,
+  onClose,
+  menu,
+  panelId,
+  actionsAlwaysVisible = false,
+  hoverCard,
+  children,
+  className,
+  ...rest
+}, ref) {
+  const ctx = 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__ */ jsx(AcoesPadrao, { onClose, menu }) : null);
+  const aba = /* @__PURE__ */ 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: (e2) => {
+        if (e2.key === "Enter" || e2.key === " ") {
+          e2.preventDefault();
+          ctx.onValueChange(value);
+        }
+      },
+      className: tabsNavigationTab({
+        density: ctx.density,
+        fill: ctx.fill,
+        surface: ctx.surface,
+        ativa,
+        className
+      }),
+      ...rest,
+      children: [
+        leading,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: status !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-gp-sm", children: [
+          ehStatusConhecido(status) ? /* @__PURE__ */ jsx(Circle, { className: tabsNavigationStatus({ status }), "aria-hidden": true }) : status,
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+        ] }) : children }),
+        !ativa && badge !== void 0 && badge !== null && badge !== 0 ? typeof badge === "number" ? /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: tabsNavigationAcoes({
+              visivel: ativa || actionsAlwaysVisible || ctx.actionsMode === "persistent"
+            }),
+            children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-gp-2xs overflow-hidden", children: conteudoAcoes })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!hoverCard || ativa) return aba;
+  return /* @__PURE__ */ jsxs(HoverCard, { openDelay: 500, closeDelay: 120, children: [
+    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: aba }),
+    /* @__PURE__ */ jsx(HoverCardContent, { align: "start", className: "w-[300px]", children: hoverCard })
+  ] });
+});
+TabsNavigationTab.displayName = "TabsNavigation.Tab";
+function AcoesPadrao({ onClose, menu }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TabsNavigationAction, { "aria-label": "Opções da aba", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-icon-sm" }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[196px]", children: [
+        menu,
+        menu ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: onClose,
+            className: "text-fg-danger focus:bg-bg-danger-muted focus:text-fg-danger",
+            children: [
+              /* @__PURE__ */ jsx(X2, { className: "size-icon-sm" }),
+              " Fechar aba"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TabsNavigationAction, { "aria-label": "Fechar aba", onClick: onClose, children: /* @__PURE__ */ jsx(X2, { className: "size-icon-sm" }) })
+  ] });
+}
+const TabsNavigationRoot = 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 = useId();
+  const trilho = useRef(null);
+  const ctx = useMemo(
+    () => ({
+      value,
+      onValueChange,
+      surface,
+      density,
+      fill,
+      actionsMode,
+      idTab: (v3) => `${prefixo}-${v3}`
+    }),
+    [value, onValueChange, surface, density, fill, actionsMode, prefixo]
+  );
+  const { abas, acoesGlobais } = useMemo(() => {
+    const abas2 = [];
+    let acoesGlobais2 = null;
+    for (const filho of Children.toArray(children)) {
+      if (!isValidElement(filho)) continue;
+      if (filho.type === TabsNavigationActions) acoesGlobais2 = filho;
+      else abas2.push(filho);
+    }
+    return { abas: abas2, acoesGlobais: acoesGlobais2 };
+  }, [children]);
+  const [rolagem, setRolagem] = useState({ transborda: false, esq: false, dir: false });
+  const medir = 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 });
+  }, []);
+  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]);
+  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 = (e2) => {
+    const valores = abas.map((a11) => a11.props.value);
+    const i3 = valores.indexOf(value);
+    if (i3 < 0) return;
+    const proximo = e2.key === "ArrowRight" ? valores[(i3 + 1) % valores.length] : e2.key === "ArrowLeft" ? valores[(i3 - 1 + valores.length) % valores.length] : e2.key === "Home" ? valores[0] : e2.key === "End" ? valores[valores.length - 1] : null;
+    if (!proximo) return;
+    e2.preventDefault();
+    onValueChange(proximo);
+  };
+  const controles = tabsNavigationControles({ fill, density });
+  return /* @__PURE__ */ jsx(TabsNavigationContext.Provider, { value: ctx, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: `${controles} hidden pr-pad-xs sm:flex`, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Abas anteriores",
+              onClick: () => rolar(-1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, {})
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill }) })
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { ref: trilho, onScroll: medir, className: tabsNavigationTrilho({ fill }), children: abas.map((aba, i3) => {
+          const vizinhaDaAtiva = aba.props.value === value || abas[i3 + 1]?.props.value === value;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: ["flex shrink-0", fill ? "items-stretch" : "items-end"].join(" "),
+              children: [
+                aba,
+                i3 < abas.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill, oculta: vizinhaDaAtiva }) }) : null
+              ]
+            },
+            aba.props.value
+          );
+        }) }),
+        rolagem.dir ? /* @__PURE__ */ jsxs("div", { className: `${controles} hidden pl-pad-xs sm:flex`, children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Próximas abas",
+              onClick: () => rolar(1),
+              children: /* @__PURE__ */ jsx(ChevronRight, {})
+            }
+          )
+        ] }) : null,
+        onNewTab || rolagem.transborda && abas.length || acoesGlobais ? /* @__PURE__ */ jsxs("div", { className: controles, children: [
+          onNewTab ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              color: "secondary",
+              size: "icon-sm",
+              "aria-label": "Abrir nova aba",
+              onClick: onNewTab,
+              children: /* @__PURE__ */ jsx(Plus, {})
+            }
+          ) : null,
+          rolagem.transborda && abas.length ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                color: "secondary",
+                size: "icon-sm",
+                "aria-label": `Listar as ${abas.length} abas abertas`,
+                children: /* @__PURE__ */ jsx(ChevronDown, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuContent,
+              {
+                align: "end",
+                className: "max-h-[320px] w-[264px] overflow-y-auto scrollbar-thin",
+                children: [
+                  /* @__PURE__ */ jsxs(DropdownMenuLabel, { children: [
+                    abas.length,
+                    " abas abertas"
+                  ] }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  abas.map((aba) => {
+                    const p4 = aba.props;
+                    return /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        onSelect: () => onValueChange(p4.value),
+                        className: p4.value === value ? "bg-bg-brand-subtle text-fg-brand" : void 0,
+                        children: [
+                          ehStatusConhecido(p4.status) ? /* @__PURE__ */ jsx(Circle, { className: tabsNavigationStatus({ status: p4.status }), "aria-hidden": true }) : null,
+                          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: p4.children })
+                        ]
+                      },
+                      p4.value
+                    );
+                  })
+                ]
+              }
+            )
+          ] }) : null,
+          acoesGlobais ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tabsNavigationDivisoria({ fill, className: "mx-pad-xs" }) }),
+            /* @__PURE__ */ 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);
@@ -8295,10 +8907,11 @@ export {
   A as AlertModal,
   A2 as AppShell,
   Avatar,
+  u as AvatarGroup,
   BRANDS,
   B2 as Badge,
   B as BulkActionButton,
-  u as BulkActionsBar,
+  v as BulkActionsBar,
   Button,
   ButtonGroup,
   CardCheckbox,
@@ -8316,38 +8929,38 @@ export {
   ChoroplethMap,
   ColorPicker,
   C as ColsPanel,
-  v as ColsPopover,
-  w as Combobox,
+  w as ColsPopover,
+  x as Combobox,
   ConversationListItem,
   DEFAULT_COLOR_PRESETS,
-  x as DEFAULT_FILTER_OPERATORS,
+  y as DEFAULT_FILTER_OPERATORS,
   DEFAULT_MESSAGE_VARIABLES,
   DataList,
   D as DataTable,
-  y as DataTableActionsCell,
-  z as DataTableEditCell,
-  E as DataTableEmpty,
-  G as DataTableFloatingBulkBar,
-  H as DataTableLoading,
-  I as DataTableNoResults,
-  J as DataTableTotalizerRow,
+  z as DataTableActionsCell,
+  E as DataTableEditCell,
+  G as DataTableEmpty,
+  H as DataTableFloatingBulkBar,
+  I as DataTableLoading,
+  J as DataTableNoResults,
+  K as DataTableTotalizerRow,
   DatePicker,
   DateSeparatorChip,
   EmptyState,
-  K as FLOATING_PANEL_SIZE_PX,
+  M as FLOATING_PANEL_SIZE_PX,
   FileUploadField,
-  M as FilterPanel,
+  N as FilterPanel,
   FilterPopover,
   d as FloatingPanel,
-  N as FloatingPanelField,
-  O as FloatingPanelSection,
-  Q as FooterTable,
-  R as FooterTableSkeleton,
+  O as FloatingPanelField,
+  Q as FloatingPanelSection,
+  R as FooterTable,
+  S as FooterTableSkeleton,
   FormField,
-  S as FormFieldCheckbox,
+  U as FormFieldCheckbox,
   F as FormFieldInput,
   b as FormFieldSelect,
-  U as FormFieldSwitch,
+  V as FormFieldSwitch,
   c as FormFieldTextarea,
   H2 as Header,
   c2 as HeaderBreadcrumb,
@@ -8363,7 +8976,7 @@ export {
   S3 as InputGroupInput,
   T as InputGroupText,
   U3 as InputGroupTextarea,
-  V as Kanban,
+  W as Kanban,
   a10 as Kpi,
   b3 as KpiDelta,
   K2 as KpiGroup,
@@ -8378,23 +8991,23 @@ export {
   MessageVariablesPicker,
   Modal,
   MonthYearPicker,
-  W as MoreMenu,
+  X as MoreMenu,
   y2 as MoreMenuCheckboxItem,
   DropdownMenuItem as MoreMenuItem,
-  F2 as MoreMenuLabel,
+  DropdownMenuLabel as MoreMenuLabel,
   H3 as MoreMenuRadioGroup,
   I2 as MoreMenuRadioItem,
   DropdownMenuSeparator as MoreMenuSeparator,
   P3 as PageHeader,
   P as Panel,
-  X as PanelBody,
+  Y as PanelBody,
   G2 as PanelCloseAction,
   H4 as PanelContent,
-  Y as PanelFooter,
-  Z as PanelHeader,
-  F3 as PanelRoot,
+  Z as PanelFooter,
+  _ as PanelHeader,
+  F2 as PanelRoot,
   O2 as PanelTrigger,
-  _ as SELECTION_COLUMN_WIDTH,
+  $ as SELECTION_COLUMN_WIDTH,
   ScreenLoader,
   S2 as SidebarBrandIcon,
   h as SidebarItem,
@@ -8404,37 +9017,48 @@ export {
   l as SidebarSection,
   m as SidebarSubgroup,
   n as SingleMenuSidebar,
-  $ as SortPanel,
-  a0 as SortPopover,
+  a0 as SortPanel,
+  a1 as SortPopover,
   Spinner,
-  a1 as TABLE_HEADER_HEIGHT,
-  a2 as Table,
-  a3 as TableBody,
-  a4 as TableCardRow,
-  a5 as TableCell,
-  a6 as TableHead,
-  a7 as TableHeadCell,
-  a8 as TableRow,
+  a2 as TABLE_HEADER_HEIGHT,
+  a3 as Table,
+  a4 as TableBody,
+  a5 as TableCardRow,
+  a6 as TableCell,
+  a7 as TableHead,
+  a8 as TableHeadCell,
+  a9 as TableRow,
   TableToolbar,
-  a9 as TableToolbarViews,
+  aa as TableToolbarViews,
+  TabsNavigation,
+  TabsNavigationAction,
+  TabsNavigationActions,
+  TabsNavigationContext,
+  TabsNavigationPanel,
+  TabsNavigationRoot,
+  TabsNavigationSubtitle,
+  TabsNavigationTab,
+  TabsNavigationTitle,
   ToastCard,
   ToolbarApplied,
-  aa as ToolbarDivider,
+  ab as ToolbarDivider,
   ToolbarFilterControl,
   ToolbarMobileDialog,
   ToolbarMobileSection,
   ToolbarMobileSheet,
-  ab as ToolbarSaveButton,
+  ac as ToolbarSaveButton,
   ToolbarSearch,
-  ac as ToolbarSegmented,
-  ad as ToolbarSettingsMenu,
+  ad as ToolbarSegmented,
+  ae as ToolbarSettingsMenu,
   ToolbarSimpleFilterDrawer,
   ToolbarTabs,
   ToolbarToolButton,
   U2 as UserMenu,
-  ae as ViewsPopover,
+  af as ViewsPopover,
   actionColumn,
-  af as avatarVariants,
+  ag as avatarGroupItem,
+  ah as avatarGroupRoot,
+  ai as avatarVariants,
   aJ as badgeVariants,
   a92 as buttonVariants,
   cardCheckbox,
@@ -8451,7 +9075,7 @@ export {
   dateSeparatorChipStyles,
   emailColumn,
   emptyStateStyles,
-  ag as floatingPanelStyles,
+  aj as floatingPanelStyles,
   iconStyles,
   icons,
   a62 as inputGroupVariants,
@@ -8467,22 +9091,30 @@ export {
   messageVariablesPickerStyles,
   numberColumn,
   p3 as pageHeaderStyles,
-  ah as panelContainer,
+  ak as panelContainer,
   phoneColumn,
   p as presetView,
-  ai as savedViewsMockService,
+  al as savedViewsMockService,
   t2 as shouldPreventNavigation,
   statusColumn,
+  tabsNavigationAcao,
+  tabsNavigationAcoes,
+  tabsNavigationControles,
+  tabsNavigationDivisoria,
+  tabsNavigationRoot,
+  tabsNavigationStatus,
+  tabsNavigationTab,
+  tabsNavigationTrilho,
   textColumn,
   toast,
   toastVariants,
   useBrand,
   useChart,
-  aj as useColumnResize,
-  ak as useColumnWidths,
+  am as useColumnResize,
+  an as useColumnWidths,
   v2 as useControllable,
-  al as useDataTableContext,
-  am as useFloatingPanelResize,
+  ao as useDataTableContext,
+  ap as useFloatingPanelResize,
   w2 as useMediaQuery,
   u2 as useTheme,
   useToolbarFilterControl,