@getmicdrop/svelte-components 5.5.5 → 5.6.1

package/dist/constants/validation.js

@@ -1,91 +1,91 @@
-/**
- * Validation Constants
- *
- * Shared validation rules and defaults for event, ticket, and promo code validation.
- * Used by micdrop-frontend, venue-calendar-npm, and other apps.
- *
- * @example
- * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
- */
-
-// ============================================================================
-// Event Time Constants
-// ============================================================================
-
-/** Minimum event duration in minutes (validation constraint) */
-export const MIN_EVENT_DURATION_MINS = 15;
-
-/** Maximum event duration in minutes (24 hours) */
-export const MAX_EVENT_DURATION_MINS = 1440;
-
-/** Default event duration in minutes (used when auto-filling end time) */
-export const DEFAULT_EVENT_DURATION_MINS = 90;
-
-/** Default time doors open before event start in minutes (used when auto-filling) */
-export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
-
-// ============================================================================
-// Ticket Constants
-// ============================================================================
-
-/** Maximum tickets per order limit */
-export const MAX_TICKETS_PER_ORDER = 100;
-
-/** Minimum tickets per order limit */
-export const MIN_TICKETS_PER_ORDER = 0;
-
-// ============================================================================
-// Promo Code Constants
-// ============================================================================
-
-/** Maximum percentage discount */
-export const MAX_PERCENTAGE_DISCOUNT = 100;
-
-// ============================================================================
-// Error Codes
-// ============================================================================
-
-export const ErrorCodes = {
-  // Event errors
-  EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
-  EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
-  EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
-  EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
-  EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
-  EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
-
-  // Price/quantity errors
-  PRICE_REQUIRED: 'PRICE_REQUIRED',
-  PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
-  PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
-  QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
-  QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
-  QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
-
-  // Ticket limit errors
-  MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
-  MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
-  MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
-  MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
-
-  // Sales window errors
-  SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
-  SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
-  SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
-
-  // Capacity errors
-  CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
-
-  // Promo code errors
-  PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
-  PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
-  PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
-  PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
-  PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
-  PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
-  PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
-
-  // Warning codes
-  PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
-  SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
-};
+/**
+ * Validation Constants
+ *
+ * Shared validation rules and defaults for event, ticket, and promo code validation.
+ * Used by micdrop-frontend, venue-calendar-npm, and other apps.
+ *
+ * @example
+ * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
+ */
+
+// ============================================================================
+// Event Time Constants
+// ============================================================================
+
+/** Minimum event duration in minutes (validation constraint) */
+export const MIN_EVENT_DURATION_MINS = 15;
+
+/** Maximum event duration in minutes (24 hours) */
+export const MAX_EVENT_DURATION_MINS = 1440;
+
+/** Default event duration in minutes (used when auto-filling end time) */
+export const DEFAULT_EVENT_DURATION_MINS = 90;
+
+/** Default time doors open before event start in minutes (used when auto-filling) */
+export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
+
+// ============================================================================
+// Ticket Constants
+// ============================================================================
+
+/** Maximum tickets per order limit */
+export const MAX_TICKETS_PER_ORDER = 100;
+
+/** Minimum tickets per order limit */
+export const MIN_TICKETS_PER_ORDER = 0;
+
+// ============================================================================
+// Promo Code Constants
+// ============================================================================
+
+/** Maximum percentage discount */
+export const MAX_PERCENTAGE_DISCOUNT = 100;
+
+// ============================================================================
+// Error Codes
+// ============================================================================
+
+export const ErrorCodes = {
+  // Event errors
+  EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
+  EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
+  EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
+  EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
+  EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
+  EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
+
+  // Price/quantity errors
+  PRICE_REQUIRED: 'PRICE_REQUIRED',
+  PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
+  PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
+  QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
+  QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
+  QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
+
+  // Ticket limit errors
+  MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
+  MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
+  MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
+  MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
+
+  // Sales window errors
+  SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
+  SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
+  SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
+
+  // Capacity errors
+  CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
+
+  // Promo code errors
+  PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
+  PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
+  PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
+  PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
+  PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
+  PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
+  PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
+
+  // Warning codes
+  PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
+  SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
+};

