@snksergio/design-system 0.53.0 → 0.54.0

package/dist-lib/index.mjs

@@ -2,16 +2,16 @@ import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEn
 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);
@@ -8382,7 +8994,7 @@ export {
   X as MoreMenu,
   y2 as MoreMenuCheckboxItem,
   DropdownMenuItem as MoreMenuItem,
-  F2 as MoreMenuLabel,
+  DropdownMenuLabel as MoreMenuLabel,
   H3 as MoreMenuRadioGroup,
   I2 as MoreMenuRadioItem,
   DropdownMenuSeparator as MoreMenuSeparator,
@@ -8393,7 +9005,7 @@ export {
   H4 as PanelContent,
   Z as PanelFooter,
   _ as PanelHeader,
-  F3 as PanelRoot,
+  F2 as PanelRoot,
   O2 as PanelTrigger,
   $ as SELECTION_COLUMN_WIDTH,
   ScreenLoader,
@@ -8418,6 +9030,15 @@ export {
   a9 as TableRow,
   TableToolbar,
   aa as TableToolbarViews,
+  TabsNavigation,
+  TabsNavigationAction,
+  TabsNavigationActions,
+  TabsNavigationContext,
+  TabsNavigationPanel,
+  TabsNavigationRoot,
+  TabsNavigationSubtitle,
+  TabsNavigationTab,
+  TabsNavigationTitle,
   ToastCard,
   ToolbarApplied,
   ab as ToolbarDivider,
@@ -8476,6 +9097,14 @@ export {
   al as savedViewsMockService,
   t2 as shouldPreventNavigation,
   statusColumn,
+  tabsNavigationAcao,
+  tabsNavigationAcoes,
+  tabsNavigationControles,
+  tabsNavigationDivisoria,
+  tabsNavigationRoot,
+  tabsNavigationStatus,
+  tabsNavigationTab,
+  tabsNavigationTrilho,
   textColumn,
   toast,
   toastVariants,