@classic-homes/theme-svelte 0.1.0

package/dist/lib/components/DataTable.svelte

@@ -0,0 +1,334 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  /**
+   * DataTable - A sortable, accessible data table component
+   *
+   * @template T - The type of data objects in each row. Must be an object type.
+   *
+   * ## Features
+   * - Column definitions with headers and accessors
+   * - Client-side sorting (click column headers)
+   * - External sort control via onSort callback
+   * - Loading state with skeleton rows
+   * - Empty state message
+   * - Responsive horizontal scroll
+   * - Full accessibility support (ARIA attributes, keyboard navigation)
+   * - Custom row rendering via snippet
+   * - Memoized sorting for performance
+   *
+   * ## Basic Usage
+   * ```svelte
+   * <DataTable
+   *   data={users}
+   *   columns={[
+   *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+   *     { id: 'email', header: 'Email', accessor: 'email' },
+   *   ]}
+   * />
+   * ```
+   *
+   * ## Custom Cell Formatting
+   * ```svelte
+   * columns={[
+   *   {
+   *     id: 'date',
+   *     header: 'Created',
+   *     accessor: 'createdAt',
+   *     format: (value) => new Date(value).toLocaleDateString(),
+   *   },
+   * ]}
+   * ```
+   *
+   * ## Server-Side Sorting
+   * ```svelte
+   * <DataTable
+   *   {data}
+   *   {columns}
+   *   sortColumn={serverSort.column}
+   *   sortDirection={serverSort.direction}
+   *   onSort={(col, dir) => fetchSorted(col, dir)}
+   * />
+   * ```
+   *
+   * @see DataTableColumn for column configuration options
+   */
+  import type { DataTableColumn } from '../types/components.js';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import { validateNonEmptyArray } from '../validation.js';
+  import Skeleton from './Skeleton.svelte';
+
+  interface Props {
+    /** Array of data rows */
+    data: T[];
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Loading state */
+    loading?: boolean;
+    /** Number of skeleton rows to show when loading */
+    loadingRows?: number;
+    /** Message when no data */
+    emptyMessage?: string;
+    /** Current sort column ID */
+    sortColumn?: string;
+    /** Current sort direction */
+    sortDirection?: 'asc' | 'desc';
+    /** Callback when sort changes */
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    /** Callback when row is clicked */
+    onRowClick?: (row: T) => void;
+    /** Caption for accessibility */
+    caption?: string;
+    /** Custom row snippet for complete control */
+    row?: Snippet<[T, number]>;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    data,
+    columns,
+    loading = false,
+    loadingRows = 5,
+    emptyMessage = 'No data available',
+    sortColumn = $bindable(undefined),
+    sortDirection = $bindable('asc'),
+    onSort,
+    onRowClick,
+    caption,
+    row: rowSnippet,
+    class: className,
+  }: Props = $props();
+
+  // Validate props in development
+  $effect(() => {
+    validateNonEmptyArray(columns, 'columns', 'DataTable');
+  });
+
+  // Get cell value from row
+  function getCellValue(row: T, column: DataTableColumn<T>): unknown {
+    if (typeof column.accessor === 'function') {
+      return column.accessor(row);
+    }
+    return row[column.accessor as keyof T];
+  }
+
+  // Format cell value
+  function formatCellValue(row: T, column: DataTableColumn<T>): string {
+    const value = getCellValue(row, column);
+    if (column.format) {
+      return column.format(value, row);
+    }
+    if (value === null || value === undefined) {
+      return '';
+    }
+    return String(value);
+  }
+
+  /**
+   * Memoization cache for sorted data
+   * Tracks previous inputs to avoid unnecessary re-sorts
+   */
+  let cachedData: T[] = [];
+  let cachedSortColumn: string | undefined;
+  let cachedSortDirection: 'asc' | 'desc' = 'asc';
+  let cachedResult: T[] = [];
+
+  /**
+   * Sort data internally if no onSort callback
+   * Uses memoization to avoid re-sorting when inputs haven't changed
+   *
+   * Future enhancement path for virtualization:
+   * 1. Add `virtualize?: boolean` prop
+   * 2. Add `rowHeight?: number` prop (default: 48)
+   * 3. Add `overscan?: number` prop (default: 5)
+   * 4. When virtualize=true, render only visible rows + overscan
+   * 5. Use IntersectionObserver or scroll position for windowing
+   */
+  const sortedData = $derived.by(() => {
+    // If external sort handler or no sort column, return data as-is
+    if (!sortColumn || onSort) {
+      return data;
+    }
+
+    // Check if we can use cached result (same inputs)
+    const inputsUnchanged =
+      data === cachedData &&
+      sortColumn === cachedSortColumn &&
+      sortDirection === cachedSortDirection;
+
+    if (inputsUnchanged && cachedResult.length > 0) {
+      return cachedResult;
+    }
+
+    // Find the column definition
+    const column = columns.find((c) => c.id === sortColumn);
+    if (!column) {
+      return data;
+    }
+
+    // Perform sort with improved comparison
+    const sorted = [...data].sort((a, b) => {
+      const aVal = getCellValue(a, column);
+      const bVal = getCellValue(b, column);
+
+      // Handle null/undefined - nulls sort to end
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return sortDirection === 'asc' ? 1 : -1;
+      if (bVal == null) return sortDirection === 'asc' ? -1 : 1;
+
+      // String comparison with locale support and numeric sorting
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        const result = aVal.localeCompare(bVal, undefined, {
+          numeric: true,
+          sensitivity: 'base',
+        });
+        return sortDirection === 'asc' ? result : -result;
+      }
+
+      // Date comparison
+      if (aVal instanceof Date && bVal instanceof Date) {
+        const diff = aVal.getTime() - bVal.getTime();
+        return sortDirection === 'asc' ? diff : -diff;
+      }
+
+      // Numeric/generic comparison
+      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+      return 0;
+    });
+
+    // Update cache
+    cachedData = data;
+    cachedSortColumn = sortColumn;
+    cachedSortDirection = sortDirection;
+    cachedResult = sorted;
+
+    return sorted;
+  });
+
+  // Handle column header click for sorting
+  function handleSort(column: DataTableColumn<T>) {
+    if (!column.sortable) return;
+
+    const newDirection = sortColumn === column.id && sortDirection === 'asc' ? 'desc' : 'asc';
+    sortColumn = column.id;
+    sortDirection = newDirection;
+
+    if (onSort) {
+      onSort(column.id, newDirection);
+    }
+  }
+
+  // Handle row click
+  function handleRowClick(row: T) {
+    if (onRowClick) {
+      onRowClick(row);
+    }
+  }
+
+  // Get alignment class
+  function getAlignClass(align?: 'left' | 'center' | 'right'): string {
+    switch (align) {
+      case 'center':
+        return 'text-center';
+      case 'right':
+        return 'text-right';
+      default:
+        return 'text-left';
+    }
+  }
+</script>
+
+<div class={cn('overflow-x-auto rounded-lg border', className)}>
+  <table class="w-full text-sm">
+    {#if caption}
+      <caption class="sr-only">{caption}</caption>
+    {/if}
+
+    <thead class="border-b bg-muted/50">
+      <tr>
+        {#each columns as column (column.id)}
+          <th
+            scope="col"
+            class={cn(
+              'px-4 py-3 font-medium text-muted-foreground',
+              getAlignClass(column.align),
+              column.sortable && 'cursor-pointer select-none hover:bg-muted/80'
+            )}
+            style={column.width ? `width: ${column.width}` : undefined}
+            aria-sort={sortColumn === column.id
+              ? sortDirection === 'asc'
+                ? 'ascending'
+                : 'descending'
+              : undefined}
+          >
+            {#if column.sortable}
+              <button
+                type="button"
+                class="inline-flex w-full items-center justify-between gap-2"
+                onclick={() => handleSort(column)}
+              >
+                <span>{column.header}</span>
+                <svg
+                  class={cn(
+                    'h-4 w-4 transition-transform',
+                    sortColumn !== column.id && 'opacity-0',
+                    sortColumn === column.id && sortDirection === 'desc' && 'rotate-180'
+                  )}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+                </svg>
+              </button>
+            {:else}
+              {column.header}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+
+    <tbody class="divide-y">
+      {#if loading}
+        {#each Array(loadingRows) as _, i}
+          <tr>
+            {#each columns as column (column.id)}
+              <td class="px-4 py-3">
+                <Skeleton class="h-4 w-3/4" />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {:else if sortedData.length === 0}
+        <tr>
+          <td colspan={columns.length} class="px-4 py-8 text-center text-muted-foreground">
+            {emptyMessage}
+          </td>
+        </tr>
+      {:else}
+        {#each sortedData as row, index (index)}
+          {#if rowSnippet}
+            {@render rowSnippet(row, index)}
+          {:else}
+            <tr
+              class={cn(
+                'bg-card transition-colors',
+                onRowClick && 'cursor-pointer hover:bg-muted/50'
+              )}
+              onclick={() => handleRowClick(row)}
+            >
+              {#each columns as column (column.id)}
+                <td class={cn('px-4 py-3', getAlignClass(column.align))}>
+                  {formatCellValue(row, column)}
+                </td>
+              {/each}
+            </tr>
+          {/if}
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>

package/dist/lib/components/DataTable.svelte.d.ts

@@ -0,0 +1,103 @@
+/**
+   * DataTable - A sortable, accessible data table component
+   *
+   * @template T - The type of data objects in each row. Must be an object type.
+   *
+   * ## Features
+   * - Column definitions with headers and accessors
+   * - Client-side sorting (click column headers)
+   * - External sort control via onSort callback
+   * - Loading state with skeleton rows
+   * - Empty state message
+   * - Responsive horizontal scroll
+   * - Full accessibility support (ARIA attributes, keyboard navigation)
+   * - Custom row rendering via snippet
+   * - Memoized sorting for performance
+   *
+   * ## Basic Usage
+   * ```svelte
+   * <DataTable
+   *   data={users}
+   *   columns={[
+   *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+   *     { id: 'email', header: 'Email', accessor: 'email' },
+   *   ]}
+   * />
+   * ```
+   *
+   * ## Custom Cell Formatting
+   * ```svelte
+   * columns={[
+   *   {
+   *     id: 'date',
+   *     header: 'Created',
+   *     accessor: 'createdAt',
+   *     format: (value) => new Date(value).toLocaleDateString(),
+   *   },
+   * ]}
+   * ```
+   *
+   * ## Server-Side Sorting
+   * ```svelte
+   * <DataTable
+   *   {data}
+   *   {columns}
+   *   sortColumn={serverSort.column}
+   *   sortDirection={serverSort.direction}
+   *   onSort={(col, dir) => fetchSorted(col, dir)}
+   * />
+   * ```
+   *
+   * @see DataTableColumn for column configuration options
+   */
+import type { DataTableColumn } from '../types/components.js';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Array of data rows */
+        data: T[];
+        /** Column definitions */
+        columns: DataTableColumn<T>[];
+        /** Loading state */
+        loading?: boolean;
+        /** Number of skeleton rows to show when loading */
+        loadingRows?: number;
+        /** Message when no data */
+        emptyMessage?: string;
+        /** Current sort column ID */
+        sortColumn?: string;
+        /** Current sort direction */
+        sortDirection?: "asc" | "desc";
+        /** Callback when sort changes */
+        onSort?: (column: string, direction: "asc" | "desc") => void;
+        /** Callback when row is clicked */
+        onRowClick?: (row: T) => void;
+        /** Caption for accessibility */
+        caption?: string;
+        /** Custom row snippet for complete control */
+        row?: Snippet<[T, number]>;
+        /** Additional classes */
+        class?: string;
+    };
+    exports: {};
+    bindings: "sortColumn" | "sortDirection";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sortColumn" | "sortDirection";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T extends Record<string, unknown>> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/lib/components/Dialog.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Dialog description */
+    description?: string;
+    /** Additional class for dialog content */
+    class?: string;
+    /** Content inside the dialog */
+    children: Snippet;
+    /** Optional trigger element */
+    trigger?: Snippet;
+    /** Optional footer element */
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    title,
+    description,
+    class: className,
+    children,
+    trigger,
+    footer,
+  }: Props = $props();
+
+  function handleOpenChange(newOpen: boolean) {
+    open = newOpen;
+    onOpenChange?.(newOpen);
+  }
+</script>
+
+<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  {#if trigger}
+    <DialogPrimitive.Trigger asChild>
+      {#snippet child({ props })}
+        <span {...props}>
+          {@render trigger()}
+        </span>
+      {/snippet}
+    </DialogPrimitive.Trigger>
+  {/if}
+
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogPrimitive.Content
+      class={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+    >
+      {#if title || description}
+        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+          {#if title}
+            <DialogPrimitive.Title class="text-lg font-semibold leading-none tracking-tight">
+              {title}
+            </DialogPrimitive.Title>
+          {/if}
+          {#if description}
+            <DialogPrimitive.Description class="text-sm text-muted-foreground">
+              {description}
+            </DialogPrimitive.Description>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="dialog-content">
+        {@render children()}
+      </div>
+
+      {#if footer}
+        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+          {@render footer()}
+        </div>
+      {/if}
+
+      <DialogPrimitive.Close
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+        aria-label="Close dialog"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+        <span class="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/lib/components/Dialog.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Dialog description */
+    description?: string;
+    /** Additional class for dialog content */
+    class?: string;
+    /** Content inside the dialog */
+    children: Snippet;
+    /** Optional trigger element */
+    trigger?: Snippet;
+    /** Optional footer element */
+    footer?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;