@apipass/design-system 5.7.0 → 5.9.0

package/dist/lib/ui/primitives/Table/TableBase.js

@@ -0,0 +1,127 @@
+import { jsx as e, jsxs as b, Fragment as v } from "react/jsx-runtime";
+import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
+import { useContext as N, createContext as k } from "react";
+import { TableBody as B, Cell as $, Column as w, useTableOptions as f, TableHeader as R, Checkbox as g, Collection as p, Row as U, Button as j, Table as D } from "react-aria-components";
+/* empty css          */
+import { IconChevronDown as F } from "../../icons/IconChevronDown.js";
+import { IconChevronUp as I } from "../../icons/IconChevronUp.js";
+import { Checkbox as C } from "../Checkbox/Checkbox.js";
+import { Radio as S } from "../Radio/Radio.js";
+const d = k("checkbox");
+function V(l) {
+  const t = Number(l);
+  return `${l}`.trim() !== "" && Number.isFinite(t) ? `${t}px` : `${l}`;
+}
+function G({
+  bleed: l = !1,
+  dense: t = !1,
+  grid: s = !1,
+  striped: a = !1,
+  selectionType: c = "checkbox",
+  maxHeight: n,
+  className: m,
+  ...i
+}) {
+  const r = n !== void 0, x = o(
+    m,
+    "table-container",
+    l && "table-container-bleed",
+    r && "table-container-scrollable"
+  ), T = r ? { "--table-max-height": V(n) } : void 0, y = o(
+    "sds-table",
+    l && "table-bleed",
+    t && "table-dense",
+    s && "table-grid",
+    a && "sds-table-striped"
+  );
+  return /* @__PURE__ */ e("div", { className: x, style: T, children: /* @__PURE__ */ e(d.Provider, { value: c, children: /* @__PURE__ */ e(D, { className: y, ...i }) }) });
+}
+function h({
+  align: l = "start",
+  className: t,
+  ...s
+}) {
+  const a = o(t, "table-column", `table-align-${l}`);
+  return /* @__PURE__ */ e(w, { className: a, ...s, children: ({ allowsSorting: c, sortDirection: n }) => /* @__PURE__ */ e("div", { className: o("table-column-inner"), children: /* @__PURE__ */ b(v, { children: [
+    s.children,
+    c && /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: o(
+          "sort-indicator",
+          !n && "sort-indicator-unsorted"
+        ),
+        children: n === "descending" ? /* @__PURE__ */ e(F, {}) : /* @__PURE__ */ e(I, {})
+      }
+    )
+  ] }) }) });
+}
+function J({
+  className: l,
+  ...t
+}) {
+  return /* @__PURE__ */ e(B, { ...t });
+}
+function K({
+  className: l,
+  columns: t,
+  children: s,
+  ...a
+}) {
+  const { selectionBehavior: c, selectionMode: n, allowsDragging: m } = f(), i = N(d), r = o(l, "table-head");
+  return /* @__PURE__ */ b(R, { className: r, ...a, children: [
+    m && /* @__PURE__ */ e(h, {}),
+    c === "toggle" && /* @__PURE__ */ e(
+      h,
+      {
+        className: o(
+          "table-selection-col",
+          i === "radio" && "table-selection-col--radio"
+        ),
+        children: n === "multiple" && /* @__PURE__ */ e(g, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(C, {}) })
+      }
+    ),
+    /* @__PURE__ */ e(p, { items: t, children: s })
+  ] });
+}
+function Q({
+  id: l,
+  columns: t,
+  children: s,
+  className: a,
+  ...c
+}) {
+  const { selectionBehavior: n, allowsDragging: m } = f(), i = N(d), r = o(a, "table-row");
+  return /* @__PURE__ */ b(U, { id: l, ...c, className: r, children: [
+    m && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(j, { slot: "drag", children: "≡" }) }),
+    n === "toggle" && /* @__PURE__ */ e(
+      u,
+      {
+        className: o(
+          "table-selection-cell",
+          i === "radio" && "table-selection-cell--radio"
+        ),
+        children: /* @__PURE__ */ e(g, { slot: "selection", className: "table-selection-checkbox", children: i === "radio" ? /* @__PURE__ */ e(S, {}) : /* @__PURE__ */ e(C, {}) })
+      }
+    ),
+    /* @__PURE__ */ e(p, { items: t, children: s })
+  ] });
+}
+function u({
+  align: l = "start",
+  className: t,
+  ...s
+}) {
+  const a = o(t, "table-cell", `table-align-${l}`);
+  return /* @__PURE__ */ e($, { className: a, ...s });
+}
+export {
+  G as TableBase,
+  J as TableBody,
+  u as TableCell,
+  h as TableColumn,
+  K as TableHead,
+  Q as TableRow
+};
+//# sourceMappingURL=TableBase.js.map

