@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/Modal/Modal.stories.svelte

@@ -0,0 +1,83 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ModalProgress from "./Modal.svelte";
+
+  export const meta = {
+    title: "Components/Modal/ModalProgress",
+    component: ModalProgress,
+  };
+
+  let show1 = false;
+  let show2 = false;
+  let show3 = false;
+</script>
+
+<Story name="Basic Modal">
+  <button
+    on:click={() => (show1 = true)}
+    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+  >
+    Open Basic Modal
+  </button>
+  <ModalProgress bind:show={show1}>
+    <div slot="header">
+      <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
+    </div>
+    <div slot="body">
+      <p class="text-gray-600">This is the modal body content.</p>
+    </div>
+    <div slot="footer">
+      <button
+        on:click={() => (show1 = false)}
+        class="px-4 py-2 bg-gray-600 text-white rounded-lg"
+      >
+        Close
+      </button>
+    </div>
+  </ModalProgress>
+</Story>
+
+<Story name="Processing State">
+  <button
+    on:click={() => (show2 = true)}
+    class="px-4 py-2 bg-blue-600 text-white rounded-lg"
+  >
+    Open Processing Modal
+  </button>
+  <ModalProgress bind:show={show2} isProcessing={true}>
+    <div slot="body">
+      <div class="flex flex-col items-center gap-4">
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
+        ></div>
+        <p class="text-gray-600">Processing your request...</p>
+      </div>
+    </div>
+  </ModalProgress>
+</Story>
+
+<Story name="Success State">
+  <button
+    on:click={() => (show3 = true)}
+    class="px-4 py-2 bg-green-600 text-white rounded-lg"
+  >
+    Open Success Modal
+  </button>
+  <ModalProgress bind:show={show3} isSuccess={true}>
+    <div slot="body">
+      <div class="flex flex-col items-center gap-4 text-center">
+        <div class="text-green-600 text-5xl">✓</div>
+        <h3 class="text-xl font-semibold">Success!</h3>
+        <p class="text-gray-600">Your action was completed successfully.</p>
+      </div>
+    </div>
+    <div slot="footer">
+      <button
+        on:click={() => (show3 = false)}
+        class="px-4 py-2 bg-green-600 text-white rounded-lg"
+      >
+        Done
+      </button>
+    </div>
+  </ModalProgress>
+</Story>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.stories.svelte.js"],"names":[],"mappings":";;;;AAwEA,oDAAoD;AACpD,sDAAsD;AACtD,oDAAoD;AAEpD;;;;;CACC;yBALa,OAAO,SAAS,CAAC,KAAK;0BACtB,OAAO,SAAS,CAAC,MAAM;yBACvB,OAAO,SAAS,CAAC,KAAK;0BAtER,gBAAgB;gCAJZ,QAAQ;AAuExC;;;;;;;;;;EAAgF"}

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,234 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../../utils/portal.js";
+
+  export let show = false;
+  export let isProcessing = false;
+  export let isSuccess = false;
+  export let size = "default"; // "default" | "small" | "large"
+
+  const dispatch = createEventDispatcher();
+
+  // Store scroll position for iOS scroll lock
+  let scrollY = 0;
+
+  // Handle escape key
+  function handleKeydown(event) {
+    if (event.key === "Escape" && show) {
+      resetModal();
+    }
+  }
+
+  const resetModal = () => {
+    dispatch("cancel");
+    show = false;
+  };
+
+  // Determine size class - don't auto-shrink during processing/success to prevent drawer resize
+  $: sizeClass = size;
+
+  // iOS-compatible scroll lock using position:fixed approach
+  // Reference: https://www.jayfreestone.com/writing/locking-body-scroll-ios/
+  $: if (typeof document !== "undefined") {
+    if (show) {
+      // Save current scroll position
+      scrollY = window.scrollY;
+      // Apply fixed positioning to lock scroll (works on iOS)
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.overflow = "hidden";
+    } else {
+      // Restore scroll position
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.left = "";
+      document.body.style.right = "";
+      document.body.style.overflow = "";
+      window.scrollTo(0, scrollY);
+    }
+  }
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.left = "";
+      document.body.style.right = "";
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show}
+  <!-- Portal moves modal to document.body, outside all stacking contexts -->
+  <!-- This fixes iOS Safari/Chrome z-index issues with CSS Grid -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="modal-backdrop"
+    on:click={resetModal}
+    transition:fade={{ duration: 300 }}
+    role="dialog"
+    aria-modal="true"
+    use:portal
+  >
+    <!-- Mobile: Bottom sheet -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="modal-sheet"
+      class:small={sizeClass === "small"}
+      class:large={sizeClass === "large"}
+      on:click|stopPropagation
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar (mobile only) -->
+      <div class="sheet-handle-wrapper">
+        <div class="sheet-handle"></div>
+      </div>
+
+      <div class="modal-inner">
+        <slot name="header"></slot>
+        <slot name="body"></slot>
+        <div class="modal-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop: Centered modal -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="modal-centered"
+      class:small={sizeClass === "small"}
+      class:large={sizeClass === "large"}
+      on:click|stopPropagation
+      transition:fly={{ y: 20, duration: 200 }}
+    >
+      <slot name="header"></slot>
+      <slot name="body"></slot>
+      <div class="modal-footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+
+    /* iOS scroll lock - prevent scroll bleed-through */
+    touch-action: none;
+    -webkit-overflow-scrolling: none;
+    overscroll-behavior: none;
+
+    /* Mobile: align to bottom for sheet */
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  @media (min-width: 768px) {
+    .modal-backdrop {
+      /* Desktop: center the modal */
+      align-items: center;
+      padding: 1rem;
+    }
+  }
+
+  /* Mobile: Bottom sheet style */
+  .modal-sheet {
+    background-color: hsl(var(--BG-Primary));
+    border-radius: 1.5rem 1.5rem 0 0;
+    width: 100%;
+    max-height: 90vh;
+    max-height: 90dvh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
+
+    /* Allow touch interactions within sheet, contain scroll */
+    touch-action: pan-y;
+    overscroll-behavior: contain;
+  }
+
+  /* Hide sheet on desktop */
+  @media (min-width: 768px) {
+    .modal-sheet {
+      display: none;
+    }
+  }
+
+  .sheet-handle-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 0.75rem 0 0.25rem;
+    flex-shrink: 0;
+  }
+
+  .sheet-handle {
+    width: 2.5rem;
+    height: 0.25rem;
+    background-color: hsl(var(--Stroke-Primary));
+    border-radius: 0.125rem;
+  }
+
+  .modal-inner {
+    padding: 0.5rem 1.5rem 1.5rem;
+    padding-bottom: calc(1.5rem + var(--safe-bottom, 0px));
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  /* Desktop: Centered modal style */
+  .modal-centered {
+    display: none;
+    background-color: hsl(var(--BG-Primary));
+    padding: 1.5rem;
+    border-radius: 1rem;
+    max-width: 420px;
+    width: 100%;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+
+  @media (min-width: 768px) {
+    .modal-centered {
+      display: block;
+    }
+  }
+
+  .modal-centered.small {
+    max-width: 350px;
+  }
+
+  .modal-centered.large {
+    max-width: 560px;
+  }
+
+  .modal-footer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  @media (min-width: 768px) {
+    .modal-footer {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+</style>

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

@@ -0,0 +1,46 @@
+/** @typedef {typeof __propDef.props}  ModalProps */
+/** @typedef {typeof __propDef.events}  ModalEvents */
+/** @typedef {typeof __propDef.slots}  ModalSlots */
+export default class Modal extends SvelteComponent<{
+    size?: string | undefined;
+    show?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    isProcessing?: boolean | undefined;
+}, {
+    click: PointerEvent;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    body: {};
+    footer: {};
+}> {
+}
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        show?: boolean | undefined;
+        isSuccess?: boolean | undefined;
+        isProcessing?: boolean | undefined;
+    };
+    events: {
+        click: PointerEvent;
+        cancel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        body: {};
+        footer: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Modal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.svelte.js"],"names":[],"mappings":"AAqHA,oDAAoD;AACpD,sDAAsD;AACtD,oDAAoD;AAEpD;;;;;;;;;;;;;;;CACC;yBALa,OAAO,SAAS,CAAC,KAAK;0BACtB,OAAO,SAAS,CAAC,MAAM;yBACvB,OAAO,SAAS,CAAC,KAAK;gCAvHJ,QAAQ;AAoHxC;;;;;;;;;;;;;;;;;;;;EAA4H"}