@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/primitives/Button/ButtonSaveDemo.spec.js

@@ -1,146 +1,146 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/svelte';
-import ButtonSaveDemo from './ButtonSaveDemo.svelte';
-
-describe('ButtonSaveDemo', () => {
-  // Clean up after each test
-  beforeEach(() => {
-    cleanup();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  // Helper to get the Save button specifically (not the Reset button)
-  const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
-
-  describe('rendering', () => {
-    it('renders save button', () => {
-      render(ButtonSaveDemo);
-      expect(screen.getByText('Save')).toBeInTheDocument();
-    });
-
-    it('renders as button element', () => {
-      render(ButtonSaveDemo);
-      expect(getSaveButton()).toBeInTheDocument();
-    });
-
-    it('renders reset button', () => {
-      render(ButtonSaveDemo);
-      expect(screen.getByText(/Reset/)).toBeInTheDocument();
-    });
-  });
-
-  describe('save states', () => {
-    it('shows saving state when clicked', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-
-      // Button should now be in loading state (disabled)
-      expect(button).toHaveAttribute('disabled');
-    });
-  });
-
-  describe('button disabled state', () => {
-    it('is disabled while saving', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-
-      expect(button).toHaveAttribute('disabled');
-    });
-  });
-
-  describe('success state', () => {
-    it('shows success state after timeout', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-
-      // Advance timers past the 1000ms setTimeout
-      await vi.advanceTimersByTimeAsync(1100);
-
-      // Button should now be in success state (still disabled)
-      expect(button).toHaveAttribute('disabled');
-    });
-
-    it('stays in success state after completion', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-      await vi.advanceTimersByTimeAsync(1100);
-
-      // Button should remain disabled in success state
-      expect(button).toHaveAttribute('disabled');
-    });
-
-    it('does not retrigger if already loading', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      // First click
-      await fireEvent.click(button);
-
-      // Second click while loading - should be ignored
-      await fireEvent.click(button);
-
-      // Should still be in loading state
-      expect(button).toHaveAttribute('disabled');
-    });
-
-    it('does not retrigger if already in success state', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-      await vi.advanceTimersByTimeAsync(1100);
-
-      // Click while in success state - should be ignored
-      await fireEvent.click(button);
-
-      expect(button).toHaveAttribute('disabled');
-    });
-  });
-
-  describe('reset functionality', () => {
-    it('reset button clears success state', async () => {
-      render(ButtonSaveDemo);
-      const saveButton = getSaveButton();
-      const resetButton = screen.getByText(/Reset/);
-
-      // Trigger save and complete
-      await fireEvent.click(saveButton);
-      await vi.advanceTimersByTimeAsync(1100);
-
-      // Click reset
-      await fireEvent.click(resetButton);
-
-      // Save button should be enabled again
-      expect(saveButton).not.toHaveAttribute('disabled');
-    });
-
-    it('allows re-save after reset', async () => {
-      render(ButtonSaveDemo);
-      const saveButton = getSaveButton();
-      const resetButton = screen.getByText(/Reset/);
-
-      // First save cycle
-      await fireEvent.click(saveButton);
-      await vi.advanceTimersByTimeAsync(1100);
-
-      // Reset
-      await fireEvent.click(resetButton);
-
-      // Second save should work
-      await fireEvent.click(saveButton);
-      expect(saveButton).toHaveAttribute('disabled');
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/svelte';
+import ButtonSaveDemo from './ButtonSaveDemo.svelte';
+
+describe('ButtonSaveDemo', () => {
+  // Clean up after each test
+  beforeEach(() => {
+    cleanup();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // Helper to get the Save button specifically (not the Reset button)
+  const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
+
+  describe('rendering', () => {
+    it('renders save button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('renders as button element', () => {
+      render(ButtonSaveDemo);
+      expect(getSaveButton()).toBeInTheDocument();
+    });
+
+    it('renders reset button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText(/Reset/)).toBeInTheDocument();
+    });
+  });
+
+  describe('save states', () => {
+    it('shows saving state when clicked', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Button should now be in loading state (disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('button disabled state', () => {
+    it('is disabled while saving', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('success state', () => {
+    it('shows success state after timeout', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Advance timers past the 1000ms setTimeout
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should now be in success state (still disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('stays in success state after completion', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should remain disabled in success state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already loading', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      // First click
+      await fireEvent.click(button);
+
+      // Second click while loading - should be ignored
+      await fireEvent.click(button);
+
+      // Should still be in loading state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already in success state', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click while in success state - should be ignored
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('reset functionality', () => {
+    it('reset button clears success state', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // Trigger save and complete
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click reset
+      await fireEvent.click(resetButton);
+
+      // Save button should be enabled again
+      expect(saveButton).not.toHaveAttribute('disabled');
+    });
+
+    it('allows re-save after reset', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // First save cycle
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Reset
+      await fireEvent.click(resetButton);
+
+      // Second save should work
+      await fireEvent.click(saveButton);
+      expect(saveButton).toHaveAttribute('disabled');
+    });
+  });
+});

package/dist/primitives/Button/ButtonSaveDemo.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Button from "./Button.svelte";
-  import { typography } from "../../tokens/typography";
-
-  let loading = $state(false);
-  let success = $state(false);
-
-  function handleSave() {
-    if (loading || success) return;
-    loading = true;
-    setTimeout(() => {
-      loading = false;
-      success = true;
-    }, 1000);
-  }
-
-  function resetState() {
-    success = false;
-  }
-</script>
-
-<div class="flex gap-4 items-center">
-  <Button onclick={handleSave} {loading} {success}>Save</Button>
-  <button class={`${typography.smMuted} underline`} onclick={resetState}>Reset (simulates user edit)</button>
-</div>
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import { typography } from "../../tokens/typography";
+
+  let loading = $state(false);
+  let success = $state(false);
+
+  function handleSave() {
+    if (loading || success) return;
+    loading = true;
+    setTimeout(() => {
+      loading = false;
+      success = true;
+    }, 1000);
+  }
+
+  function resetState() {
+    success = false;
+  }
+</script>
+
+<div class="flex gap-4 items-center">
+  <Button onclick={handleSave} {loading} {success}>Save</Button>
+  <button class={`${typography.smMuted} underline`} onclick={resetState}>Reset (simulates user edit)</button>
+</div>

package/dist/primitives/Button/ButtonVariantShowcase.svelte

@@ -1,129 +1,129 @@
-<script lang="ts">
-  import Button from './Button.svelte';
-
-  const variants = [
-    { name: 'default', label: 'Primary Blue', desc: 'Main action' },
-    { name: 'alternative', label: 'Gray Outline', desc: 'Secondary action' },
-    { name: 'outline', label: 'Blue Outline', desc: 'Tertiary action' },
-    { name: 'ghost', label: 'Ghost', desc: 'Subtle action' },
-    { name: 'link', label: 'Link', desc: 'Inline text action' },
-    { name: 'red', label: 'Red Solid', desc: 'Destructive' },
-    { name: 'red-outline', label: 'Red Outline', desc: 'Less intense destructive' },
-    { name: 'ghost-red', label: 'Ghost Red', desc: 'Subtle destructive' },
-    { name: 'toggle', label: 'Toggle', desc: 'Filter/tab pills' },
-    { name: 'icon', label: 'Icon', desc: 'Square icon buttons' },
-  ];
-
-  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-  let isDark = $state(false);
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-</script>
-
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
-    </div>
-    <button
-      onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
-    >
-      {isDark ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  </div>
-
-  {#each variants as v}
-    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <div class="mb-3">
-        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
-        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
-      </div>
-
-      {#if v.name === 'icon'}
-        <div class="flex flex-wrap gap-3 items-end">
-          <Button variant="icon" size="xs">×</Button>
-          <Button variant="icon" size="sm">×</Button>
-          <Button variant="icon" size="md">×</Button>
-          <Button variant="icon" size="lg">×</Button>
-        </div>
-      {:else if v.name === 'toggle'}
-        <div class="flex flex-wrap gap-3 items-center">
-          {#each sizes as size}
-            <Button variant="toggle" {size}>{size}</Button>
-          {/each}
-          <Button variant="toggle" active={true}>active</Button>
-        </div>
-      {:else}
-        <div class="flex flex-wrap gap-3 items-end">
-          {#each sizes as size}
-            <Button variant={v.name} {size}>{size}</Button>
-          {/each}
-        </div>
-      {/if}
-    </section>
-  {/each}
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
-    </div>
-    <div class="max-w-md space-y-3">
-      <Button size="full">full</Button>
-      <Button size="xl-medium">xl-medium</Button>
-      <Button size="full-md-auto">full-md-auto</Button>
-      <div class="flex gap-2">
-        <Button size="half" variant="alternative">half</Button>
-        <Button size="half">half</Button>
-      </div>
-    </div>
-  </section>
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
-    </div>
-    <div class="flex flex-wrap gap-4 items-center">
-      <Button disabled>Disabled</Button>
-      <Button loading>Loading</Button>
-      <Button success successText="Saved!">Success</Button>
-    </div>
-  </section>
-
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
-    <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
-        <div class="flex gap-2">
-          <Button variant="ghost">Cancel</Button>
-          <Button>Save</Button>
-        </div>
-      </div>
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
-        <div class="flex gap-2">
-          <Button variant="alternative">Cancel</Button>
-          <Button variant="red">Delete</Button>
-        </div>
-      </div>
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
-        <div class="flex gap-2">
-          <Button variant="toggle" active={true}>Active</Button>
-          <Button variant="toggle">Inactive</Button>
-          <Button variant="toggle">All</Button>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
+<script lang="ts">
+  import Button from './Button.svelte';
+
+  const variants = [
+    { name: 'default', label: 'Primary Blue', desc: 'Main action' },
+    { name: 'alternative', label: 'Gray Outline', desc: 'Secondary action' },
+    { name: 'outline', label: 'Blue Outline', desc: 'Tertiary action' },
+    { name: 'ghost', label: 'Ghost', desc: 'Subtle action' },
+    { name: 'link', label: 'Link', desc: 'Inline text action' },
+    { name: 'red', label: 'Red Solid', desc: 'Destructive' },
+    { name: 'red-outline', label: 'Red Outline', desc: 'Less intense destructive' },
+    { name: 'ghost-red', label: 'Ghost Red', desc: 'Subtle destructive' },
+    { name: 'toggle', label: 'Toggle', desc: 'Filter/tab pills' },
+    { name: 'icon', label: 'Icon', desc: 'Square icon buttons' },
+  ];
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+  let isDark = $state(false);
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  {#each variants as v}
+    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+      <div class="mb-3">
+        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
+        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
+      </div>
+
+      {#if v.name === 'icon'}
+        <div class="flex flex-wrap gap-3 items-end">
+          <Button variant="icon" size="xs">×</Button>
+          <Button variant="icon" size="sm">×</Button>
+          <Button variant="icon" size="md">×</Button>
+          <Button variant="icon" size="lg">×</Button>
+        </div>
+      {:else if v.name === 'toggle'}
+        <div class="flex flex-wrap gap-3 items-center">
+          {#each sizes as size}
+            <Button variant="toggle" {size}>{size}</Button>
+          {/each}
+          <Button variant="toggle" active={true}>active</Button>
+        </div>
+      {:else}
+        <div class="flex flex-wrap gap-3 items-end">
+          {#each sizes as size}
+            <Button variant={v.name} {size}>{size}</Button>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  {/each}
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
+    </div>
+    <div class="max-w-md space-y-3">
+      <Button size="full">full</Button>
+      <Button size="xl-medium">xl-medium</Button>
+      <Button size="full-md-auto">full-md-auto</Button>
+      <div class="flex gap-2">
+        <Button size="half" variant="alternative">half</Button>
+        <Button size="half">half</Button>
+      </div>
+    </div>
+  </section>
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
+      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
+    </div>
+    <div class="flex flex-wrap gap-4 items-center">
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+      <Button success successText="Saved!">Success</Button>
+    </div>
+  </section>
+
+  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="mb-3">
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
+        <div class="flex gap-2">
+          <Button variant="ghost">Cancel</Button>
+          <Button>Save</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
+        <div class="flex gap-2">
+          <Button variant="alternative">Cancel</Button>
+          <Button variant="red">Delete</Button>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
+        <div class="flex gap-2">
+          <Button variant="toggle" active={true}>Active</Button>
+          <Button variant="toggle">Inactive</Button>
+          <Button variant="toggle">All</Button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>