package/dist/lib/ui/primitives/Table/TableBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBase.js","sources":["../../../../../src/ui/primitives/Table/TableBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox, Radio } from \"primitives\";\nimport { createContext, useContext, type CSSProperties } from \"react\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\n/**\n * Visual style of the built-in selection control rendered in the selection\n * column (header \"select all\" + per-row toggle). \"radio\" is for\n * `selectionMode=\"single\"` tables where a round, single-choice control reads\n * better than a checkbox — the header never renders a control either way\n * (there is no \"select all\" for a single choice).\n */\ntype SelectionType = \"checkbox\" | \"radio\";\nconst SelectionTypeContext = createContext<SelectionType>(\"checkbox\");\n\nfunction toCssLength(value: number | string): string {\n  const numericValue = Number(value);\n  const isUnitlessNumber =\n    `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n  return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableBaseProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n  selectionType?: SelectionType;\n  maxHeight?: number | string;\n};\nexport function TableBase({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  selectionType = \"checkbox\",\n  maxHeight,\n  className,\n  ...props\n}: TableBaseProps) {\n  const scrollsVertically = maxHeight !== undefined;\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n    scrollsVertically && \"table-container-scrollable\",\n  );\n  const containerStyle = scrollsVertically\n    ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n    : undefined;\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames} style={containerStyle}>\n      <SelectionTypeContext.Provider value={selectionType}>\n        <RACTable className={tableClassNames} {...props} />\n      </SelectionTypeContext.Provider>\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  \"sort-indicator\",\n                  !sortDirection && \"sort-indicator-unsorted\",\n                )}\n              >\n                {sortDirection === \"descending\" ? (\n                  <IconChevronDown />\n                ) : (\n                  <IconChevronUp />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn\n          className={clsx(\n            \"table-selection-col\",\n            selectionType === \"radio\" && \"table-selection-col--radio\",\n          )}\n        >\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell\n          className={clsx(\n            \"table-selection-cell\",\n            selectionType === \"radio\" && \"table-selection-cell--radio\",\n          )}\n        >\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            {selectionType === \"radio\" ? <Radio /> : <Checkbox />}\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["SelectionTypeContext","createContext","toCssLength","value","numericValue","TableBase","bleed","dense","grid","striped","selectionType","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsx","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","useContext","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","Radio","RACCell"],"mappings":"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"}

package/dist/types/ui/components/DataTable/DataTable.d.ts

@@ -1,69 +1,14 @@
-import type { ReactNode } from "react";
-import type { Selection } from "react-aria-components";
+import { Table, type DataDrivenTableProps } from "primitives";
 import "./datatable.css";
