@selectwin/kit 0.1.77 → 0.1.79

package/README.md

@@ -1,29 +1,29 @@
-# @selectwin/kit
-
-Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
-gráficos) e tokens CSS, theme-aware (light/dark).
-
-Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
-não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
-
-## Uso
-
-```bash
-npm i @selectwin/kit
-```
-
-```tsx
-import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
-import { SelectButton, SelectSection } from '@selectwin/kit';
-```
-
-Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
-**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
-
-## Build
-
-```bash
-npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
-```
-
-`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).
+# @selectwin/kit
+
+Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
+gráficos) e tokens CSS, theme-aware (light/dark).
+
+Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
+não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
+
+## Uso
+
+```bash
+npm i @selectwin/kit
+```
+
+```tsx
+import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
+import { SelectButton, SelectSection } from '@selectwin/kit';
+```
+
+Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
+**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
+
+## Build
+
+```bash
+npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
+```
+
+`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).

package/dist/SelectDataTable.d.ts

@@ -13,12 +13,33 @@ import { SelectListPagination } from './internal/listChrome';
  * that renders `formatDateTime`.
  */
 export declare const SELECT_COL_DATETIME = "9.5rem";
+/**
+ * Coluna de ID — espalhe com `...SELECT_COL_ID` na definição da coluna.
+ *
+ * Um id não é uma célula qualquer: é longo, é o que o lojista COPIA para levar ao suporte e,
+ * cortado no meio, não serve para nada. Com o `1fr` uniforme ele recebia exatamente a mesma
+ * sobra que uma coluna de "—" (150px numa tabela de oito colunas) e vinha truncado. Aqui pede
+ * o DOBRO da sobra e um piso maior — sem virar `width` fixo, que engordaria o mínimo da
+ * tabela e pioraria a rolagem no celular.
+ *
+ * NÃO use em id curto que já cabe inteiro (um número de pedido de 6 dígitos): peso extra sem
+ * texto para ocupar só rouba espaço de quem precisa.
+ */
+export declare const SELECT_COL_ID: {
+    readonly minWidth: "9.5rem";
+    readonly grow: 2;
+};
 export interface SelectDataColumn<T> {
     key: string;
     title: ReactNode;
     render: (item: T) => ReactNode;
     align?: 'start' | 'end' | 'center';
     width?: string;
+    /** Piso do track flexível (default `--select-table-col-min`, 6.5rem). Ignorado com `width`. */
+    minWidth?: string;
+    /** Fatia da SOBRA de largura, relativa às outras colunas flexíveis (default 1). Uma coluna
+     *  de travessão não merece o mesmo que uma de id — ver `SELECT_COL_ID`. */
+    grow?: number;
     /**
      * Comparison value for client-side sorting — its presence makes the column sortable.
      * Sorts only the LOADED page (the server page/order is the baseline; clearing the sort

package/dist/SelectPreviewFrame.d.ts

@@ -40,6 +40,12 @@ export interface SelectPreviewFrameProps {
     initialDevice?: Device;
     showDeviceToggle?: boolean;
     emptyLabel?: string;
+    /**
+     * Largura de viewport do modo desktop, em px (padrão 1280). É o número que as media
+     * queries da página de dentro vão ler — suba-o se o site previsto só vira desktop acima
+     * de 1280. Não é o tamanho na tela: o palco escala para caber.
+     */
+    desktopWidth?: number;
 }
 export declare const SelectPreviewFrame: import('react').ForwardRefExoticComponent<SelectPreviewFrameProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectPreviewFrameProps> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectTable.d.ts

@@ -3,6 +3,12 @@ export interface SelectColumn {
     label: ReactNode;
     align?: 'start' | 'end' | 'center';
     width?: string;
+    /** Piso do track flexível (default `--select-table-col-min`, 6.5rem): abaixo dele a coluna
+     *  não encolhe e a tabela rola na horizontal. Ignorado quando há `width` fixo. */
+    minWidth?: string;
+    /** Fatia da SOBRA de largura, relativa às outras colunas flexíveis (default 1) — ver a nota
+     *  em `gridTemplate`. Ignorado quando há `width` fixo. */
+    grow?: number;
     /** Render the header as a sort control with a caret. */
     sortable?: boolean;
     sortDir?: 'asc' | 'desc' | null;

package/dist/index.d.ts

@@ -78,7 +78,7 @@ export { SelectRowActions } from './SelectRowActions';
 export { SelectConfirmModal } from './SelectConfirmModal';
 export { SelectFormModal } from './SelectFormModal';
 export { detectSelectTheme } from './detectSelectTheme';
-export { SelectDataTable, SELECT_COL_DATETIME, useSelectPageSize } from './SelectDataTable';
+export { SelectDataTable, SELECT_COL_DATETIME, SELECT_COL_ID, useSelectPageSize } from './SelectDataTable';
 export { SelectCardGrid } from './SelectCardGrid';
 export { SelectRecordCard, SelectLayoutThumb } from './SelectRecordCard';
 export { SelectSplitChain } from './SelectSplitChain';