@getmicdrop/svelte-components 5.3.2 → 5.3.6

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

@@ -0,0 +1,28 @@
+export default Avatar;
+type Avatar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Avatar from './Avatar.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=Avatar.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4GA;;;;mBAAkH;mBAxG7F,iBAAiB;6CA+FO,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/Breadcrumb/Breadcrumb.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<div class="flex flex-col gap-4 min-w-0">
+<div class="flex flex-col items-start gap-2 min-w-0">
   {#if data.length > 0}
     <nav class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 {className}" aria-label="Breadcrumb">
       <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">

package/dist/primitives/Button/Button.svelte

@@ -13,6 +13,11 @@
    *   - ghost-red: Destructive text button
    *   - icon: Icon-only button
    *   - toggle: Toggle/pill button
+   *   - avatar: Avatar/image trigger button (no padding, opacity hover)
+   *   - menu-item: Dropdown/sheet menu item (full width, left-aligned)
+   *   - menu-item-danger: Destructive menu item (red text)
+   *   - card: Selectable card button (bordered, for list selections)
+   *   - sidebar-toggle: Compact pill for sidebar expand/collapse
    *
    * Sizes (Flowbite native): xs, sm, md, lg, xl
    */
@@ -27,7 +32,9 @@
     successText?: string,
     active?: boolean,
     href?: string | null,
+    type?: 'button' | 'submit' | 'reset',
     children?: any,
+    trailing?: any,
     class?: string,
     onclick?: (e: MouseEvent) => void,
     [key: string]: any
@@ -41,7 +48,9 @@
     successText = "",
     active = false,
     href = null,
+    type = "button",
     children,
+    trailing,
     class: className = "",
     onclick,
     ...restProps
@@ -82,55 +91,108 @@
     lg: "p-3",
   };
 
-  // Variant classes with all states in Tailwind
-  // Note: focus:ring-4 is added per-variant to allow icon/link variants to have no ring
+  // Avatar variant sizes (no padding, just min dimensions)
+  const avatarSizes = {
+    sm: "min-w-8 min-h-8",
+    md: "min-w-10 min-h-10",
+    lg: "min-w-12 min-h-12",
+  };
+
+  // Menu item sizes
+  const menuItemSizes = {
+    sm: "py-2 px-4 text-sm",
+    md: "py-3 px-4 text-sm",
+    lg: "py-4 px-6 text-base",
+    nav: "py-2 px-3 text-base font-normal",
+  };
+
+  // Card sizes (larger padding for card-like buttons)
+  const cardSizes = {
+    sm: "p-3 text-sm",
+    md: "p-4 text-sm",
+    lg: "p-5 text-base",
+  };
+
+  // Variant classes with all states in Tailwind (no focus rings - design decision)
   const variantClasses = {
-    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-4 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
     link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
-    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
+    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
     success: "text-white bg-green-600 border border-green-600",
+    // Avatar/image trigger - no background, opacity hover
+    avatar: "bg-transparent border-transparent hover:opacity-80",
+    // Menu items - full width, left-aligned, for dropdowns/sheets and sidebar nav
+    "menu-item": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
+    // Danger menu item - red text version
+    "menu-item-danger": "w-full text-left text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-700",
+    // Selectable card - bordered card-like button for list selections
+    card: "w-full text-left text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700",
+    // Search result item - blue hover for search dropdowns
+    "search-result": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20",
+    // Sidebar toggle - compact pill for sidebar expand/collapse
+    "sidebar-toggle": "w-6 h-7 text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
   };
 
-  // Active state classes for ghost and toggle
+  // Active state classes for ghost, toggle, and menu-item
   const activeClasses = {
     ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
     toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+    "menu-item": "bg-blue-50 dark:bg-gray-700",
   };
 
   // Disabled classes
   const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
 
