@gravitee/graphene-core 2.43.0 → 2.44.0-renovate-dompurify-3-x.a3dfda5

package/USAGE_GUIDE.md

@@ -314,6 +314,172 @@ With `useLayoutConfig` (module federation), a nested page can set `contentVarian
 useLayoutConfig({ contentVariant: 'full-bleed' }, []);
 ```
 
+### Data table (entity list pages)
+
+Use `DataTable` for any entity list — whether the data is fetched page-by-page from an API or loaded in full on the client. The component provides sorting, filtering, pagination, column visibility, row selection, and bulk actions through a composable slot API.
+
+**To implement:** copy the snippet from `snippets/data-table-list-page.tsx` and replace the entity type, column definitions, and fetch function with your data. See Storybook **Patterns/Data Table → ApiList** for the full interactive example.
+
+#### When to use DataTable vs raw Table
+
+| Use `DataTable` | Use raw `Table` |
+|---|---|
+| Any list that could exceed 5 rows | Key-value detail panels |
+| Needs sorting, filtering, or actions | Static configuration displays |
+| Data from an API (server-side) | Inline form grids with <5 fixed rows |
+| Static arrays with >10 items (client-side) | |
+
+#### Server-side vs client-side
+
+`DataTable` works in two modes:
+
+| | Server-side (`serverSide` prop) | Client-side (default) |
+|---|---|---|
+| **When** | Data fetched page-by-page from an API | All data loaded at once |
+| **Sorting** | Pass `sorting` + `onSortingChange`, refetch on change | Automatic (TanStack `getSortedRowModel`) |
+| **Filtering** | Refetch with filter params | Automatic (TanStack `getFilteredRowModel`) |
+| **Pagination** | Pass current page slice to `data` | Pass full array; TanStack paginates |
+| **`data` prop** | Current page only (e.g. 10 rows) | Entire dataset |
+
+**Never** mix modes: client-side sort on server-paginated data only sorts the visible page.
+
+#### Pagination
+
+- Default page size: **10** (standard lists), **25** (high-density: catalog).
+- Page size options: `[10, 25, 50, 100]`.
+- **Recommended:** Use the `pagination` prop for standard pagination (both server-side and client-side):
+
+```tsx
+<DataTable
+  pagination={{
+    page,
+    pageSize,
+    totalCount,
+    onPageChange: setPage,
+    onPageSizeChange: (size) => { setPageSize(size); setPage(1); },
+    pageSizeOptions: [10, 25, 50, 100],
+  }}
+/>
+```
+
+- The `footer` slot is still available for custom content (rendered above pagination when both are set).
+- Reset to page 1 when search/filter/sort criteria change.
+- Works for both **server-side** (pass current page of data) and **client-side** (slice data yourself) pagination.
+
+#### Search and filters
+
+- Search and filters live in the DataTable `toolbar` slot.
+- Search field: `h-8 w-64` consistent sizing. Debounce: **300ms** for server-side search.
+- **Do NOT add a search field to a server-paginated table unless the backend endpoint supports a text search parameter** (`query`, `q`, or equivalent). Client-side search on a single page of server-paginated data is misleading — users will miss matches on other pages. If the backend does not support search, either request the backend change or omit the search field entirely.
+- Use `FacetedFilter` for multi-select categorical filters.
+- Show a "Reset" button when any filter is active.
+
+#### Row navigation
+
+Use **name-column-as-link**: the primary identifier column (always leftmost) is a clickable link with `font-medium hover:underline`. No full-row-click.
+
+#### Actions column
+
+- Always the rightmost column. `enableSorting: false`, `enableHiding: false`.
+- Header: `<span className="sr-only">Actions</span>`.
+- **Always use the three-dot menu** (`MoreVerticalIcon` + `DropdownMenu`) — never a horizontal row of inline icon buttons. This applies even for 2 actions.
+- **Single-action exception:** exactly 1 action may render as a lone icon button without a dropdown.
+- **Quick-action escape hatch:** one high-discoverability action (e.g. "Deploy") may appear as an inline icon *alongside* the dropdown, but the dropdown must still exist.
+- Use `MoreVerticalIcon` (⋮) for table rows. Do not use `MoreHorizontalIcon` — the horizontal variant is for toolbars and card headers.
+- Destructive actions go last in the menu, after a `DropdownMenuSeparator`.
+
+#### Column ordering
+
+1. Checkbox (if `selectionMode="multi"`) — auto-prepended
+2. Name/primary identifier (link)
+3. Status badge
+4. Category/type badges
+5. Dates (relative format)
+6. Owner/actor
+7. Actions (rightmost)
+
+**Minimum 3 data columns** (excluding actions). If an entity has fewer than 3 meaningful attributes, use a simpler component (Item list, card grid) instead of DataTable.
+
+Target **4-7 visible columns**. More than 7 → enable column visibility and hide low-priority columns by default. Do NOT show raw entity IDs as visible columns.
+
+#### Cell renderers
+
+Import from `@gravitee/graphene-core/composed/DataTable` (or the main package):
+
+| Renderer | Use for | Behavior |
+|---|---|---|
+| `DateCell` | Timestamps | Relative format ("2h ago") + full date tooltip |
+| `BadgeCell` | Status/category | Truncation-safe badge with variant support |
+| `MonoCell` | IDs, paths, tokens | Monospace, character-limit truncation + tooltip |
+| `CopyableCell` | API keys, IDs | Mono text + copy button on hover |
+| `TruncatedCell` | Long text | Max-width constraint + tooltip on overflow |
+
+#### Empty states
+
+Use `DataTableEmptyState` — it enforces the correct structure for both scenarios:
+
+**`variant="first-use"`** — collection is genuinely empty (user has never created entities)
+- Render **instead of** `DataTable` (no table chrome needed)
+- Wrap in `<div className="rounded-lg border">` for containment
+- Props: `icon`, `title`, `description`, `primaryAction`, optional `secondaryAction`, optional `children` for educational content (flow diagrams, feature pillars)
+- Decision: `totalCount === 0 && !hasActiveFilters`
+
+**`variant="no-results"`** — active filters/search returned zero matches
+- Render **inside** `DataTable` as the `emptyMessage` prop (keep toolbar visible)
+- Props: `icon` (use `SearchIcon`), `title`, `description`, `action` (e.g. "Clear filters")
+- Decision: `filteredCount === 0 && hasActiveFilters`
+
+```tsx
+// Page-level decision pattern
+{isFirstUse ? (
+  <div className="rounded-lg border">
+    <DataTableEmptyState variant="first-use" icon={<GlobeIcon />} title="No APIs yet" ... />
+  </div>
+) : (
+  <DataTable
+    emptyMessage={<DataTableEmptyState variant="no-results" icon={<SearchIcon />} ... />}
+    ...
+  />
+)}
+```
+
+See Storybook **Composed/DataTableEmptyState → Integration** for the full interactive example.
+
+#### Header button coordination
+
+Pages with a primary "Add Entity" button in the header follow one rule: **the header button only appears when data exists**. During first-use, the empty state owns the primary CTA.
+
+| State | Header button | Content area |
+|---|---|---|
+| **First-use** (`totalCount === 0 && !hasFilters`) | Hidden | `DataTableEmptyState variant="first-use"` with primary CTA |
+| **Has data** (`totalCount > 0`) | Primary `+ Add Entity` | DataTable |
+| **No results** (filters active, zero matches) | Primary `+ Add Entity` | `DataTableEmptyState variant="no-results"` with "Clear filters" |
+
+Both the header button and the empty state CTA trigger the same creation flow. No visual downgrade (both are primary variant buttons). No transition animation between states.
+
+```tsx
+<div className="flex items-center justify-between">
+  <div>
+    <h2 className="text-lg font-semibold">Entities</h2>
+    <p className="text-sm text-muted-foreground">Manage your entity catalog.</p>
+  </div>
+  {!isFirstUse && (
+    <Button size="sm"><PlusIcon /> Add entity</Button>
+  )}
+</div>
+```
+
+#### Loading state
+
+- Pass `skeletonCount={pageSize}` to prevent layout shift.
+- `loadingDelay={200}` (default) prevents flash on fast responses.
+
+#### `serverSide` prop
+
+Set `serverSide` when data is fetched page-by-page from an API. It disables TanStack's built-in sort/filter/pagination models so you control everything via your fetch logic.
+
+When `serverSide` is **not set** (default), pass the entire dataset to `data` and TanStack handles sorting and filtering automatically. For pagination, slice the array yourself and pass the current page via `data`, using the `pagination` prop to render controls.
+
 ### Context sidebar (resource detail pages)
 
 Use `ContextSidebar` when a user **drills down from a list into a single resource** (API, Agent, Application…) that has multiple sub-sections. It provides secondary navigation scoped to that entity — set `viewMode: 'context'` on `AppLayout` and wire `ContextToggleButton` in the `leading` slot of `ContentHeader`.

