@getmicdrop/svelte-components 5.17.0 → 5.17.3

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,115 +1,115 @@
-<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 */
-    open?: boolean;
-    /** Title displayed in the header */
-    title?: string;
-    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
-    alwaysSheet?: boolean;
-    /** Callback when the sheet should close */
-    onclose?: () => void;
-    /** Main content */
-    children?: Snippet;
-    /** Actions slot (footer buttons) */
-    actions?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    title = '',
-    alwaysSheet = false,
-    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" && open) {
-      close();
-    }
-  }
-
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (open) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = "";
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-
-  let backdropClass = $derived(
-    alwaysSheet
-      ? "fixed inset-0 z-50 flex items-end bg-gray-900/50 dark:bg-gray-900/80"
-      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
-  );
-
-  let sheetClass = $derived(
-    alwaysSheet
-      ? "w-full max-h-[90dvh] bg-white dark:bg-gray-800 rounded-t-xl shadow-xl flex flex-col overflow-hidden"
-      : "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"
-  );
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class={backdropClass}
-    onclick={handleBackdropClick}
-    transition:fade={{ duration: 200 }}
-  >
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class={sheetClass}
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : '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 */
+    open?: boolean;
+    /** Title displayed in the header */
+    title?: string;
+    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
+    alwaysSheet?: boolean;
+    /** Callback when the sheet should close */
+    onclose?: () => void;
+    /** Main content */
+    children?: Snippet;
+    /** Actions slot (footer buttons) */
+    actions?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = '',
+    alwaysSheet = false,
+    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" && open) {
+      close();
+    }
+  }
+
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+
+  let backdropClass = $derived(
+    alwaysSheet
+      ? "fixed inset-0 z-50 flex items-end bg-gray-900/50 dark:bg-gray-900/80"
+      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
+  );
+
+  let sheetClass = $derived(
+    alwaysSheet
+      ? "w-full max-h-[90dvh] bg-white dark:bg-gray-800 rounded-t-xl shadow-xl flex flex-col overflow-hidden"
+      : "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"
+  );
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={backdropClass}
+    onclick={handleBackdropClick}
+    transition:fade={{ duration: 200 }}
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={sheetClass}
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : '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/BottomSheet/BottomSheetWithActions.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import BottomSheet from './BottomSheet.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    alwaysSheet?: boolean;
+    onclose?: () => void;
+  }
+
+  let { open = false, title = '', alwaysSheet = false, onclose }: Props = $props();
+</script>
+
+<BottomSheet bind:open {title} {alwaysSheet} {onclose}>
+  <div>Test content</div>
+  {#snippet actions()}
+    <button>Save</button>
+    <button>Cancel</button>
+  {/snippet}
+</BottomSheet>

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    open?: boolean;
+    title?: string;
+    alwaysSheet?: boolean;
+    onclose?: () => void;
+}
+declare const BottomSheetWithActions: import("svelte").Component<Props, {}, "">;
+type BottomSheetWithActions = ReturnType<typeof BottomSheetWithActions>;
+export default BottomSheetWithActions;
+//# sourceMappingURL=BottomSheetWithActions.test.svelte.d.ts.map

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetWithActions.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheetWithActions.test.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkBH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}