@getmicdrop/svelte-components 5.3.2 → 5.3.6

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -13,9 +13,9 @@
     readOnly = false,
     showPartialPreview = true,
     disablePastNavigation = false,
-    ondateSelect,
-    ondayClick,
-    onmonthChange,
+    onDateSelect,
+    onDayClick,
+    onMonthChange,
   } = $props();
 
   let currentDate = new Date();
@@ -193,15 +193,15 @@
 
       if (isSelected) {
         triggerHaptic('medium');
-        ondateSelect?.({ date: day.dateStr, selected: false });
+        onDateSelect?.({ date: day.dateStr, selected: false });
       } else {
         triggerHaptic('light');
-        ondateSelect?.({ date: day.dateStr, selected: true });
+        onDateSelect?.({ date: day.dateStr, selected: true });
       }
     } else if (variant === 'display' || variant === 'public') {
       if (day.hasEvents) {
         triggerHaptic('light');
-        ondayClick?.({ date: day.dateStr, events: day.events });
+        onDayClick?.({ date: day.dateStr, events: day.events });
       }
     }
   }
@@ -218,15 +218,15 @@
 
       if (isSelected) {
         triggerHaptic('medium');
-        ondateSelect?.({ date: day.dateStr, selected: false });
+        onDateSelect?.({ date: day.dateStr, selected: false });
       } else {
         triggerHaptic('light');
-        ondateSelect?.({ date: day.dateStr, selected: true });
+        onDateSelect?.({ date: day.dateStr, selected: true });
       }
     } else if (variant === 'display' || variant === 'public') {
       if (day.hasEvents) {
         triggerHaptic('light');
-        ondayClick?.({ date: day.dateStr, events: day.events });
+        onDayClick?.({ date: day.dateStr, events: day.events });
       }
     }
   }
@@ -279,7 +279,7 @@
         }
       }
       triggerHaptic('medium');
-      onmonthChange?.({ year: currentYear, month: currentMonth });
+      onMonthChange?.({ year: currentYear, month: currentMonth });
       return;
     }
 

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts

@@ -14,9 +14,9 @@ declare const MiniMonthCalendar: import("svelte").Component<{
     readOnly?: boolean;
     showPartialPreview?: boolean;
     disablePastNavigation?: boolean;
-    ondateSelect: any;
-    ondayClick: any;
-    onmonthChange: any;
+    onDateSelect: any;
+    onDayClick: any;
+    onMonthChange: any;
 }, {}, "selectedDates">;
 type $$ComponentProps = {
     variant?: string;
@@ -29,8 +29,8 @@ type $$ComponentProps = {
     readOnly?: boolean;
     showPartialPreview?: boolean;
     disablePastNavigation?: boolean;
-    ondateSelect: any;
-    ondayClick: any;
-    onmonthChange: any;
+    onDateSelect: any;
+    onDayClick: any;
+    onMonthChange: any;
 };
 //# sourceMappingURL=MiniMonthCalendar.svelte.d.ts.map

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -23,7 +23,7 @@
       maxServiceFeeCents: 0,
       taxPercentage: 0,
     },
-    onpriceUpdate,
+    onPriceUpdate,
   } = $props();
 
   let showOrderSummaryOnMobile = $state(false);
@@ -101,7 +101,7 @@
   let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
 
   $effect(() => {
-    onpriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
+    onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
   });
 </script>
 

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts

@@ -16,7 +16,7 @@ declare const OrderSummary: import("svelte").Component<{
     executePurchase?: any;
     elements?: any;
     venueServiceCharge?: Record<string, any>;
-    onpriceUpdate: any;
+    onPriceUpdate: any;
 }, {}, "">;
 type $$ComponentProps = {
     loading?: boolean;
@@ -31,6 +31,6 @@ type $$ComponentProps = {
     executePurchase?: any;
     elements?: any;
     venueServiceCharge?: Record<string, any>;
-    onpriceUpdate: any;
+    onPriceUpdate: any;
 };
 //# sourceMappingURL=OrderSummary.svelte.d.ts.map

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -3,7 +3,7 @@
     events = [],
     view = "row",
     placeholderImage = null,
-    oneventClick,
+    onEventClick,
   } = $props();
 
   let isSmallScreen = $state(false);
@@ -33,7 +33,7 @@
   });
 
   function handleEventClick(event) {
-    oneventClick?.(event);
+    onEventClick?.(event);
   }
 
   function handleKeydown(e, event) {

package/dist/calendar/PublicCard/PublicCard.svelte.d.ts

@@ -7,12 +7,12 @@ declare const PublicCard: import("svelte").Component<{
     events?: any[];
     view?: string;
     placeholderImage?: any;
-    oneventClick: any;
+    onEventClick: any;
 }, {}, "">;
 type $$ComponentProps = {
     events?: any[];
     view?: string;
     placeholderImage?: any;
-    oneventClick: any;
+    onEventClick: any;
 };
 //# sourceMappingURL=PublicCard.svelte.d.ts.map

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -31,7 +31,7 @@
       }
       return timeStr;
     },
