@usefragments/ui 1.0.0

package/dist/components/DataTable/DataTable.module.scss.js

@@ -0,0 +1,107 @@
+const wrapper = "_wrapper_1xbek_1";
+const table = "_table_1xbek_8";
+const caption = "_caption_1xbek_16";
+const captionHidden = "_captionHidden_1xbek_25";
+const sm = "_sm_1xbek_37";
+const th = "_th_1xbek_37";
+const td = "_td_1xbek_38";
+const md = "_md_1xbek_43";
+const thead = "_thead_1xbek_49";
+const headerRow = "_headerRow_1xbek_55";
+const headerContent = "_headerContent_1xbek_75";
+const thSortable = "_thSortable_1xbek_81";
+const sortButton = "_sortButton_1xbek_85";
+const sortIndicator = "_sortIndicator_1xbek_124";
+const row = "_row_1xbek_151";
+const clickable = "_clickable_1xbek_162";
+const selected = "_selected_1xbek_176";
+const striped = "_striped_1xbek_190";
+const bordered = "_bordered_1xbek_206";
+const fixedLayout = "_fixedLayout_1xbek_213";
+const densityCondensed = "_densityCondensed_1xbek_217";
+const densityRegular = "_densityRegular_1xbek_221";
+const densityRelaxed = "_densityRelaxed_1xbek_225";
+const truncate = "_truncate_1xbek_249";
+const skeletonBar = "_skeletonBar_1xbek_255";
+const dataTableShimmer = "_dataTableShimmer_1xbek_1";
+const checkboxCell = "_checkboxCell_1xbek_280";
+const expandCell = "_expandCell_1xbek_286";
+const expandButton = "_expandButton_1xbek_292";
+const expandIcon = "_expandIcon_1xbek_325";
+const expandIconOpen = "_expandIconOpen_1xbek_331";
+const subRow = "_subRow_1xbek_335";
+const emptyState = "_emptyState_1xbek_342";
+const emptyMessage = "_emptyMessage_1xbek_349";
+const styles = {
+  wrapper,
+  table,
+  caption,
+  captionHidden,
+  sm,
+  th,
+  td,
+  md,
+  thead,
+  headerRow,
+  headerContent,
+  thSortable,
+  sortButton,
+  sortIndicator,
+  row,
+  clickable,
+  selected,
+  striped,
+  bordered,
+  fixedLayout,
+  densityCondensed,
+  densityRegular,
+  densityRelaxed,
+  truncate,
+  skeletonBar,
+  dataTableShimmer,
+  checkboxCell,
+  expandCell,
+  expandButton,
+  expandIcon,
+  expandIconOpen,
+  subRow,
+  emptyState,
+  emptyMessage
+};
+export {
+  bordered,
+  caption,
+  captionHidden,
+  checkboxCell,
+  clickable,
+  dataTableShimmer,
+  styles as default,
+  densityCondensed,
+  densityRegular,
+  densityRelaxed,
+  emptyMessage,
+  emptyState,
+  expandButton,
+  expandCell,
+  expandIcon,
+  expandIconOpen,
+  fixedLayout,
+  headerContent,
+  headerRow,
+  md,
+  row,
+  selected,
+  skeletonBar,
+  sm,
+  sortButton,
+  sortIndicator,
+  striped,
+  subRow,
+  table,
+  td,
+  th,
+  thSortable,
+  thead,
+  truncate,
+  wrapper
+};