-export interface Column<T> {
-    key: keyof T | string;
-    label: string;
-    align?: "start" | "center" | "right";
-    render?: (item: T) => ReactNode;
-}
-export interface RowActionDef<T> {
-    /** Unique key for this action. */
-    key: string;
-    /** aria-label for the button. */
-    label: string;
-    /** Icon element rendered inside the button. */
-    icon: ReactNode;
-    /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */
-    isAllowed?: boolean;
-    /** Tooltip text shown when `isAllowed` is false. */
-    noAccessLabel?: string;
-    /** Called with the row item when the button is pressed. */
-    onPress: (item: T) => void;
-}
-export interface DataTableProps<T extends {
+/**
+ * @deprecated Use `Table` com `columns` e `data` — as props são idênticas. Mantido só
+ * para a migração gradual dos consumidores; será removido quando nenhum repositório
+ * importar mais o `DataTable`.
+ */
+export declare const DataTable: <T extends {
     id: string;
-}> {
-    columns: Column<T>[];
-    data: T[];
-    actions?: ReactNode;
-    /** Per-row action buttons rendered in a dedicated last column. */
-    rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);
-    /** Label for the row actions column header. Defaults to empty string. */
-    rowActionsLabel?: string;
-    /**
-     * When true, renders a selection column before the first data column — a per-row control on
-     * every row (see `selectionType`), plus a "select all" checkbox in the header when
-     * `selectionType` is "checkbox". Off by default.
-     */
-    selectable?: boolean;
-    /**
-     * Visual style of the built-in selection control. "checkbox" (default) allows selecting
-     * multiple rows and shows a "select all" in the header. "radio" restricts selection to a
-     * single row (no "select all" — there is nothing to select all *to* with one choice) and
-     * renders a round control instead of a checkbox.
-     */
-    selectionType?: "checkbox" | "radio";
-    /** Controlled selection state. Omit to let the table manage its own selection internally. */
-    selectedKeys?: Selection;
-    onSelectionChange?: (keys: Selection) => void;
-    searchPlaceholder?: string;
-    searchKeys?: (keyof T)[];
-    isLoading?: boolean;
-    loadingMessage?: string;
-    emptyMessage?: string;
-    previousLabel?: string;
-    nextLabel?: string;
-    pageSize?: number;
-    nestedColumns?: Column<any>[];
-    getNestedData?: (item: T) => any[] | Promise<any[]>;
-    nestedLoadingMessage?: string;
-    nestedEmptyMessage?: string;
-    nestedSearchKeys?: (keyof any)[];
-    nestedSearchPlaceholder?: string;
-    nestedActions?: (item: T) => ReactNode;
-    nestedPageSize?: number;
-}
-export declare function DataTable<T extends {
+}>(props: DataDrivenTableProps<T>) => ReturnType<typeof Table>;
+/** @deprecated Use `DataDrivenTableProps`. */
+export type DataTableProps<T extends {
     id: string;
-}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, selectedKeys, onSelectionChange, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+}> = DataDrivenTableProps<T>;

package/dist/types/ui/primitives/Accordion/Accordion.d.ts

