@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Table/table.stylex.js

@@ -0,0 +1,94 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file table.stylex.ts
+ * @input StyleX, theme tokens
+ * @output Shared table styles used by TableCell, TableHeaderCell, TableRow
+ * @position Utility styles; consumed by cell and row components
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/TableCell.tsx
+ * - /packages/core/src/Table/TableHeaderCell.tsx
+ * - /packages/core/src/Table/TableRow.tsx
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+
+/**
+ * Scoped marker for table row ancestor selectors.
+ *
+ * Applied to each `<tr>` via TableRow so that cell-level
+ * `stylex.when.ancestor(':last-child', tableRowMarker)` only matches
+ * the parent row — not other ancestors like `<tbody>` or `<table>`.
+ */
+export const tableRowMarker = {
+  x139im0d: "x139im0d",
+  $$css: true
+};
+
+/**
+ * Overflow truncation for table cells.
+ *
+ * Applied at the <td>/<th> level when textOverflow is 'truncate'.
+ * For data-driven tables in truncate mode, the default renderer wraps
+ * content in <Text maxLines={1}> for smart tooltips that only appear
+ * when text is actually overflowing.
+ */
+export const overflowStyles = {
+  cell: {
+    kVQacm: "xb3r6kr",
+    kg5iWk: "xlyipyv",
+    khDVqt: "xuxw1ft",
+    ks0D6T: "x1m189uc",
+    $$css: true
+  }
+};
+
+/**
+ * Wrap styles for table cells.
+ *
+ * Applied at the <td>/<th> level when textOverflow is 'wrap'.
+ * Text wraps naturally and the row grows taller to fit. No content is hidden.
+ */
+export const wrapStyles = {
+  cell: {
+    kVQacm: "xb3r6kr",
+    kHjlTd: "x1mzt3pk",
+    kTgw9: "x13faqbe",
+    ks0D6T: "x1m189uc",
+    $$css: true
+  }
+};
+
+/**
+ * Container edge compensation for table cells.
+ *
+ * When a table is inside a Card, Section, or Layout area, the table
+ * element applies negative inline margins to bleed edge-to-edge
+ * (see Table.tsx containerBleed style). These styles ensure the
+ * first and last columns' outer padding aligns with the container's
+ * content inset, with a minimum of --spacing-2 (8px).
+ *
+ * Each density variant uses its own paddingInline as the fallback,
+ * so standalone tables (where --container-padding-inline-start/end are unset)
+ * keep their normal density-based cell padding unchanged.
+ */
+export const containerEdgeStyles = {
+  compact: {
+    kZCmMZ: "x5uh4xs",
+    kwRFfy: "xbg7gas",
+    $$css: true
+  },
+  balanced: {
+    kZCmMZ: "x9bi00s",
+    kwRFfy: "xpilulx",
+    $$css: true
+  },
+  spacious: {
+    kZCmMZ: "x18c6q21",
+    kwRFfy: "x1wzlfcn",
+    $$css: true
+  }
+};

package/dist/Table/types.d.ts

