@getmicdrop/svelte-components 5.1.3 → 5.3.0

package/dist/patterns/navigation/Header.svelte

@@ -7,23 +7,25 @@
   import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
   import Icon from "../../primitives/Icons/Icon.svelte";
   import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
 
-  export let signoutHandler = () => {};
-  export let name = "";
-  export let avatar = "";
-  export let email = "";
-  export let navLinks = [];
-  export let dropdownLinks = [];
-  export let showBackButton = false;
+  let {
+    signoutHandler = () => {},
+    name = "",
+    avatar = "",
+    email = "",
+    navLinks = [],
+    dropdownLinks = [],
+    showBackButton = false,
+  } = $props();
 
-  let showMobileSheet = false;
-  let showDesktopDropdown = false;
+  let showMobileSheet = $state(false);
+  let showDesktopDropdown = $state(false);
 
-  // Reactive current path for active state
-  $: currentPath = $page.url.pathname;
+  let currentPath = $derived($page.url.pathname);
 
   function isActive(href, path) {
     if (href === `${base}/` || href === '/') {
@@ -43,24 +45,13 @@
   }
 </script>
 
-<!--
-  HEADER - Responsive layout
-  Mobile: Logo + DarkMode + Avatar (triggers bottom sheet)
-  Desktop: Logo + Nav Links + DarkMode + Avatar (triggers dropdown)
--->
-
 {#if showBackButton}
-  <!-- Sub-page header with back button (mobile only via CSS) -->
   <div class="block flex-1 md:hidden">
-    <button
-      class="flex items-center gap-1 px-2 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
-      on:click={() => history.back()}
-    >
+    <Button variant="ghost" size="sm" onclick={() => history.back()}>
       <ChevronLeft class="w-5 h-5" />
-      <span>Back</span>
-    </button>
+      Back
+    </Button>
   </div>
-  <!-- Still show normal header content on desktop even for sub-pages -->
   <div class="hidden md:flex w-full items-center">
     <div class="flex items-center">
       <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
@@ -84,15 +75,15 @@
       <div class="relative ml-1">
         <button
           class="bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
-          on:click={() => showDesktopDropdown = !showDesktopDropdown}
+          onclick={() => showDesktopDropdown = !showDesktopDropdown}
         >
           <Avatar src={avatar} rounded size="md" />
         </button>
 
         {#if showDesktopDropdown}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <div class="fixed inset-0 z-30 bg-transparent" on:click={() => showDesktopDropdown = false}></div>
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
           <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
             <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
               <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
@@ -101,7 +92,7 @@
             {#each dropdownLinks as { label, href }}
               <button
                 class="w-full py-3 px-4 text-sm font-medium text-gray-900 dark:text-white bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-700"
-                on:click={() => handleDropdownItemClick(href)}
+                onclick={() => handleDropdownItemClick(href)}
               >
                 {label}
               </button>
@@ -109,7 +100,7 @@
             <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
             <button
               class="w-full py-3 px-4 text-sm font-medium text-red-600 dark:text-red-500 bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-red-50 dark:hover:bg-gray-700"
-              on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+              onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
             >
               Sign out
             </button>
@@ -119,12 +110,10 @@
     </div>
   </div>
 {:else}
-  <!-- Normal header -->
   <div class="flex items-center">
     <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
   </div>
 
-  <!-- Desktop nav links (hidden on mobile via CSS) -->
   <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
     {#each navLinks as { label, href }}
       <a
@@ -142,27 +131,24 @@
     <DarkModeToggle />
 
     <div class="relative ml-1">
-      <!-- Mobile: triggers bottom sheet -->
       <button
         class="block md:hidden bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
-        on:click={() => showMobileSheet = true}
+        onclick={() => showMobileSheet = true}
       >
         <Avatar src={avatar} rounded size="md" />
       </button>
 
-      <!-- Desktop: triggers dropdown -->
       <button
         class="hidden md:block bg-transparent border-none p-0 cursor-pointer rounded-lg transition-opacity duration-150 min-w-10 min-h-10 hover:opacity-80 focus:outline-none [&_img]:object-cover [&_img]:aspect-square [&_img]:rounded-lg"
-        on:click={() => showDesktopDropdown = !showDesktopDropdown}
+        onclick={() => showDesktopDropdown = !showDesktopDropdown}
       >
         <Avatar src={avatar} rounded size="md" />
       </button>
 
-      <!-- Desktop dropdown -->
       {#if showDesktopDropdown}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <div class="fixed inset-0 z-30 bg-transparent" on:click={() => showDesktopDropdown = false}></div>
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
         <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
           <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
             <span class="block font-semibold text-gray-900 dark:text-white text-sm">{name || "Performer"}</span>
@@ -171,7 +157,7 @@
           {#each dropdownLinks as { label, href }}
             <button
               class="w-full py-3 px-4 text-sm font-medium text-gray-900 dark:text-white bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-700"
-              on:click={() => handleDropdownItemClick(href)}
+              onclick={() => handleDropdownItemClick(href)}
             >
               {label}
             </button>
@@ -179,7 +165,7 @@
           <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
           <button
             class="w-full py-3 px-4 text-sm font-medium text-red-600 dark:text-red-500 bg-transparent border-none text-left cursor-pointer transition-colors duration-150 hover:bg-red-50 dark:hover:bg-gray-700"
-            on:click={() => { showDesktopDropdown = false; signoutHandler(); }}
+            onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
           >
             Sign out
           </button>
@@ -189,39 +175,35 @@
   </div>
 {/if}
 
-<!-- Mobile Bottom Sheet (avatar menu) -->
 {#if showMobileSheet}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="fixed inset-0 flex items-end justify-center bg-black/50 z-50 touch-none overscroll-none"
-    on:click={() => { showMobileSheet = false; }}
+    onclick={() => { showMobileSheet = false; }}
     transition:fade={{ duration: 300 }}
     use:portal
   >
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="bg-white dark:bg-gray-800 rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
-      on:click|stopPropagation
+      onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
-      <!-- Handle bar -->
       <div class="flex justify-center pt-3 pb-2">
         <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
       </div>
 
-      <!-- User info -->
       <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <p class="text-base font-semibold text-gray-900 dark:text-white m-0">{name || "Performer"}</p>
         <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 m-0">{email || ""}</p>
       </div>
 
-      <!-- Actions -->
       <div class="py-2">
         {#each dropdownLinks as { label, href }}
           <button
-            on:click={() => handleMobileSheetItemClick(href)}
+            onclick={() => handleMobileSheetItemClick(href)}
             class="w-full text-left px-6 py-4 text-base font-medium text-gray-900 dark:text-white bg-transparent border-none cursor-pointer transition-colors duration-150 active:bg-gray-100 dark:active:bg-gray-700"
           >
             {label}
@@ -229,21 +211,17 @@
         {/each}
 
         <button
-          on:click={() => { showMobileSheet = false; signoutHandler(); }}
+          onclick={() => { showMobileSheet = false; signoutHandler(); }}
           class="w-full text-left px-6 py-4 text-base font-medium text-red-600 dark:text-red-500 bg-transparent border-none cursor-pointer transition-colors duration-150 active:bg-gray-100 dark:active:bg-gray-700"
         >
           Sign Out
         </button>
       </div>
 
-      <!-- Cancel -->
       <div class="border-t-8 border-gray-100 dark:border-gray-700">
-        <button
-          on:click={() => showMobileSheet = false}
-          class="w-full px-6 py-4 text-base font-semibold text-gray-900 dark:text-white bg-transparent border-none cursor-pointer active:bg-gray-100 dark:active:bg-gray-700"
-        >
+        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
           Cancel
-        </button>
+        </Button>
       </div>
     </div>
   </div>

package/dist/patterns/navigation/Header.svelte.d.ts

@@ -1,43 +1,24 @@
 export default Header;
-type Header = SvelteComponent<{
-    name?: string | undefined;
-    email?: string | undefined;
-    signoutHandler?: (() => void) | undefined;
-    avatar?: string | undefined;
-    navLinks?: any[] | undefined;
-    dropdownLinks?: any[] | undefined;
-    showBackButton?: boolean | undefined;
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Header = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Header: import("svelte").Component<{
+    signoutHandler?: Function;
+    name?: string;
+    avatar?: string;
+    email?: string;
+    navLinks?: any[];
+    dropdownLinks?: any[];
+    showBackButton?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    signoutHandler?: Function;
+    name?: string;
+    avatar?: string;
+    email?: string;
+    navLinks?: any[];
+    dropdownLinks?: any[];
+    showBackButton?: boolean;
 };
-declare const Header: $$__sveltets_2_IsomorphicComponent<{
-    name?: string | undefined;
-    email?: string | undefined;
-    signoutHandler?: (() => void) | undefined;
-    avatar?: string | undefined;
-    navLinks?: any[] | undefined;
-    dropdownLinks?: any[] | undefined;
-    showBackButton?: boolean | undefined;
-}, {
-    click: PointerEvent;
-} & {
-    [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=Header.svelte.d.ts.map

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiOA;;;;;;;;;;;;mBAA0M;6CAT7J,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":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;AA6MA;;WA/KuD,MAAM;aAAW,MAAM;YAAU,MAAM;eAAa,GAAG,EAAE;oBAAkB,GAAG,EAAE;qBAAmB,OAAO;WA+K5G;wBA/KlC;IAAE,cAAc,CAAC,WAAW;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/patterns/page/PageHeader.svelte

@@ -1,39 +1,14 @@
 <script>
-  /**
-   * PageHeader - Page title with breadcrumb and actions
-   *
-   * Provides consistent page header layout with title, optional subtitle,
-   * breadcrumb navigation, and action buttons slot.
-   *
-   * @example
-   * <PageHeader
-   *   title="Edit Event"
-   *   subtitle="Update event details"
-   *   breadcrumb={[
-   *     { name: 'Events', href: '/events' },
-   *     { name: 'Edit', href: '' }
-   *   ]}
-   * >
-   *   <Button slot="actions" on:click={save}>Save</Button>
-   * </PageHeader>
-   */
   import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
 
-  /** Page title */
-  export let title = '';
-
-  /** Page subtitle */
-  export let subtitle = '';
-
-  /** Breadcrumb navigation data */
-  export let breadcrumb = [];
-
-  /** Whether to show the back button in breadcrumb */
-  export let showBack = true;
-
-  /** Additional class for the header */
-  let className = '';
-  export { className as class };
+  let {
+    title = '',
+    subtitle = '',
+    breadcrumb = [],
+    showBack = true,
+    class: className = '',
+    actions,
+  } = $props();
 </script>
 
 <header class="space-y-4 {className}">
@@ -51,9 +26,9 @@
       {/if}
     </div>
 
-    {#if $$slots.actions}
+    {#if actions}
       <div class="flex items-center gap-3">
-        <slot name="actions" />
+        {@render actions()}
       </div>
     {/if}
   </div>

package/dist/patterns/page/PageHeader.svelte.d.ts

@@ -1,39 +1,22 @@
 export default PageHeader;
-type PageHeader = SvelteComponent<{
-    class?: string | undefined;
-    title?: string | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: any[] | undefined;
-    showBack?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-}> & {
-    $$bindings?: string | undefined;
+type PageHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PageHeader: import("svelte").Component<{
+    title?: string;
+    subtitle?: string;
+    breadcrumb?: any[];
+    showBack?: boolean;
+    class?: string;
+    actions: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title?: string;
+    subtitle?: string;
+    breadcrumb?: any[];
+    showBack?: boolean;
+    class?: string;
+    actions: any;
 };
-declare const PageHeader: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    title?: string | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: any[] | undefined;
-    showBack?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-}, {}, 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=PageHeader.svelte.d.ts.map

package/dist/patterns/page/PageHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageHeader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAwFA;;;;;;;;;;eAAkL;6CAdrI,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":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageHeader.svelte.js"],"names":[],"mappings":";;;;;AA2CA;YAnC6B,MAAM;eAAa,MAAM;iBAAe,GAAG,EAAE;eAAa,OAAO;YAAU,MAAM;aAAW,GAAG;WAmCnE;wBAnCtC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/page/PageLayout.svelte

@@ -1,64 +1,39 @@
-<script>
-  import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
-  import Card from '../../primitives/Card.svelte';
-
-  /**
-   * Breadcrumb navigation data
-   * @type {Array<{name: string, href: string}>}
-   */
-  export let breadcrumb = [];
-
-  /**
-   * Page title displayed below breadcrumb
-   * @type {string}
-   */
-  export let title = '';
-
-  /**
-   * Subtitle displayed below title
-   * @type {string}
-   */
-  export let subtitle = '';
-
-  /**
-   * Layout variant
-   * - 'default': Content with standard padding, no wrapper
-   * - 'card': Content wrapped in Card component with max-width
-   * @type {'default' | 'card'}
-   */
-  export let variant = 'default';
-
-  /**
-   * Max width class for card variant (e.g., 'max-w-4xl', 'max-w-6xl')
-   * @type {string}
-   */
-  export let maxWidth = 'max-w-4xl';
-
-  /**
-   * Additional CSS classes for the content container
-   * @type {string}
-   */
-  export let className = '';
-
-  /**
-   * Whether to show the header (breadcrumb, title, subtitle)
-   * @type {boolean}
-   */
-  export let showHeader = true;
-</script>
-
-{#if showHeader}
-  <nav class="pt-4 px-4 text-gray-900 dark:text-white text-lg font-semibold">
-    <Breadcrumb data={breadcrumb} {title} {subtitle} />
-  </nav>
-{/if}
-
-<div class="px-4 pb-20 md:pb-6 {className}">
-  {#if variant === 'card'}
-    <Card className="bg-white dark:bg-gray-800 {maxWidth}">
-      <slot />
-    </Card>
-  {:else}
-    <slot />
-  {/if}
-</div>
+<script>
+  import Breadcrumb from '../../primitives/Breadcrumb/Breadcrumb.svelte';
+  import Card from '../../primitives/Card.svelte';
+
+  let {
+    breadcrumb = [],
+    title = '',
+    subtitle = '',
+    variant = 'default',
+    maxWidth = 'max-w-4xl',
+    className = '',
+    showHeader = true,
+    children,
+    actions,
+  } = $props();
+</script>
+
+{#if showHeader}
+  <nav class="pt-4 px-4 text-gray-900 dark:text-white text-lg font-semibold">
+    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+      <Breadcrumb data={breadcrumb} {title} {subtitle} />
+      {#if actions}
+        <div class="flex items-center gap-3 flex-shrink-0">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  </nav>
+{/if}
+
+<div class="px-4 pb-20 md:pb-6 {className}">
+  {#if variant === 'card'}
+    <Card className="bg-white dark:bg-gray-800 {maxWidth}">
+      {@render children?.()}
+    </Card>
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/patterns/page/PageLayout.svelte.d.ts

@@ -1,58 +1,28 @@
 export default PageLayout;
-type PageLayout = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    className?: string | undefined;
-    title?: string | undefined;
-    variant?: "default" | "card" | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    maxWidth?: string | undefined;
-    showHeader?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type PageLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PageLayout: import("svelte").Component<{
+    breadcrumb?: any[];
+    title?: string;
+    subtitle?: string;
+    variant?: string;
+    maxWidth?: string;
+    className?: string;
+    showHeader?: boolean;
+    children: any;
+    actions: any;
+}, {}, "">;
+type $$ComponentProps = {
+    breadcrumb?: any[];
+    title?: string;
+    subtitle?: string;
+    variant?: string;
+    maxWidth?: string;
+    className?: string;
+    showHeader?: boolean;
+    children: any;
+    actions: any;
 };
-declare const PageLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    className?: string | undefined;
-    title?: string | undefined;
-    variant?: "default" | "card" | undefined;
-    subtitle?: string | undefined;
-    breadcrumb?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    maxWidth?: string | undefined;
-    showHeader?: 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=PageLayout.svelte.d.ts.map

package/dist/patterns/page/PageLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLayout.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqHA;;;;;;cA1CyB,MAAM;cAAQ,MAAM;;;;;;;;;;eA0CgK;sCATvK,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":"PageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLayout.svelte.js"],"names":[],"mappings":";;;;;AAgDA;iBAtCkC,GAAG,EAAE;YAAU,MAAM;eAAa,MAAM;cAAY,MAAM;eAAa,MAAM;gBAAc,MAAM;iBAAe,OAAO;cAAY,GAAG;aAAW,GAAG;WAsC7H;wBAtCtC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}