@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/table.cjs

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+;/* empty css                      */
+const Table_module = require("./components/Table/Table.module.scss.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);
+let _useReactTable = null;
+let _getCoreRowModel = null;
+let _getSortedRowModel = null;
+let _flexRender = null;
+let _tableLoaded = false;
+let _tableFailed = false;
+function loadTableDeps() {
+  if (_tableLoaded) return;
+  _tableLoaded = true;
+  try {
+    const rt = require("@tanstack/react-table");
+    _useReactTable = rt.useReactTable;
+    _getCoreRowModel = rt.getCoreRowModel;
+    _getSortedRowModel = rt.getSortedRowModel;
+    _flexRender = rt.flexRender;
+  } catch {
+    _tableFailed = true;
+  }
+}
+function TableRoot({
+  columns,
+  data,
+  getRowId,
+  sortable = false,
+  sorting: controlledSorting,
+  onSortingChange,
+  selectable = false,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onRowClick,
+  emptyMessage = "No data available",
+  size = "md",
+  className,
+  caption,
+  captionHidden = false,
+  striped = false,
+  bordered = false,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}) {
+  loadTableDeps();
+  const [internalSorting, setInternalSorting] = React__namespace.useState([]);
+  const sorting = controlledSorting ?? internalSorting;
+  const handleSortingChange = onSortingChange ?? setInternalSorting;
+  const [internalRowSelection, setInternalRowSelection] = React__namespace.useState({});
+  const rowSelection = controlledRowSelection ?? internalRowSelection;
+  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;
+  if (_tableFailed || !_useReactTable) {
+    if (_tableFailed && process.env.NODE_ENV === "development") {
+      console.warn(
+        "[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. Install it with: npm install @tanstack/react-table"
+      );
+    }
+    return null;
+  }
+  const table = _useReactTable({
+    data,
+    columns,
+    getRowId,
+    getCoreRowModel: _getCoreRowModel(),
+    getSortedRowModel: sortable ? _getSortedRowModel() : void 0,
+    state: {
+      sorting: sortable ? sorting : void 0,
+      rowSelection: selectable ? rowSelection : void 0
+    },
+    onSortingChange: sortable ? handleSortingChange : void 0,
+    onRowSelectionChange: selectable ? handleRowSelectionChange : void 0,
+    enableRowSelection: selectable,
+    enableSorting: sortable
+  });
+  const isEmpty = data.length === 0;
+  const hasExplicitColumnSizing = React__namespace.useMemo(
+    () => columns.some(
+      (column) => column.size !== void 0 || column.minSize !== void 0 || column.maxSize !== void 0
+    ),
+    [columns]
+  );
+  const rootClasses = [
+    Table_module.default.table,
+    hasExplicitColumnSizing && Table_module.default.fixedLayout,
+    Table_module.default[size],
+    striped && Table_module.default.striped,
+    className
+  ].filter(Boolean).join(" ");
+  const getColumnSizeStyle = (column) => {
+    const { size: size2, minSize, maxSize } = column.columnDef;
+    const hasExplicitSize = size2 !== void 0 || minSize !== void 0 || maxSize !== void 0;
+    if (!hasExplicitSize) {
+      return void 0;
+    }
+    const resolvedSize = column.getSize();
+    return {
+      width: resolvedSize,
+      minWidth: minSize ?? resolvedSize,
+      maxWidth: maxSize ?? resolvedSize
+    };
+  };
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_module.default.emptyState, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Table_module.default.emptyMessage, children: emptyMessage }) });
+  }
+  const isInteractiveTarget = (target, currentTarget) => {
+    if (!(target instanceof Element)) return false;
+    const interactiveElement = target.closest(
+      'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
+    );
+    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [Table_module.default.wrapper, bordered && Table_module.default.bordered].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      children: [
+        caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: captionHidden ? Table_module.default.captionHidden : Table_module.default.caption, children: caption }),
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: Table_module.default.thead, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: Table_module.default.headerRow, children: headerGroup.headers.map((header) => {
+          const canSort = sortable && header.column.getCanSort();
+          const sortDirection = header.column.getIsSorted();
+          const toggleSorting = canSort ? header.column.getToggleSortingHandler() : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              className: [Table_module.default.th, canSort && Table_module.default.thSortable].filter(Boolean).join(" "),
+              style: getColumnSizeStyle(header.column),
+              scope: "col",
+              "aria-sort": sortDirection ? sortDirection === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+              children: canSort ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: Table_module.default.sortButton,
+                  onClick: toggleSorting,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Table_module.default.headerContent, children: header.isPlaceholder ? null : _flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Table_module.default.sortIndicator, "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(SortAscIcon, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(SortDescIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(SortIcon, {}) })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_module.default.headerContent, children: header.isPlaceholder ? null : _flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ) })
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: Table_module.default.tbody, children: table.getRowModel().rows.map((row) => {
+          const isClickable = !!onRowClick;
+          const isSelected = selectable ? row.getIsSelected() : false;
+          const handleRowClick = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            onRowClick(row.original);
+          };
+          const handleRowKeyDown = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onRowClick(row.original);
+            }
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: [
+                Table_module.default.row,
+                isClickable && Table_module.default.clickable,
+                isSelected && Table_module.default.selected
+              ].filter(Boolean).join(" "),
+              onClick: isClickable ? handleRowClick : void 0,
+              onKeyDown: isClickable ? handleRowKeyDown : void 0,
+              tabIndex: isClickable ? 0 : void 0,
+              "data-selected": isSelected || void 0,
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: Table_module.default.td, style: getColumnSizeStyle(cell.column), children: _flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+            },
+            row.id
+          );
+        }) })
+      ]
+    }
+  ) });
+}
+function SortIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6 2L8.5 5H3.5L6 2Z",
+            fill: "currentColor",
+            opacity: "0.3"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6 10L3.5 7H8.5L6 10Z",
+            fill: "currentColor",
+            opacity: "0.3"
+          }
+        )
+      ]
+    }
+  );
+}
+function SortAscIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2L8.5 5H3.5L6 2Z", fill: "currentColor" })
+    }
+  );
+}
+function SortDescIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10L3.5 7H8.5L6 10Z", fill: "currentColor" })
+    }
+  );
+}
+function createColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorKey: col.key,
+    header: col.header,
+    size: col.width,
+    minSize: col.width,
+    maxSize: col.width,
+    cell: col.cell ? ({ row }) => col.cell(row.original) : ({ getValue }) => getValue() ?? "--"
+  }));
+}
+const Table = Object.assign(TableRoot, {
+  Root: TableRoot,
+  Columns: createColumns
+});
+exports.Table = Table;
+exports.createColumns = createColumns;
+//# sourceMappingURL=table.cjs.map