-  let sizeClass = $derived(
-    resolvedVariant === "icon"
-      ? (iconSizes[size] || iconSizes.sm)
-      : resolvedVariant === "link"
-      ? "text-sm"
-      : (sizeClasses[size] || sizeClasses.md)
-  );
+  let sizeClass = $derived((() => {
+    if (resolvedVariant === "icon") return iconSizes[size] || iconSizes.sm;
+    if (resolvedVariant === "avatar") return avatarSizes[size] || avatarSizes.md;
+    if (resolvedVariant === "menu-item" || resolvedVariant === "menu-item-danger" || resolvedVariant === "search-result") {
+      return menuItemSizes[size] || menuItemSizes.md;
+    }
+    if (resolvedVariant === "card") return cardSizes[size] || cardSizes.md;
+    if (resolvedVariant === "link") return "text-sm";
+    if (resolvedVariant === "sidebar-toggle") return ""; // Fixed dimensions in variant
+    return sizeClasses[size] || sizeClasses.md;
+  })());
 
   let variantClass = $derived((() => {
     if (success) return variantClasses.success;
     if (disabled && !loading && !success) return disabledClasses;
-    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle")) {
-      return activeClasses[resolvedVariant];
+    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle" || resolvedVariant === "menu-item")) {
+      return (activeClasses[resolvedVariant] || "") + " " + (variantClasses[resolvedVariant] || "");
     }
     return variantClasses[resolvedVariant] || variantClasses.default;
   })());
 
