@bfrs/agentic-components 0.3.9 → 0.4.1

package/BFRS_AGENTIC_COMPONENTS.md

@@ -142,8 +142,11 @@ Use native Angular DOM event bindings for interactions. Do not pass React-style
 Registered tags cover the documented component surface, including
 `bfrs-button-group`, `bfrs-toast-provider`, `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
-`bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
+`bfrs-table-row-actions`, `bfrs-table-bulk-actions`,
 `bfrs-table-column-visibility`, and `bfrs-table-save-view` in addition to the existing component tags.
+Primitive table building blocks `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`,
+`bfrs-tr`, `bfrs-th`, and `bfrs-td` are also registered for custom layouts where `bfrs-data-table`
+is too prescriptive.
 Existing form and pattern tags include `bfrs-date-range-picker`,
 `bfrs-multi-select`, `bfrs-horizontal-stepper`, `bfrs-step-progress-card`, `bfrs-data-table`,
 `bfrs-modal`, `bfrs-tabs`, and the rest of the documented `bfrs-*` surface.
@@ -2412,6 +2415,121 @@ Step-by-step progress indicator. Calculates `done` / `active` / `pending` state
 
 ---
 
+## Table / Thead / Tbody / Tfoot / Tr / Th / Td
+
+Primitive table components with DataTable-matching styles, density support, and row hover effects. Use these for custom layouts where `DataTable` is too prescriptive.
+
+### React
+
+```tsx
+import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "@bfrs/agentic-components";
+
+<Table density="compact" sticky aria-label="Orders">
+  <Thead sticky>
+    <Tr>
+      <Th>Order</Th>
+      <Th align="right">Amount</Th>
+      <Th>Status</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    {orders.map((order) => (
+      <Tr key={order.id} onClick={() => navigate(`/orders/${order.id}`)}>
+        <Td>{order.id}</Td>
+        <Td align="right">₹{order.amount}</Td>
+        <Td>{order.status}</Td>
+      </Tr>
+    ))}
+  </Tbody>
+  <Tfoot>
+    <Tr>
+      <Th colSpan={2}>Total</Th>
+      <Th align="right">₹{total}</Th>
+    </Tr>
+  </Tfoot>
+</Table>
+```
+
+#### Table props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `density` | `"compact" \| "default" \| "comfortable"` | `"default"` | Cell padding density — propagates to Th/Td via React context |
+| `maxHeight` | `string \| number` | — | Enables vertical scrolling at this height |
+| `minWidth` | `string \| number` | — | Minimum table width (useful for fixed-layout tables) |
+| `className` | `string` | — | Applied to the outer border wrapper |
+| `tableClassName` | `string` | — | Applied to the `<table>` element |
+| `aria-label` | `string` | `"Table"` | Accessibility label |
+| `children` | `ReactNode` | — | `Thead`, `Tbody`, `Tfoot` elements |
+
+#### Thead props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sticky` | `boolean` | `false` | Sticks the header at the top of the scroll container |
+| `className` | `string` | — | Extra class on `<thead>` |
+
+#### Tr props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `() => void` | — | Row click handler; adds `cursor-pointer` automatically |
+| `className` | `string` | — | Extra class on `<tr>` |
+
+#### Th props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `"left" \| "center" \| "right"` | `"left"` | Text alignment |
+| `colSpan` | `number` | — | HTML colspan |
+| `className` | `string` | — | Extra class on `<th>` |
+
+#### Td props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `"left" \| "center" \| "right"` | `"left"` | Text alignment |
+| `colSpan` | `number` | — | HTML colspan |
+| `className` | `string` | — | Extra class on `<td>` |
+
+### Angular (custom elements)
+
+Custom elements: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`.
+
+`bfrs-table` propagates `density` to all descendant `bfrs-th` and `bfrs-td` elements automatically. Row hover transitions the background color of all `bfrs-td` children via JavaScript events.
+
+```html
+<bfrs-table density="compact" max-height="400px" aria-label="Orders">
+  <bfrs-thead sticky>
+    <bfrs-tr>
+      <bfrs-th>Order</bfrs-th>
+      <bfrs-th align="right">Amount</bfrs-th>
+      <bfrs-th>Status</bfrs-th>
+    </bfrs-tr>
+  </bfrs-thead>
+  <bfrs-tbody>
+    <bfrs-tr *ngFor="let order of orders" (click)="navigate(order.id)">
+      <bfrs-td>{{ order.id }}</bfrs-td>
+      <bfrs-td align="right">₹{{ order.amount }}</bfrs-td>
+      <bfrs-td>{{ order.status }}</bfrs-td>
+    </bfrs-tr>
+  </bfrs-tbody>
+</bfrs-table>
+```
+
+| Attribute | Element | Description |
+|-----------|---------|-------------|
+| `density` | `bfrs-table` | `"compact"`, `"default"`, or `"comfortable"` — propagated to all th/td |
+| `max-height` | `bfrs-table` | CSS max-height for scroll container |
+| `min-width` | `bfrs-table` | CSS min-width on the table |
+| `aria-label` | `bfrs-table` | Accessibility label |
+| `sticky` | `bfrs-thead` | Boolean — sticks header at scroll top |
+| `on-click` | `bfrs-tr` | Boolean marker — adds `cursor-pointer` styling. Use Angular `(click)` binding for the actual event handler |
+| `align` | `bfrs-th`, `bfrs-td` | `"left"`, `"center"`, or `"right"` |
+| `density` | `bfrs-th`, `bfrs-td` | Override density per cell (set explicitly; overrides table propagation) |
+
+---
+
 ## What NOT to do
 
 - Do not use raw Tailwind classes for spacing, color, or typography — use `Stack`, `Text`, and component props instead

package/README.md

@@ -260,9 +260,12 @@ DataTable also accepts declarative `leadingColumn`, `rowActions`,
 The standalone helpers are available as `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
 `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
-`bfrs-table-column-visibility`.
+`bfrs-table-column-visibility`, plus `bfrs-table-save-view`.
+For custom Angular table layouts where `bfrs-data-table` is too prescriptive,
+use the primitive table tags: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`,
+`bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, and `bfrs-td`.
 
-Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
+Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-table-save-view`, `bfrs-data-table`, `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
 
 `HorizontalStepper` provides the compact horizontal flow layout with an optional announcement banner and parent-owned `onClose` / `onStepSelect` behavior:
 

package/dist/components/data-display/Table/Table.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { TableDensity } from '../DataTable/DataTable.types';
+export interface TableProps {
+    children?: ReactNode;
+    density?: TableDensity;
+    minWidth?: number | string;
+    maxHeight?: number | string;
+    className?: string;
+    tableClassName?: string;
+    "aria-label"?: string;
+}
+export declare function Table({ children, density, minWidth, maxHeight, className, tableClassName, "aria-label": ariaLabel }: TableProps): import("react/jsx-runtime").JSX.Element;
+export interface TheadProps {
+    children?: ReactNode;
+    sticky?: boolean;
+    className?: string;
+}
+export declare function Thead({ children, sticky, className }: TheadProps): import("react/jsx-runtime").JSX.Element;
+export interface TbodyProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Tbody({ children, className }: TbodyProps): import("react/jsx-runtime").JSX.Element;
+export interface TfootProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Tfoot({ children, className }: TfootProps): import("react/jsx-runtime").JSX.Element;
+export interface TrProps {
+    children?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function Tr({ children, onClick, className }: TrProps): import("react/jsx-runtime").JSX.Element;
+export interface ThProps {
+    children?: ReactNode;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+    className?: string;
+}
+export declare function Th({ children, align, colSpan, className }: ThProps): import("react/jsx-runtime").JSX.Element;
+export interface TdProps {
+    children?: ReactNode;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+    className?: string;
+}
+export declare function Td({ children, align, colSpan, className }: TdProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/Table/index.d.ts

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/ui/index.d.ts

@@ -51,6 +51,7 @@ export * from '../overlays/ConfirmDialog';
 export * from './data-display/Avatar';
 export * from '../data-display/MetricCard';
 export * from '../data-display/DataTable';
+export * from '../data-display/Table';
 export * from './data-display/KpiCard';
 export * from './navigation/Tabs';
 export * from './navigation/Breadcrumbs';

package/dist/custom-elements.d.ts

@@ -654,6 +654,52 @@ export declare class BfrsTabsElement extends ValueCustomElement {
     disconnectedCallback(): void;
     protected renderElement(): unknown;
 }
+export declare class BfrsTableElement extends ReactCustomElement {
+    static readonly tagName = "table";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTheadElement extends ReactCustomElement {
+    static readonly tagName = "thead";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTbodyElement extends ReactCustomElement {
+    static readonly tagName = "tbody";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTfootElement extends ReactCustomElement {
+    static readonly tagName = "tfoot";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTrElement extends ReactCustomElement {
+    static readonly tagName = "tr";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    private readonly _onHoverIn;
+    private readonly _onHoverOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderElement(): unknown;
+}
+export declare class BfrsThElement extends ReactCustomElement {
+    static readonly tagName = "th";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTdElement extends ReactCustomElement {
+    static readonly tagName = "td";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare class BfrsBreadcrumbsElement extends ReactCustomElement {
     static readonly tagName = "breadcrumbs";
     static get observedAttributes(): string[];
@@ -896,6 +942,7 @@ declare global {
         "bfrs-suggest-input": BfrsSuggestInputElement;
         "bfrs-summary-bar": BfrsSummaryBarElement;
         "bfrs-switch": BfrsSwitchElement;
+        "bfrs-table": BfrsTableElement;
         "bfrs-table-pagination": BfrsTablePaginationElement;
         "bfrs-table-toolbar": BfrsTableToolbarElement;
         "bfrs-table-empty-state": BfrsTableEmptyStateElement;
@@ -909,7 +956,13 @@ declare global {
         "bfrs-tabs-list": BfrsTabsListElement;
         "bfrs-tabs-trigger": BfrsTabsTriggerElement;
         "bfrs-tabs-content": BfrsTabsContentElement;
+        "bfrs-tbody": BfrsTbodyElement;
+        "bfrs-td": BfrsTdElement;
         "bfrs-text": BfrsTextElement;
+        "bfrs-tfoot": BfrsTfootElement;
+        "bfrs-th": BfrsThElement;
+        "bfrs-thead": BfrsTheadElement;
+        "bfrs-tr": BfrsTrElement;
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
         "bfrs-toast-provider": BfrsToastProviderElement;