@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -1,136 +1,136 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/svelte';
-import BottomSheet from './BottomSheet.svelte';
-import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
-
-describe('BottomSheet Component', () => {
-  beforeEach(() => {
-    // Reset body overflow
-    document.body.style.overflow = '';
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-    cleanup();
-  });
-
-  it('does not render when show is false', () => {
-    const { container } = render(BottomSheet, { props: { show: false } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeFalsy();
-  });
-
-  it('renders when show is true', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeTruthy();
-  });
-
-  it('renders title when provided', () => {
-    const { getByText } = render(BottomSheet, {
-      props: { show: true, title: 'Test Title' },
-    });
-    expect(getByText('Test Title')).toBeTruthy();
-  });
-
-  it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    const title = container.querySelector('h3');
-    expect(title).toBeFalsy();
-  });
-
-  it('locks body scroll when shown', async () => {
-    render(BottomSheet, { props: { show: true } });
-    // Wait for reactive update
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('unlocks body scroll when hidden', async () => {
-    const { rerender } = render(BottomSheetWrapper, { props: { show: true } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-
-    await rerender({ show: false });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('dispatches close event on backdrop click', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
-    });
-    const backdrop = container.querySelector('.fixed.inset-0');
-
-    await fireEvent.click(backdrop);
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close when clicking sheet content', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { show: true, onclose }
-    });
-    const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
-
-    await fireEvent.click(sheet);
-    expect(closeCalled).toBe(false);
-  });
-
-  it('dispatches close event on Escape key', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { show: true, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close on Escape when not shown', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { show: false, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(false);
-  });
-
-  it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    // The handle is the gray bar with rounded corners
-    const handle = container.querySelector('.w-10.h-1.bg-gray-300');
-    expect(handle).toBeTruthy();
-  });
-
-  it('has content area for slot content', () => {
-    const { container } = render(BottomSheet, { props: { show: true } });
-    // The content area has overflow-y-auto class
-    const content = container.querySelector('.overflow-y-auto');
-    expect(content).toBeTruthy();
-  });
-
-  it('cleans up body overflow on destroy', () => {
-    document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheet, { props: { show: true } });
-
-    unmount();
-
-    expect(document.body.style.overflow).toBe('');
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import BottomSheet from './BottomSheet.svelte';
+import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
+
+describe('BottomSheet Component', () => {
+  beforeEach(() => {
+    // Reset body overflow
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = '';
+    cleanup();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(BottomSheet, { props: { show: false } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeFalsy();
+  });
+
+  it('renders when show is true', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    const { getByText } = render(BottomSheet, {
+      props: { show: true, title: 'Test Title' },
+    });
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('does not render title when not provided', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const title = container.querySelector('h3');
+    expect(title).toBeFalsy();
+  });
+
+  it('locks body scroll when shown', async () => {
+    render(BottomSheet, { props: { show: true } });
+    // Wait for reactive update
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('unlocks body scroll when hidden', async () => {
+    const { rerender } = render(BottomSheetWrapper, { props: { show: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ show: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('dispatches close event on backdrop click', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { show: true, onclose }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+
+    await fireEvent.click(backdrop);
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close when clicking sheet content', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { show: true, onclose }
+    });
+    const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
+
+    await fireEvent.click(sheet);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('dispatches close event on Escape key', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { show: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close on Escape when not shown', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { show: false, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('has handle bar element', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    // The handle is the gray bar with rounded corners
+    const handle = container.querySelector('.w-10.h-1.bg-gray-300');
+    expect(handle).toBeTruthy();
+  });
+
+  it('has content area for slot content', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    // The content area has overflow-y-auto class
+    const content = container.querySelector('.overflow-y-auto');
+    expect(content).toBeTruthy();
+  });
+
+  it('cleans up body overflow on destroy', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheet, { props: { show: true } });
+
+    unmount();
+
+    expect(document.body.style.overflow).toBe('');
+  });
+});

package/dist/primitives/BottomSheet/BottomSheet.stories.svelte

@@ -1,83 +1,83 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import BottomSheet from './BottomSheet.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/BottomSheet',
-    component: BottomSheet,
-    tags: ['autodocs'],
-    argTypes: {
-      show: {
-        control: 'boolean',
-        description: 'Controls visibility of the bottom sheet',
-      },
-      title: {
-        control: 'text',
-        description: 'Optional title displayed at the top',
-      },
-    },
-  });
-</script>
-
-<script>
-  import Button from '../Button/Button.svelte';
-
-  let showBasic = $state(false);
-  let showWithActions = $state(false);
-  let showWithTitle = $state(false);
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    title: '',
-  }}
-/>
-
-<Story name="With Title">
-  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
-  <BottomSheet
-    show={showWithTitle}
-    title="Bottom Sheet Title"
-    onclose={() => (showWithTitle = false)}
-  >
-    <p>This bottom sheet has a title at the top.</p>
-    <p>The title helps provide context for the sheet's purpose.</p>
-  </BottomSheet>
-</Story>
-
-<Story name="With Actions">
-  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
-  <BottomSheet
-    show={showWithActions}
-    title="Confirm Action"
-    onclose={() => (showWithActions = false)}
-  >
-    <p>Are you sure you want to proceed with this action?</p>
-    {#snippet actions()}
-      <Button variant="alternative" onclick={() => (showWithActions = false)}>
-        Cancel
-      </Button>
-      <Button variant="default" onclick={() => (showWithActions = false)}>
-        Confirm
-      </Button>
-    {/snippet}
-  </BottomSheet>
-</Story>
-
-<Story name="Long Content">
-  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
-  <BottomSheet
-    show={showBasic}
-    title="Privacy Policy"
-    onclose={() => (showBasic = false)}
-  >
-    <div>
-      {#each Array(20) as _, i}
-        <p>This is paragraph {i + 1} of the long content. The sheet is scrollable when content exceeds the viewport.</p>
-      {/each}
-    </div>
-  </BottomSheet>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import BottomSheet from './BottomSheet.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/BottomSheet',
+    component: BottomSheet,
+    tags: ['autodocs'],
+    argTypes: {
+      show: {
+        control: 'boolean',
+        description: 'Controls visibility of the bottom sheet',
+      },
+      title: {
+        control: 'text',
+        description: 'Optional title displayed at the top',
+      },
+    },
+  });
+</script>
+
+<script>
+  import Button from '../Button/Button.svelte';
+
+  let showBasic = $state(false);
+  let showWithActions = $state(false);
+  let showWithTitle = $state(false);
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    title: '',
+  }}
+/>
+
+<Story name="With Title">
+  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
+  <BottomSheet
+    show={showWithTitle}
+    title="Bottom Sheet Title"
+    onclose={() => (showWithTitle = false)}
+  >
+    <p>This bottom sheet has a title at the top.</p>
+    <p>The title helps provide context for the sheet's purpose.</p>
+  </BottomSheet>
+</Story>
+
+<Story name="With Actions">
+  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
+  <BottomSheet
+    show={showWithActions}
+    title="Confirm Action"
+    onclose={() => (showWithActions = false)}
+  >
+    <p>Are you sure you want to proceed with this action?</p>
+    {#snippet actions()}
+      <Button variant="alternative" onclick={() => (showWithActions = false)}>
+        Cancel
+      </Button>
+      <Button variant="default" onclick={() => (showWithActions = false)}>
+        Confirm
+      </Button>
+    {/snippet}
+  </BottomSheet>
+</Story>
+
+<Story name="Long Content">
+  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
+  <BottomSheet
+    show={showBasic}
+    title="Privacy Policy"
+    onclose={() => (showBasic = false)}
+  >
+    <div>
+      {#each Array(20) as _, i}
+        <p>This is paragraph {i + 1} of the long content. The sheet is scrollable when content exceeds the viewport.</p>
+      {/each}
+    </div>
+  </BottomSheet>
+</Story>

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -1,100 +1,100 @@
-<script lang="ts">
-  import { onDestroy } from "svelte";
-  import { fly, fade } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import type { Snippet } from 'svelte';
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    /** Whether the bottom sheet is visible */
-    show?: boolean;
-    /** Title displayed in the header */
-    title?: string;
-    /** Callback when the sheet should close */
-    onclose?: () => void;
-    /** Main content */
-    children?: Snippet;
-    /** Actions slot (footer buttons) */
-    actions?: Snippet;
-  }
-
-  let {
-    show = false,
-    title = '',
-    onclose,
-    children,
-    actions
-  }: Props = $props();
-
-  function close() {
-    onclose?.();
-  }
-
-  function handleBackdropClick(e: MouseEvent) {
-    if (e.target === e.currentTarget) {
-      close();
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape" && show) {
-      close();
-    }
-  }
-
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (show) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if show}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
-    onclick={handleBackdropClick}
-    transition:fade={{ duration: 200 }}
-  >
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <div class="flex justify-center pt-3 pb-2 shrink-0 md:hidden">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
-      </div>
-
-      {#if title}
-        <div class="px-6 pb-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
-          <h3 class={typography.h3}>{title}</h3>
-        </div>
-      {/if}
-
-      <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
-        {@render children?.()}
-      </div>
-
-      {#if actions}
-        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0 flex flex-col gap-3">
-          {@render actions?.()}
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import type { Snippet } from 'svelte';
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    /** Whether the bottom sheet is visible */
+    show?: boolean;
+    /** Title displayed in the header */
+    title?: string;
+    /** Callback when the sheet should close */
+    onclose?: () => void;
+    /** Main content */
+    children?: Snippet;
+    /** Actions slot (footer buttons) */
+    actions?: Snippet;
+  }
+
+  let {
+    show = false,
+    title = '',
+    onclose,
+    children,
+    actions
+  }: Props = $props();
+
+  function close() {
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape" && show) {
+      close();
+    }
+  }
+
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (show) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if show}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
+    onclick={handleBackdropClick}
+    transition:fade={{ duration: 200 }}
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <div class="flex justify-center pt-3 pb-2 shrink-0 md:hidden">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
+      </div>
+
+      {#if title}
+        <div class="px-6 pb-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
+          <h3 class={typography.h3}>{title}</h3>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto overscroll-contain p-4 px-6">
+        {@render children?.()}
+      </div>
+
+      {#if actions}
+        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0 flex flex-col gap-3">
+          {@render actions?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}