@snksergio/design-system 0.52.0 → 0.54.0

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/src/components/ui/avatar-ig/avatar-group-context.d.ts

@@ -0,0 +1,24 @@
+import { AvatarSize, AvatarSurface } from './avatar.types';
+/**
+ * Contexto do `AvatarGroup` — é assim que o `size` chega nos filhos.
+ *
+ * ## Por que num arquivo só dele
+ *
+ * Evita ciclo de import: o `AvatarGroup` precisa do `Avatar` (renderiza o `+N`) e o `Avatar`
+ * precisa do contexto (lê o `size`). Com o contexto dentro do `avatar-group.tsx`, os dois
+ * módulos se importariam mutuamente — funciona em ESM na maioria dos casos, mas depende da
+ * ordem de avaliação e alguns bundlers avisam. Arquivo próprio corta a dependência.
+ *
+ * ## Por que contexto e não `cloneElement`
+ *
+ * Mesmo mecanismo do `ChipGroup`, do `KpiGroup` e do `CardOptionGroup`. Clonar filhos quebra
+ * quando eles vêm de um `map`, de um fragmento ou de um wrapper — que é exatamente como uma
+ * lista de responsáveis costuma ser montada.
+ *
+ * `undefined` = sem grupo em volta, e aí o `Avatar` mantém o default dele (`md`).
+ */
+export declare const AvatarGroupContext: import('react').Context<{
+    size?: AvatarSize;
+    surface: AvatarSurface;
+} | undefined>;
+//# sourceMappingURL=avatar-group-context.d.ts.map

package/dist-lib/src/components/ui/avatar-ig/avatar-group-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar-group-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB;WACpB,UAAU;aAAW,aAAa;cACjC,CAAC"}

package/dist-lib/src/components/ui/avatar-ig/avatar-group.d.ts

@@ -0,0 +1,52 @@
+import { AvatarGroupProps } from './avatar.types';
+/**
+ * `AvatarGroup` — pilha de avatares sobrepostos, com `size` propagado e excedente resumido.
+ *
+ * ## Por que existe
+ *
+ * A pilha era feita na mão em cada tela (`-ml-…` + `ring` escolhidos no olho), e três coisas
+ * saíam diferentes toda vez: quanto sobrepor, qual cor de anel, e o que fazer quando são 12
+ * pessoas. As três viram decisão do componente aqui.
+ *
+ * ## As quatro decisões, e por quê
+ *
+ * **1. A sobreposição escala com o tamanho.** Não é constante: 6px num avatar de 20px é 30% de
+ * sobreposição, e no de 40px é 15% — visualmente são arranjos diferentes. O mapa em
+ * `avatar.styles.ts` mantém ~25% em toda a escala.
+ *
+ * **2. O anel é da cor da SUPERFÍCIE DE TRÁS**, e é aqui que se erra. O anel separa um avatar
+ * do outro pintando o que está atrás; com o token errado ele deixa de separar e vira um halo.
+ * Por isso `surface` é **prop**, não constante.
+ *
+ * ⚠️ `table` e `surface` resolvem pro MESMO valor hoje (medido: `oklch(1 0 0)` no claro,
+ * `oklch(0.225 0 0)` no escuro). Dentro de tabela a escolha é **semântica**, não visual —
+ * declare `table` assim mesmo, pra a pilha seguir certa se um dia divergirem. Onde a diferença
+ * é visível hoje é em `canvas`, `subtle` e `muted`.
+ *
+ * **3. O primeiro fica por cima.** O empilhamento natural do DOM põe o último por cima; aqui o
+ * z-index é decrescente, porque a leitura é da esquerda pra direita e o primeiro avatar é o
+ * principal. É a convenção de Material e Ant, e é o que faz a pilha parecer uma fila.
+ *
+ * **4. O grupo fala, os avatares calam.** Três avatares soltos fazem o leitor de tela ler três
+ * nomes sem dizer que são um conjunto. O container leva `role="group"` + `aria-label`, e o
+ * `+N` é `aria-hidden` — o número já está no rótulo do grupo.
+ *
+ * ## Gotchas
+ *
+ * - **`size` no filho vence o do grupo.** É escape hatch pro caso de um avatar destacado; sem
+ *   ele, não haveria como quebrar a uniformidade quando o desenho pede.
+ * - **`total` existe pra contagem do SERVIDOR.** Sem ele o `+N` conta só o que foi renderizado
+ *   — e uma lista paginada em 5 mostraria `+0` tendo 40 pessoas.
+ * - **Não use pra 2 avatares sem sobreposição.** Aí é um `flex gap-gp-sm` comum: a pilha
+ *   comunica "muitos, e o conjunto importa mais que cada um".
+ *
+ * @example
+ * <AvatarGroup size="sm" max={3} total={12} aria-label="12 responsáveis">
+ *   <Avatar colorHex="#2563EB">MD</Avatar>
+ *   <Avatar colorHex="#CC092F">AC</Avatar>
+ *   <Avatar colorHex="#7C3AED">JS</Avatar>
+ *   <Avatar colorHex="#0891B2">TK</Avatar>
+ * </AvatarGroup>
+ */
+export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist-lib/src/components/ui/avatar-ig/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,WAAW,6GAwDvB,CAAC"}