package/dist/table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.cjs","sources":["../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n// Import globals to ensure CSS variables are defined\nimport '../../styles/globals.scss';\nimport styles from './Table.module.scss';\n\n// ============================================\n// Types (self-owned — no external dependency for types)\n// ============================================\n\n/** Column definition compatible with @tanstack/react-table */\nexport type ColumnDef<TData = unknown, TValue = unknown> = {\n  id?: string;\n  accessorKey?: string;\n  accessorFn?: (row: TData) => TValue;\n  header?: string | ((context: any) => React.ReactNode);\n  cell?: string | ((context: any) => React.ReactNode);\n  size?: number;\n  minSize?: number;\n  maxSize?: number;\n  enableSorting?: boolean;\n  [key: string]: unknown;\n};\n\nexport type SortingState = Array<{ id: string; desc: boolean }>;\nexport type RowSelectionState = Record<string, boolean>;\ntype OnChangeFn<T> = ((updaterOrValue: T | ((prev: T) => T)) => void);\n\nexport type TableColumn<T> = ColumnDef<T, unknown>;\n\n// ============================================\n// Lazy-loaded dependency (@tanstack/react-table)\n// ============================================\n\nlet _useReactTable: any = null;\nlet _getCoreRowModel: any = null;\nlet _getSortedRowModel: any = null;\nlet _flexRender: any = null;\nlet _tableLoaded = false;\nlet _tableFailed = false;\n\nfunction loadTableDeps() {\n  if (_tableLoaded) return;\n  _tableLoaded = true;\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const rt = require('@tanstack/react-table');\n    _useReactTable = rt.useReactTable;\n    _getCoreRowModel = rt.getCoreRowModel;\n    _getSortedRowModel = rt.getSortedRowModel;\n    _flexRender = rt.flexRender;\n  } catch {\n    _tableFailed = true;\n  }\n}\n\nexport interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'onClick'> {\n  /** Column definitions */\n  columns: TableColumn<T>[];\n  /** Data array */\n  data: T[];\n  /** Unique key extractor for each row */\n  getRowId?: (row: T) => string;\n  /** Enable sorting */\n  sortable?: boolean;\n  /** Controlled sorting state */\n  sorting?: SortingState;\n  /** Sorting change handler */\n  onSortingChange?: OnChangeFn<SortingState>;\n  /** Enable row selection */\n  selectable?: boolean;\n  /** Controlled selection state */\n  rowSelection?: RowSelectionState;\n  /** Selection change handler */\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>;\n  /** Row click handler */\n  onRowClick?: (row: T) => void;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Visible caption for the table (recommended for accessibility) */\n  caption?: string;\n  /** Hide the caption visually but keep it for screen readers */\n  captionHidden?: boolean;\n  /** Show alternating row backgrounds */\n  striped?: boolean;\n  /** Wrap table in a bordered container */\n  bordered?: boolean;\n}\n\nfunction TableRoot<T>({\n  columns,\n  data,\n  getRowId,\n  sortable = false,\n  sorting: controlledSorting,\n  onSortingChange,\n  selectable = false,\n  rowSelection: controlledRowSelection,\n  onRowSelectionChange,\n  onRowClick,\n  emptyMessage = 'No data available',\n  size = 'md',\n  className,\n  caption,\n  captionHidden = false,\n  striped = false,\n  bordered = false,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: TableProps<T>) {\n  loadTableDeps();\n\n  // Internal sorting state when uncontrolled\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);\n  const sorting = controlledSorting ?? internalSorting;\n  const handleSortingChange = onSortingChange ?? setInternalSorting;\n\n  // Internal selection state when uncontrolled\n  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({});\n  const rowSelection = controlledRowSelection ?? internalRowSelection;\n  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;\n\n  if (_tableFailed || !_useReactTable) {\n    if (_tableFailed && process.env.NODE_ENV === 'development') {\n      console.warn(\n        '[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. ' +\n        'Install it with: npm install @tanstack/react-table'\n      );\n    }\n    return null;\n  }\n\n  const table = _useReactTable({\n    data,\n    columns,\n    getRowId,\n    getCoreRowModel: _getCoreRowModel(),\n    getSortedRowModel: sortable ? _getSortedRowModel() : undefined,\n    state: {\n      sorting: sortable ? sorting : undefined,\n      rowSelection: selectable ? rowSelection : undefined,\n    },\n    onSortingChange: sortable ? handleSortingChange : undefined,\n    onRowSelectionChange: selectable ? handleRowSelectionChange : undefined,\n    enableRowSelection: selectable,\n    enableSorting: sortable,\n  });\n\n  const isEmpty = data.length === 0;\n\n  const hasExplicitColumnSizing = React.useMemo(\n    () =>\n      columns.some((column) =>\n        column.size !== undefined ||\n        column.minSize !== undefined ||\n        column.maxSize !== undefined\n      ),\n    [columns]\n  );\n\n  const rootClasses = [\n    styles.table,\n    hasExplicitColumnSizing && styles.fixedLayout,\n    styles[size],\n    striped && styles.striped,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const getColumnSizeStyle = (\n    column: {\n      getSize: () => number;\n      columnDef: { size?: number; minSize?: number; maxSize?: number };\n    }\n  ): React.CSSProperties | undefined => {\n    const { size, minSize, maxSize } = column.columnDef;\n    const hasExplicitSize = size !== undefined || minSize !== undefined || maxSize !== undefined;\n\n    if (!hasExplicitSize) {\n      return undefined;\n    }\n\n    const resolvedSize = column.getSize();\n\n    return {\n      width: resolvedSize,\n      minWidth: minSize ?? resolvedSize,\n      maxWidth: maxSize ?? resolvedSize,\n    };\n  };\n\n  if (isEmpty) {\n    return (\n      <div className={styles.emptyState}>\n        <span className={styles.emptyMessage}>{emptyMessage}</span>\n      </div>\n    );\n  }\n\n  const isInteractiveTarget = (\n    target: EventTarget | null,\n    currentTarget: HTMLTableRowElement\n  ) => {\n    if (!(target instanceof Element)) return false;\n\n    const interactiveElement = target.closest(\n      'button, a, input, select, textarea, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"switch\"]'\n    );\n\n    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));\n  };\n\n  return (\n    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>\n      <table\n        {...htmlProps}\n        className={rootClasses}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n      >\n        {caption && (\n          <caption className={captionHidden ? styles.captionHidden : styles.caption}>\n            {caption}\n          </caption>\n        )}\n        <thead className={styles.thead}>\n          {table.getHeaderGroups().map((headerGroup: any) => (\n            <tr key={headerGroup.id} className={styles.headerRow}>\n              {headerGroup.headers.map((header: any) => {\n                const canSort = sortable && header.column.getCanSort();\n                const sortDirection = header.column.getIsSorted();\n                const toggleSorting = canSort ? header.column.getToggleSortingHandler() : undefined;\n\n                return (\n                  <th\n                    key={header.id}\n                    className={[styles.th, canSort && styles.thSortable].filter(Boolean).join(' ')}\n                    style={getColumnSizeStyle(header.column)}\n                    scope=\"col\"\n                    aria-sort={\n                      sortDirection\n                        ? sortDirection === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : canSort\n                        ? 'none'\n                        : undefined\n                    }\n                  >\n                    {canSort ? (\n                      <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={toggleSorting}\n                      >\n                        <span className={styles.headerContent}>\n                          {header.isPlaceholder\n                            ? null\n                            : _flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </span>\n                        <span className={styles.sortIndicator} aria-hidden=\"true\">\n                          {sortDirection === 'asc' ? (\n                            <SortAscIcon />\n                          ) : sortDirection === 'desc' ? (\n                            <SortDescIcon />\n                          ) : (\n                            <SortIcon />\n                          )}\n                        </span>\n                      </button>\n                    ) : (\n                      <div className={styles.headerContent}>\n                        {header.isPlaceholder\n                          ? null\n                          : _flexRender(\n                              header.column.columnDef.header,\n                              header.getContext()\n                            )}\n                      </div>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          ))}\n        </thead>\n        <tbody className={styles.tbody}>\n          {table.getRowModel().rows.map((row: any) => {\n            const isClickable = !!onRowClick;\n            const isSelected = selectable ? row.getIsSelected() : false;\n            const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {\n              if (!onRowClick) return;\n              if (isInteractiveTarget(event.target, event.currentTarget)) return;\n              onRowClick(row.original);\n            };\n\n            const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n              if (!onRowClick) return;\n              if (isInteractiveTarget(event.target, event.currentTarget)) return;\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onRowClick(row.original);\n              }\n            };\n\n            return (\n              <tr\n                key={row.id}\n                className={[\n                  styles.row,\n                  isClickable && styles.clickable,\n                  isSelected && styles.selected,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={isClickable ? handleRowClick : undefined}\n                onKeyDown={isClickable ? handleRowKeyDown : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n                data-selected={isSelected || undefined}\n              >\n                {row.getVisibleCells().map((cell: any) => (\n                  <td key={cell.id} className={styles.td} style={getColumnSizeStyle(cell.column)}>\n                    {_flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n// Sort icons - minimal and functional\nfunction SortIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 2L8.5 5H3.5L6 2Z\"\n        fill=\"currentColor\"\n        opacity=\"0.3\"\n      />\n      <path\n        d=\"M6 10L3.5 7H8.5L6 10Z\"\n        fill=\"currentColor\"\n        opacity=\"0.3\"\n      />\n    </svg>\n  );\n}\n\nfunction SortAscIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 2L8.5 5H3.5L6 2Z\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction SortDescIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 10L3.5 7H8.5L6 10Z\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\n// Helper to create simple columns without TanStack's createColumnHelper\nexport function createColumns<T>(\n  columns: Array<{\n    key: string;\n    header: string;\n    width?: number;\n    cell?: (row: T) => React.ReactNode;\n  }>\n): TableColumn<T>[] {\n  return columns.map((col) => ({\n    id: col.key,\n    accessorKey: col.key,\n    header: col.header,\n    size: col.width,\n    minSize: col.width,\n    maxSize: col.width,\n    cell: col.cell\n      ? ({ row }) => col.cell!(row.original)\n      : ({ getValue }) => getValue() ?? '--',\n  }));\n}\n\nexport const Table = Object.assign(TableRoot, {\n  Root: TableRoot,\n  Columns: createColumns,\n});\n"],"names":["React","styles","size","jsx","jsxs"],"mappings":"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"}

