@snksergio/design-system 0.53.0 → 0.55.0

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { TabsNavigationTabProps, TabsNavigationPanelProps, TabsNavigationProps } from './tabs-navigation.types';
+/**
+ * Título da aba. Existe pra não obrigar ninguém a decorar `truncate text-body-sm` — e pra o
+ * peso acompanhar a seleção: na aba ativa o título vai a `font-semibold` e herda o
+ * `text-fg-strong` da aba (branco puro no escuro, o tom mais escuro no claro). Nas inativas
+ * fica `font-medium` sobre `fg-muted`, que é o contraste de "aberta, mas não é esta".
+ */
+export declare function TabsNavigationTitle({ children, className, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabsNavigationTitle {
+    var displayName: string;
+}
+/** Subtítulo — some sozinho quando a tira é `density="compact"`. */
+export declare function TabsNavigationSubtitle({ children, className, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace TabsNavigationSubtitle {
+    var displayName: string;
+}
+/**
+ * Ação inline da aba. 24px porque o menor `size="icon-*"` do `Button` é 32px e não cabe numa
+ * aba de 40px sem espremer o título — é o mesmo motivo de o `+` da tira usar `Button` e este
+ * não. `stopPropagation` embutido: clique na ação não pode selecionar a aba.
+ */
+export declare const TabsNavigationAction: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    tom?: "neutro" | "success" | "danger";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+/** Ações GLOBAIS da tira (busca, preferências) — ficam à direita, depois de uma divisória. */
+export declare function TabsNavigationActions({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabsNavigationActions {
+    var displayName: string;
+}
+/**
+ * Painel de conteúdo — opcional. Só faz sentido quando o conteúdo mora DENTRO da árvore do
+ * componente; quando mora fora (outra coluna, outra rota), use `panelId` na aba.
+ */
+export declare function TabsNavigationPanel({ value, children, className, ...rest }: TabsNavigationPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace TabsNavigationPanel {
+    var displayName: string;
+}
+export declare const TabsNavigationTab: import('react').ForwardRefExoticComponent<TabsNavigationTabProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * `TabsNavigation` — tira de abas de navegação, no estilo das abas de um navegador.
+ *
+ * ## O conteúdo mora onde você quiser
+ *
+ * O componente é **sempre controlado** e não hospeda o conteúdo: ele diz qual aba está ativa
+ * (`value` / `onValueChange`) e o consumidor troca o que quiser, onde quiser — outra coluna,
+ * outra rota, outro componente. Pra fechar a acessibilidade com o painel fora, dê `panelId` à
+ * aba (vira `aria-controls`); com o painel dentro, use `<TabsNavigation.Panel>`.
+ *
+ * ## Composição, não configuração
+ *
+ * `leading`, `children`, `status`, `badge` e `actions` aceitam qualquer nó. `actions`
+ * **substitui** as ações padrão — é por ele que entram ✓/✗ de aceitar/recusar um chamado, ou
+ * cinco botões, ou nenhum.
+ *
+ * @example
+ * <TabsNavigation value={id} onValueChange={setId} aria-label="Conversas abertas" onNewTab={abrir}>
+ *   <TabsNavigation.Tab
+ *     value="c1"
+ *     leading={<Avatar size="sm" colorHex="#2563EB">MS</Avatar>}
+ *     status="success"
+ *     badge={3}
+ *     panelId="painel"
+ *     onClose={() => fechar("c1")}
+ *   >
+ *     <TabsNavigation.Title>Maria Silva</TabsNavigation.Title>
+ *     <TabsNavigation.Subtitle>Fatura de julho</TabsNavigation.Subtitle>
+ *   </TabsNavigation.Tab>
+ * </TabsNavigation>
+ */
+export declare const TabsNavigationRoot: import('react').ForwardRefExoticComponent<TabsNavigationProps & import('react').RefAttributes<HTMLDivElement>>;
+type TabsNavigationCompound = typeof TabsNavigationRoot & {
+    Tab: typeof TabsNavigationTab;
+    Title: typeof TabsNavigationTitle;
+    Subtitle: typeof TabsNavigationSubtitle;
+    Action: typeof TabsNavigationAction;
+    Actions: typeof TabsNavigationActions;
+    Panel: typeof TabsNavigationPanel;
+};
+export declare const TabsNavigation: TabsNavigationCompound;
+export {};
+//# sourceMappingURL=tabs-navigation.d.ts.map

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/TabsNavigation/tabs-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA4Bf,OAAO,KAAK,EACV,sBAAsB,EACtB,wBAAwB,EACxB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AAQjC;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,2CAa1G;yBAbe,mBAAmB;;;AAgBnC,oEAAoE;AACpE,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,kDAW7G;yBAXe,sBAAsB;;;AActC;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;UAEyB,QAAQ,GAAG,SAAS,GAAG,QAAQ;qDAcvF,CAAC;AAGH,8FAA8F;AAC9F,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,2CAE3E;yBAFe,qBAAqB;;;AAKrC;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,wBAAwB,kDAcpG;yBAde,mBAAmB;;;AAmBnC,eAAO,MAAM,iBAAiB,mHA0H5B,CAAC;AAiCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,kBAAkB,gHA4Q7B,CAAC;AAEH,KAAK,sBAAsB,GAAG,OAAO,kBAAkB,GAAG;IACxD,GAAG,EAAE,OAAO,iBAAiB,CAAC;IAC9B,KAAK,EAAE,OAAO,mBAAmB,CAAC;IAClC,QAAQ,EAAE,OAAO,sBAAsB,CAAC;IACxC,MAAM,EAAE,OAAO,oBAAoB,CAAC;IACpC,OAAO,EAAE,OAAO,qBAAqB,CAAC;IACtC,KAAK,EAAE,OAAO,mBAAmB,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,cAAc,EAOrB,sBAAsB,CAAC"}

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.styles.d.ts

@@ -0,0 +1,393 @@
+import { VariantProps } from '../../../utils/tv';
+/**
+ * TabsNavigation styles — iGreen DS
+ *
+ * Tira de abas de NAVEGAÇÃO (estilo navegador): cada aba é uma sessão aberta, não um filtro
+ * de conteúdo dentro da tela. A diferença pro `Tabs` do shadcn não é estética — é que aqui a
+ * aba ativa **se une fisicamente** ao conteúdo, e é esse detalhe que carrega o componente.
+ *
+ * ## Os dois mecanismos de união, e por que são dois
+ *
+ * - **`fill: false` (aba pousada).** A tira tem uma régua de 1px embaixo; a aba ativa desce
+ *   1px (`-mb-px`) e pinta essa régua com a própria cor de fundo. Sem o truque ela vira um
+ *   botão pousado sobre uma linha — que é exatamente o `Tabs` variante `line` que já existe.
+ * - **`fill: true` (altura total).** A aba ocupa a faixa inteira e a tira **não tem régua**:
+ *   a união vira continuidade de cor. O truque do `-mb-px` foi medido aqui e não serve — a
+ *   aba parava 2px antes da régua (1px do `pb-px` do trilho + 1px da borda da faixa), e
+ *   fresta é pior que linha nenhuma.
+ *
+ * ## A superfície é prop, não constante
+ *
+ * A aba ativa TEM que ser a mesma cor do conteúdo abaixo dela. Num card é `bg-surface`; se o
+ * conteúdo for a página, é `bg-canvas`. Errar isso quebra a união, que é o componente inteiro.
+ *
+ * ## O fundo recuado usa DOIS tokens, um por modo — e isso é deliberado
+ *
+ * `bg-subtle` no claro, `bg-canvas` no escuro. Medido: no claro `canvas` é branco IGUAL a
+ * `surface` (recuo zero) e quem recua é `subtle` (0.973); no escuro `subtle` é branco a 1%
+ * sobre o card (invisível) e quem recua é `canvas` (0.205 contra 0.225). Cada modo tem o seu
+ * token de recuo, e o par existente cobre o papel — não há token novo aqui.
+ */
+export declare const tabsNavigationRoot: import('tailwind-variants').TVReturnType<{
+    /**
+     * 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: string;
+        compact: string;
+        nenhum: string;
+    };
+    /**
+     * `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: string;
+        false: string;
+    };
+    /**
+     * 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: string;
+        false: string;
+    };
+}, undefined, "flex gap-gp-2xs px-pad-lg", {
+    /**
+     * 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: string;
+        compact: string;
+        nenhum: string;
+    };
+    /**
+     * `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: string;
+        false: string;
+    };
+    /**
+     * 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: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /**
+     * 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: string;
+        compact: string;
+        nenhum: string;
+    };
+    /**
+     * `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: string;
+        false: string;
+    };
+    /**
+     * 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: string;
+        false: string;
+    };
+}, undefined, "flex gap-gp-2xs px-pad-lg", unknown, unknown, undefined>>;
+export declare const tabsNavigationTrilho: import('tailwind-variants').TVReturnType<{
+    /** o `pb-px` só existe pra o `-mb-px` da aba não ser cortado pelo overflow. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex min-w-0 flex-1 gap-gp-2xs overflow-x-auto scrollbar-none", {
+    /** o `pb-px` só existe pra o `-mb-px` da aba não ser cortado pelo overflow. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /** o `pb-px` só existe pra o `-mb-px` da aba não ser cortado pelo overflow. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex min-w-0 flex-1 gap-gp-2xs overflow-x-auto scrollbar-none", unknown, unknown, undefined>>;
+export declare const tabsNavigationTab: import('tailwind-variants').TVReturnType<{
+    /**
+     * 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: string;
+        compact: string;
+    };
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** A superfície da aba ATIVA — tem que casar com o conteúdo logo abaixo dela. */
+    surface: {
+        surface: string;
+        canvas: string;
+    };
+    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: string;
+        false: string;
+    };
+}, undefined, string[], {
+    /**
+     * 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: string;
+        compact: string;
+    };
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** A superfície da aba ATIVA — tem que casar com o conteúdo logo abaixo dela. */
+    surface: {
+        surface: string;
+        canvas: string;
+    };
+    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: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /**
+     * 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: string;
+        compact: string;
+    };
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** A superfície da aba ATIVA — tem que casar com o conteúdo logo abaixo dela. */
+    surface: {
+        surface: string;
+        canvas: string;
+    };
+    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: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Divisória curta entre abas — 20px, não altura cheia: altura cheia transformaria a tira num
+ * toolbar segmentado, que é outra leitura. Centrar depende do modo, porque o eixo do flex
+ * muda: `items-end` no pousado (daí a margem), `items-stretch` no cheio (daí `self-center`).
+ */
+export declare const tabsNavigationDivisoria: import('tailwind-variants').TVReturnType<{
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** Ao lado da aba ativa some: encostada na borda dela vira uma sombra falsa. */
+    oculta: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-px shrink-0 bg-border-default", {
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** Ao lado da aba ativa some: encostada na borda dela vira uma sombra falsa. */
+    oculta: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    fill: {
+        true: string;
+        false: string;
+    };
+    /** Ao lado da aba ativa some: encostada na borda dela vira uma sombra falsa. */
+    oculta: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-px shrink-0 bg-border-default", unknown, unknown, undefined>>;
+/**
+ * A faixa dos controles (setas, `+`, lista, ações globais) tem a MESMA altura da aba e
+ * centraliza — é isso que alinha a fileira. Medido: com 48px fixos ao lado de abas de 40px,
+ * ou dentro de uma faixa de 56px no modo cheio, tudo descia 4px do eixo.
+ */
+export declare const tabsNavigationControles: import('tailwind-variants').TVReturnType<{
+    fill: {
+        true: string;
+        false: string;
+    };
+    density: {
+        comfortable: string;
+        compact: string;
+    };
+}, undefined, "flex shrink-0 items-center gap-gp-2xs", {
+    fill: {
+        true: string;
+        false: string;
+    };
+    density: {
+        comfortable: string;
+        compact: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    fill: {
+        true: string;
+        false: string;
+    };
+    density: {
+        comfortable: string;
+        compact: string;
+    };
+}, undefined, "flex shrink-0 items-center gap-gp-2xs", unknown, unknown, undefined>>;
+/** Ação inline da aba (`⋯`, `×`, ✓/✗). 24px — o menor `icon-*` do Button é 32px e não cabe. */
+export declare const tabsNavigationAcao: import('tailwind-variants').TVReturnType<{
+    tom: {
+        neutro: string;
+        success: string;
+        danger: string;
+    };
+}, undefined, string[], {
+    tom: {
+        neutro: string;
+        success: string;
+        danger: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    tom: {
+        neutro: string;
+        success: string;
+        danger: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * A coluna de ações CRESCE de 0fr a 1fr em vez de ficar reservada com `opacity-0`.
+ *
+ * Com opacidade os botões ocupavam 48px invisíveis e o título truncava por causa de espaço
+ * que ninguém usava (medido: um título que cabia em 149px vinha cortado). `0fr → 1fr` é
+ * interpolável em qualquer engine — `interpolate-size`/`calc-size()` fariam isso direto, mas
+ * ainda não são Baseline e o DS entrega pra navegador que não escolhemos.
+ */
+export declare const tabsNavigationAcoes: import('tailwind-variants').TVReturnType<{
+    visivel: {
+        true: string;
+        false: string;
+    };
+}, undefined, "grid transition-[grid-template-columns,opacity] duration-150 ease-out", {
+    visivel: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    visivel: {
+        true: string;
+        false: string;
+    };
+}, undefined, "grid transition-[grid-template-columns,opacity] duration-150 ease-out", unknown, unknown, undefined>>;
+/** O ponto de status. Ponto, não Chip: 5 abas abertas = 5 chips brigando com os títulos. */
+export declare const tabsNavigationStatus: import('tailwind-variants').TVReturnType<{
+    status: {
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+}, undefined, "size-icon-2xs shrink-0", {
+    status: {
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    status: {
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        neutral: string;
+    };
+}, undefined, "size-icon-2xs shrink-0", unknown, unknown, undefined>>;
+export type TabsNavigationVariantProps = VariantProps<typeof tabsNavigationTab>;
+//# sourceMappingURL=tabs-navigation.styles.d.ts.map

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-navigation.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/TabsNavigation/tabs-navigation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,eAAO,MAAM,kBAAkB;IAI3B;;;;;;;;;OASG;;;;;;IAMH;;;OAGG;;;;;IAKH;;;;;;;;OAQG;;;;;;IA/BH;;;;;;;;;OASG;;;;;;IAMH;;;OAGG;;;;;IAKH;;;;;;;;OAQG;;;;;;IA/BH;;;;;;;;;OASG;;;;;;IAMH;;;OAGG;;;;;IAKH;;;;;;;;OAQG;;;;;wEAQL,CAAC;AAEH,eAAO,MAAM,oBAAoB;IAQ7B,+EAA+E;;;;;;IAA/E,+EAA+E;;;;;;IAA/E,+EAA+E;;;;;4GAQjF,CAAC;AAEH,eAAO,MAAM,iBAAiB;IAS1B;;;;;OAKG;;;;;;;;;IASH,iFAAiF;;;;;;QAM/E;;;;;WAKG;;;;;IAzBL;;;;;OAKG;;;;;;;;;IASH,iFAAiF;;;;;;QAM/E;;;;;WAKG;;;;;IAzBL;;;;;OAKG;;;;;;;;;IASH,iFAAiF;;;;;;QAM/E;;;;;WAKG;;;;qDAyBP,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;;;IAQhC,gFAAgF;;;;;;;;;;IAAhF,gFAAgF;;;;;;;;;;IAAhF,gFAAgF;;;;;8EAQlF,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;oFAclC,CAAC;AAEH,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;qDAe7B,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;oHAY9B,CAAC;AAEH,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;qEAc/B,CAAC;AAEH,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.types.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+/** Superfície do CONTEÚDO abaixo da tira — a aba ativa precisa ser a mesma cor pra unir. */
+export type TabsNavigationSurface = "surface" | "canvas";
+/** `comfortable` = título + subtítulo (48px) · `compact` = só título (40px). */
+export type TabsNavigationDensity = "comfortable" | "compact";
+/** Tom do ponto de status. Passe um `ReactNode` em `status` pra desenhar o seu. */
+export type TabsNavigationStatus = "success" | "warning" | "danger" | "info" | "neutral";
+export interface TabsNavigationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** `value` da aba ativa. O componente é SEMPRE controlado — ver `TabsNavigationProps.onValueChange`. */
+    value: string;
+    /**
+     * Chamado quando o usuário escolhe outra aba (clique, teclado ou lista de overflow).
+     *
+     * O componente **não hospeda o conteúdo**: ele diz qual aba está ativa e o consumidor
+     * decide o que trocar. É o que permite o painel morar fora — outra coluna, outra rota,
+     * outro componente. Pra fechar a acessibilidade nesse caso, passe `panelId` na aba.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Superfície do conteúdo logo abaixo da tira. A aba ativa é pintada com ela — é o que a
+     * une ao conteúdo. Num card `surface`; se o conteúdo for a própria página, `canvas`.
+     * @default "surface"
+     */
+    surface?: TabsNavigationSurface;
+    /**
+     * `compact` remove o subtítulo e baixa a aba pra 40px. É escolha de CONTEÚDO, não de
+     * densidade: sem subtítulo, duas conversas do mesmo cliente ficam idênticas.
+     * @default "comfortable"
+     */
+    density?: TabsNavigationDensity;
+    /**
+     * `true` = a aba ocupa a faixa inteira (lê como segmento, não como aba de navegador) e a
+     * tira perde a régua — a união passa a ser por continuidade de cor.
+     * @default false
+     */
+    fill?: boolean;
+    /**
+     * `persistent` mantém as ações da aba sempre visíveis. Use quando a ação exige decisão
+     * (aceitar/recusar um chamado): revelar no hover esconde justamente o que precisa ser visto.
+     * @default "hover"
+     */
+    actionsMode?: "hover" | "persistent";
+    /**
+     * Pinta o fundo recuado da tira (`bg-subtle` no claro, `bg-canvas` no escuro — cada modo tem
+     * o seu token de recuo). Desligue quando o container já pinta o fundo.
+     * @default true
+     */
+    chrome?: boolean;
+    /** Com isto, o `+` aparece — fora do trilho, pra não sair de alcance quando as abas rolam. */
+    onNewTab?: () => void;
+    /** Rótulo do conjunto pro leitor de tela, ex.: `"Conversas abertas"`. */
+    "aria-label"?: string;
+    /** `<TabsNavigation.Tab>`s e, opcionalmente, um `<TabsNavigation.Actions>`. */
+    children?: ReactNode;
+}
+export interface TabsNavigationTabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Identidade da aba — é o que volta em `onValueChange`. */
+    value: string;
+    /** Qualquer nó à esquerda: `Avatar`, `Icon`, imagem, sigla. */
+    leading?: ReactNode;
+    /** Ponto de status pronto, ou o seu próprio nó. */
+    status?: TabsNavigationStatus | ReactNode;
+    /** Contador (número) ou qualquer nó. Some quando a aba está ativa — o usuário já está lendo. */
+    badge?: number | ReactNode;
+    /**
+     * SUBSTITUI as ações padrão. Passe quantas quiser (`<TabsNavigation.Action>` ou qualquer botão) —
+     * é aqui que entram ✓/✗ de aceitar/recusar, "fixar", "duplicar".
+     */
+    actions?: ReactNode;
+    /** Sem `actions`, declarar `onClose` liga as ações padrão (`⋯` de opções + `×` de fechar). */
+    onClose?: () => void;
+    /** Itens extras do menu `⋯` das ações padrão. Ignorado quando `actions` é passado. */
+    menu?: ReactNode;
+    /**
+     * `id` do elemento que esta aba controla, quando o conteúdo mora FORA do componente.
+     * Emite `aria-controls`. Dentro, prefira `<TabsNavigation.Panel value="…">`.
+     */
+    panelId?: string;
+    /** Mantém as ações visíveis só nesta aba (o `pendente` do caso de chamados). */
+    actionsAlwaysVisible?: boolean;
+    /**
+     * Resumo mostrado ao pousar o ponteiro (500ms) — foto maior, contato, últimas informações.
+     * Qualquer nó; o conteúdo é seu.
+     *
+     * Existe como prop, e não envolvendo a aba num `HoverCard` por fora, porque a raiz separa os
+     * filhos por tipo pra montar a lista de overflow e a navegação por seta: um wrapper no lugar
+     * do `Tab` a faria perder a aba. ⚠️ Não é o lugar de ação nem de informação essencial —
+     * hover não existe no toque.
+     */
+    hoverCard?: ReactNode;
+    /** `<TabsNavigation.Title>` + `<TabsNavigation.Subtitle>`, ou a composição que você quiser. */
+    children?: ReactNode;
+}
+export interface TabsNavigationPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Casa com o `value` da aba. Renderiza apenas quando ela está ativa. */
+    value: string;
+    children?: ReactNode;
+}
+//# sourceMappingURL=tabs-navigation.types.d.ts.map

package/dist-lib/src/components/ui/TabsNavigation/tabs-navigation.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-navigation.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/TabsNavigation/tabs-navigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,4FAA4F;AAC5F,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzD,gFAAgF;AAChF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG,SAAS,CAAC;AAE9D,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjG,wGAAwG;IACxG,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC;;;;OAIG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAErC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACpG,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IAEd,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAE1C,gGAAgG;IAChG,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist-lib/src/components/ui/TabsNavigation/use-arrastar-para-rolar.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+/**
+ * `useArrastarParaRolar` — segurar e arrastar a tira pra rolar horizontalmente.
+ *
+ * ## Por que não importei o `useGrabToScroll` do DataTable
+ *
+ * Ele existe (`ui/DataTable/hooks/use-grab-to-scroll.ts`) e resolve o mesmo gesto, mas está
+ * dentro do item `data-table` do registry: importá-lo faria o `tabs-navigation` **depender da
+ * tabela inteira** no copy-in — o consumidor puxaria DataTable + TableToolbar + virtual pra
+ * ter aba. Metade daquele hook também é específica de tabela (pula célula editável,
+ * expansível, de seleção), coisas que não existem aqui. Esta versão é o mesmo comportamento
+ * sem a parte que não se aplica.
+ *
+ * ## O que ele faz, e o que deliberadamente NÃO faz
+ *
+ * - **Só mouse/pen.** Em `pointer: coarse` (celular, tablet) o navegador já rola a tira no
+ *   swipe, nativamente e com inércia. Interceptar ali seria trocar um gesto bom por um pior.
+ * - **Limiar de 6px** antes de virar arrasto: abaixo disso o gesto continua sendo um clique, e
+ *   selecionar aba arrastando 2px por acidente não acontece.
+ * - **Engole o clique seguinte** ao arrasto (fase de captura) — senão soltar o ponteiro em
+ *   cima de uma aba a selecionaria no fim de todo arrasto.
+ * - **Não toca em alvo interativo** (botão, link, menu): ali o gesto é do controle, não da
+ *   tira. Sem isso, arrastar 6px começando no `×` fecharia a aba errada ou nenhuma.
+ */
+export declare function useArrastarParaRolar(trilho: RefObject<HTMLElement | null>, ativo?: boolean, limiarPx?: number): void;
+//# sourceMappingURL=use-arrastar-para-rolar.d.ts.map

package/dist-lib/src/components/ui/TabsNavigation/use-arrastar-para-rolar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-arrastar-para-rolar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/TabsNavigation/use-arrastar-para-rolar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACrC,KAAK,UAAO,EACZ,QAAQ,SAAI,GACX,IAAI,CAyFN"}

package/dist-lib/theme.css

@@ -685,6 +685,21 @@ body {
   }
 }
 
+/* Rola, mas sem barra visível. Existe pro caso em que a barra QUEBRA o layout, não por
+   estética: na tira do TabsNavigation ela ocupa 11px DENTRO do trilho e empurra as abas 11px pra
+   cima da régua — a união da aba ativa com o conteúdo, que é o componente inteiro, some.
+   Medido antes de existir esta utility; a alternativa era `[scrollbar-width:none]` +
+   `[&::-webkit-scrollbar]:hidden` na unha, em componente distribuído.
+   ⚠️ Só use quando houver outra affordance de navegação (setas, arrastar, teclado): barra
+   escondida sem substituto é conteúdo inalcançável pra quem só tem mouse. */
+@utility scrollbar-none {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 /* ── Superfície flutuante (usadas por 14 componentes distribuídos) ────────── */
 
 @utility outline-float {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snksergio/design-system",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "//distribuicao": "Canal PRIMARIO = registry shadcn (copy-in) + CLI @snksergio/create-design-system; sobe sozinho no merge (Vercel). Canal SECUNDARIO = este pacote npm (@snksergio/design-system), publicado por passo MANUAL do mantenedor, entao costuma ficar atras do registry. SECUNDARIO descreve a ORDEM DE PUBLICACAO, nao o nivel de suporte: NAO e depreciado, e desde a 0.37.0 entrega 41 dos 42 componentes ui/ no barrel raiz + os 41 primitivos shadcn no subpath ./shadcn (so TabelaTeste, demo interno, fica de fora). Publish so pelo Passo 7 do .claude/skills/ds-dev/release.md (valida com `npm run lib:verify`, pede o token, publica, revoga). Ver DISTRIBUICAO.md.",
   "description": "iGreen Design System — internal library for SaaS CRM, admin panels and dashboards. React 19 + Tailwind v4 + Shadcn + Radix.",
   "license": "UNLICENSED",