package/dist-lib/src/components/ui/avatar-ig/avatar.d.ts

@@ -15,6 +15,15 @@ import { AvatarProps } from './avatar.types';
  * `className` com classe Tailwind `text-X` — ela sobrescreve a auto-pickada
  * pela ordem de cascade.
  *
+ * Foto (v0.53.0): passe `src` e mantenha as iniciais em `children` — elas são o
+ * **fallback** quando a URL falha. A imagem interna é `alt=""`; o nome da pessoa mora no
+ * `aria-label` do avatar, pra não ser anunciado duas vezes.
+ *
+ * ⚠️ Quando usar o `Avatar` compound do shadcn (`avatar`, com `AvatarImage`/`AvatarFallback`)
+ * em vez deste: quando o fallback não é iniciais (ícone, skeleton) ou você precisa controlar
+ * o estado de carregamento. Pra foto de pessoa dentro do DS — e sempre dentro de
+ * `AvatarGroup`, que propaga `size` por contexto — o certo é este.
+ *
  * Accessibility:
  * - With `aria-label` → role="img" (semantic avatar)
  * - Without `aria-label` → aria-hidden="true" (decorative, inside a card/cell)

package/dist-lib/src/components/ui/avatar-ig/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,wGAmDlB,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,MAAM,wGAqFlB,CAAC"}

package/dist-lib/src/components/ui/avatar-ig/avatar.styles.d.ts