package/dist/constants/validation.spec.js

@@ -1,64 +1,64 @@
-import { describe, it, expect } from 'vitest';
-import {
-  MIN_EVENT_DURATION_MINS,
-  MAX_EVENT_DURATION_MINS,
-  DEFAULT_EVENT_DURATION_MINS,
-  DEFAULT_DOORS_BEFORE_START_MINS,
-  MAX_TICKETS_PER_ORDER,
-  MIN_TICKETS_PER_ORDER,
-  MAX_PERCENTAGE_DISCOUNT,
-  ErrorCodes,
-} from './validation.js';
-
-describe('validation constants', () => {
-  describe('event time constants', () => {
-    it('exports MIN_EVENT_DURATION_MINS as 15', () => {
-      expect(MIN_EVENT_DURATION_MINS).toBe(15);
-    });
-
-    it('exports MAX_EVENT_DURATION_MINS as 1440 (24 hours)', () => {
-      expect(MAX_EVENT_DURATION_MINS).toBe(1440);
-    });
-
-    it('exports DEFAULT_EVENT_DURATION_MINS as 90', () => {
-      expect(DEFAULT_EVENT_DURATION_MINS).toBe(90);
-    });
-
-    it('exports DEFAULT_DOORS_BEFORE_START_MINS as 30', () => {
-      expect(DEFAULT_DOORS_BEFORE_START_MINS).toBe(30);
-    });
-  });
-
-  describe('ticket constants', () => {
-    it('exports MAX_TICKETS_PER_ORDER as 100', () => {
-      expect(MAX_TICKETS_PER_ORDER).toBe(100);
-    });
-
-    it('exports MIN_TICKETS_PER_ORDER as 0', () => {
-      expect(MIN_TICKETS_PER_ORDER).toBe(0);
-    });
-  });
-
-  describe('promo code constants', () => {
-    it('exports MAX_PERCENTAGE_DISCOUNT as 100', () => {
-      expect(MAX_PERCENTAGE_DISCOUNT).toBe(100);
-    });
-  });
-
-  describe('error codes', () => {
-    it('exports ErrorCodes object with event errors', () => {
-      expect(ErrorCodes.EVENT_DURATION_TOO_SHORT).toBe('EVENT_DURATION_TOO_SHORT');
-      expect(ErrorCodes.EVENT_END_BEFORE_START).toBe('EVENT_END_BEFORE_START');
-    });
-
-    it('exports ErrorCodes object with ticket errors', () => {
-      expect(ErrorCodes.PRICE_REQUIRED).toBe('PRICE_REQUIRED');
-      expect(ErrorCodes.QUANTITY_REQUIRED).toBe('QUANTITY_REQUIRED');
-    });
-
-    it('exports ErrorCodes object with promo errors', () => {
-      expect(ErrorCodes.PROMO_NAME_REQUIRED).toBe('PROMO_NAME_REQUIRED');
-      expect(ErrorCodes.PROMO_PERCENT_EXCEEDS_100).toBe('PROMO_PERCENT_EXCEEDS_100');
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import {
+  MIN_EVENT_DURATION_MINS,
+  MAX_EVENT_DURATION_MINS,
+  DEFAULT_EVENT_DURATION_MINS,
+  DEFAULT_DOORS_BEFORE_START_MINS,
+  MAX_TICKETS_PER_ORDER,
+  MIN_TICKETS_PER_ORDER,
+  MAX_PERCENTAGE_DISCOUNT,
+  ErrorCodes,
+} from './validation.js';
+
+describe('validation constants', () => {
+  describe('event time constants', () => {
+    it('exports MIN_EVENT_DURATION_MINS as 15', () => {
+      expect(MIN_EVENT_DURATION_MINS).toBe(15);
+    });
+
+    it('exports MAX_EVENT_DURATION_MINS as 1440 (24 hours)', () => {
+      expect(MAX_EVENT_DURATION_MINS).toBe(1440);
+    });
+
+    it('exports DEFAULT_EVENT_DURATION_MINS as 90', () => {
+      expect(DEFAULT_EVENT_DURATION_MINS).toBe(90);
+    });
+
+    it('exports DEFAULT_DOORS_BEFORE_START_MINS as 30', () => {
+      expect(DEFAULT_DOORS_BEFORE_START_MINS).toBe(30);
+    });
+  });
+
+  describe('ticket constants', () => {
+    it('exports MAX_TICKETS_PER_ORDER as 100', () => {
+      expect(MAX_TICKETS_PER_ORDER).toBe(100);
+    });
+
+    it('exports MIN_TICKETS_PER_ORDER as 0', () => {
+      expect(MIN_TICKETS_PER_ORDER).toBe(0);
+    });
+  });
+
+  describe('promo code constants', () => {
+    it('exports MAX_PERCENTAGE_DISCOUNT as 100', () => {
+      expect(MAX_PERCENTAGE_DISCOUNT).toBe(100);
+    });
+  });
+
+  describe('error codes', () => {
+    it('exports ErrorCodes object with event errors', () => {
+      expect(ErrorCodes.EVENT_DURATION_TOO_SHORT).toBe('EVENT_DURATION_TOO_SHORT');
+      expect(ErrorCodes.EVENT_END_BEFORE_START).toBe('EVENT_END_BEFORE_START');
+    });
+
+    it('exports ErrorCodes object with ticket errors', () => {
+      expect(ErrorCodes.PRICE_REQUIRED).toBe('PRICE_REQUIRED');
+      expect(ErrorCodes.QUANTITY_REQUIRED).toBe('QUANTITY_REQUIRED');
+    });
+
+    it('exports ErrorCodes object with promo errors', () => {
+      expect(ErrorCodes.PROMO_NAME_REQUIRED).toBe('PROMO_NAME_REQUIRED');
+      expect(ErrorCodes.PROMO_PERCENT_EXCEEDS_100).toBe('PROMO_PERCENT_EXCEEDS_100');
+    });
+  });
+});

package/dist/datetime/__tests__/format.test.js

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { formatCleanTimeRange, formatDateRange, formatDayOfWeek, formatEventDate, formatEventDateTime, formatEventTime, formatHour, formatMonth, formatNotificationTime, formatRelativeTime, formatTimeRange, getDateInTimezone, getDateParts, getHourInTimezone, isToday, } from '../format';
-import { DateTimeError } from '../types';
+import { DateTimeError, DateTimeErrorCode } from '../types';
 describe('format utilities', () => {
     describe('formatEventTime', () => {
         it('formats time in specified timezone', () => {

package/dist/datetime/__tests__/parse.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { combineDateAndTime, formatDateTimeForAPI, isNextDayTime, minutesToTimeString, parseDateTimeFromAPI, parseEndOfDay, parseLocalToUTC, parseStartOfDay, parseTimeToMinutes, parseUTCToLocal, stripNextDayPrefix, } from '../parse';
-import { DateTimeError } from '../types';
+import { DateTimeError, DateTimeErrorCode } from '../types';
 describe('parse utilities', () => {
     describe('parseLocalToUTC', () => {
         it('converts local datetime to UTC', () => {

package/dist/datetime/__tests__/timezone.test.js

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { getTimezoneDisplayName, getTimezoneOffset, getUserTimezone, getVenueTimezone, isDST, isValidTimezone, normalizeTimezone, getIANATimezone, isValidIANATimezone, getAllTimezones, formatTimezoneForDisplay, getTimezoneOptions, getCommonUSTimezoneOptions, } from '../timezone';
 import { DateTimeError, DateTimeErrorCode } from '../types';
 describe('timezone utilities', () => {

package/dist/datetime/parse.js

@@ -6,7 +6,7 @@
  *
  * @module datetime/parse
  */
-import { format } from 'date-fns';
+import { format, parse } from 'date-fns';
 import { fromZonedTime, toZonedTime } from 'date-fns-tz';
 import { DATE_FORMATS } from './constants';
 import { isValidTimezone } from './timezone';

package/dist/forms/createFormStore.svelte.js

@@ -7,6 +7,7 @@
  * - UI states (loading, saving, saved)
  * - Section-level validation for progressive forms
  */
+import { z } from 'zod';
 // ============================================================================
 // Implementation
 // ============================================================================

package/dist/index.d.ts

@@ -8,4 +8,5 @@ export * from "./presets/index.js";
 export { portal } from "./utils/portal.js";
 export { safeSlide } from "./utils/transitions.js";
 export { typography } from "./tokens/typography.js";
+export { logger, configureLogger } from "./utils/logger.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -35,6 +35,7 @@ export * from './presets/index.js';
 // Utils / Actions
 export { portal } from './utils/portal.js';
 export { safeSlide } from './utils/transitions.js';
+export { logger, configureLogger } from './utils/logger.js';
 
 // Design Tokens
 export { typography } from './tokens/typography.js';

package/dist/patterns/data/DataGrid.svelte

@@ -1,45 +1,45 @@
-<script>
-  let {
-    items = [],
-    cols = 3,
-    gap = 4,
-    minWidth = null,
-    class: className = '',
-    children,
-  } = $props();
-
-  const colsClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 sm:grid-cols-2',
-    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
-    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
-  };
-
-  const gapClasses = {
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    5: 'gap-5',
-    6: 'gap-6',
-    8: 'gap-8'
-  };
-
-  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
-  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
-  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
-</script>
-
-<div
-  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
-  style={gridStyle}
->
-  {#if items.length > 0}
-    {#each items as item, index}
-      {@render children?.(item, index)}
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</div>
+<script>
+  let {
+    items = [],
+    cols = 3,
+    gap = 4,
+    minWidth = null,
+    class: className = '',
+    children,
+  } = $props();
+
+  const colsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  };
+
+  const gapClasses = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
+  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
+  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
+</script>
+
+<div
+  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
+  style={gridStyle}
+>
+  {#if items.length > 0}
+    {#each items as item, index}
+      {@render children?.(item, index)}
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/patterns/data/DataList.svelte

@@ -1,24 +1,24 @@
-<script>
-  let {
-    items = [],
-    dividers = true,
-    gap = 0,
-    class: className = '',
-    children,
-  } = $props();
-
-  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
-  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
-</script>
-
-<ul class="{dividerClass} {gapClass} {className}" role="list">
-  {#if items.length > 0}
-    {#each items as item, index}
-      <li class="py-3 first:pt-0 last:pb-0">
-        {@render children?.(item, index)}
-      </li>
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</ul>
+<script>
+  let {
+    items = [],
+    dividers = true,
+    gap = 0,
+    class: className = '',
+    children,
+  } = $props();
+
+  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
+  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
+</script>
+
+<ul class="{dividerClass} {gapClass} {className}" role="list">
+  {#if items.length > 0}
+    {#each items as item, index}
+      <li class="py-3 first:pt-0 last:pb-0">
+        {@render children?.(item, index)}
+      </li>
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</ul>

package/dist/patterns/data/DataTable.svelte

@@ -1,39 +1,39 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    striped = false,
-    hoverable = true,
-    bordered = false,
-    size = 'md',
-    class: className = '',
-    header,
-    children,
-  } = $props();
-
-  const sizeClasses = {
-    sm: 'px-3 py-2 text-xs',
-    md: 'px-4 py-3 text-sm',
-    lg: 'px-6 py-4 text-base'
-  };
-
-  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
-</script>
-
-<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
-  <table class={`w-full text-left ${typography.textMuted}`}>
-    {#if header}
-      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
-        {@render header(cellSize)}
-      </thead>
-    {/if}
-
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
-      {@render children?.(cellSize)}
-    </tbody>
-  </table>
-</div>
-
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    striped = false,
+    hoverable = true,
+    bordered = false,
+    size = 'md',
+    class: className = '',
+    header,
+    children,
+  } = $props();
+
+  const sizeClasses = {
+    sm: 'px-3 py-2 text-xs',
+    md: 'px-4 py-3 text-sm',
+    lg: 'px-6 py-4 text-base'
+  };
+
+  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
+  <table class={`w-full text-left ${typography.textMuted}`}>
+    {#if header}
+      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
+        {@render header(cellSize)}
+      </thead>
+    {/if}
+
+    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
+      {@render children?.(cellSize)}
+    </tbody>
+  </table>
+</div>
+
 <style>
   :global(table th),
   :global(table td) {