@selectwin/kit 0.1.73 → 0.1.75

package/dist/SelectCardGrid.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SelectListChromeProps, SelectListPagination } from './internal/listChrome';
+export declare function SelectCardGrid<T>({ items, getId, renderItem, loading, skeletonCount, empty, pagination, create, minCardWidth, title, help, description, action, filters, tools, }: {
+    items: T[];
+    getId: (item: T) => string;
+    /** O card de um item — tipicamente um SelectRecordCard. */
+    renderItem: (item: T) => ReactNode;
+    loading?: boolean;
+    /** Quantos cards-esqueleto enquanto carrega (padrão 6 — duas fileiras). */
+    skeletonCount?: number;
+    empty?: {
+        icon?: ReactNode;
+        heading: ReactNode;
+        text?: ReactNode;
+        action?: ReactNode;
+    };
+    /** Rodapé de paginação — mesma prop da SelectDataTable. */
+    pagination?: SelectListPagination;
+    /** Card tracejado no fim da grade. Substitui o botão de criar na barra do título:
+     *  numa grade de componentes, criar É um item da grade. */
+    create?: {
+        label: ReactNode;
+        description?: ReactNode;
+        onAction: () => void;
+    };
+    /** Piso da coluna da grade (`auto-fill` + `minmax`). */
+    minCardWidth?: string;
+} & SelectListChromeProps): import("react").JSX.Element;

package/dist/SelectDataTable.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SelectListPagination } from './internal/listChrome';
 /**
  * Grid-track width for a date/time column — a FIXED width that fits a full pt-BR
  * "dd/mm/aaaa, hh:mm" without clipping (the problem a bare `1fr` column had: it shared the
@@ -40,7 +41,7 @@ export interface SelectDataColumn<T> {
  * guards mirror SelectMoney — storage unavailable = in-memory only.
  */
 export declare function useSelectPageSize(key: string, fallback: number, options?: number[]): [number, (size: number) => void];