@@ -1,8 +1,11 @@
+import type { ReactNode } from "react";
 import { type DisclosureGroupProps, type DisclosureProps } from "react-aria-components";
 import "./accordion.css";
 export type AccordionProps = DisclosureGroupProps;
 export declare function Accordion({ className, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export type AccordionItemProps = DisclosureProps & {
     title: string;
+    subtitle?: ReactNode;
+    badge?: ReactNode;
 };
-export declare function AccordionItem({ className, title, isExpanded, isDisabled, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ className, title, subtitle, badge, isExpanded, isDisabled, children, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/JsonViewer/JsonEditor.d.ts

@@ -1,10 +1,10 @@
+import type { JsonEditorSize } from "./json-code-mirror";
 import "./jsonviewer.css";
-export interface JsonEditorProps {
+export interface JsonEditorProps extends JsonEditorSize {
     value: string;
     onChange?: (value: string) => void;
     expandAllLabel: string;
     className?: string;
-    height?: string | number;
     isDisabled?: boolean;
     isReadOnly?: boolean;
     "aria-label"?: string;
@@ -15,4 +15,4 @@ export interface JsonEditorProps {
  * `JsonViewer` stays read-only-only on purpose so its bundle keeps assuming
  * a static document; this component owns the editable/controlled behavior.
  */
-export declare function JsonEditor({ value, onChange, expandAllLabel, className, height, isDisabled, isReadOnly, "aria-label": ariaLabel, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditor({ value, onChange, expandAllLabel, className, height, minHeight, maxHeight, isDisabled, isReadOnly, "aria-label": ariaLabel, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/JsonViewer/JsonViewer.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { JsonEditorSize } from "./json-code-mirror";
 import "./jsonviewer.css";
 export interface JsonViewerAction {
     key: string;
@@ -6,11 +7,10 @@ export interface JsonViewerAction {
     icon: ReactNode;
     onPress: () => void;
 }
-export interface JsonViewerProps {
+export interface JsonViewerProps extends JsonEditorSize {
     value: unknown;
     expandAllLabel: string;
     actions?: JsonViewerAction[];
     className?: string;
-    height?: string | number;
 }
-export declare function JsonViewer({ value, expandAllLabel, actions, className, height }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonViewer({ value, expandAllLabel, actions, className, height, minHeight, maxHeight, }: JsonViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/JsonViewer/json-code-mirror.d.ts

@@ -1,9 +1,16 @@
+import type { CSSProperties } from "react";
 import { HighlightStyle } from "@codemirror/language";
 export declare const jsonHighlightStyle: HighlightStyle;
 export declare const jsonEditorTheme: import("@codemirror/state").Extension;
 export declare const jsonEditorExtensions: import("@codemirror/state").Extension[];
 export declare function serializeJson(value: unknown): string;
 export declare function toCssSize(size: string | number): string;
+export interface JsonEditorSize {
+    height?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+}
+export declare function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties;
 /**
  * Finds the fold range of every direct child (depth 1) of the root object/array
  * by scanning the text itself for matching brackets. This mirrors what

package/dist/types/ui/primitives/Table/DataDrivenTable.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import type { Selection } from "react-aria-components";
+export interface Column<T> {
+    key: keyof T | string;
+    label: string;
+    align?: "start" | "center" | "right";
+    render?: (item: T) => ReactNode;
+}
+export interface RowActionDef<T> {
+    /** Unique key for this action. */
+    key: string;
+    /** aria-label for the button. */
+    label: string;
+    /** Icon element rendered inside the button. */
+    icon: ReactNode;
+    /** When false, button is disabled and a tooltip with `noAccessLabel` is shown. Default: true. */
+    isAllowed?: boolean;
+    /** Tooltip text shown when `isAllowed` is false. */
+    noAccessLabel?: string;
+    /** Called with the row item when the button is pressed. */
+    onPress: (item: T) => void;
+}
+export interface DataDrivenTableProps<T extends {
+    id: string;
+}> {
+    columns: Column<T>[];
+    data: T[];
+    actions?: ReactNode;
+    /** Per-row action buttons rendered in a dedicated last column. */
+    rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);
+    /** Label for the row actions column header. Defaults to empty string. */
+    rowActionsLabel?: string;
+    /**
+     * When true, renders a selection column before the first data column — a per-row control on
+     * every row (see `selectionType`), plus a "select all" checkbox in the header when
+     * `selectionType` is "checkbox". Off by default.
+     */
+    selectable?: boolean;
+    /**
+     * Visual style of the built-in selection control. "checkbox" (default) allows selecting
+     * multiple rows and shows a "select all" in the header. "radio" restricts selection to a
+     * single row (no "select all" — there is nothing to select all *to* with one choice) and
+     * renders a round control instead of a checkbox.
+     */
+    selectionType?: "checkbox" | "radio";
+    /** Controlled selection state. Omit to let the table manage its own selection internally. */
+    selectedKeys?: Selection;
+    onSelectionChange?: (keys: Selection) => void;
+    searchPlaceholder?: string;
+    searchKeys?: (keyof T)[];
+    isLoading?: boolean;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageSize?: number;
+    nestedColumns?: Column<any>[];
+    getNestedData?: (item: T) => any[] | Promise<any[]>;
+    nestedLoadingMessage?: string;
+    nestedEmptyMessage?: string;
+    nestedSearchKeys?: (keyof any)[];
+    nestedSearchPlaceholder?: string;
+    nestedActions?: (item: T) => ReactNode;
+    nestedPageSize?: number;
+}
+export declare function DataDrivenTable<T extends {
+    id: string;
+}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, selectedKeys, onSelectionChange, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataDrivenTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/Table/Table.d.ts

@@ -1,35 +1,25 @@
-import { type CellProps as RACCellProps, type ColumnProps as RACColumnProps, type RowProps as RACRowProps, type TableBodyProps as RACTableBodyProps, type TableHeaderProps as RACTableHeaderProps, type TableProps as RACTableProps } from "react-aria-components";
-import "./table.css";
-type TableAlign = "start" | "center" | "right";
+import { DataDrivenTable, type DataDrivenTableProps } from "./DataDrivenTable";
+import { TableBase, type TableBaseProps } from "./TableBase";
+export { TableBody, TableCell, TableColumn, TableHead, TableRow, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TableRowProps, } from "./TableBase";
+export type { Column, DataDrivenTableProps, RowActionDef } from "./DataDrivenTable";
 /**
- * Visual style of the built-in selection control rendered in the selection
- * column (header "select all" + per-row toggle). "radio" is for
- * `selectionMode="single"` tables where a round, single-choice control reads
- * better than a checkbox — the header never renders a control either way
- * (there is no "select all" for a single choice).
+ * Props do modo composição: o consumidor monta cabeçalho e linhas com `TableHead`,
+ * `TableColumn`, `TableBody`, `TableRow` e `TableCell`. `columns` fica proibido aqui
+ * porque é ele que ativa o modo data-driven.
  */
-type SelectionType = "checkbox" | "radio";
-export type TableProps = RACTableProps & {
-    bleed?: boolean;
-    dense?: boolean;
-    grid?: boolean;
-    striped?: boolean;
-    selectionType?: SelectionType;
-    maxHeight?: number | string;
+export type TableProps = TableBaseProps & {
+    columns?: never;
 };
-export declare function Table({ bleed, dense, grid, striped, selectionType, maxHeight, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
-export type TableColumnProps = RACColumnProps & {
-    align?: TableAlign;
-};
-export declare function TableColumn({ align, className, ...props }: TableColumnProps): import("react/jsx-runtime").JSX.Element;
-export type TableBodyProps<T> = RACTableBodyProps<T>;
-export declare function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
-export type TableHeadProps<T> = RACTableHeaderProps<T>;
-export declare function TableHead<T extends object>({ className, columns, children, ...props }: TableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
-export type TableRowProps<T> = RACRowProps<T>;
-export declare function TableRow<T extends object>({ id, columns, children, className, ...otherProps }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
-export type TableCellProps = RACCellProps & {
-    align?: TableAlign;
-};
-export declare function TableCell({ align, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Tabela em dois modos, decididos pela presença de `columns`:
+ *
+ * - **Data-driven** (`columns` + `data`): toolbar com busca, paginação, seleção,
+ *   ações por linha, estados de loading/vazio e linhas aninhadas. Substitui o antigo
+ *   `DataTable`.
+ * - **Composição** (sem `columns`): primitivo sobre o `Table` do react-aria, com os
+ *   filhos montados pelo consumidor.
+ */
+export declare function Table<T extends {
+    id: string;
+}>(props: DataDrivenTableProps<T>): ReturnType<typeof DataDrivenTable>;
+export declare function Table(props: TableProps): ReturnType<typeof TableBase>;

package/dist/types/ui/primitives/Table/TableBase.d.ts

@@ -0,0 +1,35 @@
+import { type CellProps as RACCellProps, type ColumnProps as RACColumnProps, type RowProps as RACRowProps, type TableBodyProps as RACTableBodyProps, type TableHeaderProps as RACTableHeaderProps, type TableProps as RACTableProps } from "react-aria-components";
+import "./table.css";
+type TableAlign = "start" | "center" | "right";
+/**
+ * Visual style of the built-in selection control rendered in the selection
+ * column (header "select all" + per-row toggle). "radio" is for
+ * `selectionMode="single"` tables where a round, single-choice control reads
+ * better than a checkbox — the header never renders a control either way
+ * (there is no "select all" for a single choice).
+ */
+type SelectionType = "checkbox" | "radio";
+export type TableBaseProps = RACTableProps & {
+    bleed?: boolean;
+    dense?: boolean;
+    grid?: boolean;
+    striped?: boolean;
+    selectionType?: SelectionType;
+    maxHeight?: number | string;
+};
+export declare function TableBase({ bleed, dense, grid, striped, selectionType, maxHeight, className, ...props }: TableBaseProps): import("react/jsx-runtime").JSX.Element;
+export type TableColumnProps = RACColumnProps & {
+    align?: TableAlign;
+};
+export declare function TableColumn({ align, className, ...props }: TableColumnProps): import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps<T> = RACTableBodyProps<T>;
+export declare function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableHeadProps<T> = RACTableHeaderProps<T>;
+export declare function TableHead<T extends object>({ className, columns, children, ...props }: TableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableRowProps<T> = RACRowProps<T>;
+export declare function TableRow<T extends object>({ id, columns, children, className, ...otherProps }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export type TableCellProps = RACCellProps & {
+    align?: TableAlign;
+};
+export declare function TableCell({ align, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [