@getmicdrop/svelte-components 5.1.3 → 5.3.0

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>

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

@@ -1,68 +1,24 @@
 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;
+type DataTable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DataTable: import("svelte").Component<{
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    size?: string;
+    class?: string;
+    header: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    size?: string;
+    class?: string;
+    header: any;
+    children: any;
 };
-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

@@ -1 +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"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataTable.svelte.js"],"names":[],"mappings":";;;;;AAyCA;cArC+B,OAAO;gBAAc,OAAO;eAAa,OAAO;WAAS,MAAM;YAAU,MAAM;YAAU,GAAG;cAAY,GAAG;WAqClF;wBArCrC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/forms/FormActions.svelte

@@ -1,41 +1,20 @@
 <script>
   import Button from "../../primitives/Button/Button.svelte";
 
-  /** Handler for cancel action */
-  export let onCancel = () => {};
-
-  /** Handler for submit action */
-  export let onSubmit = () => {};
-
-  /** Label for the submit button */
-  export let submitLabel = "Save";
-
-  /** Label for the cancel button */
-  export let cancelLabel = "Cancel";
-
-  /** Whether the form is currently submitting */
-  export let isSubmitting = false;
-
-  /** Whether the submit was successful (shows checkmark) */
-  export let isSuccess = false;
-
-  /** Whether the submit button should be disabled */
-  export let disabled = false;
-
-  /** Whether to show the cancel button */
-  export let showCancel = true;
-
-  /** Variant for the submit button */
-  export let submitVariant = "default";
-
-  /** Variant for the cancel button */
-  export let cancelVariant = "alternative";
-
-  /** Button type for submit */
-  export let submitType = "submit";
-
-  /** Additional class for the container */
-  export let className = "";
+  let {
+    onCancel = () => {},
+    onSubmit = () => {},
+    submitLabel = "Save",
+    cancelLabel = "Cancel",
+    isSubmitting = false,
+    isSuccess = false,
+    disabled = false,
+    showCancel = true,
+    submitVariant = "default",
+    cancelVariant = "alternative",
+    submitType = "submit",
+    className = "",
+  } = $props();
 </script>
 
 <div
@@ -47,7 +26,7 @@
       type="button"
       size="full-md-auto"
       minWidth="action"
-      on:click={onCancel}
+      onclick={onCancel}
     >
       {cancelLabel}
     </Button>
@@ -60,7 +39,7 @@
     loading={isSubmitting}
     success={isSuccess}
     disabled={disabled || isSubmitting}
-    on:click={onSubmit}
+    onclick={onSubmit}
   >
     {submitLabel}
   </Button>

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

@@ -1,49 +1,34 @@
 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;
+type FormActions = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormActions: import("svelte").Component<{
+    onCancel?: Function;
+    onSubmit?: Function;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isSubmitting?: boolean;
+    isSuccess?: boolean;
+    disabled?: boolean;
+    showCancel?: boolean;
+    submitVariant?: string;
+    cancelVariant?: string;
+    submitType?: string;
+    className?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    onCancel?: Function;
+    onSubmit?: Function;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isSubmitting?: boolean;
+    isSuccess?: boolean;
+    disabled?: boolean;
+    showCancel?: boolean;
+    submitVariant?: string;
+    cancelVariant?: string;
+    submitType?: string;
+    className?: string;
 };
-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

@@ -1 +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"}
+{"version":3,"file":"FormActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormActions.svelte.js"],"names":[],"mappings":";;;;;AAqCA;;;kBA7B6E,MAAM;kBAAgB,MAAM;mBAAiB,OAAO;gBAAc,OAAO;eAAa,OAAO;iBAAe,OAAO;oBAAkB,MAAM;oBAAkB,MAAM;iBAAe,MAAM;gBAAc,MAAM;WA6B/N;wBA7BvC;IAAE,QAAQ,CAAC,WAAW;IAAC,QAAQ,CAAC,WAAW;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/patterns/forms/FormGrid.svelte

@@ -1,26 +1,10 @@
 <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 };
+  let {
+    cols = 2,
+    gap = 4,
+    class: className = '',
+    children,
+  } = $props();
 
   // Map cols to Tailwind grid classes
   const colsClass = {
@@ -40,10 +24,10 @@
     8: 'gap-8'
   };
 