+  // Menu items, cards, and search results need left alignment, others are centered
+  let isLeftAligned = $derived(
+    resolvedVariant === "menu-item" ||
+    resolvedVariant === "menu-item-danger" ||
+    resolvedVariant === "card" ||
+    resolvedVariant === "search-result"
+  );
+
+  // Use justify-between when there's trailing content (e.g., chevrons in nav items)
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+
   let buttonClasses = $derived([
     "relative",
-    "inline-flex items-center justify-center",
+    isLeftAligned
+      ? (hasTrailing ? "flex items-center justify-between" : "flex items-center justify-start")
+      : "inline-flex items-center justify-center",
     "rounded-lg",
     "font-medium leading-none",
     "focus:outline-none",
-    "transition-colors duration-150",
+    // Apple-style micro-interactions (only when not disabled)
+    "transition-all duration-150 ease-out",
+    effectiveDisabled ? "" : "active:scale-[0.97] active:opacity-90",
     "select-none",
     sizeClass,
     variantClass,
@@ -152,9 +214,11 @@
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
   </a>
 {:else}
   <button
+    {type}
     class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     disabled={effectiveDisabled}
     {onclick}
@@ -166,6 +230,7 @@
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
+    {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
     {#if success}
       <span class="absolute inset-0 flex items-center justify-center gap-2">
         <CheckOutline class="w-5 h-5" />

package/dist/primitives/Button/Button.svelte.d.ts

@@ -11,7 +11,9 @@ type Button = {
         successText?: string | undefined;
         active?: boolean | undefined;
         href?: string | null | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
         children?: any;
+        trailing?: any;
         class?: string | undefined;
         onclick?: ((e: MouseEvent) => void) | undefined;
     }>): void;
@@ -26,7 +28,9 @@ declare const Button: import("svelte").Component<{
     successText?: string;
     active?: boolean;
     href?: string | null;
+    type?: "button" | "submit" | "reset";
     children?: any;
+    trailing?: any;
     class?: string;
     onclick?: (e: MouseEvent) => void;
 }, {}, "">;

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8LA;;cAbc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgQA;;cAfc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;WACb,QAAQ,GAAG,QAAQ,GAAG,OAAO;eACzB,GAAG;eACH,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}

package/dist/primitives/Checkbox/Checkbox.stories.svelte

@@ -0,0 +1,84 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Checkbox input component for boolean selections.',
+        },
+      },
+    },
+  });
+
+  let checked = $state(false);
+  let checkedItems = $state({ terms: false, updates: true, marketing: false });
+</script>
+
+<Story name="Default" args={{ label: 'Accept terms' }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Checked" args={{ label: 'Already checked', checked: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Disabled" args={{ label: 'Disabled checkbox', disabled: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Disabled Checked" args={{ label: 'Disabled and checked', disabled: true, checked: true }}>
+  {#snippet template(args)}
+    <Checkbox {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Interactive">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Checkbox label="Click to toggle" bind:checked={checked} />
+      <p class="text-sm text-gray-500">Checked: {checked ? 'Yes' : 'No'}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Notification preferences:</p>
+      <Checkbox label="I accept the terms and conditions" bind:checked={checkedItems.terms} />
+      <Checkbox label="Send me product updates" bind:checked={checkedItems.updates} />
+      <Checkbox label="Send me marketing emails" bind:checked={checkedItems.marketing} />
+      <p class="text-xs text-gray-500 mt-2">
+        Selected: {Object.entries(checkedItems).filter(([_, v]) => v).map(([k]) => k).join(', ') || 'none'}
+      </p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="space-y-4">
+      <Checkbox label="Unchecked" />
+      <Checkbox label="Checked" checked={true} />
+      <Checkbox label="Disabled unchecked" disabled />
+      <Checkbox label="Disabled checked" disabled checked={true} />
+    </div>
+  {/snippet}
+</Story>

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

@@ -0,0 +1,28 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Checkbox from './Checkbox.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=Checkbox.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkGA;;;;mBAAoH;qBA9F7F,mBAAmB;6CAqFG,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/Drawer/Drawer.stories.svelte

@@ -0,0 +1,100 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Drawer from './Drawer.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Drawer',
+    component: Drawer,
+    tags: ['autodocs'],
+    argTypes: {
+      position: {
+        control: 'select',
+        options: ['left', 'right'],
+      },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Sliding panel overlay that appears from the side of the screen.',
+        },
+      },
+    },
+  });
+
+  let openLeft = $state(false);
+  let openRight = $state(false);
+</script>
+
+<Story name="Right (Default)">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Open Right Drawer</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
+          <p class="text-gray-600 mb-4">
+            This drawer slides in from the right side. Click outside or use the close button to dismiss.
+          </p>
+          <div class="space-y-4">
+            <p class="text-sm text-gray-500">Some content here...</p>
+            <Button onclick={() => openRight = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Left">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openLeft = true}>Open Left Drawer</Button>
+      <Drawer bind:open={openLeft} position="left">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
+          <nav class="space-y-2">
+            <a href="#" class="block px-3 py-2 rounded hover:bg-gray-100">Dashboard</a>
+            <a href="#" class="block px-3 py-2 rounded hover:bg-gray-100">Shows</a>
+            <a href="#" class="block px-3 py-2 rounded hover:bg-gray-100">Performers</a>
+            <a href="#" class="block px-3 py-2 rounded hover:bg-gray-100">Settings</a>
+          </nav>
+          <div class="mt-6">
+            <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Form">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Edit Profile</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-6">Edit Profile</h2>
+          <form class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium mb-1">Name</label>
+              <input type="text" class="w-full border rounded px-3 py-2" placeholder="John Doe" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-1">Email</label>
+              <input type="email" class="w-full border rounded px-3 py-2" placeholder="john@example.com" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-1">Bio</label>
+              <textarea class="w-full border rounded px-3 py-2" rows="3" placeholder="Tell us about yourself"></textarea>
+            </div>
+          </form>
+          <div class="flex gap-2 mt-6">
+            <Button variant="ghost" onclick={() => openRight = false}>Cancel</Button>
+            <Button onclick={() => openRight = false}>Save Changes</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>

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

@@ -0,0 +1,28 @@
+export default Drawer;
+type Drawer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Drawer from './Drawer.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=Drawer.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkHA;;;;mBAAkH;mBA9G7F,iBAAiB;6CAqGO,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/Dropdown/Dropdown.stories.svelte

@@ -0,0 +1,137 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownItem from './DropdownItem.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Dropdown menu component for actions and navigation.',
+        },
+      },
+    },
+  });
+
+  let open1 = $state(false);
+  let open2 = $state(false);
+  let open3 = $state(false);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        Options ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Dividers">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open2 = !open2}>
+        Actions ▼
+      </Button>
+      {#if open2}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Right Aligned">
+  {#snippet template()}
+    <div class="flex justify-end">
+      <div class="relative inline-block">
+        <Button onclick={() => open3 = !open3}>
+          Menu ▼
+        </Button>
+        {#if open3}
+          <Dropdown class="absolute mt-1 right-0 z-10">
+            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
+            <div class="border-t my-1"></div>
+            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
+          </Dropdown>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        User Menu ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">👤</span> Profile
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">⚙️</span> Settings
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">📊</span> Analytics
+          </DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">🚪</span> Sign Out
+          </DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="In Card Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4 max-w-sm">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-medium">Card Title</h3>
+        <div class="relative">
+          <button
+            class="p-1 hover:bg-gray-100 rounded"
+            onclick={() => open1 = !open1}
+          >
+            ⋮
+          </button>
+          {#if open1}
+            <Dropdown class="absolute mt-1 right-0 z-10">
+              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
+              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
+              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
+            </Dropdown>
+          {/if}
+        </div>
+      </div>
+      <p class="text-gray-600 text-sm">
+        This is a card with a dropdown menu in the header for common actions.
+      </p>
+    </div>
+  {/snippet}
+</Story>