@@ -0,0 +1,352 @@
+/**
+ * @file types.ts
+ * @input None (pure type definitions)
+ * @output Exports base Table interfaces: column, render props, plugin, BaseTableProps
+ * @position Type foundation; consumed by BaseTable and extended by Table
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/Table.doc.mjs (type descriptions)
+ * - /packages/core/src/Table/index.ts (exports if types change)
+ */
+import type React from 'react';
+import type { ComponentType, HTMLAttributes, Ref, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
+import type { StyleXStyles } from '../theme/types';
+import type { BaseProps } from '../BaseProps';
+import type { TableFilterFieldRef } from './plugins/filtering/useTableFiltering';
+/**
+ * A proportional (fr-like) column width.
+ * Use the `proportional()` helper to create.
+ */
+export interface ProportionalWidth {
+    type: 'proportional';
+    value: number;
+    /** Minimum width in pixels. Prevents the column from shrinking below this size. */
+    minWidth?: number;
+}
+/**
+ * A fixed pixel column width.
+ * Use the `pixel()` helper to create.
+ */
+export interface PixelWidth {
+    type: 'pixel';
+    value: number;
+}
+/** Column width — either proportional or fixed pixel */
+export type ColumnWidth = ProportionalWidth | PixelWidth;
+/**
+ * Sortable column configuration.
+ * Added to TableColumn<T> via the `sortable` field.
+ */
+export interface TableSortableColumnConfig {
+    /**
+     * The sort key for this column. Must match a key used in TableSortState.
+     * Allows decoupling column identity from sort identity (e.g., a "Full Name"
+     * column might sort by `'lastName'`).
+     *
+     * @default column.key — if omitted, uses the column's `key` property
+     */
+    sortKey?: string;
+}
+/**
+ * Horizontal text alignment for a table column.
+ * Applied to both the `<th>` and `<td>` elements.
+ *
+ * @default 'start'
+ */
+export type TableColumnAlign = 'start' | 'center' | 'end';
+/**
+ * Vertical alignment for table body row cells.
+ * Controls `vertical-align` on `<td>` elements.
+ *
+ * @default 'middle'
+ */
+export type TableVerticalAlign = 'middle' | 'top' | 'bottom';
+/**
+ * Column definition for data-driven table rendering.
+ *
+ * @template T - The row data type
+ */
+export interface TableColumn<T extends Record<string, unknown>> {
+    /** Unique key identifying this column. Used as React key and to access data. */
+    key: string;
+    /** Header text displayed in `<th>`. Defaults to capitalized `key`. */
+    header?: ReactNode;
+    /**
+     * Column width. Use `proportional()` for flexible columns or `pixel()` for fixed.
+     *
+     * - `proportional(1)` — shares space equally with other proportional columns.
+     *   Enforces a 120px minimum width to prevent squishing on narrow viewports.
+     * - `proportional(2)` — gets twice the space of `proportional(1)`.
+     * - `pixel(200)` — fixed 200px width.
+     * - Omitted — treated as `proportional(1)` for distribution, but with **no**
+     *   minimum width. Prefer explicit `proportional(1)` for text-heavy columns
+     *   so they don't collapse on mobile.
+     *
+     * @example
+     * ```
+     * { key: 'name', header: 'Name', width: proportional(1) }
+     * { key: 'bio', header: 'Bio', width: proportional(2) }
+     * { key: 'age', header: 'Age', width: pixel(80) }
+     * ```
+     */
+    width?: ColumnWidth;
+    /**
+     * Horizontal text alignment for this column.
+     * Applied to both the header `<th>` and body `<td>` cells.
+     *
+     * @default 'start'
+     *
+     * @example
+     * ```
+     * // Right-align a numeric column
+     * { key: 'amount', header: 'Amount', align: 'end' }
+     *
+     * // Center-align a status column
+     * { key: 'status', header: 'Status', align: 'center' }
+     * ```
+     */
+    align?: TableColumnAlign;
+    /**
+     * Sortable configuration for this column.
+     * Set to `true` for default behavior (sortKey = column.key),
+     * or provide an object with a custom sortKey.
+     * Omit or set to `undefined`/`false` to make the column non-sortable.
+     *
+     * @example
+     * ```
+     * // Simple: sort key matches column key
+     * { key: 'name', header: 'Name', sortable: true }
+     *
+     * // Custom sort key
+     * { key: 'fullName', header: 'Full Name', sortable: { sortKey: 'lastName' } }
+     * ```
+     */
+    /**
+     * Whether this column can be resized by dragging its header border.
+     * Defaults to `true`. Set to `false` to lock the column width.
+     *
+     * @example
+     * ```
+     * // Non-resizable fixed column
+     * { key: 'actions', header: '', width: pixel(48), resizable: false }
+     * ```
+     */
+    resizable?: boolean;
+    sortable?: boolean | TableSortableColumnConfig;
+    /**
+     * Filter configuration for this column.
+     *
+     * References a field in the shared `PowerSearchConfig` passed to
+     * `useTableFiltering`. The plugin resolves the operator's value
+     * type and renders the matching control.
+     *
+     * Accepts:
+     * - **Field key** — `'status'` — uses the field's `defaultOperator`
+     * - **Field ref** — `{ field: 'status', operator: 'is_not' }` — explicit operator
+     *
+     * @example
+     * ```
+     * // Field key (uses defaultOperator)
+     * { key: 'status', header: 'Status', filter: 'status' }
+     *
+     * // Field + explicit operator
+     * { key: 'status', header: 'Status', filter: { field: 'status', operator: 'is_not' } }
+     * ```
+     */
+    filter?: TableFilterFieldRef | string;
+    /**
+     * Custom cell renderer. Receives the row item and returns rich JSX content.
+     * Defaults to `String(item[key])` — use renderCell for rich content like
+     * badges, status dots, formatted text, icons, or composed layouts.
+     *
+     * @compositionHint Use renderCell to compose rich table cells:
+     * - Badge for status labels (success/warning/error variants)
+     * - StatusDot for colored indicators
+     * - Text with color="success"|"error" for formatted values
+     * - HStack to combine multiple elements in a cell
+     * - Avatar for user/entity cells
+     *
+     * @example
+     * ```tsx
+     * renderCell: (item) => (
+     *   <HStack gap={2} align="center">
+     *     <StatusDot status={item.isActive ? 'success' : 'error'} />
+     *     <Badge variant={item.isActive ? 'success' : 'error'} label={item.isActive ? 'Active' : 'Inactive'} />
+     *   </HStack>
+     * )
+     * ```
+     */
+    renderCell?: (item: T) => ReactNode;
+}
+/** Props passed through the plugin pipeline for the `<table>` element */
+export interface TableRenderProps {
+    htmlProps: HTMLAttributes<HTMLTableElement>;
+    styles: StyleXStyles[];
+}
+/** Props passed through the plugin pipeline for the header `<tr>` */
+export interface HeaderRowRenderProps {
+    htmlProps: HTMLAttributes<HTMLTableRowElement>;
+    styles: StyleXStyles[];
+    children: ReactNode;
+}
+/**
+ * Props passed through the plugin pipeline for each `<th>`.
+ *
+ * Uses named slots so multiple plugins can contribute content without
+ * conflicts. Each plugin writes to its own slot; BaseTable renders
+ * them in order: `before | content | after`, with `overlay` positioned
+ * absolutely on top and `below` underneath the header row.
+ *
+ * Slot semantics:
+ * - **before** — content before the label (e.g. selection checkbox)
+ * - **content** — the header label; plugins may wrap (e.g. sort button)
+ * - **after** — content after the label (e.g. sort icon, filter icon)
+ * - **overlay** — absolutely positioned layer (e.g. resize handle)
+ * - **below** — content below the header label row (e.g. inline filter controls)
+ */
+export interface HeaderCellRenderProps {
+    htmlProps: ThHTMLAttributes<HTMLTableCellElement>;
+    styles: StyleXStyles[];
+    /** Content rendered before the header label. */
+    before?: ReactNode;
+    /** The header label content. Initialized from `column.header ?? column.key`. Plugins may wrap or replace. */
+    content?: ReactNode;
+    /** Content rendered after the header label (e.g. sort icon, filter trigger). */
+    after?: ReactNode;
+    /** Absolutely positioned overlay content (e.g. resize handle). */
+    overlay?: ReactNode;
+    /** Content rendered below the header label row (e.g. inline filter controls). */
+    below?: ReactNode;
+}
+/** Props passed through the plugin pipeline for each body `<tr>` */
+export interface BodyRowRenderProps {
+    htmlProps: HTMLAttributes<HTMLTableRowElement>;
+    styles: StyleXStyles[];
+    children: ReactNode;
+    /** Ref for the `<tr>` element. Plugins can set this to access the row DOM node. */
+    ref?: Ref<HTMLTableRowElement>;
+}
+/** Props passed through the plugin pipeline for each body `<td>` */
+export interface BodyCellRenderProps {
+    htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
+    styles: StyleXStyles[];
+}
+/**
+ * Table plugin — transforms render props at each structural level.
+ * Plugins compose by sequential application (first plugin's output feeds next).
+ *
+ * ## Pipeline order
+ *
+ * 1. `transformColumns` — filter, reorder, or inject columns before rendering
+ * 2. `transformTable` — transform the root `<table>` element props
+ * 3. `transformHeaderRow` — transform the header `<tr>` props
+ * 4. `transformHeaderCell` — transform each `<th>` props
+ * 5. `transformBodyRow` — transform each body `<tr>` props
+ * 6. `transformBodyCell` — transform each body `<td>` props
+ * 7. `transformTableContext` — wrap the table output in context providers
+ */
+export interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown>> {
+    /**
+     * Transform the column definitions before rendering.
+     * Runs before any element-level transforms. Use to filter, reorder,
+     * or inject synthetic columns (e.g. a selection checkbox column).
+     */
+    transformColumns?: (columns: TableColumn<T>[]) => TableColumn<T>[];
+    /** Transform the root `<table>` element props */
+    transformTable?: (props: TableRenderProps) => TableRenderProps;
+    /** Transform the header `<tr>` props */
+    transformHeaderRow?: (props: HeaderRowRenderProps) => HeaderRowRenderProps;
+    /** Transform each `<th>` props */
+    transformHeaderCell?: (props: HeaderCellRenderProps, column: TableColumn<T>) => HeaderCellRenderProps;
+    /** Transform each body `<tr>` props */
+    transformBodyRow?: (props: BodyRowRenderProps, item: T, index: number) => BodyRowRenderProps;
+    /** Transform each body `<td>` props */
+    transformBodyCell?: (props: BodyCellRenderProps, column: TableColumn<T>, item: T) => BodyCellRenderProps;
+    /** Wrap the table output in context providers */
+    transformTableContext?: (children: ReactNode) => ReactNode;
+}
+/** Props for row components used in the components prop */
+export interface TableRowComponentProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Ref forwarded to the root `<tr>` element */
+    ref?: Ref<HTMLTableRowElement>;
+    children: ReactNode;
+    xstyle?: StyleXStyles[];
+}
+/** Props for cell components used in the components prop */
+export interface TableCellComponentProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+    xstyle?: StyleXStyles | StyleXStyles[];
+}
+/** Props for header cell components used in the components prop */
+export interface TableHeaderCellComponentProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+    xstyle?: StyleXStyles | StyleXStyles[];
+}
+/**
+ * Props for the unstyled BaseTable component.
+ *
+ * @template T - The row data type
+ */
+export interface BaseTableProps<T extends Record<string, unknown>> extends BaseProps<HTMLTableElement> {
+    ref?: React.Ref<HTMLTableElement>;
+    /** Array of data items to render as rows */
+    data?: T[];
+    /** Column definitions. If omitted, auto-generated from data keys. */
+    columns?: TableColumn<T>[];
+    /**
+     * Row key for React reconciliation.
+     * - `string` — property name to use as key (e.g. `"id"`), must be a key of `T`
+     * - `function` — custom extractor (e.g. `(item) => item.id`)
+     * - omitted — falls back to row index
+     */
+    idKey?: (keyof T & string) | ((item: T) => string | number);
+    /** Plugins to transform render props at each level */
+    plugins?: TablePlugin<T>[];
+    /** Children mode — render `<tr>`/`<td>` directly instead of data-driven */
+    children?: ReactNode;
+    /** Additional HTML attributes for the `<table>` element */
+    tableProps?: HTMLAttributes<HTMLTableElement>;
+    /**
+     * Optional wrapper rendered around the `<table>` element, inside the
+     * plugin `transformTableContext` layer. Used by `Table` to add a
+     * horizontal scroll container so plugin chrome (pagination, toolbars)
+     * stays outside the scrollable area.
+     */
+    scrollWrapper?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /**
+     * How default-rendered body cell text behaves when it exceeds column width.
+     *
+     * - `'wrap'` (default) — text wraps and the row grows taller
+     * - `'truncate'` — text is clipped with an ellipsis; default-rendered cells
+     *   show a tooltip on hover when truncated
+     *
+     * Only affects cells using the default renderer (no `renderCell`).
+     * Cells with `renderCell` control their own overflow behavior.
+     *
+     * @default 'wrap'
+     */
+    textOverflow?: 'wrap' | 'truncate';
+    /**
+     * Content displayed when `data` is an empty array.
+     * Rendered as a full-width row spanning all columns.
+     *
+     * - **Omit or `undefined`** — renders a default compact "No data" empty state
+     * - **`ReactNode`** — renders your custom content (e.g. `<EmptyState>`)
+     * - **`false`** — disables the empty state entirely (renders empty `<tbody>`)
+     *
+     * @default <EmptyState title="No data" isCompact />
+     *
+     * @example
+     * ```
+     * <Table
+     *   data={filteredUsers}
+     *   columns={columns}
+     *   emptyState={<EmptyState title="No results" description="Try adjusting your filters." />}
+     * />
+     * ```
+     */
+    emptyState?: ReactNode | false;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,GAAG,EACH,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uCAAuC,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAMzD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAM1D;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAM7D;;;;GAIG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;;;;;;;;;;;;OAcG;IACH;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;IAC/C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC;IACtC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACrC;AAMD,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC/C,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAClD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,oEAAoE;AACpE,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC/C,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED,oEAAoE;AACpE,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAClD,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAE3D;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACnE,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,oBAAoB,CAAC;IAC3E,kCAAkC;IAClC,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KACnB,qBAAqB,CAAC;IAC3B,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,kBAAkB,EACzB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,KACV,kBAAkB,CAAC;IACxB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,mBAAmB,EAC1B,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,IAAI,EAAE,CAAC,KACJ,mBAAmB,CAAC;IACzB,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CAC5D;AAMD,2DAA2D;AAC3D,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACjF,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,4DAA4D;AAC5D,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAED,mEAAmE;AACnE,MAAM,WAAW,6BAA8B,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC3F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAMD;;;;GAIG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACjC,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,qEAAqE;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;IAC5D,sDAAsD;IACtD,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC,CAAC,CAAC;IACrD;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC;;;;;;;;;;;;;;;;;;OAkBG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;CAChC"}

package/dist/Table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Table/useBaseTablePlugins.d.ts

@@ -0,0 +1,22 @@
+import type { TablePlugin } from './types';
+/**
+ * Converts a named plugin record (`Record<string, TablePlugin>`) to a stable
+ * memoized array for `BaseTable`. Compares plugin values by identity so
+ * that inline `plugins={{ selection: stablePlugin }}` doesn't break row
+ * memoization — only produces a new array when a plugin value actually changes.
+ *
+ * Plugins are sorted into a canonical order (see PLUGIN_ORDER) so that
+ * interactions between first-party plugins are deterministic.
+ *
+ * @param basePlugins - Stable array of built-in plugins (e.g. Astryx style plugin)
+ * @param userPlugins - Named plugin record from the consumer
+ * @returns Stable array of plugins suitable for BaseTable
+ *
+ * @example
+ * ```
+ * const plugins = useBaseTablePlugins([tablePlugin], userPlugins);
+ * <BaseTable plugins={plugins} ... />
+ * ```
+ */
+export declare function useBaseTablePlugins<T extends Record<string, unknown>>(basePlugins: TablePlugin<T>[], userPlugins: Record<string, TablePlugin<T>> | undefined): TablePlugin<T>[];
+//# sourceMappingURL=useBaseTablePlugins.d.ts.map

package/dist/Table/useBaseTablePlugins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBaseTablePlugins.d.ts","sourceRoot":"","sources":["../../src/Table/useBaseTablePlugins.ts"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AA4GzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GACtD,WAAW,CAAC,CAAC,CAAC,EAAE,CA2ClB"}