-    onshowtimeSelect,
+    onShowtimeSelect,
   } = $props();
 
   let selectedDate = $state(null);
@@ -39,7 +39,7 @@
 
   function handleSelect(e) {
     selectedDate = e.date;
-    onshowtimeSelect?.({ date: e.date, ...e });
+    onShowtimeSelect?.({ date: e.date, ...e });
   }
 
   async function handleShare() {

package/dist/calendar/ShowCard/ShowCard.svelte.d.ts

@@ -9,7 +9,7 @@ declare const ShowCard: import("svelte").Component<{
     showTitle?: boolean;
     formatDateTime?: Function;
     formatTimeline?: Function;
-    onshowtimeSelect: any;
+    onShowtimeSelect: any;
 }, {}, "">;
 type $$ComponentProps = {
     event?: Record<string, any>;
@@ -17,6 +17,6 @@ type $$ComponentProps = {
     showTitle?: boolean;
     formatDateTime?: Function;
     formatTimeline?: Function;
-    onshowtimeSelect: any;
+    onShowtimeSelect: any;
 };
 //# sourceMappingURL=ShowCard.svelte.d.ts.map

package/dist/patterns/navigation/Header.svelte

@@ -73,12 +73,13 @@
     <div class="flex items-center gap-3">
       <DarkModeToggle />
       <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"
+        <Button
+          variant="avatar"
+          size="md"
           onclick={() => showDesktopDropdown = !showDesktopDropdown}
         >
           <Avatar src={avatar} rounded size="md" />
-        </button>
+        </Button>
 
         {#if showDesktopDropdown}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -90,20 +91,22 @@
               <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
             </div>
             {#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"
+              <Button
+                variant="menu-item"
+                size="md"
                 onclick={() => handleDropdownItemClick(href)}
               >
                 {label}
-              </button>
+              </Button>
             {/each}
             <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"
+            <Button
+              variant="menu-item-danger"
+              size="md"
               onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
             >
               Sign out
-            </button>
+            </Button>
           </div>
         {/if}
       </div>
@@ -131,19 +134,23 @@
     <DarkModeToggle />
 
     <div class="relative ml-1">
-      <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"
+      <Button
+        variant="avatar"
+        size="md"
+        class="block md:hidden"
         onclick={() => showMobileSheet = true}
       >
         <Avatar src={avatar} rounded size="md" />
-      </button>
+      </Button>
 
-      <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"
+      <Button
+        variant="avatar"
+        size="md"
+        class="hidden md:block"
         onclick={() => showDesktopDropdown = !showDesktopDropdown}
       >
         <Avatar src={avatar} rounded size="md" />
-      </button>
+      </Button>
 
       {#if showDesktopDropdown}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -155,20 +162,22 @@
             <span class="block text-xs text-gray-500 dark:text-gray-400 mt-0.5">{email || ""}</span>
           </div>
           {#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"
+            <Button
+              variant="menu-item"
+              size="md"
               onclick={() => handleDropdownItemClick(href)}
             >
               {label}
-            </button>
+            </Button>
           {/each}
           <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"
+          <Button
+            variant="menu-item-danger"
+            size="md"
             onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
           >
             Sign out
-          </button>
+          </Button>
         </div>
       {/if}
     </div>
@@ -202,20 +211,22 @@
 
       <div class="py-2">
         {#each dropdownLinks as { label, href }}
-          <button
+          <Button
+            variant="menu-item"
+            size="lg"
             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}
-          </button>
+          </Button>
         {/each}
 
-        <button
+        <Button
+          variant="menu-item-danger"
+          size="lg"
           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>
+        </Button>
       </div>
 
       <div class="border-t-8 border-gray-100 dark:border-gray-700">

package/dist/patterns/page/PageLayout.svelte

@@ -28,7 +28,7 @@
   </nav>
 {/if}
 
-<div class="px-4 pb-20 md:pb-6 {className}">
+<div class="px-4 pt-4 pb-20 md:pb-6 {className}">
   {#if variant === 'card'}
     <Card className="bg-white dark:bg-gray-800 {maxWidth}">
       {@render children?.()}

package/dist/primitives/Accordion/Accordion.stories.svelte

@@ -0,0 +1,75 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Collapsible content sections. Use AccordionItem children to create expandable sections.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="What is Micdrop?">
+          <p class="text-gray-600">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
+        </AccordionItem>
+        <AccordionItem title="How do I get started?">
+          <p class="text-gray-600">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
+        </AccordionItem>
+        <AccordionItem title="What are the fees?">
+          <p class="text-gray-600">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Single Item Open">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Expanded by default" open={true}>
+          <p class="text-gray-600">This item starts expanded.</p>
+        </AccordionItem>
+        <AccordionItem title="Collapsed item">
+          <p class="text-gray-600">Click to expand this item.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Rich Content">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Features">
+          <ul class="list-disc list-inside text-gray-600 space-y-2">
+            <li>Online ticket sales</li>
+            <li>Performer management</li>
+            <li>Show scheduling</li>
+            <li>Analytics dashboard</li>
+          </ul>
+        </AccordionItem>
+        <AccordionItem title="Pricing">
+          <div class="space-y-2">
+            <p class="text-gray-600"><strong>Basic:</strong> Free</p>
+            <p class="text-gray-600"><strong>Pro:</strong> $29/month</p>
+            <p class="text-gray-600"><strong>Enterprise:</strong> Contact us</p>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Accordion/Accordion.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Accordion;
+type Accordion = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Accordion from './Accordion.svelte';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Accordion.stories.svelte.d.ts.map

package/dist/primitives/Accordion/Accordion.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyFA;;;;mBAAqH;sBArF7F,oBAAoB;6CA4EC,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/primitives/Alert/Alert.stories.svelte

@@ -0,0 +1,88 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Alert from './Alert.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {
+      color: {
+        control: 'select',
+        options: ['info', 'success', 'warning', 'error'],
+      },
+      dismissible: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Contextual feedback messages for user actions or system states.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Info" args={{ color: 'info' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Info!</span> This is an informational alert with helpful information.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Success" args={{ color: 'success' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Success!</span> Your changes have been saved successfully.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Warning!</span> Please review this information before proceeding.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Error" args={{ color: 'error' }}>
+  {#snippet template(args)}
+    <Alert {...args}>
+      <span class="font-medium">Error!</span> Something went wrong. Please try again.
+    </Alert>
+  {/snippet}
+</Story>
+
+<Story name="Dismissible">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info" dismissible>
+        Click the X to dismiss this alert.
+      </Alert>
+      <Alert color="success" dismissible>
+        This success alert can also be dismissed.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Alert color="info">
+        <span class="font-medium">Info:</span> Just letting you know about something.
+      </Alert>
+      <Alert color="success">
+        <span class="font-medium">Success:</span> Great job! Everything worked.
+      </Alert>
+      <Alert color="warning">
+        <span class="font-medium">Warning:</span> Be careful about this action.
+      </Alert>
+      <Alert color="error">
+        <span class="font-medium">Error:</span> Something went wrong.
+      </Alert>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Alert/Alert.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Alert;
+type Alert = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Alert from './Alert.svelte';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Alert.stories.svelte.d.ts.map

package/dist/primitives/Alert/Alert.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAsGA;;;;mBAAiH;kBAlG7F,gBAAgB;6CAyFS,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/primitives/Avatar/Avatar.stories.svelte

@@ -0,0 +1,94 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      src: { control: 'text' },
+      alt: { control: 'text' },
+      initials: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'User profile picture component with fallback to initials.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Avatar />
+  {/snippet}
+</Story>
+
+<Story name="With Initials" args={{ initials: 'JD' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="With Image" args={{ src: 'https://i.pravatar.cc/150?img=3', alt: 'User avatar' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="All Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <div class="text-center">
+        <Avatar size="xs" initials="XS" />
+        <p class="text-xs text-gray-500 mt-1">xs</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="sm" initials="SM" />
+        <p class="text-xs text-gray-500 mt-1">sm</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="md" initials="MD" />
+        <p class="text-xs text-gray-500 mt-1">md</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="lg" initials="LG" />
+        <p class="text-xs text-gray-500 mt-1">lg</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="xl" initials="XL" />
+        <p class="text-xs text-gray-500 mt-1">xl</p>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <Avatar size="xs" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar size="sm" src="https://i.pravatar.cc/150?img=2" />
+      <Avatar size="md" src="https://i.pravatar.cc/150?img=3" />
+      <Avatar size="lg" src="https://i.pravatar.cc/150?img=4" />
+      <Avatar size="xl" src="https://i.pravatar.cc/150?img=5" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="flex -space-x-4">
+      <Avatar src="https://i.pravatar.cc/150?img=1" class="ring-2 ring-white" />
+      <Avatar src="https://i.pravatar.cc/150?img=2" class="ring-2 ring-white" />
+      <Avatar src="https://i.pravatar.cc/150?img=3" class="ring-2 ring-white" />
+      <Avatar initials="+5" class="ring-2 ring-white" />
+    </div>
+  {/snippet}
+</Story>