@frontmcp/ui 0.5.0

package/src/components/table.js

@@ -0,0 +1,283 @@
+"use strict";
+/**
+ * Table Component
+ *
+ * Data tables with sorting, selection, and HTMX support.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.table = table;
+exports.pagination = pagination;
+const base_1 = require("../layouts/base");
+// ============================================
+// Table Builder
+// ============================================
+/**
+ * Get alignment classes
+ */
+function getAlignClasses(align = 'left') {
+    const alignments = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+    return alignments[align];
+}
+/**
+ * Build sort indicator
+ */
+function buildSortIndicator(direction) {
+    if (direction === 'asc') {
+        return `<svg class="w-4 h-4 ml-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
+    </svg>`;
+    }
+    if (direction === 'desc') {
+        return `<svg class="w-4 h-4 ml-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+    </svg>`;
+    }
+    return `<svg class="w-4 h-4 ml-1 inline-block opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
+  </svg>`;
+}
+/**
+ * Build table header
+ */
+function buildTableHeader(columns, options) {
+    const { selectable, sortHtmx, compact } = options;
+    const paddingClass = compact ? 'px-3 py-2' : 'px-4 py-3';
+    const selectAllCell = selectable
+        ? `<th class="${paddingClass} w-12">
+        <input
+          type="checkbox"
+          class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
+          aria-label="Select all"
+        >
+      </th>`
+        : '';
+    const headerCells = columns
+        .map((col) => {
+        const alignClass = getAlignClasses(col.align);
+        const widthStyle = col.width ? `style="width: ${col.width}"` : '';
+        if (col.sortable && sortHtmx) {
+            const nextDirection = col.sortDirection === 'asc' ? 'desc' : 'asc';
+            const sortUrl = `${sortHtmx.get}${sortHtmx.get.includes('?') ? '&' : '?'}sort=${col.key}&dir=${nextDirection}`;
+            return `<th
+        class="${paddingClass} ${alignClass} font-semibold text-text-primary cursor-pointer hover:bg-gray-50 ${col.headerClass || ''}"
+        ${widthStyle}
+        hx-get="${(0, base_1.escapeHtml)(sortUrl)}"
+        ${sortHtmx.target ? `hx-target="${(0, base_1.escapeHtml)(sortHtmx.target)}"` : ''}
+        ${sortHtmx.swap ? `hx-swap="${(0, base_1.escapeHtml)(sortHtmx.swap)}"` : ''}
+      >
+        <span class="inline-flex items-center">
+          ${(0, base_1.escapeHtml)(col.header)}
+          ${buildSortIndicator(col.sortDirection || null)}
+        </span>
+      </th>`;
+        }
+        return `<th
+      class="${paddingClass} ${alignClass} font-semibold text-text-primary ${col.headerClass || ''}"
+      ${widthStyle}
+    >
+      ${(0, base_1.escapeHtml)(col.header)}
+    </th>`;
+    })
+        .join('\n');
+    return `<thead class="bg-gray-50 border-b border-border">
+    <tr>
+      ${selectAllCell}
+      ${headerCells}
+    </tr>
+  </thead>`;
+}
+/**
+ * Build table body
+ */
+function buildTableBody(data, columns, options) {
+    const { selectable, hoverable, striped, bordered, compact, selectHtmx, rowKey = 'id', onRowClick, } = options;
+    const paddingClass = compact ? 'px-3 py-2' : 'px-4 py-3';
+    if (data.length === 0) {
+        const colspan = columns.length + (selectable ? 1 : 0);
+        const emptyContent = options.emptyContent ||
+            `
+      <div class="text-center py-8">
+        <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+        </svg>
+        <p class="text-text-secondary">${options.emptyMessage || 'No data available'}</p>
+      </div>
+    `;
+        return `<tbody>
+      <tr>
+        <td colspan="${colspan}">${emptyContent}</td>
+      </tr>
+    </tbody>`;
+    }
+    const rows = data
+        .map((row, rowIndex) => {
+        const rowId = String(row[rowKey] || rowIndex);
+        const rowClasses = [
+            hoverable ? 'hover:bg-gray-50' : '',
+            striped && rowIndex % 2 === 1 ? 'bg-gray-50/50' : '',
+            bordered ? 'border-b border-border' : '',
+            onRowClick ? 'cursor-pointer' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const clickHandler = onRowClick
+            ? `onclick="window.location.href='${(0, base_1.escapeHtml)(onRowClick.replace('{key}', rowId))}'"`
+            : '';
+        const selectCell = selectable
+            ? `<td class="${paddingClass}" onclick="event.stopPropagation()">
+          <input
+            type="checkbox"
+            class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
+            name="selected[]"
+            value="${(0, base_1.escapeHtml)(rowId)}"
+            ${selectHtmx
+                ? `
+              hx-post="${(0, base_1.escapeHtml)(selectHtmx.post)}"
+              ${selectHtmx.target ? `hx-target="${(0, base_1.escapeHtml)(selectHtmx.target)}"` : ''}
+              hx-trigger="change"
+            `
+                : ''}
+            aria-label="Select row"
+          >
+        </td>`
+            : '';
+        const cells = columns
+            .map((col) => {
+            const value = row[col.key];
+            const alignClass = getAlignClasses(col.align);
+            const cellContent = col.render ? col.render(value, row, rowIndex) : (0, base_1.escapeHtml)(String(value ?? ''));
+            return `<td class="${paddingClass} ${alignClass} ${col.cellClass || ''}">${cellContent}</td>`;
+        })
+            .join('\n');
+        return `<tr class="${rowClasses}" ${clickHandler}>
+      ${selectCell}
+      ${cells}
+    </tr>`;
+    })
+        .join('\n');
+    return `<tbody class="divide-y divide-border">${rows}</tbody>`;
+}
+/**
+ * Build loading overlay
+ */
+function buildLoadingOverlay() {
+    return `<div class="absolute inset-0 bg-white/70 flex items-center justify-center">
+    <svg class="animate-spin w-8 h-8 text-primary" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  </div>`;
+}
+/**
+ * Build a data table
+ */
+function table(data, options) {
+    const { id, bordered, stickyHeader, className = '', loading = false } = options;
+    const tableClasses = ['w-full', bordered ? 'border border-border' : '', 'text-sm'].filter(Boolean).join(' ');
+    const wrapperClasses = ['relative overflow-x-auto', stickyHeader ? 'max-h-96 overflow-y-auto' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    const idAttr = id ? `id="${(0, base_1.escapeHtml)(id)}"` : '';
+    const header = buildTableHeader(options.columns, options);
+    const body = buildTableBody(data, options.columns, options);
+    const loadingOverlay = loading ? buildLoadingOverlay() : '';
+    return `<div class="${wrapperClasses}" ${idAttr}>
+    <table class="${tableClasses}">
+      ${header}
+      ${body}
+    </table>
+    ${loadingOverlay}
+  </div>`;
+}
+/**
+ * Build pagination component
+ */
+function pagination(options) {
+    const { page, totalPages, totalItems, pageSize = 10, showPageSize = false, pageSizeOptions = [10, 25, 50, 100], className = '', htmx, } = options;
+    const buildPageLink = (pageNum, label, disabled, active) => {
+        const baseClasses = 'px-3 py-2 text-sm rounded-lg transition-colors';
+        const stateClasses = disabled
+            ? 'text-gray-300 cursor-not-allowed'
+            : active
+                ? 'bg-primary text-white'
+                : 'text-text-primary hover:bg-gray-100';
+        if (disabled) {
+            return `<span class="${baseClasses} ${stateClasses}">${label}</span>`;
+        }
+        const pageUrl = htmx ? `${htmx.get}${htmx.get.includes('?') ? '&' : '?'}page=${pageNum}` : `?page=${pageNum}`;
+        const htmxAttrs = htmx
+            ? `hx-get="${(0, base_1.escapeHtml)(pageUrl)}" ${htmx.target ? `hx-target="${(0, base_1.escapeHtml)(htmx.target)}"` : ''} ${htmx.swap ? `hx-swap="${(0, base_1.escapeHtml)(htmx.swap)}"` : ''}`
+            : '';
+        return `<a href="${(0, base_1.escapeHtml)(pageUrl)}" class="${baseClasses} ${stateClasses}" ${htmxAttrs}>${label}</a>`;
+    };
+    // Build page numbers
+    const pageNumbers = [];
+    const maxVisible = 5;
+    if (totalPages <= maxVisible) {
+        for (let i = 1; i <= totalPages; i++) {
+            pageNumbers.push(i);
+        }
+    }
+    else {
+        pageNumbers.push(1);
+        let start = Math.max(2, page - 1);
+        let end = Math.min(totalPages - 1, page + 1);
+        if (page <= 2) {
+            end = 4;
+        }
+        else if (page >= totalPages - 1) {
+            start = totalPages - 3;
+        }
+        if (start > 2) {
+            pageNumbers.push(-1); // Ellipsis
+        }
+        for (let i = start; i <= end; i++) {
+            pageNumbers.push(i);
+        }
+        if (end < totalPages - 1) {
+            pageNumbers.push(-1); // Ellipsis
+        }
+        pageNumbers.push(totalPages);
+    }
+    const pagesHtml = pageNumbers
+        .map((num) => {
+        if (num === -1) {
+            return '<span class="px-2 py-2 text-text-secondary">...</span>';
+        }
+        return buildPageLink(num, String(num), false, num === page);
+    })
+        .join('\n');
+    const prevLink = buildPageLink(page - 1, '&larr; Previous', page <= 1, false);
+    const nextLink = buildPageLink(page + 1, 'Next &rarr;', page >= totalPages, false);
+    const infoHtml = totalItems !== undefined
+        ? `<span class="text-sm text-text-secondary">
+        Showing ${(page - 1) * pageSize + 1} to ${Math.min(page * pageSize, totalItems)} of ${totalItems} results
+      </span>`
+        : '';
+    const pageSizeHtml = showPageSize
+        ? `<select
+        class="ml-4 px-2 py-1 text-sm border border-border rounded-lg bg-white"
+        onchange="window.location.href = '${htmx?.get || ''}?page=1&pageSize=' + this.value"
+      >
+        ${pageSizeOptions
+            .map((size) => `<option value="${size}" ${size === pageSize ? 'selected' : ''}>${size} per page</option>`)
+            .join('')}
+      </select>`
+        : '';
+    return `<div class="flex items-center justify-between ${className}">
+    <div class="flex items-center">
+      ${infoHtml}
+      ${pageSizeHtml}
+    </div>
+    <div class="flex items-center gap-1">
+      ${prevLink}
+      ${pagesHtml}
+      ${nextLink}
+    </div>
+  </div>`;
+}
+//# sourceMappingURL=table.js.map

package/src/components/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Table Component\n *\n * Data tables with sorting, selection, and HTMX support.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Table Types\n// ============================================\n\n/**\n * Table column definition\n */\nexport interface TableColumn<T = Record<string, unknown>> {\n  /** Column key (property name) */\n  key: string;\n  /** Column header text */\n  header: string;\n  /** Column width */\n  width?: string;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Sortable column */\n  sortable?: boolean;\n  /** Current sort direction */\n  sortDirection?: 'asc' | 'desc' | null;\n  /** Custom cell renderer */\n  render?: (value: unknown, row: T, index: number) => string;\n  /** Additional header CSS classes */\n  headerClass?: string;\n  /** Additional cell CSS classes */\n  cellClass?: string;\n}\n\n/**\n * Table options\n */\nexport interface TableOptions<T = Record<string, unknown>> {\n  /** Column definitions */\n  columns: TableColumn<T>[];\n  /** Table ID */\n  id?: string;\n  /** Show row selection checkboxes */\n  selectable?: boolean;\n  /** Row hover effect */\n  hoverable?: boolean;\n  /** Striped rows */\n  striped?: boolean;\n  /** Bordered cells */\n  bordered?: boolean;\n  /** Compact size */\n  compact?: boolean;\n  /** Fixed header (sticky) */\n  stickyHeader?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Empty state HTML */\n  emptyContent?: string;\n  /** Loading state */\n  loading?: boolean;\n  /** HTMX for sorting */\n  sortHtmx?: {\n    get: string;\n    target?: string;\n    swap?: string;\n  };\n  /** HTMX for selection */\n  selectHtmx?: {\n    post: string;\n    target?: string;\n  };\n  /** Row key property for selection */\n  rowKey?: keyof T;\n  /** Row click handler (URL template with {key}) */\n  onRowClick?: string;\n}\n\n// ============================================\n// Table Builder\n// ============================================\n\n/**\n * Get alignment classes\n */\nfunction getAlignClasses(align: 'left' | 'center' | 'right' = 'left'): string {\n  const alignments: Record<string, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n  return alignments[align];\n}\n\n/**\n * Build sort indicator\n */\nfunction buildSortIndicator(direction: 'asc' | 'desc' | null): string {\n  if (direction === 'asc') {\n    return `<svg class=\"w-4 h-4 ml-1 inline-block\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 15l7-7 7 7\"/>\n    </svg>`;\n  }\n  if (direction === 'desc') {\n    return `<svg class=\"w-4 h-4 ml-1 inline-block\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"/>\n    </svg>`;\n  }\n  return `<svg class=\"w-4 h-4 ml-1 inline-block opacity-30\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\"/>\n  </svg>`;\n}\n\n/**\n * Build table header\n */\nfunction buildTableHeader<T>(columns: TableColumn<T>[], options: TableOptions<T>): string {\n  const { selectable, sortHtmx, compact } = options;\n  const paddingClass = compact ? 'px-3 py-2' : 'px-4 py-3';\n\n  const selectAllCell = selectable\n    ? `<th class=\"${paddingClass} w-12\">\n        <input\n          type=\"checkbox\"\n          class=\"w-4 h-4 rounded border-border text-primary focus:ring-primary/20\"\n          aria-label=\"Select all\"\n        >\n      </th>`\n    : '';\n\n  const headerCells = columns\n    .map((col) => {\n      const alignClass = getAlignClasses(col.align);\n      const widthStyle = col.width ? `style=\"width: ${col.width}\"` : '';\n\n      if (col.sortable && sortHtmx) {\n        const nextDirection = col.sortDirection === 'asc' ? 'desc' : 'asc';\n        const sortUrl = `${sortHtmx.get}${sortHtmx.get.includes('?') ? '&' : '?'}sort=${col.key}&dir=${nextDirection}`;\n\n        return `<th\n        class=\"${paddingClass} ${alignClass} font-semibold text-text-primary cursor-pointer hover:bg-gray-50 ${\n          col.headerClass || ''\n        }\"\n        ${widthStyle}\n        hx-get=\"${escapeHtml(sortUrl)}\"\n        ${sortHtmx.target ? `hx-target=\"${escapeHtml(sortHtmx.target)}\"` : ''}\n        ${sortHtmx.swap ? `hx-swap=\"${escapeHtml(sortHtmx.swap)}\"` : ''}\n      >\n        <span class=\"inline-flex items-center\">\n          ${escapeHtml(col.header)}\n          ${buildSortIndicator(col.sortDirection || null)}\n        </span>\n      </th>`;\n      }\n\n      return `<th\n      class=\"${paddingClass} ${alignClass} font-semibold text-text-primary ${col.headerClass || ''}\"\n      ${widthStyle}\n    >\n      ${escapeHtml(col.header)}\n    </th>`;\n    })\n    .join('\\n');\n\n  return `<thead class=\"bg-gray-50 border-b border-border\">\n    <tr>\n      ${selectAllCell}\n      ${headerCells}\n    </tr>\n  </thead>`;\n}\n\n/**\n * Build table body\n */\nfunction buildTableBody<T extends Record<string, unknown>>(\n  data: T[],\n  columns: TableColumn<T>[],\n  options: TableOptions<T>,\n): string {\n  const {\n    selectable,\n    hoverable,\n    striped,\n    bordered,\n    compact,\n    selectHtmx,\n    rowKey = 'id' as keyof T,\n    onRowClick,\n  } = options;\n\n  const paddingClass = compact ? 'px-3 py-2' : 'px-4 py-3';\n\n  if (data.length === 0) {\n    const colspan = columns.length + (selectable ? 1 : 0);\n    const emptyContent =\n      options.emptyContent ||\n      `\n      <div class=\"text-center py-8\">\n        <svg class=\"w-12 h-12 mx-auto text-gray-300 mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\"/>\n        </svg>\n        <p class=\"text-text-secondary\">${options.emptyMessage || 'No data available'}</p>\n      </div>\n    `;\n\n    return `<tbody>\n      <tr>\n        <td colspan=\"${colspan}\">${emptyContent}</td>\n      </tr>\n    </tbody>`;\n  }\n\n  const rows = data\n    .map((row, rowIndex) => {\n      const rowId = String(row[rowKey] || rowIndex);\n      const rowClasses = [\n        hoverable ? 'hover:bg-gray-50' : '',\n        striped && rowIndex % 2 === 1 ? 'bg-gray-50/50' : '',\n        bordered ? 'border-b border-border' : '',\n        onRowClick ? 'cursor-pointer' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n\n      const clickHandler = onRowClick\n        ? `onclick=\"window.location.href='${escapeHtml(onRowClick.replace('{key}', rowId))}'\"`\n        : '';\n\n      const selectCell = selectable\n        ? `<td class=\"${paddingClass}\" onclick=\"event.stopPropagation()\">\n          <input\n            type=\"checkbox\"\n            class=\"w-4 h-4 rounded border-border text-primary focus:ring-primary/20\"\n            name=\"selected[]\"\n            value=\"${escapeHtml(rowId)}\"\n            ${\n              selectHtmx\n                ? `\n              hx-post=\"${escapeHtml(selectHtmx.post)}\"\n              ${selectHtmx.target ? `hx-target=\"${escapeHtml(selectHtmx.target)}\"` : ''}\n              hx-trigger=\"change\"\n            `\n                : ''\n            }\n            aria-label=\"Select row\"\n          >\n        </td>`\n        : '';\n\n      const cells = columns\n        .map((col) => {\n          const value = row[col.key];\n          const alignClass = getAlignClasses(col.align);\n          const cellContent = col.render ? col.render(value, row, rowIndex) : escapeHtml(String(value ?? ''));\n\n          return `<td class=\"${paddingClass} ${alignClass} ${col.cellClass || ''}\">${cellContent}</td>`;\n        })\n        .join('\\n');\n\n      return `<tr class=\"${rowClasses}\" ${clickHandler}>\n      ${selectCell}\n      ${cells}\n    </tr>`;\n    })\n    .join('\\n');\n\n  return `<tbody class=\"divide-y divide-border\">${rows}</tbody>`;\n}\n\n/**\n * Build loading overlay\n */\nfunction buildLoadingOverlay(): string {\n  return `<div class=\"absolute inset-0 bg-white/70 flex items-center justify-center\">\n    <svg class=\"animate-spin w-8 h-8 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n  </div>`;\n}\n\n/**\n * Build a data table\n */\nexport function table<T extends Record<string, unknown>>(data: T[], options: TableOptions<T>): string {\n  const { id, bordered, stickyHeader, className = '', loading = false } = options;\n\n  const tableClasses = ['w-full', bordered ? 'border border-border' : '', 'text-sm'].filter(Boolean).join(' ');\n\n  const wrapperClasses = ['relative overflow-x-auto', stickyHeader ? 'max-h-96 overflow-y-auto' : '', className]\n    .filter(Boolean)\n    .join(' ');\n\n  const idAttr = id ? `id=\"${escapeHtml(id)}\"` : '';\n\n  const header = buildTableHeader(options.columns, options);\n  const body = buildTableBody(data, options.columns, options);\n  const loadingOverlay = loading ? buildLoadingOverlay() : '';\n\n  return `<div class=\"${wrapperClasses}\" ${idAttr}>\n    <table class=\"${tableClasses}\">\n      ${header}\n      ${body}\n    </table>\n    ${loadingOverlay}\n  </div>`;\n}\n\n// ============================================\n// Pagination Component\n// ============================================\n\n/**\n * Pagination options\n */\nexport interface PaginationOptions {\n  /** Current page (1-indexed) */\n  page: number;\n  /** Total pages */\n  totalPages: number;\n  /** Total items */\n  totalItems?: number;\n  /** Items per page */\n  pageSize?: number;\n  /** Show page size selector */\n  showPageSize?: boolean;\n  /** Page size options */\n  pageSizeOptions?: number[];\n  /** Additional CSS classes */\n  className?: string;\n  /** HTMX for page changes */\n  htmx?: {\n    get: string;\n    target?: string;\n    swap?: string;\n  };\n}\n\n/**\n * Build pagination component\n */\nexport function pagination(options: PaginationOptions): string {\n  const {\n    page,\n    totalPages,\n    totalItems,\n    pageSize = 10,\n    showPageSize = false,\n    pageSizeOptions = [10, 25, 50, 100],\n    className = '',\n    htmx,\n  } = options;\n\n  const buildPageLink = (pageNum: number, label: string, disabled: boolean, active: boolean) => {\n    const baseClasses = 'px-3 py-2 text-sm rounded-lg transition-colors';\n    const stateClasses = disabled\n      ? 'text-gray-300 cursor-not-allowed'\n      : active\n      ? 'bg-primary text-white'\n      : 'text-text-primary hover:bg-gray-100';\n\n    if (disabled) {\n      return `<span class=\"${baseClasses} ${stateClasses}\">${label}</span>`;\n    }\n\n    const pageUrl = htmx ? `${htmx.get}${htmx.get.includes('?') ? '&' : '?'}page=${pageNum}` : `?page=${pageNum}`;\n\n    const htmxAttrs = htmx\n      ? `hx-get=\"${escapeHtml(pageUrl)}\" ${htmx.target ? `hx-target=\"${escapeHtml(htmx.target)}\"` : ''} ${\n          htmx.swap ? `hx-swap=\"${escapeHtml(htmx.swap)}\"` : ''\n        }`\n      : '';\n\n    return `<a href=\"${escapeHtml(pageUrl)}\" class=\"${baseClasses} ${stateClasses}\" ${htmxAttrs}>${label}</a>`;\n  };\n\n  // Build page numbers\n  const pageNumbers: number[] = [];\n  const maxVisible = 5;\n\n  if (totalPages <= maxVisible) {\n    for (let i = 1; i <= totalPages; i++) {\n      pageNumbers.push(i);\n    }\n  } else {\n    pageNumbers.push(1);\n\n    let start = Math.max(2, page - 1);\n    let end = Math.min(totalPages - 1, page + 1);\n\n    if (page <= 2) {\n      end = 4;\n    } else if (page >= totalPages - 1) {\n      start = totalPages - 3;\n    }\n\n    if (start > 2) {\n      pageNumbers.push(-1); // Ellipsis\n    }\n\n    for (let i = start; i <= end; i++) {\n      pageNumbers.push(i);\n    }\n\n    if (end < totalPages - 1) {\n      pageNumbers.push(-1); // Ellipsis\n    }\n\n    pageNumbers.push(totalPages);\n  }\n\n  const pagesHtml = pageNumbers\n    .map((num) => {\n      if (num === -1) {\n        return '<span class=\"px-2 py-2 text-text-secondary\">...</span>';\n      }\n      return buildPageLink(num, String(num), false, num === page);\n    })\n    .join('\\n');\n\n  const prevLink = buildPageLink(page - 1, '&larr; Previous', page <= 1, false);\n  const nextLink = buildPageLink(page + 1, 'Next &rarr;', page >= totalPages, false);\n\n  const infoHtml =\n    totalItems !== undefined\n      ? `<span class=\"text-sm text-text-secondary\">\n        Showing ${(page - 1) * pageSize + 1} to ${Math.min(page * pageSize, totalItems)} of ${totalItems} results\n      </span>`\n      : '';\n\n  const pageSizeHtml = showPageSize\n    ? `<select\n        class=\"ml-4 px-2 py-1 text-sm border border-border rounded-lg bg-white\"\n        onchange=\"window.location.href = '${htmx?.get || ''}?page=1&pageSize=' + this.value\"\n      >\n        ${pageSizeOptions\n          .map((size) => `<option value=\"${size}\" ${size === pageSize ? 'selected' : ''}>${size} per page</option>`)\n          .join('')}\n      </select>`\n    : '';\n\n  return `<div class=\"flex items-center justify-between ${className}\">\n    <div class=\"flex items-center\">\n      ${infoHtml}\n      ${pageSizeHtml}\n    </div>\n    <div class=\"flex items-center gap-1\">\n      ${prevLink}\n      ${pagesHtml}\n      ${nextLink}\n    </div>\n  </div>`;\n}\n"]}

package/src/components/table.schema.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @file table.schema.ts
+ * @description Zod schemas for Table and Pagination component options validation.
+ *
+ * Provides strict validation schemas for table options including columns,
+ * sorting, selection, and pagination with HTMX support.
+ *
+ * @example
+ * ```typescript
+ * import { TableColumnSchema, TableOptionsSchema } from '@frontmcp/ui';
+ *
+ * const columnResult = TableColumnSchema.safeParse({
+ *   key: 'name',
+ *   header: 'Name',
+ *   sortable: true,
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/components/table.schema
+ */
+import { z } from 'zod';
+/**
+ * Table column alignment schema
+ */
+export declare const TableAlignSchema: z.ZodEnum<{
+    center: "center";
+    left: "left";
+    right: "right";
+}>;
+/**
+ * Table column sort direction schema
+ */
+export declare const TableSortDirectionSchema: z.ZodNullable<z.ZodEnum<{
+    asc: "asc";
+    desc: "desc";
+}>>;
+/**
+ * Table column definition schema
+ * Note: render function cannot be validated by Zod, so we use z.any() for it
+ */
+export declare const TableColumnSchema: z.ZodObject<{
+    key: z.ZodString;
+    header: z.ZodString;
+    width: z.ZodOptional<z.ZodString>;
+    align: z.ZodOptional<z.ZodEnum<{
+        center: "center";
+        left: "left";
+        right: "right";
+    }>>;
+    sortable: z.ZodOptional<z.ZodBoolean>;
+    sortDirection: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+        asc: "asc";
+        desc: "desc";
+    }>>>;
+    render: z.ZodOptional<z.ZodAny>;
+    headerClass: z.ZodOptional<z.ZodString>;
+    cellClass: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Table column type
+ */
+export type TableColumn = z.infer<typeof TableColumnSchema>;
+/**
+ * Sort HTMX options schema
+ */
+export declare const TableSortHtmxSchema: z.ZodOptional<z.ZodObject<{
+    get: z.ZodString;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Select HTMX options schema
+ */
+export declare const TableSelectHtmxSchema: z.ZodOptional<z.ZodObject<{
+    post: z.ZodString;
+    target: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Complete table options schema
+ */
+export declare const TableOptionsSchema: z.ZodObject<{
+    columns: z.ZodArray<z.ZodObject<{
+        key: z.ZodString;
+        header: z.ZodString;
+        width: z.ZodOptional<z.ZodString>;
+        align: z.ZodOptional<z.ZodEnum<{
+            center: "center";
+            left: "left";
+            right: "right";
+        }>>;
+        sortable: z.ZodOptional<z.ZodBoolean>;
+        sortDirection: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+            asc: "asc";
+            desc: "desc";
+        }>>>;
+        render: z.ZodOptional<z.ZodAny>;
+        headerClass: z.ZodOptional<z.ZodString>;
+        cellClass: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    id: z.ZodOptional<z.ZodString>;
+    selectable: z.ZodOptional<z.ZodBoolean>;
+    hoverable: z.ZodOptional<z.ZodBoolean>;
+    striped: z.ZodOptional<z.ZodBoolean>;
+    bordered: z.ZodOptional<z.ZodBoolean>;
+    compact: z.ZodOptional<z.ZodBoolean>;
+    stickyHeader: z.ZodOptional<z.ZodBoolean>;
+    className: z.ZodOptional<z.ZodString>;
+    emptyMessage: z.ZodOptional<z.ZodString>;
+    emptyContent: z.ZodOptional<z.ZodString>;
+    loading: z.ZodOptional<z.ZodBoolean>;
+    sortHtmx: z.ZodOptional<z.ZodObject<{
+        get: z.ZodString;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    selectHtmx: z.ZodOptional<z.ZodObject<{
+        post: z.ZodString;
+        target: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    rowKey: z.ZodOptional<z.ZodString>;
+    onRowClick: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Table options type (derived from schema)
+ */
+export type TableOptions = z.infer<typeof TableOptionsSchema>;
+/**
+ * Pagination HTMX options schema
+ */
+export declare const PaginationHtmxSchema: z.ZodOptional<z.ZodObject<{
+    get: z.ZodString;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Pagination options schema
+ */
+export declare const PaginationOptionsSchema: z.ZodObject<{
+    page: z.ZodNumber;
+    totalPages: z.ZodNumber;
+    totalItems: z.ZodOptional<z.ZodNumber>;
+    pageSize: z.ZodOptional<z.ZodNumber>;
+    pageSizeOptions: z.ZodOptional<z.ZodArray<z.ZodNumber>>;
+    showFirstLast: z.ZodOptional<z.ZodBoolean>;
+    showPageCount: z.ZodOptional<z.ZodBoolean>;
+    showItemCount: z.ZodOptional<z.ZodBoolean>;
+    showPageSize: z.ZodOptional<z.ZodBoolean>;
+    maxVisiblePages: z.ZodOptional<z.ZodNumber>;
+    className: z.ZodOptional<z.ZodString>;
+    htmx: z.ZodOptional<z.ZodObject<{
+        get: z.ZodString;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+}, z.core.$strict>;
+/**
+ * Pagination options type
+ */
+export type PaginationOptions = z.infer<typeof PaginationOptionsSchema>;

package/src/components/table.schema.js

@@ -0,0 +1,173 @@
+"use strict";
+/**
+ * @file table.schema.ts
+ * @description Zod schemas for Table and Pagination component options validation.
+ *
+ * Provides strict validation schemas for table options including columns,
+ * sorting, selection, and pagination with HTMX support.
+ *
+ * @example
+ * ```typescript
+ * import { TableColumnSchema, TableOptionsSchema } from '@frontmcp/ui';
+ *
+ * const columnResult = TableColumnSchema.safeParse({
+ *   key: 'name',
+ *   header: 'Name',
+ *   sortable: true,
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/components/table.schema
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationOptionsSchema = exports.PaginationHtmxSchema = exports.TableOptionsSchema = exports.TableSelectHtmxSchema = exports.TableSortHtmxSchema = exports.TableColumnSchema = exports.TableSortDirectionSchema = exports.TableAlignSchema = void 0;
+const zod_1 = require("zod");
+// ============================================
+// Column Schema
+// ============================================
+/**
+ * Table column alignment schema
+ */
+exports.TableAlignSchema = zod_1.z.enum(['left', 'center', 'right']);
+/**
+ * Table column sort direction schema
+ */
+exports.TableSortDirectionSchema = zod_1.z.enum(['asc', 'desc']).nullable();
+/**
+ * Table column definition schema
+ * Note: render function cannot be validated by Zod, so we use z.any() for it
+ */
+exports.TableColumnSchema = zod_1.z
+    .object({
+    /** Column key (property name) */
+    key: zod_1.z.string(),
+    /** Column header text */
+    header: zod_1.z.string(),
+    /** Column width (CSS value) */
+    width: zod_1.z.string().optional(),
+    /** Text alignment */
+    align: exports.TableAlignSchema.optional(),
+    /** Sortable column */
+    sortable: zod_1.z.boolean().optional(),
+    /** Current sort direction */
+    sortDirection: exports.TableSortDirectionSchema.optional(),
+    /** Custom cell renderer (function - cannot validate at runtime) */
+    render: zod_1.z.any().optional(),
+    /** Additional header CSS classes */
+    headerClass: zod_1.z.string().optional(),
+    /** Additional cell CSS classes */
+    cellClass: zod_1.z.string().optional(),
+})
+    .strict();
+// ============================================
+// HTMX Schemas
+// ============================================
+/**
+ * Sort HTMX options schema
+ */
+exports.TableSortHtmxSchema = zod_1.z
+    .object({
+    get: zod_1.z.string(),
+    target: zod_1.z.string().optional(),
+    swap: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+/**
+ * Select HTMX options schema
+ */
+exports.TableSelectHtmxSchema = zod_1.z
+    .object({
+    post: zod_1.z.string(),
+    target: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+// ============================================
+// Table Options Schema
+// ============================================
+/**
+ * Complete table options schema
+ */
+exports.TableOptionsSchema = zod_1.z
+    .object({
+    /** Column definitions */
+    columns: zod_1.z.array(exports.TableColumnSchema),
+    /** Table ID */
+    id: zod_1.z.string().optional(),
+    /** Show row selection checkboxes */
+    selectable: zod_1.z.boolean().optional(),
+    /** Row hover effect */
+    hoverable: zod_1.z.boolean().optional(),
+    /** Striped rows */
+    striped: zod_1.z.boolean().optional(),
+    /** Bordered cells */
+    bordered: zod_1.z.boolean().optional(),
+    /** Compact size */
+    compact: zod_1.z.boolean().optional(),
+    /** Fixed header (sticky) */
+    stickyHeader: zod_1.z.boolean().optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+    /** Empty state message */
+    emptyMessage: zod_1.z.string().optional(),
+    /** Empty state HTML */
+    emptyContent: zod_1.z.string().optional(),
+    /** Loading state */
+    loading: zod_1.z.boolean().optional(),
+    /** HTMX for sorting */
+    sortHtmx: exports.TableSortHtmxSchema,
+    /** HTMX for selection */
+    selectHtmx: exports.TableSelectHtmxSchema,
+    /** Row key property for selection */
+    rowKey: zod_1.z.string().optional(),
+    /** Row click handler (URL template with {key}) */
+    onRowClick: zod_1.z.string().optional(),
+})
+    .strict();
+// ============================================
+// Pagination Schema
+// ============================================
+/**
+ * Pagination HTMX options schema
+ */
+exports.PaginationHtmxSchema = zod_1.z
+    .object({
+    get: zod_1.z.string(),
+    target: zod_1.z.string().optional(),
+    swap: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+/**
+ * Pagination options schema
+ */
+exports.PaginationOptionsSchema = zod_1.z
+    .object({
+    /** Current page (1-indexed) */
+    page: zod_1.z.number().min(1),
+    /** Total pages */
+    totalPages: zod_1.z.number().min(0),
+    /** Total items count */
+    totalItems: zod_1.z.number().min(0).optional(),
+    /** Items per page */
+    pageSize: zod_1.z.number().min(1).optional(),
+    /** Page size options */
+    pageSizeOptions: zod_1.z.array(zod_1.z.number()).optional(),
+    /** Show first/last buttons */
+    showFirstLast: zod_1.z.boolean().optional(),
+    /** Show page count */
+    showPageCount: zod_1.z.boolean().optional(),
+    /** Show item count */
+    showItemCount: zod_1.z.boolean().optional(),
+    /** Show page size selector */
+    showPageSize: zod_1.z.boolean().optional(),
+    /** Max visible page buttons */
+    maxVisiblePages: zod_1.z.number().min(1).optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+    /** HTMX for page navigation */
+    htmx: exports.PaginationHtmxSchema,
+})
+    .strict();
+//# sourceMappingURL=table.schema.js.map