@getmicdrop/svelte-components 5.5.5 → 5.6.0

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}

package/dist/primitives/Breadcrumb/Breadcrumb.spec.js

@@ -1,122 +1,122 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Breadcrumb from "./Breadcrumb.svelte";
-
-const sampleData = [
-  { name: "Home", href: "/", icon: "/icon-home.svg" },
-  { name: "Profile", href: "/profile" },
-  { name: "Settings", href: "/settings" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Breadcrumb, {
-    props: {
-      data: sampleData,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Breadcrumb Component Tests", () => {
-  test("Renders nothing when data is empty", () => {
-    render(Breadcrumb, { props: { data: [] } });
-    const nav = document.querySelector("nav");
-    expect(nav).not.toBeInTheDocument();
-  });
-
-  test("Renders nav element when data is provided", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toBeInTheDocument();
-  });
-
-  test("Renders all breadcrumb items", () => {
-    setupTest();
-    expect(screen.getByText("Home")).toBeInTheDocument();
-    expect(screen.getByText("Profile")).toBeInTheDocument();
-    expect(screen.getByText("Settings")).toBeInTheDocument();
-  });
-
-  test("First item shows icon", () => {
-    setupTest();
-    // First item has an icon (HomeSolid SVG)
-    const icons = document.querySelectorAll("svg");
-    // Should have at least the home icon plus separator arrows
-    expect(icons.length).toBeGreaterThan(0);
-  });
-
-  test("Shows separator arrows between items", () => {
-    setupTest();
-    // Arrows appear between items (n-1 arrows for n items)
-    const svgs = document.querySelectorAll("svg");
-    // 1 home icon + 2 chevron arrows = 3 SVGs minimum
-    expect(svgs.length).toBeGreaterThanOrEqual(3);
-  });
-
-  test("Last item is not a link", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item should be a span, not inside an anchor
-    expect(lastItem.closest("a")).toBeNull();
-  });
-
-  test("Non-last items are clickable links", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    const profileLink = screen.getByText("Profile").closest("a");
-
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink).toHaveAttribute("href", "/");
-    expect(profileLink).toBeInTheDocument();
-    expect(profileLink).toHaveAttribute("href", "/profile");
-  });
-
-  test("Dispatches click event when clicking breadcrumb", async () => {
-    const clickSpy = vi.fn();
-    const { user } = setupTest({ onclick: clickSpy });
-
-    const homeLink = screen.getByText("Home").closest("a");
-    await user.click(homeLink);
-
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
-  });
-
-  test("Last item has tertiary text color", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-gray-500");
-  });
-
-  test("Last item has default cursor", () => {
-    setupTest();
-    const lastItem = screen.getByText("Settings");
-    // Last item is a span, not a link, so it should not be clickable
-    expect(lastItem.tagName).toBe("SPAN");
-  });
-
-  test("Clickable items have pointer cursor", () => {
-    setupTest();
-    const homeLink = screen.getByText("Home").closest("a");
-    // Links are clickable elements
-    expect(homeLink).toBeInTheDocument();
-    expect(homeLink.tagName).toBe("A");
-  });
-
-  test("Has responsive text sizing", () => {
-    setupTest();
-    const nav = document.querySelector("nav");
-    expect(nav).toHaveClass("text-sm");
-  });
-
-  test("Renders with single item", () => {
-    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
-    expect(screen.getByText("Single")).toBeInTheDocument();
-    // Single item is both first and last, component renders it as span (last item)
-    const item = screen.getByText("Single");
-    expect(item.tagName).toBe("SPAN");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Breadcrumb from "./Breadcrumb.svelte";
+
+const sampleData = [
+  { name: "Home", href: "/", icon: "/icon-home.svg" },
+  { name: "Profile", href: "/profile" },
+  { name: "Settings", href: "/settings" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Breadcrumb, {
+    props: {
+      data: sampleData,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Breadcrumb Component Tests", () => {
+  test("Renders nothing when data is empty", () => {
+    render(Breadcrumb, { props: { data: [] } });
+    const nav = document.querySelector("nav");
+    expect(nav).not.toBeInTheDocument();
+  });
+
+  test("Renders nav element when data is provided", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toBeInTheDocument();
+  });
+
+  test("Renders all breadcrumb items", () => {
+    setupTest();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+
+  test("First item shows icon", () => {
+    setupTest();
+    // First item has an icon (HomeSolid SVG)
+    const icons = document.querySelectorAll("svg");
+    // Should have at least the home icon plus separator arrows
+    expect(icons.length).toBeGreaterThan(0);
+  });
+
+  test("Shows separator arrows between items", () => {
+    setupTest();
+    // Arrows appear between items (n-1 arrows for n items)
+    const svgs = document.querySelectorAll("svg");
+    // 1 home icon + 2 chevron arrows = 3 SVGs minimum
+    expect(svgs.length).toBeGreaterThanOrEqual(3);
+  });
+
+  test("Last item is not a link", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item should be a span, not inside an anchor
+    expect(lastItem.closest("a")).toBeNull();
+  });
+
+  test("Non-last items are clickable links", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    const profileLink = screen.getByText("Profile").closest("a");
+
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/");
+    expect(profileLink).toBeInTheDocument();
+    expect(profileLink).toHaveAttribute("href", "/profile");
+  });
+
+  test("Dispatches click event when clicking breadcrumb", async () => {
+    const clickSpy = vi.fn();
+    const { user } = setupTest({ onclick: clickSpy });
+
+    const homeLink = screen.getByText("Home").closest("a");
+    await user.click(homeLink);
+
+    expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(sampleData[0]);
+  });
+
+  test("Last item has tertiary text color", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("text-gray-500");
+  });
+
+  test("Last item has default cursor", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    // Last item is a span, not a link, so it should not be clickable
+    expect(lastItem.tagName).toBe("SPAN");
+  });
+
+  test("Clickable items have pointer cursor", () => {
+    setupTest();
+    const homeLink = screen.getByText("Home").closest("a");
+    // Links are clickable elements
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink.tagName).toBe("A");
+  });
+
+  test("Has responsive text sizing", () => {
+    setupTest();
+    const nav = document.querySelector("nav");
+    expect(nav).toHaveClass("text-sm");
+  });
+
+  test("Renders with single item", () => {
+    render(Breadcrumb, { props: { data: [{ name: "Single", href: "/" }] } });
+    expect(screen.getByText("Single")).toBeInTheDocument();
+    // Single item is both first and last, component renders it as span (last item)
+    const item = screen.getByText("Single");
+    expect(item.tagName).toBe("SPAN");
+  });
+});

package/dist/primitives/Breadcrumb/Breadcrumb.stories.svelte

@@ -1,23 +1,23 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Breadcrumb from "./Breadcrumb.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Breadcrumb",
-    component: Breadcrumb,
-    argTypes: {
-      data: { control: "object" },
-    },
-  });
-
-  const sampleData = [
-    { name: "Home", href: "/" },
-    { name: "Category", href: "/category" },
-    { name: "Current Page", href: "/category/current" },
-  ];
-
-</script>
-
-
-<Story name="Default Breadcrumb" args={{ data: sampleData }} />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Breadcrumb from "./Breadcrumb.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Breadcrumb",
+    component: Breadcrumb,
+    argTypes: {
+      data: { control: "object" },
+    },
+  });
+
+  const sampleData = [
+    { name: "Home", href: "/" },
+    { name: "Category", href: "/category" },
+    { name: "Current Page", href: "/category/current" },
+  ];
+
+</script>
+
+
+<Story name="Default Breadcrumb" args={{ data: sampleData }} />