@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/components/Layout/Stack.svelte

@@ -1,96 +1,48 @@
-<script>
-  /**
-   * Stack - Vertical or horizontal flex container with consistent gap spacing
-   *
-   * Use Stack when you need to space children vertically or horizontally.
-   * Stack controls spacing via gap - children should NOT have external margins.
-   *
-   * @example Numeric gap (Tailwind scale)
-   * <Stack gap="4">
-   *   <Card>First</Card>
-   *   <Card>Second</Card>
-   * </Stack>
-   *
-   * @example Semantic gap (recommended)
-   * <Stack gap="section">
-   *   <Card>First card</Card>
-   *   <Card>Second card</Card>
-   * </Stack>
-   *
-   * @example Horizontal with alignment
-   * <Stack direction="horizontal" gap="group" align="center">
-   *   <Button>Save</Button>
-   *   <Button variant="secondary">Cancel</Button>
-   * </Stack>
-   *
-   * Semantic Gap Values (Flowbite/8px grid):
-   *   - tight:    4px  (1)   - Icon + text, inline elements
-   *   - compact:  6px  (1.5) - Label + input, tight relationships
-   *   - item:     8px  (2)   - List items, form fields
-   *   - group:    12px (3)   - Form groups, related content
-   *   - content:  16px (4)   - Card sections, sidebar groups
-   *   - section:  24px (6)   - Between cards, major sections
-   *   - layout:   32px (8)   - Page sections, layout divisions
-   *   - page:     48px (12)  - Hero sections, page divisions
-   */
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
-  /**
-   * Gap between children - semantic names or Tailwind spacing scale
-   * @type {'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16'}
-   */
-  export let gap = '4';
+  type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
+  type Direction = 'vertical' | 'horizontal';
+  type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
 