package/dist/Table/useBaseTablePlugins.js

@@ -0,0 +1,186 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useBaseTablePlugins.ts
+ * @input React, types.ts
+ * @output Exports useBaseTablePlugins hook
+ * @position Utility hook; used by Table to convert named plugin records to stable arrays
+ *
+ * ## Plugin Ordering
+ *
+ * First-party plugins are sorted into a canonical order so that plugin
+ * interactions are deterministic regardless of how the consumer writes
+ * their `plugins={{ ... }}` record. Unknown/custom plugin names are
+ * appended after the known set in their original record order.
+ *
+ * Canonical order:
+ *   1. columnSettings — column filtering (future: transformColumns)
+ *   2. sort           — header cell sort controls
+ *   3. selection      — checkbox column + row selection
+ *   4. pagination     — pagination controls around the table
+ *
+ * Rationale:
+ * - columnSettings filters columns before sort/selection see them
+ * - sort adds header cell UI before selection adds its header column
+ * - selection adds its column after sort so the checkbox header
+ *   doesn't get a sort button
+ * - pagination wraps the table in context last (outermost provider)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/index.ts (exports)
+ * - /packages/core/src/Table/Table.tsx (primary consumer)
+ */
+import { useRef } from 'react';
+// ======================================================================// Canonical Plugin Order
+// ======================================================================
+/**
+ * Canonical ordering for first-party plugin names.
+ * Plugins are sorted by their position in this array.
+ * Unknown names are appended after the known set.
+ */
+const PLUGIN_ORDER = ['columnSettings', 'sort', 'selection', 'pagination'];
+
+/** Lookup map for O(1) ordering checks. */
+const PLUGIN_ORDER_MAP = new Map(PLUGIN_ORDER.map((name, index) => [name, index]));
+
+/**
+ * Sort plugin entries into canonical order.
+ * Known plugins are sorted by PLUGIN_ORDER; unknown plugins preserve
+ * their original record insertion order and appear after all known plugins.
+ */
+function sortPluginEntries(entries) {
+  // Sentinel value for unknown plugins — higher than any known index
+  const unknownBase = PLUGIN_ORDER.length;
+  return entries.sort(([a], [b]) => {
+    const orderA = PLUGIN_ORDER_MAP.get(a) ?? unknownBase;
+    const orderB = PLUGIN_ORDER_MAP.get(b) ?? unknownBase;
+
+    // If both are unknown, preserve original order (sort is stable)
+    return orderA - orderB;
+  });
+}
+
+// ======================================================================// Hook
+// ======================================================================
+// Plugin Validation (dev mode only)
+// ======================================================================
+/** Known transform method names on the TablePlugin interface. */
+const VALID_TRANSFORM_KEYS = new Set(['transformColumns', 'transformTable', 'transformHeaderRow', 'transformHeaderCell', 'transformBodyRow', 'transformBodyCell', 'transformTableContext']);
+
+/**
+ * Validate a plugin object in development mode.
+ * Warns about common mistakes like misspelled transform names,
+ * non-function values where functions are expected, or
+ * completely empty plugins that add pipeline overhead for nothing.
+ */
+function validatePlugin(name, plugin) {
+  // Validation always runs — warnings are cheap and help catch plugin bugs
+
+  const keys = Object.keys(plugin);
+
+  // Warn about unknown keys (likely misspelled transform names)
+  for (const key of keys) {
+    if (!VALID_TRANSFORM_KEYS.has(key)) {
+      console.warn(`[Table] Plugin "${name}" has unknown key "${key}". ` + `Valid keys: ${[...VALID_TRANSFORM_KEYS].join(', ')}. ` + `This key will be ignored.`);
+    }
+  }
+
+  // Warn about non-function values on known transform keys
+  for (const key of keys) {
+    if (VALID_TRANSFORM_KEYS.has(key)) {
+      const value = plugin[key];
+      if (value != null && typeof value !== 'function') {
+        console.warn(`[Table] Plugin "${name}" has non-function value for "${key}" ` + `(got ${typeof value}). Transform will be skipped.`);
+      }
+    }
+  }
+
+  // Warn about empty plugins that add pipeline overhead
+  const hasTransforms = keys.some(key => VALID_TRANSFORM_KEYS.has(key) && typeof plugin[key] === 'function');
+  if (!hasTransforms) {
+    console.warn(`[Table] Plugin "${name}" has no transform methods. ` + `It will be included in the pipeline but won't do anything.`);
+  }
+}
+
+/**
+ * Converts a named plugin record (`Record<string, TablePlugin>`) to a stable
+ * memoized array for `BaseTable`. Compares plugin values by identity so
+ * that inline `plugins={{ selection: stablePlugin }}` doesn't break row
+ * memoization — only produces a new array when a plugin value actually changes.
+ *
+ * Plugins are sorted into a canonical order (see PLUGIN_ORDER) so that
+ * interactions between first-party plugins are deterministic.
+ *
+ * @param basePlugins - Stable array of built-in plugins (e.g. Astryx style plugin)
+ * @param userPlugins - Named plugin record from the consumer
+ * @returns Stable array of plugins suitable for BaseTable
+ *
+ * @example
+ * ```
+ * const plugins = useBaseTablePlugins([tablePlugin], userPlugins);
+ * <BaseTable plugins={plugins} ... />
+ * ```
+ */
+export function useBaseTablePlugins(basePlugins, userPlugins) {
+  const prevRef = useRef(null);
+
+  // Check if we can reuse the previous result
+  if (prevRef.current != null) {
+    const prev = prevRef.current;
+
+    // Fast path: same references
+    if (prev.basePlugins === basePlugins && prev.userPlugins === userPlugins) {
+      return prev.result;
+    }
+
+    // Deep identity comparison: check if all plugin values are the same
+    if (prev.basePlugins === basePlugins && arePluginRecordsEqual(prev.userPlugins, userPlugins)) {
+      // Update stored reference but return same result array
+      prev.userPlugins = userPlugins;
+      return prev.result;
+    }
+  }
+
+  // Sort user plugins into canonical order
+  const sortedUserPlugins = userPlugins ? sortPluginEntries(Object.entries(userPlugins)).map(([, plugin]) => plugin) : [];
+  const result = [...basePlugins, ...sortedUserPlugins];
+
+  // Validate plugins in dev mode
+  if (userPlugins) {
+    for (const [name, plugin] of Object.entries(userPlugins)) {
+      validatePlugin(name, plugin);
+    }
+  }
+  prevRef.current = {
+    basePlugins,
+    userPlugins,
+    result
+  };
+  return result;
+}
+
+/**
+ * Compares two plugin records by checking that they have the same keys
+ * and each key maps to the same plugin instance (by reference).
+ */
+function arePluginRecordsEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}