@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/BottomSheet/BottomSheet.stories.svelte

@@ -0,0 +1,91 @@
+<script context="module">
+  import BottomSheet from './BottomSheet.svelte';
+
+  export const meta = {
+    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 { Story, Template } from '@storybook/addon-svelte-csf';
+  import Button from '../Button/Button.svelte';
+
+  let showBasic = false;
+  let showWithActions = false;
+  let showWithTitle = false;
+</script>
+
+<Template let:args>
+  <div>
+    <Button on:click={() => (showBasic = true)}>Open Bottom Sheet</Button>
+    <BottomSheet {...args} show={showBasic} on:close={() => (showBasic = false)}>
+      <p>This is the content of the bottom sheet. It can contain any content you want.</p>
+      <p>On mobile, it slides up from the bottom. On desktop, it appears as a centered modal.</p>
+    </BottomSheet>
+  </div>
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    title: '',
+  }}
+/>
+
+<Story name="With Title">
+  <Button on:click={() => (showWithTitle = true)}>Open With Title</Button>
+  <BottomSheet
+    show={showWithTitle}
+    title="Bottom Sheet Title"
+    on:close={() => (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 on:click={() => (showWithActions = true)}>Open With Actions</Button>
+  <BottomSheet
+    show={showWithActions}
+    title="Confirm Action"
+    on:close={() => (showWithActions = false)}
+  >
+    <p>Are you sure you want to proceed with this action?</p>
+    <p slot="actions">
+      <Button variant="secondary" on:click={() => (showWithActions = false)}>
+        Cancel
+      </Button>
+      <Button variant="primary" on:click={() => (showWithActions = false)}>
+        Confirm
+      </Button>
+    </p>
+  </BottomSheet>
+</Story>
+
+<Story name="Long Content">
+  <Button on:click={() => showBasic = true}>Open With Long Content</Button>
+  <BottomSheet
+    show={showBasic}
+    title="Privacy Policy"
+    on:close={() => (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/components/BottomSheet/BottomSheet.stories.svelte.d.ts

@@ -0,0 +1,45 @@
+export namespace meta {
+    export let title: string;
+    export { BottomSheet as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace show {
+            let control: string;
+            let description: string;
+        }
+        export namespace title_1 {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { title_1 as title };
+    }
+}
+/** @typedef {typeof __propDef.props}  BottomSheetProps */
+/** @typedef {typeof __propDef.events}  BottomSheetEvents */
+/** @typedef {typeof __propDef.slots}  BottomSheetSlots */
+export default class BottomSheet extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BottomSheetProps = typeof __propDef.props;
+export type BottomSheetEvents = typeof __propDef.events;
+export type BottomSheetSlots = typeof __propDef.slots;
+import BottomSheet from './BottomSheet.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=BottomSheet.stories.svelte.d.ts.map

package/dist/components/BottomSheet/BottomSheet.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuFA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;wBAtFV,sBAAsB;gCAHhB,QAAQ;AAsFxC;;;;;;;;;;EAAgF"}

package/dist/components/BottomSheet/BottomSheet.svelte

@@ -0,0 +1,171 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+
+  export let show = false;
+  export let title = "";
+
+  const dispatch = createEventDispatcher();
+
+  function close() {
+    dispatch("close");
+  }
+
+  function handleBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape" && show) {
+      close();
+    }
+  }
+
+  // Lock body scroll when sheet is open
+  $: 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 on:keydown={handleKeydown} />
+
+{#if show}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="bottom-sheet-backdrop"
+    on:click={handleBackdropClick}
+    transition:fade={{ duration: 200 }}
+  >
+    <div
+      class="bottom-sheet"
+      on:click|stopPropagation
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar for drag indication -->
+      <div class="bottom-sheet__handle-wrapper">
+        <div class="bottom-sheet__handle"></div>
+      </div>
+
+      <!-- Optional title -->
+      {#if title}
+        <div class="bottom-sheet__header">
+          <h3 class="bottom-sheet__title">{title}</h3>
+        </div>
+      {/if}
+
+      <!-- Content slot -->
+      <div class="bottom-sheet__content">
+        <slot />
+      </div>
+
+      <!-- Actions slot (optional) -->
+      {#if $$slots.actions}
+        <div class="bottom-sheet__actions">
+          <slot name="actions" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .bottom-sheet-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+    display: flex;
+    align-items: flex-end;
+    touch-action: none;
+  }
+
+  .bottom-sheet {
+    width: 100%;
+    max-height: 90vh;
+    max-height: 90dvh;
+    background-color: hsl(var(--BG-Primary));
+    border-radius: 1.5rem 1.5rem 0 0;
+    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: var(--safe-bottom, 0px);
+  }
+
+  .bottom-sheet__handle-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 0.75rem 0 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .bottom-sheet__handle {
+    width: 2.5rem;
+    height: 0.25rem;
+    background-color: hsl(var(--Stroke-Primary));
+    border-radius: 0.125rem;
+  }
+
+  .bottom-sheet__header {
+    padding: 0 1.5rem 1rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary));
+    flex-shrink: 0;
+  }
+
+  .bottom-sheet__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary));
+    margin: 0;
+  }
+
+  .bottom-sheet__content {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    padding: 1rem 1.5rem;
+  }
+
+  .bottom-sheet__actions {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid hsl(var(--Stroke-Primary));
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  /* Desktop: show as centered modal instead */
+  @media (min-width: 768px) {
+    .bottom-sheet-backdrop {
+      align-items: center;
+      justify-content: center;
+    }
+
+    .bottom-sheet {
+      max-width: 480px;
+      max-height: 80vh;
+      border-radius: 1rem;
+      margin: 1rem;
+    }
+
+    .bottom-sheet__handle-wrapper {
+      display: none;
+    }
+  }
+</style>

package/dist/components/BottomSheet/BottomSheet.svelte.d.ts

@@ -0,0 +1,40 @@
+/** @typedef {typeof __propDef.props}  BottomSheetProps */
+/** @typedef {typeof __propDef.events}  BottomSheetEvents */
+/** @typedef {typeof __propDef.slots}  BottomSheetSlots */
+export default class BottomSheet extends SvelteComponent<{
+    title?: string | undefined;
+    show?: boolean | undefined;
+}, {
+    click: PointerEvent;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    actions: {};
+}> {
+}
+export type BottomSheetProps = typeof __propDef.props;
+export type BottomSheetEvents = typeof __propDef.events;
+export type BottomSheetSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        show?: boolean | undefined;
+    };
+    events: {
+        click: PointerEvent;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        actions: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=BottomSheet.svelte.d.ts.map

package/dist/components/BottomSheet/BottomSheet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":"AAwFA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;;;;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCA1FJ,QAAQ;AAuFxC;;;;;;;;;;;;;;;;;EAAkG"}

package/dist/components/Breadcrumb/Breadcrumb.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Breadcrumb.spec.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.spec.js"],"names":[],"mappings":""}

package/dist/components/Breadcrumb/Breadcrumb.spec.js

@@ -0,0 +1,120 @@
+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
+    const icons = document.querySelectorAll("img");
+    // 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 imgs = document.querySelectorAll("img");
+    // 1 home icon + 2 arrows = 3 images minimum
+    expect(imgs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  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 { user, component } = setupTest();
+    const clickSpy = vi.fn();
+    component.$on("click", clickSpy);
+
+    const homeLink = screen.getByText("Home").closest("a");
+    await user.click(homeLink);
+
+    expect(clickSpy).toHaveBeenCalled();
+    expect(clickSpy.mock.calls[0][0].detail).toEqual(sampleData[0]);
+  });
+
+  test("Last item has tertiary text color", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("text-Text-Tartiary");
+  });
+
+  test("Last item has default cursor", () => {
+    setupTest();
+    const lastItem = screen.getByText("Settings");
+    expect(lastItem).toHaveClass("cursor-default");
+  });
+
+  test("Clickable items have pointer cursor", () => {
+    setupTest();
+    const homeSpan = screen.getByText("Home").closest("span");
+    expect(homeSpan).toHaveClass("cursor-pointer");
+  });
+
+  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 should be the "last" item, so not a link
+    const item = screen.getByText("Single");
+    expect(item.closest("a")).toBeNull();
+  });
+});

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte

@@ -0,0 +1,24 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Breadcrumb from "./Breadcrumb.svelte";
+
+  export const meta = {
+    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>
+
+<Template let:args>
+  <Breadcrumb {...args} />
+</Template>
+
+<Story name="Default Breadcrumb" args={{ data: sampleData }} />

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte.d.ts

@@ -0,0 +1,36 @@
+export namespace meta {
+    export let title: string;
+    export { Breadcrumb as component };
+    export namespace argTypes {
+        namespace data {
+            let control: string;
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  BreadcrumbProps */
+/** @typedef {typeof __propDef.events}  BreadcrumbEvents */
+/** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
+export default class Breadcrumb extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+import Breadcrumb from "./Breadcrumb.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Breadcrumb.stories.svelte.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;AA8BA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;uBA5BX,qBAAqB;gCAJd,QAAQ;AA6BxC;;;;;;;;;;EAAgF"}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import BreadcrumbArrow from "../../assets/svg/arrow-up.svg";
+
+  export let data = [];
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(crumb) {
+    dispatch("click", crumb);
+  }
+</script>
+
+{#if data.length > 0}
+  <nav class="inline-flex text-sm leading-[14px] font-medium">
+    {#each data as crumb, index}
+      <div class="flex items-center">
+        {#if index > 0}
+          <img
+            src={BreadcrumbArrow}
+            alt=""
+            class="w-2.5 sm:w-3 h-2.5 sm:h-3 mx-2 sm:mx-2.5"
+          />
+        {/if}
+        {#if index === 0}
+          <img
+            src={crumb.icon}
+            alt=""
+            class="w-3 sm:w-4 h-3 sm:h-4 mx-2 sm:mx-2.5"
+          />
+        {/if}
+        {#if index === data.length - 1}
+          <span class="text-Text-Tartiary cursor-default">{crumb.name}</span>
+        {:else}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <span class="text-Text-Secondary no-underline cursor-pointer">
+            <a
+              href={crumb.href}
+              on:click={() => handleClick(crumb)}
+              class="hover:no-underline"
+            >
+              {crumb.name}
+            </a>
+          </span>
+        {/if}
+      </div>
+    {/each}
+  </nav>
+{/if}

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,30 @@
+/** @typedef {typeof __propDef.props}  BreadcrumbProps */
+/** @typedef {typeof __propDef.events}  BreadcrumbEvents */
+/** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
+export default class Breadcrumb extends SvelteComponent<{
+    data?: any[] | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: any[] | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Breadcrumb.svelte.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":"AAgDA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;gCAlDJ,QAAQ;AA+CxC;;;;;;;;;;;;EAA0F"}

package/dist/components/Button/Button.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.spec.d.ts.map

package/dist/components/Button/Button.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.spec.js"],"names":[],"mappings":""}