-export declare function SelectDataTable<T>({ columns, items, getId, loading, empty, pagination, onRowClick, title, help, action, filters, columnsKey, }: {
+export declare function SelectDataTable<T>({ columns, items, getId, loading, empty, pagination, onRowClick, title, help, description, action, filters, columnsKey, }: {
     columns: SelectDataColumn<T>[];
     items: T[];
     getId: (item: T) => string;
@@ -55,45 +56,23 @@ export declare function SelectDataTable<T>({ columns, items, getId, loading, emp
      * Footer pager. The cursor fields (hasPrevious/onPrevious/hasNext/onNext) are enough for a
      * basic centered prev/next pager. Provide `total` + `pageSize` + `page` to show the count
      * label, and additionally `onPage` (+ optional `pageCount`) to render numbered page buttons.
+     * O mesmo rodapé da SelectCardGrid (internal/listChrome) — ver SelectListPagination.
      */
-    pagination?: {
-        hasPrevious: boolean;
-        onPrevious: () => void;
-        hasNext: boolean;
-        onNext: () => void;
-        /** Total item count across all pages (drives the "de N" label). */
-        total?: number;
-        /** Items per page — with `total` + `page` yields the "X–Y de N" range label. */
-        pageSize?: number;
-        /** Current page, 1-based. */
-        page?: number;
-        /** Total pages — enables numbered buttons when paired with `onPage`. */
-        pageCount?: number;
-        /** Jump to a 1-based page (enables numbered buttons). */
-        onPage?: (page: number) => void;
-        /** Noun for the count label, e.g. "produtos" (defaults to "resultados"). */
-        noun?: string;
-        /**
-         * Page-size menu ("N por página", bottom-left of the footer) — the user picks how many
-         * rows per page. Cap the options at 50% of the backend's zod max for the endpoint
-         * (e.g. max 100 → [10, 25, 50]). Requires `onPageSizeChange`; pair the state with
-         * `useSelectPageSize` so the choice persists per table.
-         */
-        pageSizeOptions?: number[];
-        /** Apply a new page size (also reset the offset to the first page in the caller). */
-        onPageSizeChange?: (size: number) => void;
-    };
+    pagination?: SelectListPagination;
     onRowClick?: (item: T) => void;
     /** Card title in the table's own header bar — renders a self-contained titled card
      *  (don't wrap in SelectSection; the table is already a card). */
     title?: ReactNode;
     /** Ajuda contextual: vira o "!" ao lado do título (SelectInfoTip). Precisa de `title`. */
     help?: ReactNode;
-    /** Right-aligned header action (e.g. an "Adicionar" button). */
+    /** Linha discreta ABAIXO do título (subtítulo/descrição da lista) — ver SelectTable. */
+    description?: ReactNode;
+    /** Ação sobre o RECURSO, à direita do título (ex.: "Criar link"). Controles da VISTA
+     *  (seletor de colunas) descem sozinhos para a faixa de filtros — não os passe aqui. */
     action?: ReactNode;
-    /** Filter controls (e.g. a SelectFilterBar) embedded in the table's header bar, left of
-     *  the action/column picker — table + filters read as ONE unit, and the bar stays
-     *  reachable when a filter empties the table. */
+    /** Filter controls (e.g. a SelectFilterBar) na PRÓPRIA faixa do card, entre o título e o
+     *  cabeçalho de colunas — table + filters read as ONE unit, and the bar stays reachable
+     *  when a filter empties the table. */
     filters?: ReactNode;
     /**
      * Enables the column-visibility picker (a gear in the header bar) and persists the

package/dist/SelectRecordCard.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+export type SelectRecordCardTone = 'success' | 'critical' | 'warning' | 'info' | 'neutral';
+type SelectRecordCardOwnProps = {
+    /** Visual da esquerda — SelectLayoutThumb, SelectAvatar ou um ícone. */
+    media?: ReactNode;
+    title: ReactNode;
+    /** Linha de apoio sob o título (ex.: o SelectCopyableId do id — passe `reveal="always"`,
+     *  que fora de tabela não há hover de linha para revelar o botão de copiar). */
+    subtitle?: ReactNode;
+    /** Canto direito do topo — tipicamente um SelectRowActions. */
+    actions?: ReactNode;
+    /** Badges no meio do card (layout, escopo, canal…). */
+    tags?: ReactNode;
+    /** Rodapé à esquerda: bolinha + rótulo do estado. Sem `status` e sem `meta` o rodapé
+     *  não é renderizado. Estado AUSENTE é `undefined`, nunca um "provável" — o card não
+     *  inventa veredito para dado que a lista não trouxe. */
+    status?: {
+        tone?: SelectRecordCardTone;
+        label: ReactNode;
+    };
+    /** Rodapé à direita — normalmente a data de atualização. */
+    meta?: ReactNode;
+    /** Rota do card inteiro (o menu de ações segue clicável). */
+    to?: string;
+    /** Faixa de destaque no topo (ex.: o registro em vigor). */
+    accent?: boolean;
+};
+export type SelectRecordCardProps = SelectRecordCardOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectRecordCardOwnProps>;
+export declare const SelectRecordCard: import('react').ForwardRefExoticComponent<SelectRecordCardOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectRecordCardOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * SelectLayoutThumb — o mini-wireframe que abre o card de um template de checkout:
+ * `steps` desenha etapas empilhadas (multi-step), `columns` desenha as colunas de uma
+ * página só (one-step). É o glifo que faz o card ler como COMPONENTE — sem ele o card é
+ * uma linha de tabela com bordas.
+ */
+export type SelectLayoutThumbProps = {
+    kind: 'steps' | 'columns';
+} & Omit<ComponentPropsWithoutRef<'span'>, 'children'>;
+export declare const SelectLayoutThumb: import('react').ForwardRefExoticComponent<{
+    kind: "steps" | "columns";
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/SelectTable.d.ts

@@ -19,12 +19,22 @@ type SelectTableOwnProps = {
     title?: ReactNode;
     /** Ajuda contextual: vira o "!" ao lado do título (SelectInfoTip). Precisa de `title`. */
     help?: ReactNode;
+    /** Linha discreta ABAIXO do título (subtítulo/descrição da lista). Ocupa a largura da
+     *  faixa de identidade — por isso o filtro não pode dividir essa linha com ela. Texto
+     *  que ENSINA a plataforma continua sendo `help` (o "!"); aqui vai o que descreve o
+     *  recorte desta lista. */
+    description?: ReactNode;
     /** Right-aligned action in the header bar (e.g. an "Adicionar" button). */
     action?: ReactNode;
-    /** Filter controls (e.g. a SelectFilterBar) embedded in the header bar, left of the
-     *  action — the table and its filters read as ONE unit. The bar stays visible when a
-     *  filter empties the table (clearing the filter must remain reachable). */
+    /** Filter controls (e.g. a SelectFilterBar). Ganham a PRÓPRIA faixa, entre o título e o
+     *  cabeçalho de colunas — tabela e filtros seguem lendo como UMA unidade, e a barra
+     *  continua visível quando um filtro esvazia a tabela (limpar o filtro tem de continuar
+     *  alcançável). */
     filters?: ReactNode;
+    /** Controles da VISTA (seletor de colunas, "Personalizar") — à direita da faixa de
+     *  filtros, não junto do título. Sem `filters` não existe faixa de consulta, então eles
+     *  voltam para o lado do `action` (uma faixa só para a engrenagem seria vazia). */
+    tools?: ReactNode;
 };
 export type SelectTableProps = SelectTableOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableOwnProps>;
 export declare const SelectTable: import('react').ForwardRefExoticComponent<SelectTableOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -79,6 +79,8 @@ export { SelectConfirmModal } from './SelectConfirmModal';
 export { SelectFormModal } from './SelectFormModal';
 export { detectSelectTheme } from './detectSelectTheme';
 export { SelectDataTable, SELECT_COL_DATETIME, useSelectPageSize } from './SelectDataTable';
+export { SelectCardGrid } from './SelectCardGrid';
+export { SelectRecordCard, SelectLayoutThumb } from './SelectRecordCard';
 export { SelectPagination } from './SelectPagination';
 export { SelectFilterBar } from './SelectFilterBar';
 export { SelectTagSelect } from './SelectTagSelect';
@@ -207,6 +209,8 @@ export type { SelectRowAction } from './SelectRowActions';
 export type { SelectStatusMeta } from './SelectStatusBadge';
 export type { SelectTimelineItem, SelectTimelineTone } from './SelectTimeline';
 export type { SelectDataColumn } from './SelectDataTable';
+export type { SelectRecordCardProps, SelectRecordCardTone, SelectLayoutThumbProps } from './SelectRecordCard';
+export type { SelectListPagination } from './internal/listChrome';
 export type { SelectPaginationProps } from './SelectPagination';
 export type { SelectFilterDef } from './SelectFilterBar';
 export type { SelectTagOption } from './SelectTagSelect';