package/dist/components/DataTable/DataTable.support.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function DataTableSkeletonRows({
+  rowCount,
+  columnCount,
+  rowClassName,
+  cellClassName,
+  barClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowClassName, "aria-hidden": "true", children: Array.from({ length: columnCount }).map((_2, c) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: barClassName, style: { width: `${45 + (r + c) % 4 * 14}%` } }) }, c)) }, r)) });
+}
+const NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
+function useArrowKeyRowNav(tableRef, enabled) {
+  React__namespace.useEffect(() => {
+    const table = tableRef.current;
+    if (!enabled || !table) return;
+    function onKeyDown(event) {
+      var _a;
+      if (!NAV_KEYS.has(event.key)) return;
+      const host = tableRef.current;
+      if (!host) return;
+      const rows = Array.from(host.querySelectorAll("tbody tr[tabindex]"));
+      if (rows.length === 0) return;
+      const active = document.activeElement;
+      const current = rows.findIndex((row) => row === active || row.contains(active));
+      if (current === -1) return;
+      event.preventDefault();
+      let next = current;
+      if (event.key === "ArrowDown") {
+        next = Math.min(rows.length - 1, current + 1);
+      } else if (event.key === "ArrowUp") {
+        next = Math.max(0, current - 1);
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = rows.length - 1;
+      }
+      (_a = rows[next]) == null ? void 0 : _a.focus();
+    }
+    table.addEventListener("keydown", onKeyDown);
+    return () => table.removeEventListener("keydown", onKeyDown);
+  }, [tableRef, enabled]);
+}
+exports.DataTableSkeletonRows = DataTableSkeletonRows;
+exports.useArrowKeyRowNav = useArrowKeyRowNav;

package/dist/components/DataTable/DataTable.support.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export declare function DataTableSkeletonRows({ rowCount, columnCount, rowClassName, cellClassName, barClassName, }: {
+    rowCount: number;
+    columnCount: number;
+    rowClassName: string;
+    cellClassName: string;
+    barClassName: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useArrowKeyRowNav(tableRef: React.RefObject<HTMLTableElement | null>, enabled: boolean): void;
+//# sourceMappingURL=DataTable.support.d.ts.map

package/dist/components/DataTable/DataTable.support.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.support.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.support.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACtB,2CAcA;AAOD,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAClD,OAAO,EAAE,OAAO,QAmCjB"}

package/dist/components/DataTable/DataTable.support.js

@@ -0,0 +1,47 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+function DataTableSkeletonRows({
+  rowCount,
+  columnCount,
+  rowClassName,
+  cellClassName,
+  barClassName
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: rowClassName, "aria-hidden": "true", children: Array.from({ length: columnCount }).map((_2, c) => /* @__PURE__ */ jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsx("span", { className: barClassName, style: { width: `${45 + (r + c) % 4 * 14}%` } }) }, c)) }, r)) });
+}
+const NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
+function useArrowKeyRowNav(tableRef, enabled) {
+  React.useEffect(() => {
+    const table = tableRef.current;
+    if (!enabled || !table) return;
+    function onKeyDown(event) {
+      var _a;
+      if (!NAV_KEYS.has(event.key)) return;
+      const host = tableRef.current;
+      if (!host) return;
+      const rows = Array.from(host.querySelectorAll("tbody tr[tabindex]"));
+      if (rows.length === 0) return;
+      const active = document.activeElement;
+      const current = rows.findIndex((row) => row === active || row.contains(active));
+      if (current === -1) return;
+      event.preventDefault();
+      let next = current;
+      if (event.key === "ArrowDown") {
+        next = Math.min(rows.length - 1, current + 1);
+      } else if (event.key === "ArrowUp") {
+        next = Math.max(0, current - 1);
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = rows.length - 1;
+      }
+      (_a = rows[next]) == null ? void 0 : _a.focus();
+    }
+    table.addEventListener("keydown", onKeyDown);
+    return () => table.removeEventListener("keydown", onKeyDown);
+  }, [tableRef, enabled]);
+}
+export {
+  DataTableSkeletonRows,
+  useArrowKeyRowNav
+};

