@snksergio/design-system 0.4.0 → 0.5.1

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

@@ -0,0 +1,10 @@
+export { Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, } from './table';
+export { TableCardRow } from './table-card-row';
+export { useColumnWidths } from './use-column-widths';
+export { useColumnResize } from './use-column-resize';
+export { SELECTION_COLUMN_WIDTH, TABLE_HEADER_HEIGHT, } from './table.constants';
+export type { TableProps, TableHeadProps, TableHeadCellProps, TableBodyProps, TableRowProps, TableCellProps, TableDensity, SortDirection, ColumnPinned, CellAlign, CellPurpose, } from './table.types';
+export type { TableCardRowProps } from './table-card-row';
+export type { WidthColumnInput, ColumnWidthsResult, } from './use-column-widths';
+export type { UseColumnResizeParams, UseColumnResizeResult, } from './use-column-resize';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,QAAQ,EACR,SAAS,GACV,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EACL,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EACV,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}

package/dist-lib/src/components/ui/Table/table-card-row.d.ts

@@ -0,0 +1,39 @@
+import { MouseEvent, ReactNode } from 'react';
+export type TableCardRowProps = {
+    /** Conteúdo do header do card (esquerda). Normalmente checkbox + primary column. */
+    header?: ReactNode;
+    /** Conteúdo do canto superior direito do header. Normalmente actions/menu. */
+    headerActions?: ReactNode;
+    /** Itens label/value renderizados no body do card. */
+    items: ReadonlyArray<{
+        /** Label da coluna (mostrado acima do valor). */
+        label: ReactNode;
+        /** Valor renderizado. */
+        value: ReactNode;
+        /** Key opcional pro React. Default = index. */
+        key?: string | number;
+    }>;
+    selected?: boolean;
+    /**
+     * Row está em foco pra detalhe (ex: click abriu drawer com info). Visual idêntico ao `selected`
+     * (bg brand-tinted + strip lateral brand) — mas semanticamente independente: pode coexistir com `selected`.
+     * Use pra padrão de "click row → abre detail panel", mantendo seleção (checkbox) separada.
+     */
+    open?: boolean;
+    clickable?: boolean;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+};
+/**
+ * <TableCardRow> — renderização "card vertical" de uma linha pra mobile/container estreito.
+ *
+ * Layout:
+ *   ┌─────────────────────────────────────┐
+ *   │ {header}              {headerActions} │
+ *   ├─────────────────────────────────────┤
+ *   │ {label}: {value}                     │
+ *   │ {label}: {value}                     │
+ *   └─────────────────────────────────────┘
+ */
+export declare function TableCardRow({ header, headerActions, items, selected, open, clickable, onClick, className, }: TableCardRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-card-row.d.ts.map

package/dist-lib/src/components/ui/Table/table-card-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-card-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/table-card-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oFAAoF;IACpF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sDAAsD;IACtD,KAAK,EAAE,aAAa,CAAC;QACnB,iDAAiD;QACjD,KAAK,EAAE,SAAS,CAAC;QACjB,yBAAyB;QACzB,KAAK,EAAE,SAAS,CAAC;QACjB,+CAA+C;QAC/C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,aAAa,EACb,KAAK,EACL,QAAgB,EAChB,IAAY,EACZ,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,2CAyCnB"}

package/dist-lib/src/components/ui/Table/table.constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Constants compartilhadas do Table primitivo.
+ *
+ * Use estes valores em vez de duplicar literais — fonte única de verdade pra
+ * larguras especiais, breakpoints, e identificadores de roles dentro do grid.
+ */
+/** Largura padrão da coluna de seleção (checkbox header + body cells).
+ *  56px = 28px checkbox + 14px padding lateral × 2. Calibrado pra hit area
+ *  WCAG mobile (44×44) com folga visual. */
+export declare const SELECTION_COLUMN_WIDTH = 56;
+/** Altura do header de uma linha de tabela. Usada por skeleton, totalizer,
+ *  group header e quick filter row pra alinhar visualmente com a header bar. */
+export declare const TABLE_HEADER_HEIGHT = 42;
+//# sourceMappingURL=table.constants.d.ts.map

package/dist-lib/src/components/ui/Table/table.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/table.constants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;4CAE4C;AAC5C,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC;gFACgF;AAChF,eAAO,MAAM,mBAAmB,KAAK,CAAC"}

package/dist-lib/src/components/ui/Table/table.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps, TableHeadCellProps } from './table.types';
+export declare function Table({ density, cardBreakpoint, cellBorders, ariaLabel, className, scrollRef: externalScrollRef, children, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ sticky, className, rootProps, children, }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ className, style, rootProps, virtualized, children, }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TableHeadCell: React.ForwardRefExoticComponent<TableHeadCellProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=table.d.ts.map

