@getmicdrop/svelte-components 5.0.0 → 5.1.1

package/dist/stories/ButtonShowcase.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonShowcase from "./ButtonShowcase.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Showcase",
+    component: ButtonShowcase,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="Complete Reference" />

package/dist/stories/ButtonShowcase.stories.svelte.d.ts

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

package/dist/stories/ButtonShowcase.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonShowcase.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonShowcase.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4BA;;;;mBAA0H;2BAxB7F,yBAAyB;6CAeT,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/stories/ButtonShowcase.svelte

@@ -0,0 +1,529 @@
+<script>
+  import Button from '../primitives/Button/Button.svelte';
+
+  // Icons for demo
+  import Add from '../assets/svg/add-main.svg';
+  import ArrowLeft from '../assets/svg/arrow-left-02.svg';
+  import DeleteIcon from '../assets/svg/delete-02.svg';
+
+  // Dark mode toggle
+  let isDark = $state(false);
+
+  function toggleDarkMode() {
+    isDark = !isDark;
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  // Interactive state demos
+  let saveLoading = $state(false);
+  let saveSuccess = $state(false);
+  let inviteLoading = $state(false);
+  let inviteSuccess = $state(false);
+
+  function demoSave() {
+    saveLoading = true;
+    saveSuccess = false;
+    setTimeout(() => {
+      saveLoading = false;
+      saveSuccess = true;
+      setTimeout(() => { saveSuccess = false; }, 2000);
+    }, 1500);
+  }
+
+  function demoInvite() {
+    inviteLoading = true;
+    inviteSuccess = false;
+    setTimeout(() => {
+      inviteLoading = false;
+      inviteSuccess = true;
+      setTimeout(() => { inviteSuccess = false; }, 2000);
+    }, 1500);
+  }
+</script>
+
+<div class="p-8 space-y-12 bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors">
+  <!-- Header with Dark Mode Toggle -->
+  <div class="max-w-5xl flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Button Catalog</h1>
+      <p class="text-gray-600 dark:text-gray-300">
+        Real buttons as they appear in the app. Click interactive buttons to see their behavior.
+        <strong>Use these nicknames when telling Claude what button you want.</strong>
+      </p>
+    </div>
+    <button
+      onclick={toggleDarkMode}
+      class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all font-medium
+        {isDark
+          ? 'bg-gray-800 border-yellow-400 text-yellow-400 hover:bg-gray-700'
+          : 'bg-white border-gray-300 text-gray-700 hover:border-blue-500 hover:text-blue-600'}"
+    >
+      {#if isDark}
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
+        </svg>
+        Light Mode
+      {:else}
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+        </svg>
+        Dark Mode
+      {/if}
+    </button>
+  </div>
+
+  <!-- ============================================ -->
+  <!-- LOGIN PAGE BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Login Page</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: /login, /signup, /forgot-password</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-64">
+          <Button size="xl-medium">Log in</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Login button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Primary login action. Blue, full-width, medium height.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-64">
+          <Button variant="outline" size="xl-medium">Send me a login link</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Magic link button" or "Secondary login button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Alternative login option. Blue outline, full-width.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-64">
+          <Button size="xl-medium">Create account</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Signup button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Account creation. Same style as login button.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- FORM BUTTONS (with behaviors) -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Form Buttons (Interactive - Click to see behavior!)</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Performer Profile, Venue Settings, any edit form</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button
+            onclick={demoSave}
+            loading={saveLoading}
+            success={saveSuccess}
+            successText="Saved!"
+          >
+            Save Changes
+          </Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Save button with feedback"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Click to see: Loading spinner → "Saved!" confirmation. Used after editing profiles, settings.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button>Save</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Simple save button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Basic save without loading/success feedback. For quick actions.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48 flex gap-2">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Save</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Cancel/Save pair"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Standard form footer. Ghost cancel + solid save.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- MODAL BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Modal / Dialog Buttons</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Confirmation dialogs, edit modals, delete warnings</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48 flex gap-2 justify-end">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Confirm</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Confirm modal"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Standard confirmation. Ghost cancel, solid confirm.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48 flex gap-2 justify-end">
+          <Button variant="alternative">Cancel</Button>
+          <Button variant="red">Delete</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Delete confirmation"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Dangerous action warning. Gray cancel, red delete.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48 flex gap-2 justify-end">
+          <Button variant="alternative">No, keep it</Button>
+          <Button variant="red">Yes, remove</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Remove confirmation"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Removing something (like from a list). Less scary than delete.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button>Done</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Done button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Close a modal after viewing (not editing). Single action.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- ACTION BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Action Buttons</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Table rows, cards, toolbars</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button
+            onclick={demoInvite}
+            loading={inviteLoading}
+            success={inviteSuccess}
+            successText="Invited!"
+          >
+            Invite
+          </Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Invite button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Click to see loading → success. Send invitation to performer/venue.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button beforeIcon={Add}>Add Performer</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Add button with icon"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Creating new items. Plus icon + text.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="alternative">Edit</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Edit button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Secondary action. White with gray border.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="outline">View Details</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"View button" or "Details button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Navigate to detail page. Blue outline.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button beforeIcon={ArrowLeft} variant="ghost">Back</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Back button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Navigate back. Ghost style with arrow icon.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- DANGER BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Danger / Warning Buttons</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">For removing, deleting, signing out</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="red">Delete</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Delete button" (solid red)</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Permanent deletion. Red solid - most dangerous looking.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="red-outline">Remove</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Remove button" (red outline)</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Removing from list/association. Less scary than solid red.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="red-outline" beforeIcon={DeleteIcon}>Delete Event</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Delete with icon"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Delete action with trash icon for clarity.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="ghost-red">Sign out</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Sign out button"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Logout action. Subtle red text, no background.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="ghost-red">Cancel subscription</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Cancel subscription"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Account-level dangerous action. Subtle but red.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- TOGGLE / FILTER BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Toggle / Filter Buttons</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Filter bars, tab-like selections</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-64 flex gap-2">
+          <Button variant="toggle" active={true}>Upcoming</Button>
+          <Button variant="toggle">Past</Button>
+          <Button variant="toggle">All</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Filter tabs" or "Toggle group"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">One active at a time. Like tabs but smaller.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-64 flex gap-2">
+          <Button variant="toggle" active={true} size="sm">Active</Button>
+          <Button variant="toggle" size="sm">Inactive</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Small filter toggles"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Compact version for tight spaces.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- LINK-STYLE BUTTONS -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Link-Style Buttons</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">For inline actions that look like text links</p>
+
+    <div class="grid gap-6">
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="link">Forgot password?</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Link button" or "Text link"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Looks like a link but is a button. For inline actions.</p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48">
+          <Button variant="link" size="sm">Learn more</Button>
+        </div>
+        <div class="flex-1">
+          <p class="font-semibold text-gray-900 dark:text-white">"Learn more link"</p>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Small text link for supplementary actions.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- SIZE COMPARISON -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Size Comparison</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">All sizes side-by-side for reference</p>
+
+    <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-end gap-4 flex-wrap">
+        <div class="text-center">
+          <Button size="xs">Extra Small</Button>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">xs - Compact UI</p>
+        </div>
+        <div class="text-center">
+          <Button size="sm">Small</Button>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">sm - Table rows</p>
+        </div>
+        <div class="text-center">
+          <Button size="md">Medium</Button>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">md - Default</p>
+        </div>
+        <div class="text-center">
+          <Button size="lg">Large</Button>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">lg - Emphasis</p>
+        </div>
+        <div class="text-center">
+          <Button size="xl">Extra Large</Button>
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">xl - Hero buttons</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 max-w-sm">
+      <p class="font-medium text-gray-900 dark:text-white mb-3">Full-width buttons (for forms)</p>
+      <div class="space-y-3">
+        <Button size="xl-medium">Log in</Button>
+        <p class="text-xs text-gray-400 dark:text-gray-500">xl-medium - Login/signup forms</p>
+        <Button size="full">Submit Application</Button>
+        <p class="text-xs text-gray-400 dark:text-gray-500">full - Larger form submit</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================ -->
+  <!-- QUICK NICKNAME REFERENCE -->
+  <!-- ============================================ -->
+  <section class="space-y-4">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Quick Nickname Reference</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Copy these phrases when asking Claude for buttons</p>
+
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm text-gray-900 dark:text-gray-200">
+        <thead class="bg-gray-100 dark:bg-gray-700">
+          <tr>
+            <th class="text-left p-3 font-semibold">Say this to Claude</th>
+            <th class="text-left p-3 font-semibold">You'll get</th>
+            <th class="text-left p-3 font-semibold">Where it's used</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Login button"</td>
+            <td class="p-3">Blue, full-width</td>
+            <td class="p-3">Login page, signup</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Magic link button"</td>
+            <td class="p-3">Blue outline, full-width</td>
+            <td class="p-3">Login page secondary</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Save button with feedback"</td>
+            <td class="p-3">Loading → "Saved!"</td>
+            <td class="p-3">Profile, settings forms</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Cancel/Save pair"</td>
+            <td class="p-3">Ghost + solid side by side</td>
+            <td class="p-3">Any form footer</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Delete confirmation"</td>
+            <td class="p-3">Gray cancel + red delete</td>
+            <td class="p-3">Delete modals</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Add button with icon"</td>
+            <td class="p-3">Plus icon + text</td>
+            <td class="p-3">Creating new things</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Edit button"</td>
+            <td class="p-3">White with gray border</td>
+            <td class="p-3">Table rows, cards</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Back button"</td>
+            <td class="p-3">Arrow + ghost style</td>
+            <td class="p-3">Navigation</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Sign out button"</td>
+            <td class="p-3">Subtle red text</td>
+            <td class="p-3">User menu, settings</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Filter tabs"</td>
+            <td class="p-3">Toggle group</td>
+            <td class="p-3">List filtering</td>
+          </tr>
+          <tr class="bg-white dark:bg-gray-800">
+            <td class="p-3 font-medium">"Link button"</td>
+            <td class="p-3">Text that looks like link</td>
+            <td class="p-3">Inline actions</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</div>

package/dist/stories/ButtonShowcase.svelte.d.ts

@@ -0,0 +1,7 @@
+export default ButtonShowcase;
+type ButtonShowcase = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ButtonShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+//# sourceMappingURL=ButtonShowcase.svelte.d.ts.map

package/dist/stories/ButtonShowcase.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonShowcase.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonShowcase.svelte.js"],"names":[],"mappings":";;;;;AA8gBA,wFAA6D"}

package/dist/stories/DesignSystemAudit.stories.svelte

@@ -10,11 +10,7 @@
 </script>
 
 <script>
-  import MiniMonthCalendar from './Calendar/MiniMonthCalendar.svelte';
-
-  // Mock data for components
-  const mockCalendarEvents = [];
-  const today = new Date();
+  // Note: MiniMonthCalendar removed - component not in svelte-components, exists in venue-calendar-npm
 </script>
 
 <Story name="Overview">
@@ -141,13 +137,9 @@ theme: {
 
     <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
       <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Live Preview:</h4>
-      <div class="max-w-md mx-auto">
-        <MiniMonthCalendar
-          events={mockCalendarEvents}
-          month={today.getMonth()}
-          year={today.getFullYear()}
-        />
-      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400 italic">
+        MiniMonthCalendar component lives in venue-calendar-npm package. See that package's Storybook for live preview.
+      </p>
     </div>
   </div>
 </Story>

package/dist/stories/DesignSystemAudit.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesignSystemAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/DesignSystemAudit.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0bA;;;;mBAA6H;6CAThF,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"}
+{"version":3,"file":"DesignSystemAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/DesignSystemAudit.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAmbA;;;;mBAA6H;6CAThF,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"}