-  $: gridCols = colsClass[cols] || colsClass[2];
-  $: gridGap = gapClass[gap] || gapClass[4];
+  let gridCols = $derived(colsClass[cols] || colsClass[2]);
+  let gridGap = $derived(gapClass[gap] || gapClass[4]);
 </script>
 
 <div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
-  <slot />
+  {@render children?.()}
 </div>

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

@@ -1,44 +1,18 @@
 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;
+type FormGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormGrid: import("svelte").Component<{
+    cols?: number;
+    gap?: number;
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    cols?: number;
+    gap?: number;
+    class?: string;
+    children: any;
 };
-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

@@ -1 +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"}
+{"version":3,"file":"FormGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormGrid.svelte.js"],"names":[],"mappings":";;;;;AAuCA;WAnC4B,MAAM;UAAQ,MAAM;YAAU,MAAM;cAAY,GAAG;WAmCxB;wBAnCpC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/forms/FormSection.svelte

@@ -1,28 +1,11 @@
 <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 };
+  let {
+    title = '',
+    description = '',
+    divider = false,
+    class: className = '',
+    children,
+  } = $props();
 </script>
 
 <section class="space-y-4 {className}">
@@ -42,6 +25,6 @@
   {/if}
 
   <div class="space-y-4">
-    <slot />
+    {@render children?.()}
   </div>
 </section>

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

@@ -1,46 +1,20 @@
 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;
+type FormSection = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FormSection: import("svelte").Component<{
+    title?: string;
+    description?: string;
+    divider?: boolean;
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    divider?: boolean;
+    class?: string;
+    children: any;
 };
-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

@@ -1 +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"}
+{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;AAoCA;YAhC6B,MAAM;kBAAgB,MAAM;cAAY,OAAO;YAAU,MAAM;cAAY,GAAG;WAgCjD;wBAhCvC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -2,48 +2,31 @@
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
 
-  /**
-   * Object mapping field keys to error messages
-   * e.g., { firstName: "First name is required", email: "Email is required" }
-   */
-  export let errors = {};
-
-  /**
-   * Whether to show the summary (typically tied to form submission attempt)
-   */
-  export let show = false;
-
-  /**
-   * Object mapping field keys to human-readable labels
-   * e.g., { firstName: "First name", email: "Email address" }
-   */
-  export let fieldLabels = {};
-
-  /**
-   * Optional: Object mapping field keys to element IDs for scrolling
-   * e.g., { firstName: "firstName-input", email: "email-input" }
-   * If not provided, will try to scroll to element with id matching the field key
-   */
-  export let fieldIds = {};
+  let {
+    errors = {},
+    show = false,
+    fieldLabels = {},
+    fieldIds = {},
+  } = $props();
 
   // Get list of fields with errors
-  $: errorFields = Object.entries(errors)
+  let errorFields = $derived(Object.entries(errors)
     .filter(([_, message]) => message && message.trim() !== "")
     .map(([key, message]) => ({
       key,
       label: fieldLabels[key] || key,
       message,
       elementId: fieldIds[key] || key
-    }));
+    })));
 
-  $: hasErrors = errorFields.length > 0;
+  let hasErrors = $derived(errorFields.length > 0);
 
   function scrollToField(elementId) {
     const element = document.getElementById(elementId);
     if (element) {
       element.scrollIntoView({ behavior: "smooth", block: "center" });
-      // Try to focus the element if it's focusable
       if (element.focus) {
         setTimeout(() => element.focus(), 300);
       }
@@ -67,13 +50,14 @@
         <ul class="mt-2 space-y-1">
           {#each errorFields as field}
             <li>
-              <button
-                type="button"
-                class="text-sm text-red-600 dark:text-red-500 hover:text-red-900 dark:hover:text-red-400 hover:underline cursor-pointer focus:outline-none focus:underline"
-                on:click={() => scrollToField(field.elementId)}
+              <Button
+                variant="link"
+                size="sm"
+                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
+                onclick={() => scrollToField(field.elementId)}
               >
                 {field.label}
-              </button>
+              </Button>
             </li>
           {/each}
         </ul>