-  /**
-   * Stack direction
-   * @type {'vertical' | 'horizontal'}
-   */
-  export let direction = 'vertical';
+  interface Props {
+    gap?: GapValue;
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    as?: ElementType;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
 
-  /**
-   * Cross-axis alignment (align-items)
-   * @type {'start' | 'center' | 'end' | 'stretch' | 'baseline' | undefined}
-   */
-  export let align = undefined;
+  let {
+    gap = '4',
+    direction = 'vertical',
+    align,
+    justify,
+    wrap = false,
+    as = 'div',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
 
-  /**
-   * Main-axis alignment (justify-content)
-   * @type {'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | undefined}
-   */
-  export let justify = undefined;
-
-  /**
-   * Whether children should wrap
-   * @type {boolean}
-   */
-  export let wrap = false;
-
-  /**
-   * HTML element to render as
-   * @type {'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol'}
-   */
-  export let as = 'div';
-
-  /**
-   * Additional CSS classes
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-
-  // Semantic gap names → Tailwind gap classes (Flowbite/8px grid)
-  const semanticGapMap = {
-    'tight': 'gap-1',      // 4px - Icon + text, inline elements
-    'compact': 'gap-1.5',  // 6px - Label + input, tight relationships
-    'item': 'gap-2',       // 8px - List items, form fields
-    'group': 'gap-3',      // 12px - Form groups, related content
-    'content': 'gap-4',    // 16px - Card sections, sidebar groups
-    'section': 'gap-6',    // 24px - Between cards, major sections
-    'layout': 'gap-8',     // 32px - Page sections, layout divisions
-    'page': 'gap-12',      // 48px - Hero sections, page divisions
+  const semanticGapMap: Record<string, string> = {
+    'tight': 'gap-1',
+    'compact': 'gap-1.5',
+    'item': 'gap-2',
+    'group': 'gap-3',
+    'content': 'gap-4',
+    'section': 'gap-6',
+    'layout': 'gap-8',
+    'page': 'gap-12',
   };
 
-  // Numeric gap values (backwards compatible)
-  const numericGapMap = {
+  const numericGapMap: Record<string, string> = {
     '0': 'gap-0',
     '1': 'gap-1',
     '1.5': 'gap-1.5',
@@ -103,10 +55,9 @@
     '16': 'gap-16'
   };
 
-  // Combined map - semantic names take precedence
   const gapMap = { ...numericGapMap, ...semanticGapMap };
 
-  const alignMap = {
+  const alignMap: Record<string, string> = {
     start: 'items-start',
     center: 'items-center',
     end: 'items-end',
@@ -114,7 +65,7 @@
     baseline: 'items-baseline'
   };
 
-  const justifyMap = {
+  const justifyMap: Record<string, string> = {
     start: 'justify-start',
     center: 'justify-center',
     end: 'justify-end',
@@ -123,7 +74,7 @@
     evenly: 'justify-evenly'
   };
 
-  $: classes = [
+  let classes = $derived([
     'flex',
     direction === 'vertical' ? 'flex-col' : 'flex-row',
     gapMap[gap] || 'gap-4',
@@ -131,9 +82,9 @@
     justify ? justifyMap[justify] : '',
     wrap ? 'flex-wrap' : '',
     className
-  ].filter(Boolean).join(' ');
+  ].filter(Boolean).join(' '));
 </script>
 
-<svelte:element this={as} class={classes}>
-  <slot />
+<svelte:element this={as} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
 </svelte:element>

package/dist/components/Layout/Stack.svelte.d.ts

@@ -1,52 +1,21 @@
-export default Stack;
-type Stack = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
-    gap?: "0" | "1" | "2" | "1.5" | "12" | "4" | "3" | "6" | "8" | "section" | "16" | "page" | "group" | "tight" | "compact" | "item" | "content" | "layout" | undefined;
-    align?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
-    wrap?: boolean | undefined;
-    as?: "div" | "nav" | "ol" | "article" | "aside" | "main" | "section" | "ul" | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Stack: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    direction?: "horizontal" | "vertical" | undefined;
-    gap?: "0" | "1" | "2" | "1.5" | "12" | "4" | "3" | "6" | "8" | "section" | "16" | "page" | "group" | "tight" | "compact" | "item" | "content" | "layout" | undefined;
-    align?: "start" | "center" | "end" | "stretch" | "baseline" | undefined;
-    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | undefined;
-    wrap?: boolean | undefined;
-    as?: "div" | "nav" | "ol" | "article" | "aside" | "main" | "section" | "ul" | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
+type Direction = 'vertical' | 'horizontal';
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
+interface Props {
+    gap?: GapValue;
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    as?: ElementType;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;
 //# sourceMappingURL=Stack.svelte.d.ts.map

package/dist/components/Layout/Stack.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2LA;;;;YAhCY,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS;cAI/D,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS;;;;;;;;;eA4B8F;sCAT5I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AACnK,KAAK,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AACjE,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC5E,KAAK,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1F,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAkFH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/patterns/data/DataGrid.svelte

@@ -1,43 +1,13 @@
 <script>
-  /**
-   * DataGrid - Responsive card grid with consistent gaps
-   *
-   * Displays items in a responsive grid layout. Perfect for
-   * card-based data display like event cards, user cards, etc.
-   *
-   * @example
-   * <DataGrid cols={3}>
-   *   {#each events as event}
-   *     <Card>
-   *       <h3>{event.name}</h3>
-   *       <p>{event.date}</p>
-   *     </Card>
-   *   {/each}
-   * </DataGrid>
-   *
-   * Or with items prop:
-   * <DataGrid items={events} cols={3} let:item>
-   *   <EventCard event={item} />
-   * </DataGrid>
-   */
+  let {
+    items = [],
+    cols = 3,
+    gap = 4,
+    minWidth = null,
+    class: className = '',
+    children,
+  } = $props();
 
-  /** Array of items to render (optional - can use slot instead) */
-  export let items = [];
-
-  /** Number of columns (1-6) */
-  export let cols = 3;
-
-  /** Gap between items */
-  export let gap = 4;
-
-  /** Minimum column width for auto-fit layout (set to enable auto columns) */
-  export let minWidth = null;
-
-  /** Additional class for the grid container */
-  let className = '';
-  export { className as class };
-
-  // Fixed column classes
   const colsClasses = {
     1: 'grid-cols-1',
     2: 'grid-cols-1 sm:grid-cols-2',
@@ -47,7 +17,6 @@
     6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
   };
 
-  // Gap classes
   const gapClasses = {
     2: 'gap-2',
     3: 'gap-3',
@@ -57,11 +26,9 @@
     8: 'gap-8'
   };
 
-  $: gridCols = colsClasses[cols] || colsClasses[3];
-  $: gridGap = gapClasses[gap] || gapClasses[4];
-
-  // For auto-fit layout with minWidth
-  $: gridStyle = minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '';
+  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
@@ -70,9 +37,9 @@
 >
   {#if items.length > 0}
     {#each items as item, index}
-      <slot {item} {index} />
+      {@render children?.(item, index)}
     {/each}
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </div>

package/dist/patterns/data/DataGrid.svelte.d.ts

@@ -1,48 +1,22 @@
 export default DataGrid;
-type DataGrid = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    items?: any[] | undefined;
-    minWidth?: null | undefined;
-    cols?: number | undefined;
-    gap?: number | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type DataGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DataGrid: import("svelte").Component<{
+    items?: any[];
+    cols?: number;
+    gap?: number;
+    minWidth?: any;
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    items?: any[];
+    cols?: number;
+    gap?: number;
+    minWidth?: any;
+    class?: string;
+    children: any;
 };
-declare const DataGrid: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    items?: any[] | undefined;
-    minWidth?: null | undefined;
-    cols?: number | undefined;
-    gap?: number | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=DataGrid.svelte.d.ts.map

package/dist/patterns/data/DataGrid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataGrid.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoGA;;;;;;;;;;;;eAAqK;sCAT/H,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DataGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataGrid.svelte.js"],"names":[],"mappings":";;;;;AAgDA;YA5C6B,GAAG,EAAE;WAAS,MAAM;UAAQ,MAAM;eAAa,GAAG;YAAU,MAAM;cAAY,GAAG;WA4CvD;wBA5CpC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/data/DataList.svelte

@@ -1,54 +1,24 @@
 <script>
-  /**
-   * DataList - List with consistent item spacing and dividers
-   *
-   * A structured list container for displaying data items with
-   * consistent spacing and optional dividers.
-   *
-   * @example
-   * <DataList>
-   *   {#each notifications as notification}
-   *     <DataList.Item>
-   *       <span>{notification.message}</span>
-   *       <Badge variant="info">{notification.type}</Badge>
-   *     </DataList.Item>
-   *   {/each}
-   * </DataList>
-   *
-   * Or with slot per item:
-   * <DataList items={users} let:item>
-   *   <div class="flex items-center gap-3">
-   *     <Avatar src={item.avatar} />
-   *     <span>{item.name}</span>
-   *   </div>
-   * </DataList>
-   */
+  let {
+    items = [],
+    dividers = true,
+    gap = 0,
+    class: className = '',
+    children,
+  } = $props();
 
-  /** Array of items to render (optional - can use slot instead) */
-  export let items = [];
-
-  /** Whether to show dividers between items */
-  export let dividers = true;
-
-  /** Spacing between items */
-  export let gap = 0;
-
-  /** Additional class for the list container */
-  let className = '';
-  export { className as class };
-
-  $: gapClass = gap > 0 ? `space-y-${gap}` : '';
-  $: dividerClass = dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '';
+  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">
-        <slot {item} {index} />
+        {@render children?.(item, index)}
       </li>
     {/each}
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </ul>

package/dist/patterns/data/DataList.svelte.d.ts

@@ -1,46 +1,20 @@
 export default DataList;
-type DataList = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    items?: any[] | undefined;
-    gap?: number | undefined;
-    dividers?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type DataList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DataList: import("svelte").Component<{
+    items?: any[];
+    dividers?: boolean;
+    gap?: number;
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    items?: any[];
+    dividers?: boolean;
+    gap?: number;
+    class?: string;
+    children: any;
 };
-declare const DataList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    items?: any[] | undefined;
-    gap?: number | undefined;
-    dividers?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=DataList.svelte.d.ts.map

package/dist/patterns/data/DataList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataList.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8EA;;;;;;;;;;;eAA8J;sCATxH,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DataList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataList.svelte.js"],"names":[],"mappings":";;;;;AA8BA;YA1B6B,GAAG,EAAE;eAAa,OAAO;UAAQ,MAAM;YAAU,MAAM;cAAY,GAAG;WA0B5C;wBA1BpC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/data/DataTable.svelte

@@ -1,63 +1,33 @@
 <script>
-  /**
-   * DataTable - Responsive table with consistent styling
-   *
-   * Provides a styled table container with header and body slots.
-   * For full-featured data grids with sorting/pagination, use TanStack Table.
-   *
-   * @example
-   * <DataTable>
-   *   <tr slot="header">
-   *     <th>Name</th>
-   *     <th>Email</th>
-   *     <th>Status</th>
-   *   </tr>
-   *   {#each users as user}
-   *     <tr>
-   *       <td>{user.name}</td>
-   *       <td>{user.email}</td>
-   *       <td><Badge variant="success">Active</Badge></td>
-   *     </tr>
-   *   {/each}
-   * </DataTable>
-   */
+  let {
+    striped = false,
+    hoverable = true,
+    bordered = false,
+    size = 'md',
+    class: className = '',
+    header,
+    children,
+  } = $props();
 
-  /** Whether the table has striped rows */
-  export let striped = false;
-
-  /** Whether rows are hoverable */
-  export let hoverable = true;
-
-  /** Whether to show borders between cells */
-  export let bordered = false;
-
-  /** Table size variant */
-  export let size = 'md';
-
-  /** Additional class for the table wrapper */
-  let className = '';
-  export { className as class };
-
-  // Size classes for cells
   const sizeClasses = {
     sm: 'px-3 py-2 text-xs',
     md: 'px-4 py-3 text-sm',
     lg: 'px-6 py-4 text-base'
   };
 
-  $: cellSize = sizeClasses[size] || sizeClasses.md;
+  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 text-gray-500 dark:text-gray-400">
-    {#if $$slots.header}
+    {#if header}
       <thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
-        <slot name="header" {cellSize} />
+        {@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' : ''}">
-      <slot {cellSize} />
+      {@render children?.(cellSize)}
     </tbody>
   </table>
 </div>