package/dist/table.js

@@ -0,0 +1,270 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+/* empty css                    */
+import styles from "./components/Table/Table.module.scss.js";
+let _useReactTable = null;
+let _getCoreRowModel = null;
+let _getSortedRowModel = null;
+let _flexRender = null;
+let _tableLoaded = false;
+let _tableFailed = false;
+function loadTableDeps() {
+  if (_tableLoaded) return;
+  _tableLoaded = true;
+  try {
+    const rt = require("@tanstack/react-table");
+    _useReactTable = rt.useReactTable;
+    _getCoreRowModel = rt.getCoreRowModel;
+    _getSortedRowModel = rt.getSortedRowModel;
+    _flexRender = rt.flexRender;
+  } catch {
+    _tableFailed = true;
+  }
+}
+function TableRoot({
+  columns,
+  data,
+  getRowId,
+  sortable = false,
+  sorting: controlledSorting,
+  onSortingChange,
+  selectable = false,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onRowClick,
+  emptyMessage = "No data available",
+  size = "md",
+  className,
+  caption,
+  captionHidden = false,
+  striped = false,
+  bordered = false,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}) {
+  loadTableDeps();
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const sorting = controlledSorting ?? internalSorting;
+  const handleSortingChange = onSortingChange ?? setInternalSorting;
+  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+  const rowSelection = controlledRowSelection ?? internalRowSelection;
+  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;
+  if (_tableFailed || !_useReactTable) {
+    if (_tableFailed && process.env.NODE_ENV === "development") {
+      console.warn(
+        "[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. Install it with: npm install @tanstack/react-table"
+      );
+    }
+    return null;
+  }
+  const table = _useReactTable({
+    data,
+    columns,
+    getRowId,
+    getCoreRowModel: _getCoreRowModel(),
+    getSortedRowModel: sortable ? _getSortedRowModel() : void 0,
+    state: {
+      sorting: sortable ? sorting : void 0,
+      rowSelection: selectable ? rowSelection : void 0
+    },
+    onSortingChange: sortable ? handleSortingChange : void 0,
+    onRowSelectionChange: selectable ? handleRowSelectionChange : void 0,
+    enableRowSelection: selectable,
+    enableSorting: sortable
+  });
+  const isEmpty = data.length === 0;
+  const hasExplicitColumnSizing = React.useMemo(
+    () => columns.some(
+      (column) => column.size !== void 0 || column.minSize !== void 0 || column.maxSize !== void 0
+    ),
+    [columns]
+  );
+  const rootClasses = [
+    styles.table,
+    hasExplicitColumnSizing && styles.fixedLayout,
+    styles[size],
+    striped && styles.striped,
+    className
+  ].filter(Boolean).join(" ");
+  const getColumnSizeStyle = (column) => {
+    const { size: size2, minSize, maxSize } = column.columnDef;
+    const hasExplicitSize = size2 !== void 0 || minSize !== void 0 || maxSize !== void 0;
+    if (!hasExplicitSize) {
+      return void 0;
+    }
+    const resolvedSize = column.getSize();
+    return {
+      width: resolvedSize,
+      minWidth: minSize ?? resolvedSize,
+      maxWidth: maxSize ?? resolvedSize
+    };
+  };
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx("span", { className: styles.emptyMessage, children: emptyMessage }) });
+  }
+  const isInteractiveTarget = (target, currentTarget) => {
+    if (!(target instanceof Element)) return false;
+    const interactiveElement = target.closest(
+      'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
+    );
+    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  };
+  return /* @__PURE__ */ jsx("div", { className: [styles.wrapper, bordered && styles.bordered].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      children: [
+        caption && /* @__PURE__ */ jsx("caption", { className: captionHidden ? styles.captionHidden : styles.caption, children: caption }),
+        /* @__PURE__ */ jsx("thead", { className: styles.thead, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: styles.headerRow, children: headerGroup.headers.map((header) => {
+          const canSort = sortable && header.column.getCanSort();
+          const sortDirection = header.column.getIsSorted();
+          const toggleSorting = canSort ? header.column.getToggleSortingHandler() : void 0;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: [styles.th, canSort && styles.thSortable].filter(Boolean).join(" "),
+              style: getColumnSizeStyle(header.column),
+              scope: "col",
+              "aria-sort": sortDirection ? sortDirection === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+              children: canSort ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles.sortButton,
+                  onClick: toggleSorting,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles.headerContent, children: header.isPlaceholder ? null : _flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    ) }),
+                    /* @__PURE__ */ jsx("span", { className: styles.sortIndicator, "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx(SortAscIcon, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx(SortDescIcon, {}) : /* @__PURE__ */ jsx(SortIcon, {}) })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: styles.headerContent, children: header.isPlaceholder ? null : _flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ) })
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx("tbody", { className: styles.tbody, children: table.getRowModel().rows.map((row) => {
+          const isClickable = !!onRowClick;
+          const isSelected = selectable ? row.getIsSelected() : false;
+          const handleRowClick = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            onRowClick(row.original);
+          };
+          const handleRowKeyDown = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onRowClick(row.original);
+            }
+          };
+          return /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: [
+                styles.row,
+                isClickable && styles.clickable,
+                isSelected && styles.selected
+              ].filter(Boolean).join(" "),
+              onClick: isClickable ? handleRowClick : void 0,
+              onKeyDown: isClickable ? handleRowKeyDown : void 0,
+              tabIndex: isClickable ? 0 : void 0,
+              "data-selected": isSelected || void 0,
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: styles.td, style: getColumnSizeStyle(cell.column), children: _flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+            },
+            row.id
+          );
+        }) })
+      ]
+    }
+  ) });
+}
+function SortIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 2L8.5 5H3.5L6 2Z",
+            fill: "currentColor",
+            opacity: "0.3"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 10L3.5 7H8.5L6 10Z",
+            fill: "currentColor",
+            opacity: "0.3"
+          }
+        )
+      ]
+    }
+  );
+}
+function SortAscIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 2L8.5 5H3.5L6 2Z", fill: "currentColor" })
+    }
+  );
+}
+function SortDescIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 10L3.5 7H8.5L6 10Z", fill: "currentColor" })
+    }
+  );
+}
+function createColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorKey: col.key,
+    header: col.header,
+    size: col.width,
+    minSize: col.width,
+    maxSize: col.width,
+    cell: col.cell ? ({ row }) => col.cell(row.original) : ({ getValue }) => getValue() ?? "--"
+  }));
+}
+const Table = Object.assign(TableRoot, {
+  Root: TableRoot,
+  Columns: createColumns
+});
+export {
+  Table,
+  createColumns
+};
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../src/components/Table/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n// Import globals to ensure CSS variables are defined\nimport '../../styles/globals.scss';\nimport styles from './Table.module.scss';\n\n// ============================================\n// Types (self-owned — no external dependency for types)\n// ============================================\n\n/** Column definition compatible with @tanstack/react-table */\nexport type ColumnDef<TData = unknown, TValue = unknown> = {\n  id?: string;\n  accessorKey?: string;\n  accessorFn?: (row: TData) => TValue;\n  header?: string | ((context: any) => React.ReactNode);\n  cell?: string | ((context: any) => React.ReactNode);\n  size?: number;\n  minSize?: number;\n  maxSize?: number;\n  enableSorting?: boolean;\n  [key: string]: unknown;\n};\n\nexport type SortingState = Array<{ id: string; desc: boolean }>;\nexport type RowSelectionState = Record<string, boolean>;\ntype OnChangeFn<T> = ((updaterOrValue: T | ((prev: T) => T)) => void);\n\nexport type TableColumn<T> = ColumnDef<T, unknown>;\n\n// ============================================\n// Lazy-loaded dependency (@tanstack/react-table)\n// ============================================\n\nlet _useReactTable: any = null;\nlet _getCoreRowModel: any = null;\nlet _getSortedRowModel: any = null;\nlet _flexRender: any = null;\nlet _tableLoaded = false;\nlet _tableFailed = false;\n\nfunction loadTableDeps() {\n  if (_tableLoaded) return;\n  _tableLoaded = true;\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const rt = require('@tanstack/react-table');\n    _useReactTable = rt.useReactTable;\n    _getCoreRowModel = rt.getCoreRowModel;\n    _getSortedRowModel = rt.getSortedRowModel;\n    _flexRender = rt.flexRender;\n  } catch {\n    _tableFailed = true;\n  }\n}\n\nexport interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'onClick'> {\n  /** Column definitions */\n  columns: TableColumn<T>[];\n  /** Data array */\n  data: T[];\n  /** Unique key extractor for each row */\n  getRowId?: (row: T) => string;\n  /** Enable sorting */\n  sortable?: boolean;\n  /** Controlled sorting state */\n  sorting?: SortingState;\n  /** Sorting change handler */\n  onSortingChange?: OnChangeFn<SortingState>;\n  /** Enable row selection */\n  selectable?: boolean;\n  /** Controlled selection state */\n  rowSelection?: RowSelectionState;\n  /** Selection change handler */\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>;\n  /** Row click handler */\n  onRowClick?: (row: T) => void;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Size variant */\n  size?: 'sm' | 'md';\n  /** Visible caption for the table (recommended for accessibility) */\n  caption?: string;\n  /** Hide the caption visually but keep it for screen readers */\n  captionHidden?: boolean;\n  /** Show alternating row backgrounds */\n  striped?: boolean;\n  /** Wrap table in a bordered container */\n  bordered?: boolean;\n}\n\nfunction TableRoot<T>({\n  columns,\n  data,\n  getRowId,\n  sortable = false,\n  sorting: controlledSorting,\n  onSortingChange,\n  selectable = false,\n  rowSelection: controlledRowSelection,\n  onRowSelectionChange,\n  onRowClick,\n  emptyMessage = 'No data available',\n  size = 'md',\n  className,\n  caption,\n  captionHidden = false,\n  striped = false,\n  bordered = false,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: TableProps<T>) {\n  loadTableDeps();\n\n  // Internal sorting state when uncontrolled\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);\n  const sorting = controlledSorting ?? internalSorting;\n  const handleSortingChange = onSortingChange ?? setInternalSorting;\n\n  // Internal selection state when uncontrolled\n  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({});\n  const rowSelection = controlledRowSelection ?? internalRowSelection;\n  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;\n\n  if (_tableFailed || !_useReactTable) {\n    if (_tableFailed && process.env.NODE_ENV === 'development') {\n      console.warn(\n        '[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. ' +\n        'Install it with: npm install @tanstack/react-table'\n      );\n    }\n    return null;\n  }\n\n  const table = _useReactTable({\n    data,\n    columns,\n    getRowId,\n    getCoreRowModel: _getCoreRowModel(),\n    getSortedRowModel: sortable ? _getSortedRowModel() : undefined,\n    state: {\n      sorting: sortable ? sorting : undefined,\n      rowSelection: selectable ? rowSelection : undefined,\n    },\n    onSortingChange: sortable ? handleSortingChange : undefined,\n    onRowSelectionChange: selectable ? handleRowSelectionChange : undefined,\n    enableRowSelection: selectable,\n    enableSorting: sortable,\n  });\n\n  const isEmpty = data.length === 0;\n\n  const hasExplicitColumnSizing = React.useMemo(\n    () =>\n      columns.some((column) =>\n        column.size !== undefined ||\n        column.minSize !== undefined ||\n        column.maxSize !== undefined\n      ),\n    [columns]\n  );\n\n  const rootClasses = [\n    styles.table,\n    hasExplicitColumnSizing && styles.fixedLayout,\n    styles[size],\n    striped && styles.striped,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const getColumnSizeStyle = (\n    column: {\n      getSize: () => number;\n      columnDef: { size?: number; minSize?: number; maxSize?: number };\n    }\n  ): React.CSSProperties | undefined => {\n    const { size, minSize, maxSize } = column.columnDef;\n    const hasExplicitSize = size !== undefined || minSize !== undefined || maxSize !== undefined;\n\n    if (!hasExplicitSize) {\n      return undefined;\n    }\n\n    const resolvedSize = column.getSize();\n\n    return {\n      width: resolvedSize,\n      minWidth: minSize ?? resolvedSize,\n      maxWidth: maxSize ?? resolvedSize,\n    };\n  };\n\n  if (isEmpty) {\n    return (\n      <div className={styles.emptyState}>\n        <span className={styles.emptyMessage}>{emptyMessage}</span>\n      </div>\n    );\n  }\n\n  const isInteractiveTarget = (\n    target: EventTarget | null,\n    currentTarget: HTMLTableRowElement\n  ) => {\n    if (!(target instanceof Element)) return false;\n\n    const interactiveElement = target.closest(\n      'button, a, input, select, textarea, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"switch\"]'\n    );\n\n    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));\n  };\n\n  return (\n    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>\n      <table\n        {...htmlProps}\n        className={rootClasses}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n      >\n        {caption && (\n          <caption className={captionHidden ? styles.captionHidden : styles.caption}>\n            {caption}\n          </caption>\n        )}\n        <thead className={styles.thead}>\n          {table.getHeaderGroups().map((headerGroup: any) => (\n            <tr key={headerGroup.id} className={styles.headerRow}>\n              {headerGroup.headers.map((header: any) => {\n                const canSort = sortable && header.column.getCanSort();\n                const sortDirection = header.column.getIsSorted();\n                const toggleSorting = canSort ? header.column.getToggleSortingHandler() : undefined;\n\n                return (\n                  <th\n                    key={header.id}\n                    className={[styles.th, canSort && styles.thSortable].filter(Boolean).join(' ')}\n                    style={getColumnSizeStyle(header.column)}\n                    scope=\"col\"\n                    aria-sort={\n                      sortDirection\n                        ? sortDirection === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : canSort\n                        ? 'none'\n                        : undefined\n                    }\n                  >\n                    {canSort ? (\n                      <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={toggleSorting}\n                      >\n                        <span className={styles.headerContent}>\n                          {header.isPlaceholder\n                            ? null\n                            : _flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </span>\n                        <span className={styles.sortIndicator} aria-hidden=\"true\">\n                          {sortDirection === 'asc' ? (\n                            <SortAscIcon />\n                          ) : sortDirection === 'desc' ? (\n                            <SortDescIcon />\n                          ) : (\n                            <SortIcon />\n                          )}\n                        </span>\n                      </button>\n                    ) : (\n                      <div className={styles.headerContent}>\n                        {header.isPlaceholder\n                          ? null\n                          : _flexRender(\n                              header.column.columnDef.header,\n                              header.getContext()\n                            )}\n                      </div>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          ))}\n        </thead>\n        <tbody className={styles.tbody}>\n          {table.getRowModel().rows.map((row: any) => {\n            const isClickable = !!onRowClick;\n            const isSelected = selectable ? row.getIsSelected() : false;\n            const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {\n              if (!onRowClick) return;\n              if (isInteractiveTarget(event.target, event.currentTarget)) return;\n              onRowClick(row.original);\n            };\n\n            const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n              if (!onRowClick) return;\n              if (isInteractiveTarget(event.target, event.currentTarget)) return;\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onRowClick(row.original);\n              }\n            };\n\n            return (\n              <tr\n                key={row.id}\n                className={[\n                  styles.row,\n                  isClickable && styles.clickable,\n                  isSelected && styles.selected,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={isClickable ? handleRowClick : undefined}\n                onKeyDown={isClickable ? handleRowKeyDown : undefined}\n                tabIndex={isClickable ? 0 : undefined}\n                data-selected={isSelected || undefined}\n              >\n                {row.getVisibleCells().map((cell: any) => (\n                  <td key={cell.id} className={styles.td} style={getColumnSizeStyle(cell.column)}>\n                    {_flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n// Sort icons - minimal and functional\nfunction SortIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 2L8.5 5H3.5L6 2Z\"\n        fill=\"currentColor\"\n        opacity=\"0.3\"\n      />\n      <path\n        d=\"M6 10L3.5 7H8.5L6 10Z\"\n        fill=\"currentColor\"\n        opacity=\"0.3\"\n      />\n    </svg>\n  );\n}\n\nfunction SortAscIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 2L8.5 5H3.5L6 2Z\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction SortDescIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 10L3.5 7H8.5L6 10Z\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\n// Helper to create simple columns without TanStack's createColumnHelper\nexport function createColumns<T>(\n  columns: Array<{\n    key: string;\n    header: string;\n    width?: number;\n    cell?: (row: T) => React.ReactNode;\n  }>\n): TableColumn<T>[] {\n  return columns.map((col) => ({\n    id: col.key,\n    accessorKey: col.key,\n    header: col.header,\n    size: col.width,\n    minSize: col.width,\n    maxSize: col.width,\n    cell: col.cell\n      ? ({ row }) => col.cell!(row.original)\n      : ({ getValue }) => getValue() ?? '--',\n  }));\n}\n\nexport const Table = Object.assign(TableRoot, {\n  Root: TableRoot,\n  Columns: createColumns,\n});\n"],"names":["size"],"mappings":"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"}