@frontmcp/ui 0.5.0 → 0.6.0

package/src/components/table.js

@@ -1,283 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,159 +0,0 @@
-/**
- * @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

@@ -1,173 +0,0 @@
-"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