@getmicdrop/svelte-components 3.1.0 → 4.0.0

package/dist/patterns/data/DataGrid.svelte

@@ -0,0 +1,78 @@
+<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>
+   */
+
+  /** 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',
+    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'
+  };
+
+  // Gap classes
+  const gapClasses = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    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))` : '';
+</script>
+
+<div
+  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
+  style={gridStyle}
+>
+  {#if items.length > 0}
+    {#each items as item, index}
+      <slot {item} {index} />
+    {/each}
+  {:else}
+    <slot />
+  {/if}
+</div>

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

@@ -0,0 +1,48 @@
+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;
+};
+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

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

package/dist/patterns/data/DataList.svelte

@@ -0,0 +1,54 @@
+<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>
+   */
+
+  /** 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' : '';
+</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} />
+      </li>
+    {/each}
+  {:else}
+    <slot />
+  {/if}
+</ul>

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

@@ -0,0 +1,46 @@
+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;
+};
+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

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

package/dist/patterns/data/DataTable.svelte

@@ -0,0 +1,73 @@
+<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>
+   */
+
+  /** 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;
+</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}
+      <thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
+        <slot name="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} />
+    </tbody>
+  </table>
+</div>
+
+<style>
+  :global(table th),
+  :global(table td) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem
+}
+</style>

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

@@ -0,0 +1,68 @@
+export default DataTable;
+type DataTable = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: string | undefined;
+    striped?: boolean | undefined;
+    hoverable?: boolean | undefined;
+    bordered?: boolean | undefined;
+}, {
+    header: {
+        cellSize: any;
+    };
+    default: {
+        cellSize: any;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        cellSize: any;
+    };
+    default: {
+        cellSize: any;
+    };
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const DataTable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: string | undefined;
+    striped?: boolean | undefined;
+    hoverable?: boolean | undefined;
+    bordered?: boolean | undefined;
+}, {
+    header: {
+        cellSize: any;
+    };
+    default: {
+        cellSize: any;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        cellSize: any;
+    };
+    default: {
+        cellSize: any;
+    };
+}, {}, 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=DataTable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataTable.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA;;;;;;;;;;;;;;;;;;;;;;eAA8K;sCATxI,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"}

package/dist/patterns/forms/FormActions.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormActions.spec.js"],"names":[],"mappings":""}

package/dist/patterns/forms/FormActions.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormActions.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA2FA;;;;mBAAuH;wBAtE/F,sBAAsB;6CA6DD,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/patterns/forms/FormActions.svelte.d.ts

@@ -0,0 +1,49 @@
+export default FormActions;
+type FormActions = SvelteComponent<{
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    onCancel?: (() => void) | undefined;
+    onSubmit?: (() => void) | undefined;
+    submitLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    isSubmitting?: boolean | undefined;
+    showCancel?: boolean | undefined;
+    submitVariant?: string | undefined;
+    cancelVariant?: string | undefined;
+    submitType?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormActions: $$__sveltets_2_IsomorphicComponent<{
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    onCancel?: (() => void) | undefined;
+    onSubmit?: (() => void) | undefined;
+    submitLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    isSubmitting?: boolean | undefined;
+    showCancel?: boolean | undefined;
+    submitVariant?: string | undefined;
+    cancelVariant?: string | undefined;
+    submitType?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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=FormActions.svelte.d.ts.map

package/dist/patterns/forms/FormActions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormActions.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA+EA;;;;;;;;;;;;;;;mBAAwR;6CAT3O,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"}

package/dist/patterns/forms/FormGrid.svelte

@@ -0,0 +1,49 @@
+<script>
+  /**
+   * FormGrid - Responsive grid layout for form fields
+   *
+   * Arranges form fields in a responsive grid that collapses to single
+   * column on mobile. Supports 1-4 columns.
+   *
+   * @example
+   * <FormGrid cols={2}>
+   *   <FormField label="First Name" bind:value={firstName} />
+   *   <FormField label="Last Name" bind:value={lastName} />
+   * </FormGrid>
+   */
+
+  /** Number of columns (1-4) */
+  export let cols = 2;
+
+  /** Gap between items (Tailwind spacing scale) */
+  export let gap = 4;
+
+  /** Additional class for the grid container */
+  let className = '';
+  export { className as class };
+
+  // Map cols to Tailwind grid classes
+  const colsClass = {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4'
+  };
+
+  // Map gap to Tailwind gap classes
+  const gapClass = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  $: gridCols = colsClass[cols] || colsClass[2];
+  $: gridGap = gapClass[gap] || gapClass[4];
+</script>
+
+<div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
+  <slot />
+</div>

package/dist/patterns/forms/FormGrid.svelte.d.ts

@@ -0,0 +1,44 @@
+export default FormGrid;
+type FormGrid = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    cols?: number | undefined;
+    gap?: number | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormGrid: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | 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=FormGrid.svelte.d.ts.map

package/dist/patterns/forms/FormGrid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormGrid.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAwEA;;;;;;;;;;eAAkJ;sCAT5G,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"}

package/dist/patterns/forms/FormSection.svelte

@@ -0,0 +1,47 @@
+<script>
+  /**
+   * FormSection - Groups related form fields with title and description
+   *
+   * Use this to organize forms into logical sections with consistent spacing.
+   *
+   * @example
+   * <FormSection title="Personal Information" description="Your basic details">
+   *   <FormField label="Name" bind:value={name} />
+   *   <FormField label="Email" bind:value={email} />
+   * </FormSection>
+   */
+
+  /** Section title */
+  export let title = '';
+
+  /** Section description */
+  export let description = '';
+
+  /** Whether to show a divider above the section */
+  export let divider = false;
+
+  /** Additional class for the section container */
+  let className = '';
+  export { className as class };
+</script>
+
+<section class="space-y-4 {className}">
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700" />
+  {/if}
+
+  {#if title || description}
+    <div class="space-y-1">
+      {#if title}
+        <h3 class="text-lg font-medium text-gray-900 dark:text-white">{title}</h3>
+      {/if}
+      {#if description}
+        <p class="text-sm text-gray-500 dark:text-gray-400">{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-4">
+    <slot />
+  </div>
+</section>

package/dist/patterns/forms/FormSection.svelte.d.ts

@@ -0,0 +1,46 @@
+export default FormSection;
+type FormSection = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    divider?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormSection: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    divider?: 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=FormSection.svelte.d.ts.map

package/dist/patterns/forms/FormSection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuEA;;;;;;;;;;;eAAwK;sCATlI,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"}

package/dist/patterns/forms/FormValidationSummary.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormValidationSummary.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.spec.js"],"names":[],"mappings":""}

package/dist/patterns/forms/FormValidationSummary.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormValidationSummary.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4FA;;;;mBAAiI;kCAvF7F,gCAAgC;6CA8EvB,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AA6GA;;;;;;;mBAA6K;6CAThI,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"}

package/dist/patterns/navigation/BottomNav.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.spec.js"],"names":[],"mappings":""}

package/dist/patterns/navigation/BottomNav.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/BottomNav.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkIA;;;;mBAAqH;sBA7H7F,oBAAoB;6CAoHC,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;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;IACtG,eAAe,QAAQ,CAAC"}