package/dist/components/DataTable/DataTable.virtual.cjs

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../../node_modules/.pnpm/@tanstack_react-virtual@3.13.18_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@tanstack/react-virtual/dist/esm/index.cjs");
+const table = require("../../table.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function DataTableVirtualRoot({
+  caption,
+  captionHidden = false,
+  header,
+  virtualRows,
+  paddingTop,
+  paddingBottom,
+  colSpan,
+  renderRow,
+  ...tableProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { ...tableProps, children: [
+    caption ? /* @__PURE__ */ jsxRuntime.jsx(table.Table.Caption, { visuallyHidden: captionHidden, children: caption }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(table.Table.Head, { children: header }),
+    /* @__PURE__ */ jsxRuntime.jsxs(table.Table.Body, { children: [
+      paddingTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: { height: paddingTop, padding: 0 } }) }) : null,
+      virtualRows.map((row) => renderRow(row)),
+      paddingBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: { height: paddingBottom, padding: 0, border: 0 } }) }) : null
+    ] })
+  ] });
+}
+const DataTableVirtual = Object.assign(DataTableVirtualRoot, {
+  Root: DataTableVirtualRoot,
+  Row: table.Table.Row,
+  Cell: table.Table.Cell,
+  HeaderCell: table.Table.HeaderCell
+});
+function useTableVirtualizer({
+  items,
+  getScrollElement,
+  estimateSize,
+  getItemKey,
+  overscan = 12,
+  enabled = true
+}) {
+  const itemsRef = React__namespace.useRef(items);
+  itemsRef.current = items;
+  const virtualizer = index.useVirtualizer({
+    count: enabled ? items.length : 0,
+    getScrollElement,
+    estimateSize: (index2) => estimateSize(itemsRef.current[index2], index2),
+    overscan,
+    getItemKey: getItemKey ? (index2) => getItemKey(itemsRef.current[index2], index2) : void 0
+  });
+  if (!enabled) {
+    return {
+      virtualRows: items.map((item, index2) => ({
+        index: index2,
+        item,
+        key: (getItemKey == null ? void 0 : getItemKey(item, index2)) ?? index2
+      })),
+      paddingTop: 0,
+      paddingBottom: 0,
+      totalSize: 0,
+      measureElement: noopMeasure,
+      virtualizer
+    };
+  }
+  const measured = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const virtualRows = measured.map((v) => ({
+    index: v.index,
+    item: items[v.index],
+    key: v.key
+  }));
+  const paddingTop = measured.length > 0 ? measured[0].start : 0;
+  const paddingBottom = measured.length > 0 ? totalSize - measured[measured.length - 1].end : 0;
+  return {
+    virtualRows,
+    paddingTop,
+    paddingBottom,
+    totalSize,
+    measureElement: virtualizer.measureElement,
+    virtualizer
+  };
+}
+function noopMeasure() {
+}
+exports.DataTableVirtual = DataTableVirtual;
+exports.useTableVirtualizer = useTableVirtualizer;

