@snksergio/design-system 0.52.0 → 0.53.0

package/dist-lib/index.mjs

@@ -1,5 +1,5 @@
-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";
@@ -8295,10 +8295,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 +8317,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 +8364,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,7 +8379,7 @@ export {
   MessageVariablesPicker,
   Modal,
   MonthYearPicker,
-  W as MoreMenu,
+  X as MoreMenu,
   y2 as MoreMenuCheckboxItem,
   DropdownMenuItem as MoreMenuItem,
   F2 as MoreMenuLabel,
@@ -8387,14 +8388,14 @@ export {
   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,
+  Z as PanelFooter,
+  _ as PanelHeader,
   F3 as PanelRoot,
   O2 as PanelTrigger,
-  _ as SELECTION_COLUMN_WIDTH,
+  $ as SELECTION_COLUMN_WIDTH,
   ScreenLoader,
   S2 as SidebarBrandIcon,
   h as SidebarItem,
@@ -8404,37 +8405,39 @@ 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,
   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 +8454,7 @@ export {
   dateSeparatorChipStyles,
   emailColumn,
   emptyStateStyles,
-  ag as floatingPanelStyles,
+  aj as floatingPanelStyles,
   iconStyles,
   icons,
   a62 as inputGroupVariants,
@@ -8467,10 +8470,10 @@ 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,
   textColumn,
@@ -8478,11 +8481,11 @@ export {
   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,

package/dist-lib/preview/clientes.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const useTheme = require("../chunks/useTheme-Dh3POjCr.cjs");
 const lucideReact = require("lucide-react");
 const clientesShowcaseMocks = require("../chunks/clientes-showcase-mocks-CwhluBTT.cjs");
-const panel = require("../chunks/panel-Bly-rNP9.cjs");
+const panel = require("../chunks/panel-CTbiCa0_.cjs");
 const avatar = require("../chunks/avatar-DAmZ7fBZ.cjs");
 require("../chunks/input-Ci_2-5Te.cjs");
 require("../chunks/sheet-rg6uupt1.cjs");

package/dist-lib/preview/clientes.mjs

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { a as ChipGroup, b as ChipGroupItem, C as Chip, u as useTheme, A as AppShell } from "../chunks/useTheme-Bk8AYqLr.mjs";
 import { Pencil, Trash2, ChevronDown, MoreHorizontal, Plus, Download, Maximize2, Copy, Upload, RotateCcw, MessageSquare, Archive, Clock } from "lucide-react";
 import { S as STATUSES, a as STATUS_DOT, C as CATEGORIES, b as CITIES, A as AGENTS, d as CATEGORY_KIND, f as formatBRL, e as formatShortDate, g as CLIENTS_87, K as KANBAN_COLUMNS, h as STATUS_OPTIONS, i as CATEGORY_OPTIONS, j as AGENTS_LOOKUP, k as AGENT_OPTIONS } from "../chunks/clientes-showcase-mocks-CwWGCCmf.mjs";
-import { P as Panel, F as FormFieldInput, a as FormField, b as FormFieldSelect, c as FormFieldTextarea, d as FloatingPanel, p as presetView, D as DataTable, B as BulkActionButton, A as AlertModal } from "../chunks/panel-DA6K3a3n.mjs";
+import { P as Panel, F as FormFieldInput, a as FormField, b as FormFieldSelect, c as FormFieldTextarea, d as FloatingPanel, p as presetView, D as DataTable, B as BulkActionButton, A as AlertModal } from "../chunks/panel-DsOKm4Im.mjs";
 import { a8 as tv, a7 as Button, A as Avatar, a as AvatarFallback } from "../chunks/avatar-FPbG1TRy.mjs";
 import "../chunks/input-tjIT8HNE.mjs";
 import "../chunks/sheet-DIpYkRYS.mjs";

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snksergio/design-system",
-  "version": "0.52.0",
+  "version": "0.53.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",