package/dist/composed/DataTable/DataTable.d.ts

@@ -1,5 +1,14 @@
 import { ColumnDef, OnChangeFn, SortingState, TableOptions } from '@tanstack/react-table';
 import { ReactNode } from 'react';
+interface DataTablePaginationConfig {
+    readonly page: number;
+    readonly pageSize: number;
+    readonly totalCount: number;
+    readonly onPageChange: (page: number) => void;
+    readonly onPageSizeChange?: (pageSize: number) => void;
+    /** @default [10, 25, 50, 100] */
+    readonly pageSizeOptions?: number[];
+}
 interface DataTableProps<TData> {
     readonly columns: ColumnDef<TData, unknown>[];
     readonly data: TData[];
@@ -7,8 +16,9 @@ interface DataTableProps<TData> {
     readonly onSelectionChange?: (rows: TData[]) => void;
     /** Slot rendered next to column visibility toggle. Automatically disabled when no rows are selected. */
     readonly bulkActions?: ReactNode;
-    /** Controlled sorting state. When set without `onSortingChange`, sorting becomes read-only. */
+    /** Controlled sorting state. Required for `serverSide` mode. When set without `onSortingChange`, sorting is read-only. */
     readonly sorting?: SortingState;
+    /** Called when the user clicks a sortable column header. Use to trigger a server re-fetch with the new sort params. */
     readonly onSortingChange?: OnChangeFn<SortingState>;
     readonly emptyMessage?: ReactNode;
     readonly enableColumnVisibility?: boolean;
@@ -22,15 +32,34 @@ interface DataTableProps<TData> {
     /** Number of skeleton rows shown during initial load. @default 5 */
     readonly skeletonCount?: number;
     readonly className?: string;
+    /** Accessible label for the table region. Falls back to a generic default for screen readers. */
+    readonly 'aria-label'?: string;
     /** Toolbar area above the table (search, filters, etc.). */
     readonly toolbar?: ReactNode;
+    /**
+     * Pagination config. When set, DataTable renders `DataTablePagination` in the footer.
+     * In `serverSide` mode, `totalCount` drives page count; in client-side mode it reflects `data.length`.
+     */
+    readonly pagination?: DataTablePaginationConfig;
+    /** Custom footer content. Renders above pagination when both are set. Use `pagination` prop for standard pagination. */
     readonly footer?: ReactNode;
-    /** Disables client-side sorting/filtering/pagination. Use when data is fetched from a server. */
+    /**
+     * Disables client-side sorting, filtering, and pagination. Use when `data` is fetched from a server.
+     *
+     * **Consumer responsibilities when `serverSide` is true:**
+     * - Pass `sorting` + `onSortingChange` to control sort state and re-fetch on change.
+     * - Pass `pagination` with server-provided `totalCount` and handle `onPageChange`/`onPageSizeChange` to re-fetch the correct page.
+     * - Pass pre-sorted, pre-filtered `data` for the current page only (not the full dataset).
+     * - Set `loading` to `true` while fetching so skeletons/overlay display correctly.
+     *
+     * DataTable still renders headers, selection, column visibility, and the pagination UI;
+     * it simply delegates the data-processing logic to the consumer's fetch layer.
+     */
     readonly serverSide?: boolean;
     /** Escape hatch for advanced `@tanstack/react-table` options (e.g. `meta`, `initialState`). */
     readonly tableOptions?: Partial<TableOptions<TData>>;
 }
-declare function DataTable<TData>({ columns: userColumns, data, selectionMode, onSelectionChange, bulkActions, sorting: sortingProp, onSortingChange: onSortingChangeProp, emptyMessage, enableColumnVisibility, enableColumnResizing, stickyHeader, loading: loadingProp, loadingDelay, skeletonCount, className, toolbar, footer, serverSide, tableOptions, }: DataTableProps<TData>): import("react").JSX.Element;
+declare function DataTable<TData>({ columns: userColumns, data, selectionMode, onSelectionChange, bulkActions, sorting: sortingProp, onSortingChange: onSortingChangeProp, emptyMessage, enableColumnVisibility, enableColumnResizing, stickyHeader, loading: loadingProp, loadingDelay, skeletonCount, className, 'aria-label': ariaLabel, toolbar, pagination, footer, serverSide, tableOptions, }: DataTableProps<TData>): import("react").JSX.Element;
 export { DataTable };
-export type { DataTableProps };
+export type { DataTablePaginationConfig, DataTableProps };
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/composed/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,UAAU,EAGf,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;AAmB1F,UAAU,cAAc,CAAC,KAAK;IAC5B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACrD,wGAAwG;IACxG,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,+FAA+F;IAC/F,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACpD,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAC1C,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,yGAAyG;IACzG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,iGAAiG;IACjG,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,+FAA+F;IAC/F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD;AAqCD,iBAAS,SAAS,CAAC,KAAK,EAAE,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,aAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,eAAe,EAAE,mBAAmB,EACpC,YAA4B,EAC5B,sBAAsB,EACtB,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,YAAkB,EAClB,aAAiB,EACjB,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,EACV,YAAY,GACb,EAAE,cAAc,CAAC,KAAK,CAAC,+BAiMvB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,UAAU,EAGf,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;AAqB1F,UAAU,yBAAyB;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,iCAAiC;IACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CACrC;AAED,UAAU,cAAc,CAAC,KAAK;IAC5B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACrD,wGAAwG;IACxG,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,0HAA0H;IAC1H,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,uHAAuH;IACvH,QAAQ,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACpD,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAC1C,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,0FAA0F;IAC1F,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,yGAAyG;IACzG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,iGAAiG;IACjG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IAChD,wHAAwH;IACxH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,+FAA+F;IAC/F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;CACtD;AAqCD,iBAAS,SAAS,CAAC,KAAK,EAAE,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,aAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,eAAe,EAAE,mBAAmB,EACpC,YAA4B,EAC5B,sBAAsB,EACtB,oBAAoB,EACpB,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,YAAkB,EAClB,aAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,UAAU,EACV,MAAM,EACN,UAAU,EACV,YAAY,GACb,EAAE,cAAc,CAAC,KAAK,CAAC,+BAwOvB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,CAAC"}

package/dist/composed/DataTable/cells.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+/**
+ * Shared cell renderers for DataTable columns.
+ * Use these in `ColumnDef.cell` to maintain consistent column styling across all tables.
+ */
+interface DateCellProps {
+    /** ISO date string or Date object */
+    readonly value: string | Date | null | undefined;
+    /** Display format: 'relative' shows "2h ago", 'absolute' shows full date. @default 'relative' */
+    readonly format?: 'relative' | 'absolute';
+}
+declare function DateCell({ value, format }: DateCellProps): import("react").JSX.Element;
+interface BadgeCellProps {
+    readonly value: string | null | undefined;
+    readonly variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'highlight';
+    readonly icon?: ReactNode;
+}
+declare function BadgeCell({ value, variant, icon }: BadgeCellProps): import("react").JSX.Element;
+interface MonoCellProps {
+    readonly value: string | null | undefined;
+    /** Maximum visible characters before truncation. @default 32 */
+    readonly maxLength?: number;
+}
+declare function MonoCell({ value, maxLength }: MonoCellProps): import("react").JSX.Element;
+interface CopyableCellProps {
+    readonly value: string | null | undefined;
+    /** Maximum visible characters before truncation. @default 24 */
+    readonly maxLength?: number;
+}
+declare function CopyableCell({ value, maxLength }: CopyableCellProps): import("react").JSX.Element;
+interface TruncatedCellProps {
+    readonly value: string | null | undefined;
+    readonly className?: string;
+}
+declare function TruncatedCell({ value, className }: TruncatedCellProps): import("react").JSX.Element;
+export { BadgeCell, CopyableCell, DateCell, MonoCell, TruncatedCell };
+export type { BadgeCellProps, CopyableCellProps, DateCellProps, MonoCellProps, TruncatedCellProps };
+//# sourceMappingURL=cells.d.ts.map

package/dist/composed/DataTable/cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/cells.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;GAGG;AAIH,UAAU,aAAa;IACrB,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,iGAAiG;IACjG,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CAC3C;AA2BD,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAmB,EAAE,EAAE,aAAa,+BAqB9D;AAID,UAAU,cAAc;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7G,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,OAAmB,EAAE,IAAI,EAAE,EAAE,cAAc,+BAwBtE;AAID,UAAU,aAAa;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,EAAE,aAAa,+BAsBzD;AAID,UAAU,iBAAiB;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,EAAE,iBAAiB,+BA0CjE;AAID,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAiB9D;AAED,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/composed/DataTable/index.d.ts

@@ -1,6 +1,8 @@
 export { DataTable } from './DataTable';
-export type { DataTableProps } from './DataTable';
+export type { DataTablePaginationConfig, DataTableProps } from './DataTable';
 export { DataTableColumnHeader } from './DataTableColumnHeader';
 export type { DataTableColumnHeaderProps } from './DataTableColumnHeader';
 export { DataTableViewOptions } from './DataTableViewOptions';
+export { BadgeCell, CopyableCell, DateCell, MonoCell, TruncatedCell } from './cells';
+export type { BadgeCellProps, CopyableCellProps, DateCellProps, MonoCellProps, TruncatedCellProps } from './cells';
 //# sourceMappingURL=index.d.ts.map

package/dist/composed/DataTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/composed/DataTableEmptyState/DataTableEmptyState.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+interface DataTableEmptyStateBaseProps {
+    /** Contextual icon (from Lucide or similar). Rendered inside EmptyMedia. */
+    readonly icon?: ReactNode;
+    readonly title: string;
+    readonly description: string;
+    readonly className?: string;
+}
+interface DataTableEmptyStateFirstUseProps extends DataTableEmptyStateBaseProps {
+    readonly variant: 'first-use';
+    /** Primary CTA (e.g. "Create API" button). */
+    readonly primaryAction?: ReactNode;
+    /** Secondary action (e.g. link to docs or import flow). */
+    readonly secondaryAction?: ReactNode;
+    /**
+     * Rich educational content rendered between the description and actions.
+     * Use for feature pillars, flow diagrams, before/after comparisons, etc.
+     */
+    readonly children?: ReactNode;
+}
+interface DataTableEmptyStateNoResultsProps extends DataTableEmptyStateBaseProps {
+    readonly variant: 'no-results';
+    /** Recovery action (e.g. "Clear filters" button). */
+    readonly action?: ReactNode;
+    readonly children?: never;
+    readonly primaryAction?: never;
+    readonly secondaryAction?: never;
+}
+type DataTableEmptyStateProps = DataTableEmptyStateFirstUseProps | DataTableEmptyStateNoResultsProps;
+declare function DataTableEmptyState(props: DataTableEmptyStateProps): import("react").JSX.Element;
+export { DataTableEmptyState };
+export type { DataTableEmptyStateProps };
+//# sourceMappingURL=DataTableEmptyState.d.ts.map

package/dist/composed/DataTableEmptyState/DataTableEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableEmptyState.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTableEmptyState/DataTableEmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,UAAU,4BAA4B;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,gCAAiC,SAAQ,4BAA4B;IAC7E,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,8CAA8C;IAC9C,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,UAAU,iCAAkC,SAAQ,4BAA4B;IAC9E,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,qDAAqD;IACrD,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAC/B,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC;CAClC;AAED,KAAK,wBAAwB,GAAG,gCAAgC,GAAG,iCAAiC,CAAC;AAErG,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BAuC3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/composed/DataTableEmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTableEmptyState } from './DataTableEmptyState';
+export type { DataTableEmptyStateProps } from './DataTableEmptyState';
+//# sourceMappingURL=index.d.ts.map

package/dist/composed/DataTableEmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/DataTableEmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export * from './composed/ContentHeader';
 export * from './composed/CopyableText';
 export { buildLinearBreadcrumbs, type LinearBreadcrumbNavigate, type LinearBreadcrumbSegment, } from './lib/breadcrumbs/buildLinearBreadcrumbs';
 export * from './composed/DataTable';
+export * from './composed/DataTableEmptyState';
 export * from './composed/DataTablePagination';
 export * from './composed/DatePicker';
 export * from './composed/FacetedFilter';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}