package/dist/components/DataTable/DataTable.virtual.d.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { type Virtualizer } from "@tanstack/react-virtual";
+import { type TableProps } from "../Table";
+/** A windowed row: the original logical item plus its absolute index + key. */
+export interface VirtualTableRow<TItem> {
+    /** Index into the full `items` array. Set as `data-index` on the rendered
+     *  element so `measureElement` can attribute its measured size. */
+    index: number;
+    /** The logical item at this index (a data row, group header, etc.). */
+    item: TItem;
+    /** Stable key for React. */
+    key: React.Key;
+}
+export interface UseTableVirtualizerOptions<TItem> {
+    /** The full, ordered list of logical items (rows, group headers, …). */
+    items: TItem[];
+    /** Returns the scrollable ancestor that clips the table. */
+    getScrollElement: () => HTMLElement | null;
+    /** Estimated pixel height for an item before it is measured. Heterogeneous
+     *  tables vary this by item kind (e.g. group header vs data row). */
+    estimateSize: (item: TItem, index: number) => number;
+    /** Stable key for an item. Defaults to the item's index. */
+    getItemKey?: (item: TItem, index: number) => string | number;
+    /** Rows to render beyond the viewport on each side (default 12). */
+    overscan?: number;
+    /** When false, every item is returned with no windowing (default true). */
+    enabled?: boolean;
+}
+export interface UseTableVirtualizerResult<TItem> {
+    /** Only the items currently within (or near) the viewport. */
+    virtualRows: VirtualTableRow<TItem>[];
+    /** Height of the spacer that stands in for rows scrolled off the top. */
+    paddingTop: number;
+    /** Height of the spacer that stands in for rows below the viewport. */
+    paddingBottom: number;
+    /** Total scrollable height of all items. */
+    totalSize: number;
+    /** Ref callback for each rendered row — enables dynamic height measurement.
+     *  The element must carry `data-index={virtualRow.index}`. */
+    measureElement: (node: Element | null) => void;
+    /** The underlying virtualizer, for imperative control (scrollToIndex, …). */
+    virtualizer: Virtualizer<HTMLElement, Element>;
+}
+export interface DataTableVirtualProps<TItem> extends Omit<TableProps, "children"> {
+    caption?: React.ReactNode;
+    captionHidden?: boolean;
+    header: React.ReactNode;
+    virtualRows: VirtualTableRow<TItem>[];
+    paddingTop: number;
+    paddingBottom: number;
+    colSpan: number;
+    renderRow: (row: VirtualTableRow<TItem>) => React.ReactNode;
+}
+declare function DataTableVirtualRoot<TItem>({ caption, captionHidden, header, virtualRows, paddingTop, paddingBottom, colSpan, renderRow, ...tableProps }: DataTableVirtualProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare const DataTableVirtual: typeof DataTableVirtualRoot & {
+    Root: typeof DataTableVirtualRoot;
+    Row: React.ForwardRefExoticComponent<import("../Table").TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    Cell: ({ className, tabularNums, children, ...props }: import("../Table").TableCellProps) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ className, scope, children, ...props }: import("../Table").TableHeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * Table-flavored wrapper over `@tanstack/react-virtual`. Encapsulates the
+ * windowing conventions a virtualized table needs — estimate-by-item, dynamic
+ * measurement, overscan, and top/bottom spacer math — and returns a render
+ * stream (`virtualRows`) plus the two spacer heights.
+ *
+ * The shared primitive: bespoke tables (e.g. grouped/expandable surfaces with
+ * heterogeneous rows) provide their own logical `items` and render them, while
+ * the windowing math lives here in the design system instead of being
+ * hand-rolled per page.
+ *
+ * Usage:
+ * ```tsx
+ * const { virtualRows, paddingTop, paddingBottom, measureElement } =
+ *   useTableVirtualizer({
+ *     items,
+ *     getScrollElement: () => scrollRef.current,
+ *     estimateSize: (item) => (item.kind === "group" ? 52 : 64),
+ *     getItemKey: (item) => item.id,
+ *   });
+ * // <tbody>
+ * //   {paddingTop > 0 && <tr aria-hidden><td style={{ height: paddingTop }} /></tr>}
+ * //   {virtualRows.map(({ item, index, key }) => (
+ * //     <tr key={key} data-index={index} ref={measureElement}>…</tr>
+ * //   ))}
+ * //   {paddingBottom > 0 && <tr aria-hidden><td style={{ height: paddingBottom }} /></tr>}
+ * // </tbody>
+ * ```
+ */
+export declare function useTableVirtualizer<TItem>({ items, getScrollElement, estimateSize, getItemKey, overscan, enabled, }: UseTableVirtualizerOptions<TItem>): UseTableVirtualizerResult<TItem>;
+export {};
+//# sourceMappingURL=DataTable.virtual.d.ts.map

package/dist/components/DataTable/DataTable.virtual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.virtual.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.virtual.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAYlD,+EAA+E;AAC/E,MAAM,WAAW,eAAe,CAAC,KAAK;IACpC;uEACmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,KAAK,CAAC;IACZ,4BAA4B;IAC5B,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B,CAAC,KAAK;IAC/C,wEAAwE;IACxE,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,4DAA4D;IAC5D,gBAAgB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC3C;yEACqE;IACrE,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC7D,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,8DAA8D;IAC9D,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACtC,yEAAyE;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,aAAa,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB;kEAC8D;IAC9D,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,6EAA6E;IAC7E,WAAW,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,qBAAqB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7D;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,EACnC,OAAO,EACP,aAAqB,EACrB,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,GAAG,UAAU,EACd,EAAE,qBAAqB,CAAC,KAAK,CAAC,2CAoB9B;AAED,eAAO,MAAM,gBAAgB;;;;;CAK3B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAa,EACb,OAAc,GACf,EAAE,0BAA0B,CAAC,KAAK,CAAC,GAAG,yBAAyB,CAAC,KAAK,CAAC,CA+CtE"}

package/dist/components/DataTable/DataTable.virtual.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useVirtualizer } from "../../node_modules/.pnpm/@tanstack_react-virtual@3.13.18_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { Table } from "../../table.js";
+function DataTableVirtualRoot({
+  caption,
+  captionHidden = false,
+  header,
+  virtualRows,
+  paddingTop,
+  paddingBottom,
+  colSpan,
+  renderRow,
+  ...tableProps
+}) {
+  return /* @__PURE__ */ jsxs(Table, { ...tableProps, children: [
+    caption ? /* @__PURE__ */ jsx(Table.Caption, { visuallyHidden: captionHidden, children: caption }) : null,
+    /* @__PURE__ */ jsx(Table.Head, { children: header }),
+    /* @__PURE__ */ jsxs(Table.Body, { children: [
+      paddingTop > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, style: { height: paddingTop, padding: 0 } }) }) : null,
+      virtualRows.map((row) => renderRow(row)),
+      paddingBottom > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, style: { height: paddingBottom, padding: 0, border: 0 } }) }) : null
+    ] })
+  ] });
+}
+const DataTableVirtual = Object.assign(DataTableVirtualRoot, {
+  Root: DataTableVirtualRoot,
+  Row: Table.Row,
+  Cell: Table.Cell,
+  HeaderCell: Table.HeaderCell
+});
+function useTableVirtualizer({
+  items,
+  getScrollElement,
+  estimateSize,
+  getItemKey,
+  overscan = 12,
+  enabled = true
+}) {
+  const itemsRef = React.useRef(items);
+  itemsRef.current = items;
+  const virtualizer = useVirtualizer({
+    count: enabled ? items.length : 0,
+    getScrollElement,
+    estimateSize: (index) => estimateSize(itemsRef.current[index], index),
+    overscan,
+    getItemKey: getItemKey ? (index) => getItemKey(itemsRef.current[index], index) : void 0
+  });
+  if (!enabled) {
+    return {
+      virtualRows: items.map((item, index) => ({
+        index,
+        item,
+        key: (getItemKey == null ? void 0 : getItemKey(item, index)) ?? index
+      })),
+      paddingTop: 0,
+      paddingBottom: 0,
+      totalSize: 0,
+      measureElement: noopMeasure,
+      virtualizer
+    };
+  }
+  const measured = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const virtualRows = measured.map((v) => ({
+    index: v.index,
+    item: items[v.index],
+    key: v.key
+  }));
+  const paddingTop = measured.length > 0 ? measured[0].start : 0;
+  const paddingBottom = measured.length > 0 ? totalSize - measured[measured.length - 1].end : 0;
+  return {
+    virtualRows,
+    paddingTop,
+    paddingBottom,
+    totalSize,
+    measureElement: virtualizer.measureElement,
+    virtualizer
+  };
+}
+function noopMeasure() {
+}
+export {
+  DataTableVirtual,
+  useTableVirtualizer
+};

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