@@ -71,4 +71,97 @@ export declare const avatarVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+/**
+ * Item da pilha do `AvatarGroup` — o wrapper que sobrepõe e desenha o anel de separação.
+ *
+ * ## Por que o anel mora AQUI e não no `Avatar`
+ *
+ * `ring` acompanha o `border-radius` do elemento em que está. Num wrapper quadrado ele
+ * traçaria um quadrado em volta do círculo — daí o `rounded-radius-full` no próprio wrapper.
+ * E ficar no wrapper (e não no `Avatar`) mantém o `Avatar` solto sem anel nenhum: o anel só
+ * existe porque há sobreposição.
+ *
+ * ## A sobreposição escala com o tamanho
+ *
+ * Não é constante: 6px num avatar de 20px é **30%** de sobreposição, e no de 40px é **15%** —
+ * visualmente são arranjos diferentes. O mapa abaixo mantém ~25% em toda a escala, e cada
+ * valor é token de spacing (`sp-*`), não px na unha.
+ *
+ * ## O `surface` existe porque o anel é da cor do que está ATRÁS
+ *
+ * `ring-bg-surface` num painel funciona; na linha de uma tabela (`bg-bg-table`) apareceria um
+ * halo claro em volta de cada avatar. Quem sabe o que está atrás é quem compõe — daí ser prop.
+ */
+/**
+ * Container da pilha. É um `tv()` de uma linha só de propósito: sem ele o `className` do
+ * consumidor entraria por concatenação crua, e `items-start` não venceria o `items-center`
+ * daqui (é o `twMerge` embutido no `tv` que resolve conflito de classe). Também mantém o
+ * `avatar-ig` dependendo só de `@igreen/tv` — usar o `cn` de `@/lib/utils` acrescentaria uma
+ * `registryDependency` ao item por causa de duas classes.
+ */
+export declare const avatarGroupRoot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
+export declare const avatarGroupItem: import('tailwind-variants').TVReturnType<{
+    /** Deslocamento negativo ≈ 25% do diâmetro, em token. Ver o bloco acima. */
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /** Cor do anel = superfície de trás. */
+    surface: {
+        surface: string;
+        canvas: string;
+        subtle: string;
+        muted: string;
+        table: string;
+    };
+    /** O primeiro não desloca — senão a pilha inteira sai da margem esquerda. */
+    primeiro: {
+        true: string;
+    };
+}, undefined, string[], {
+    /** Deslocamento negativo ≈ 25% do diâmetro, em token. Ver o bloco acima. */
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /** Cor do anel = superfície de trás. */
+    surface: {
+        surface: string;
+        canvas: string;
+        subtle: string;
+        muted: string;
+        table: string;
+    };
+    /** O primeiro não desloca — senão a pilha inteira sai da margem esquerda. */
+    primeiro: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /** Deslocamento negativo ≈ 25% do diâmetro, em token. Ver o bloco acima. */
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /** Cor do anel = superfície de trás. */
+    surface: {
+        surface: string;
+        canvas: string;
+        subtle: string;
+        muted: string;
+        table: string;
+    };
+    /** O primeiro não desloca — senão a pilha inteira sai da margem esquerda. */
+    primeiro: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
 //# sourceMappingURL=avatar.styles.d.ts.map

package/dist-lib/src/components/ui/avatar-ig/avatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;QA2BrB,8DAA8D;;;;;;;;;;;;;;;;;;QAA9D,8DAA8D;;;;;;;;;;;;;;;;;;QAA9D,8DAA8D;;;qDASlE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;QA2BrB,8DAA8D;;;;;;;;;;;;;;;;;;QAA9D,8DAA8D;;;;;;;;;;;;;;;;;;QAA9D,8DAA8D;;;qDASlE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,4NAAoC,CAAC;AAEjE,eAAO,MAAM,eAAe;IAIxB,4EAA4E;;;;;;;;IAS5E,wCAAwC;;;;;;;;IASxC,6EAA6E;;;;;IAlB7E,4EAA4E;;;;;;;;IAS5E,wCAAwC;;;;;;;;IASxC,6EAA6E;;;;;IAlB7E,4EAA4E;;;;;;;;IAS5E,wCAAwC;;;;;;;;IASxC,6EAA6E;;;;qDAQ/E,CAAC"}

package/dist-lib/src/components/ui/avatar-ig/avatar.types.d.ts

@@ -12,5 +12,42 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Takes precedence over `color`.
      */
     colorHex?: string;
+    /**
+     * Foto da pessoa. Quando carrega, cobre o círculo inteiro; quando **falha**, o avatar
+     * volta pras iniciais (`children`) com a cor de sempre — por isso continue passando as
+     * iniciais mesmo com `src`.
+     *
+     * Não há prop `alt`: o nome mora no `aria-label` do avatar (a imagem interna é
+     * `alt=""`). Dois rótulos no mesmo elemento fariam o leitor de tela anunciar a pessoa
+     * duas vezes.
+     */
+    src?: string;
+}
+/** Tamanhos do avatar — reusado pelo grupo, que os propaga por contexto. */
+export type AvatarSize = NonNullable<AvatarVariantProps["size"]>;
+/**
+ * Superfície ATRÁS do grupo — define a cor do anel que separa um avatar do outro.
+ * Errar aqui é o defeito clássico da pilha: anel `surface` numa linha de tabela vira halo.
+ */
+export type AvatarSurface = "surface" | "canvas" | "subtle" | "muted" | "table";
+export interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /**
+     * Tamanho de TODOS os avatares do grupo, propagado por contexto.
+     * `size` no filho vence — escape hatch pro caso de um destacado.
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /** Acima disso, corta e mostra `+N` no fim. Sem `max`, mostra todos. */
+    max?: number;
+    /**
+     * Contagem REAL, quando ela não é o número de filhos renderizados.
+     * Sem isso, uma lista paginada em 5 mostraria `+0` tendo 40 pessoas.
+     */
+    total?: number;
+    /**
+     * Superfície atrás do grupo — cor do anel de separação.
+     * @default "surface"
+     */
+    surface?: AvatarSurface;
 }
 //# sourceMappingURL=avatar.types.d.ts.map

package/dist-lib/src/components/ui/avatar-ig/avatar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAExE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"avatar.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAExE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,4EAA4E;AAC5E,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}

package/dist-lib/src/components/ui/avatar-ig/index.d.ts

@@ -1,4 +1,5 @@
 export { Avatar } from './avatar';
-export { avatarVariants, type AvatarVariantProps } from './avatar.styles';
-export type { AvatarProps } from './avatar.types';
+export { AvatarGroup } from './avatar-group';
+export { avatarVariants, avatarGroupRoot, avatarGroupItem, type AvatarVariantProps, } from './avatar.styles';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarSurface, } from './avatar.types';
 //# sourceMappingURL=index.d.ts.map

package/dist-lib/src/components/ui/avatar-ig/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1E,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/avatar-ig/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,eAAe,EACf,eAAe,EACf,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,aAAa,GACd,MAAM,gBAAgB,CAAC"}

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.52.0",
+  "version": "0.54.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",