package/dist-lib/src/components/ui/Table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,EAGnB,MAAM,eAAe,CAAC;AAiCvB,wBAAgB,KAAK,CAAC,EACpB,OAAoB,EACpB,cAAoB,EACpB,WAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,GACT,EAAE,UAAU,2CAyCZ;AAID,wBAAgB,SAAS,CAAC,EACxB,MAAa,EACb,SAAS,EACT,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CAchB;AAID,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,GACT,EAAE,cAAc,2CA0BhB;AAID,eAAO,MAAM,QAAQ,sFA2CnB,CAAC;AAIH,eAAO,MAAM,SAAS,uFAgDpB,CAAC;AAIH,eAAO,MAAM,aAAa,2FAkKxB,CAAC"}

package/dist-lib/src/components/ui/Table/table.styles.d.ts

@@ -0,0 +1,374 @@
+/**
+ * Table styles — slots tv pra Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell.
+ *
+ * Densidade afeta: altura mínima de row + padding vertical de cell.
+ * Modo card: aplicado via container query (@container) — root declara container-type.
+ */
+export declare const tableStyles: import('tailwind-variants').TVReturnType<{
+    density: {
+        compact: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        standard: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        comfortable: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {
+            row: string;
+            cardWrap: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {};
+    };
+    pinned: {
+        left: {
+            headCell: string;
+            cell: string;
+        };
+        right: {
+            headCell: string;
+            cell: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            headCell: string;
+        };
+        center: {
+            cell: string;
+            headCell: string;
+        };
+        right: {
+            cell: string;
+            headCell: string;
+        };
+    };
+    sortable: {
+        true: {
+            headCell: string;
+        };
+        false: {};
+    };
+    ellipsis: {
+        true: {
+            cell: string;
+        };
+        false: {};
+    };
+    cellBorders: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+        false: {};
+    };
+    /** Variant pra cells de coluna especial (selection / actions).
+     *
+     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.
+     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding
+     *    horizontal mínimo. Usado quando `type: "actions"` no DataTableColumnDef.
+     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */
+    purpose: {
+        default: {};
+        selection: {
+            headCell: string;
+            cell: string;
+        };
+        actions: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    root: string[];
+    scroll: string[];
+    head: string[];
+    headCell: string[];
+    body: string[];
+    row: string[];
+    cell: string[];
+    resizeHandle: string[];
+    sortIcon: string[];
+    typeIcon: string[];
+    sortBadge: string[];
+    headRightStack: string[];
+    headSortActive: string[];
+    headSortHint: string[];
+    headMenuItem: string[];
+    cardWrap: string[];
+    cardHeader: string[];
+    cardItem: string[];
+    cardLabel: string[];
+    cardValue: string[];
+}, undefined, {
+    density: {
+        compact: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        standard: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        comfortable: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {
+            row: string;
+            cardWrap: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {};
+    };
+    pinned: {
+        left: {
+            headCell: string;
+            cell: string;
+        };
+        right: {
+            headCell: string;
+            cell: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            headCell: string;
+        };
+        center: {
+            cell: string;
+            headCell: string;
+        };
+        right: {
+            cell: string;
+            headCell: string;
+        };
+    };
+    sortable: {
+        true: {
+            headCell: string;
+        };
+        false: {};
+    };
+    ellipsis: {
+        true: {
+            cell: string;
+        };
+        false: {};
+    };
+    cellBorders: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+        false: {};
+    };
+    /** Variant pra cells de coluna especial (selection / actions).
+     *
+     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.
+     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding
+     *    horizontal mínimo. Usado quando `type: "actions"` no DataTableColumnDef.
+     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */
+    purpose: {
+        default: {};
+        selection: {
+            headCell: string;
+            cell: string;
+        };
+        actions: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    root: string[];
+    scroll: string[];
+    head: string[];
+    headCell: string[];
+    body: string[];
+    row: string[];
+    cell: string[];
+    resizeHandle: string[];
+    sortIcon: string[];
+    typeIcon: string[];
+    sortBadge: string[];
+    headRightStack: string[];
+    headSortActive: string[];
+    headSortHint: string[];
+    headMenuItem: string[];
+    cardWrap: string[];
+    cardHeader: string[];
+    cardItem: string[];
+    cardLabel: string[];
+    cardValue: string[];
+}, import('tailwind-variants').TVReturnType<{
+    density: {
+        compact: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        standard: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+        comfortable: {
+            row: string;
+            cell: string;
+            headCell: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {
+            row: string;
+            cardWrap: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+            cardWrap: string;
+        };
+        false: {};
+    };
+    pinned: {
+        left: {
+            headCell: string;
+            cell: string;
+        };
+        right: {
+            headCell: string;
+            cell: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            headCell: string;
+        };
+        center: {
+            cell: string;
+            headCell: string;
+        };
+        right: {
+            cell: string;
+            headCell: string;
+        };
+    };
+    sortable: {
+        true: {
+            headCell: string;
+        };
+        false: {};
+    };
+    ellipsis: {
+        true: {
+            cell: string;
+        };
+        false: {};
+    };
+    cellBorders: {
+        true: {
+            headCell: string;
+            cell: string;
+        };
+        false: {};
+    };
+    /** Variant pra cells de coluna especial (selection / actions).
+     *
+     *  - `selection`: remove padding pra checkbox 28px caber em 56px e centralizar.
+     *  - `actions`: header em branco (sem texto/menu), sem border-right, padding
+     *    horizontal mínimo. Usado quando `type: "actions"` no DataTableColumnDef.
+     *    Border-right removida via `!border-r-0` (override do cellBorders=true). */
+    purpose: {
+        default: {};
+        selection: {
+            headCell: string;
+            cell: string;
+        };
+        actions: {
+            headCell: string;
+            cell: string;
+        };
+    };
+}, {
+    root: string[];
+    scroll: string[];
+    head: string[];
+    headCell: string[];
+    body: string[];
+    row: string[];
+    cell: string[];
+    resizeHandle: string[];
+    sortIcon: string[];
+    typeIcon: string[];
+    sortBadge: string[];
+    headRightStack: string[];
+    headSortActive: string[];
+    headSortHint: string[];
+    headMenuItem: string[];
+    cardWrap: string[];
+    cardHeader: string[];
+    cardItem: string[];
+    cardLabel: string[];
+    cardValue: string[];
+}, undefined, unknown, unknown, undefined>>;
+//# sourceMappingURL=table.styles.d.ts.map

package/dist-lib/src/components/ui/Table/table.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/table.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyMpB;;;;;oFAKgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IALhF;;;;;oFAKgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IALhF;;;;;oFAKgF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwBlF,CAAC"}

package/dist-lib/src/components/ui/Table/table.types.d.ts

@@ -0,0 +1,138 @@
+import { default as React, ReactNode, MouseEvent } from 'react';
+/** Densidade vertical do grid. Afeta altura de row e padding de cell. */
+export type TableDensity = "compact" | "standard" | "comfortable";
+/** Direção de ordenação aplicada. null = sem ordenação. */
+export type SortDirection = "asc" | "desc" | null;
+/** Lado em que a coluna está fixa (sticky). undefined = fluida. */
+export type ColumnPinned = "left" | "right" | undefined;
+/** Alinhamento horizontal do conteúdo da cell. */
+export type CellAlign = "left" | "center" | "right";
+export type TableProps = {
+    density?: TableDensity;
+    /** Em px. Largura abaixo da qual o container vira card mode. `false` desativa. Default 768. */
+    cardBreakpoint?: number | false;
+    /** Renderiza bordas verticais entre colunas. Default true. */
+    cellBorders?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    /** Ref externa pro scroll container interno — necessário pra virtualização
+     *  (DataTable Fase F.3). Quando omitido, Table usa ref interna. */
+    scrollRef?: React.MutableRefObject<HTMLDivElement | null>;
+    children?: ReactNode;
+};
+export type TableHeadProps = {
+    /** Header sticky no topo durante scroll vertical. Default true. */
+    sticky?: boolean;
+    className?: string;
+    /** Props HTML extras spread no rowgroup root — `onScroll`, `data-*`, `aria-*`, etc. */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    children?: ReactNode;
+};
+/**
+ * Propósito da cell — modifica padding/border conforme contexto especial:
+ *  - `"selection"`: remove padding pra acomodar Checkbox em width fixa
+ *    (SELECTION_COLUMN_WIDTH).
+ *  - `"actions"`: header em branco (sem texto/menu), border-right removida,
+ *    padding horizontal mínimo. Usado quando `type: "actions"` na ColumnDef.
+ *  Default: `"default"`.
+ */
+export type CellPurpose = "default" | "selection" | "actions";
+export type TableHeadCellProps = {
+    /** Field da coluna — usado pra data-field (resize highlight, etc). */
+    field?: string;
+    /** Largura em px. Se undefined, cell expande com flex. */
+    width?: number;
+    pinned?: ColumnPinned;
+    /** Propósito da cell — controla padding interno. Default "default". */
+    purpose?: CellPurpose;
+    /** Offset em px para sticky positioning. Calculado por use-column-widths. */
+    pinOffset?: number;
+    align?: CellAlign;
+    /** Mostra ícone de ordenação e cursor pointer. */
+    sortable?: boolean;
+    /** Estado visual atual do sort. null = sortable mas não ativo. */
+    sortDirection?: SortDirection;
+    /** Índice do sort (1, 2, 3) — renderiza chip brand com o número quando sortDirection != null. Default 1. */
+    sortIndex?: number;
+    onSortClick?: () => void;
+    /** Ícone do tipo de coluna renderizado à esquerda do label (Hash, User, AtSign…). */
+    icon?: React.ComponentType<{
+        className?: string;
+        size?: number;
+        strokeWidth?: number;
+        "aria-hidden"?: boolean;
+    }>;
+    /** Conteúdo do menu "..." no canto direito do header (aparece no hover). Renderize um Button DS aqui. */
+    headMenu?: React.ReactNode;
+    /** Habilita drag handle no edge direito. */
+    resizable?: boolean;
+    /** Chamado durante drag — delta acumulado em px desde o mousedown. */
+    onResize?: (deltaPx: number) => void;
+    /** Chamado no mouseup — width final em px. */
+    onResizeEnd?: (finalWidthPx: number) => void;
+    className?: string;
+    /** Style extra mesclado com o style interno (width/sticky offsets). Usado pra dnd transform. */
+    style?: React.CSSProperties;
+    /** Props HTML extras spread no root div — usado por wrappers (ex: dnd-kit attributes+listeners). */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    children?: ReactNode;
+};
+export type TableBodyProps = {
+    className?: string;
+    /** Style inline — usado pra virtualization (height total + position relative).
+     *  Quando `virtualized={ totalHeight: N }`, body aplica height + position interna. */
+    style?: React.CSSProperties;
+    /** Props HTML extras spread no rowgroup root — `data-*`, `aria-*`, etc.
+     *  Útil pra interceptores de scroll/wheel ou attributes custom. */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Modo virtualizado — quando definido, body usa `position: relative + block`
+     *  com `height: totalHeight` pra acomodar rows absolutas do `@tanstack/react-virtual`.
+     *  Passe `totalHeight = virtualizer.getTotalSize()`. */
+    virtualized?: {
+        totalHeight: number;
+    };
+    children?: ReactNode;
+};
+export type TableRowProps = {
+    selected?: boolean;
+    /**
+     * Row está em foco pra detalhe (ex: click abriu drawer com info). Visual idêntico ao `selected`
+     * (bg brand-tinted + strip lateral brand) — mas semanticamente independente: pode coexistir com `selected`.
+     * Use pra padrão de "click row → abre detail panel", mantendo seleção (checkbox) separada.
+     */
+    open?: boolean;
+    /**
+     * Row tem foco de teclado (Fase E.1). Adiciona ring brand + outline visual + tabIndex=0.
+     * Quando false, tabIndex=-1 (fora da ordem de tab). Quando ANY row tem focused=true,
+     * só ela é tab-focusable — entrar via Tab vai pra essa linha.
+     */
+    focused?: boolean;
+    /** Cursor pointer + onClick disponível. */
+    clickable?: boolean;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+    /** Props HTML extras spread no root div — usado por consumers (ex: onKeyDown pra keyboard nav). */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    children?: ReactNode;
+};
+export type TableCellProps = {
+    /** Field da coluna — usado pra data-field (resize highlight, tooltip lookup, etc). */
+    field?: string;
+    /** Tooltip nativo (HTML title) — mostrado no hover. Util quando ellipsis=true e texto pode estar truncado. */
+    tooltip?: string;
+    width?: number;
+    pinned?: ColumnPinned;
+    pinOffset?: number;
+    align?: CellAlign;
+    /** Propósito da cell — controla padding interno. Default "default". */
+    purpose?: CellPurpose;
+    /** Trunca com `text-overflow: ellipsis`. Requer overflow:hidden no parent. */
+    ellipsis?: boolean;
+    /** Label da coluna usado no card mode (renderiza acima do valor). */
+    label?: string;
+    className?: string;
+    /** Props HTML extras spread no root div — usado por consumers (ex: onDoubleClick pra inline edit). */
+    rootProps?: React.HTMLAttributes<HTMLDivElement>;
+    children?: ReactNode;
+};
+//# sourceMappingURL=table.types.d.ts.map

package/dist-lib/src/components/ui/Table/table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/table.types.ts"],"names":[],"mappings":"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"}

package/dist-lib/src/components/ui/Table/use-column-resize.d.ts

@@ -0,0 +1,24 @@
+export type UseColumnResizeParams = {
+    currentWidth: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /** Disparado a cada `mousemove` durante o drag.
+     *  Tipicamente usado pra side-effect "live preview" pelo consumer.
+     *  Em consumers React, prefira `onResizeEnd` pra evitar re-render storm —
+     *  use `onResizeLiveDOM` pra DOM mutation síncrona sem state. */
+    onResize?: (widthPx: number) => void;
+    /** Disparado no `mouseup` com largura final em px.
+     *  Pra consumers React: ideal pra commit no state (1 update por drag). */
+    onResizeEnd?: (widthPx: number) => void;
+    /** Callback síncrono pra DOM mutation durante drag (sem state React).
+     *  Recomendado pra atualizar inline styles em massa (ex: <Cell width>) sem
+     *  causar re-render storm. Chamado a cada mousemove em paralelo com `onResize`.
+     *  Pattern: consumer query DOM via ref + aplica `style.width` direto. */
+    onResizeLiveDOM?: (widthPx: number) => void;
+};
+export type UseColumnResizeResult = {
+    onMouseDown: (e: React.MouseEvent) => void;
+    isDragging: boolean;
+};
+export declare function useColumnResize({ currentWidth, minWidth, maxWidth, onResize, onResizeEnd, onResizeLiveDOM, }: UseColumnResizeParams): UseColumnResizeResult;
+//# sourceMappingURL=use-column-resize.d.ts.map

package/dist-lib/src/components/ui/Table/use-column-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-column-resize.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Table/use-column-resize.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;qEAGiE;IACjE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;8EAC0E;IAC1E,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;6EAGyE;IACzE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAKF,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAsB,EACtB,QAAsB,EACtB,QAAQ,EACR,WAAW,EACX,eAAe,GAChB,EAAE,qBAAqB,GAAG,qBAAqB,CA2F/C"}