@@ -0,0 +1,100 @@
+import * as React from "react";
+/** Horizontal alignment for a column's header + cells. */
+export type ColumnAlign = "left" | "right" | "center";
+/** Row density preset — condensed 40px / regular 48px / relaxed 56px. */
+export type DataTableDensity = "condensed" | "regular" | "relaxed";
+/** Column definition compatible with @tanstack/react-table */
+export type ColumnDef<TData = unknown, TValue = unknown> = {
+    id?: string;
+    accessorKey?: string;
+    accessorFn?: (row: TData) => TValue;
+    header?: string | ((context: any) => React.ReactNode);
+    cell?: string | ((context: any) => React.ReactNode);
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    enableSorting?: boolean;
+    /** Header + cell horizontal alignment (numbers should be 'right'). */
+    align?: ColumnAlign;
+    /** Truncate overflow to a single line with an ellipsis + native title. */
+    truncate?: boolean;
+    [key: string]: unknown;
+};
+export type SortingState = Array<{
+    id: string;
+    desc: boolean;
+}>;
+export type RowSelectionState = Record<string, boolean>;
+export type ExpandedState = true | Record<string, boolean>;
+type OnChangeFn<T> = (updaterOrValue: T | ((prev: T) => T)) => void;
+export type DataTableRowClickEvent = React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>;
+export type DataTableColumn<T> = ColumnDef<T, unknown>;
+export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, "onClick"> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Data array */
+    data: T[];
+    /** Unique key extractor for each row */
+    getRowId?: (row: T) => string;
+    /** Enable sorting */
+    sortable?: boolean;
+    /** Controlled sorting state */
+    sorting?: SortingState;
+    /** Sorting change handler */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Show checkbox column for row selection */
+    showCheckbox?: boolean;
+    /** Controlled selection state */
+    rowSelection?: RowSelectionState;
+    /** Selection change handler */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /** Row click handler */
+    onRowClick?: (row: T, event: DataTableRowClickEvent) => void;
+    /** Extract sub-rows from a row for expandable tree tables */
+    getSubRows?: (row: T) => T[] | undefined;
+    /** Controlled expanded state */
+    expanded?: ExpandedState;
+    /** Expanded state change handler */
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+    /** Empty state message (plain text). Ignored if `emptyState` is set. */
+    emptyMessage?: string;
+    /** Rich empty-state slot (icon + copy + CTA) rendered when there's no data. */
+    emptyState?: React.ReactNode;
+    /** When true, render skeleton placeholder rows instead of data. */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading (default 6). */
+    skeletonRows?: number;
+    /** Row density preset — condensed 40 / regular 48 / relaxed 56. */
+    density?: DataTableDensity;
+    /** Hide the column header row (e.g. stacked per-group tables share one). */
+    hideHeader?: boolean;
+    /** Size variant (cell padding). */
+    size?: "sm" | "md";
+    /** Visible caption for the table (recommended for accessibility) */
+    caption?: string;
+    /** Hide the caption visually but keep it for screen readers */
+    captionHidden?: boolean;
+    /** Show alternating row backgrounds */
+    striped?: boolean;
+    /** Wrap table in a bordered container */
+    bordered?: boolean;
+    /** Additional class name for the outer wrapper div */
+    wrapperClassName?: string;
+    /** Props forwarded to the outer wrapper div */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+declare function DataTableRoot<T>({ columns: userColumns, data, getRowId, sortable, sorting: controlledSorting, onSortingChange, selectable, showCheckbox, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, getSubRows, expanded: controlledExpanded, onExpandedChange, emptyMessage, emptyState, loading, skeletonRows, density, hideHeader, size, className, caption, captionHidden, striped, bordered, wrapperClassName, wrapperProps, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...htmlProps }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function createColumns<T>(columns: Array<{
+    key: string;
+    header: string;
+    width?: number;
+    cell?: (row: T) => React.ReactNode;
+}>): DataTableColumn<T>[];
+export declare const DataTable: typeof DataTableRoot & {
+    Root: typeof DataTableRoot;
+    Columns: typeof createColumns;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.tsx"],"names":[],"mappings":"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"}