@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/primitives/Modal/Modal.svelte

@@ -1,158 +1,158 @@
-<script>
-  /**
-   * Modal Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   */
-  import { onDestroy } from "svelte";
-  import { fade, fly } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { portal } from "../../utils/portal.js";
-
-  /** @type {{
-    show?: boolean,
-    isProcessing?: boolean,
-    isSuccess?: boolean,
-    size?: 'default' | 'small' | 'large' | 'xlarge',
-    persistent?: boolean,
-    oncancel?: () => void,
-    header?: any,
-    body?: any,
-    footer?: any,
-    class?: string,
-    [key: string]: any
-  }} */
-  let {
-    show = $bindable(false),
-    isProcessing = false,
-    isSuccess = false,
-    size = "default",
-    persistent = false,
-    oncancel,
-    header,
-    body,
-    footer,
-    class: _className,
-    ...restProps
-  } = $props();
-
-  // Store scroll position for iOS scroll lock
-  let scrollY = $state(0);
-
-  // Handle escape key
-  function handleKeydown(event) {
-    if (event.key === "Escape" && show && !persistent) {
-      resetModal();
-    }
-  }
-
-  const resetModal = () => {
-    oncancel?.();
-    show = false;
-  };
-
-  // Size classes for desktop modal (Tailwind scale)
-  const sizeClasses = {
-    default: "max-w-md",
-    small: "max-w-sm",
-    large: "max-w-xl",
-    xlarge: "max-w-2xl"
-  };
-
-  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
-
-  // iOS-compatible scroll lock using position:fixed approach
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (show) {
-        scrollY = window.scrollY;
-        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 {
-        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 onkeydown={handleKeydown} />
-
-{#if show}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
-    onmousedown={(e) => {
-      // Only track direct clicks on backdrop, not drags that end on backdrop
-      if (e.target === e.currentTarget && !persistent) {
-        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
-      }
-    }}
-    onmouseup={(e) => {
-      // Only close if both mousedown and mouseup were on the backdrop
-      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
-        resetModal();
-      }
-      delete e.currentTarget.dataset.clickStartedOnBackdrop;
-    }}
-    transition:fade={{ duration: 300 }}
-    role="dialog"
-    aria-modal="true"
-    use:portal
-    {...restProps}
-  >
-    <!-- Mobile: Bottom sheet -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <!-- Handle bar -->
-      <div class="flex justify-center pt-3 pb-1 shrink-0">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
-      </div>
-
-      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
-        {#if header}{@render header()}{/if}
-        {#if body}{@render body()}{/if}
-        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
-          {#if footer}{@render footer()}{/if}
-        </div>
-      </div>
-    </div>
-
-    <!-- Desktop: Centered modal -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 20, duration: 200 }}
-    >
-      {#if header}{@render header()}{/if}
-      {#if body}{@render body()}{/if}
-      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
-        {#if footer}{@render footer()}{/if}
-      </div>
-    </div>
-  </div>
-{/if}
+<script>
+  /**
+   * Modal Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   */
+  import { onDestroy } from "svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../utils/portal.js";
+
+  /** @type {{
+    show?: boolean,
+    isProcessing?: boolean,
+    isSuccess?: boolean,
+    size?: 'default' | 'small' | 'large' | 'xlarge',
+    persistent?: boolean,
+    oncancel?: () => void,
+    header?: any,
+    body?: any,
+    footer?: any,
+    class?: string,
+    [key: string]: any
+  }} */
+  let {
+    show = $bindable(false),
+    isProcessing = false,
+    isSuccess = false,
+    size = "default",
+    persistent = false,
+    oncancel,
+    header,
+    body,
+    footer,
+    class: _className,
+    ...restProps
+  } = $props();
+
+  // Store scroll position for iOS scroll lock
+  let scrollY = $state(0);
+
+  // Handle escape key
+  function handleKeydown(event) {
+    if (event.key === "Escape" && show && !persistent) {
+      resetModal();
+    }
+  }
+
+  const resetModal = () => {
+    oncancel?.();
+    show = false;
+  };
+
+  // Size classes for desktop modal (Tailwind scale)
+  const sizeClasses = {
+    default: "max-w-md",
+    small: "max-w-sm",
+    large: "max-w-xl",
+    xlarge: "max-w-2xl"
+  };
+
+  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
+
+  // iOS-compatible scroll lock using position:fixed approach
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (show) {
+        scrollY = window.scrollY;
+        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 {
+        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 onkeydown={handleKeydown} />
+
+{#if show}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
+    onmousedown={(e) => {
+      // Only track direct clicks on backdrop, not drags that end on backdrop
+      if (e.target === e.currentTarget && !persistent) {
+        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
+      }
+    }}
+    onmouseup={(e) => {
+      // Only close if both mousedown and mouseup were on the backdrop
+      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
+        resetModal();
+      }
+      delete e.currentTarget.dataset.clickStartedOnBackdrop;
+    }}
+    transition:fade={{ duration: 300 }}
+    role="dialog"
+    aria-modal="true"
+    use:portal
+    {...restProps}
+  >
+    <!-- Mobile: Bottom sheet -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar -->
+      <div class="flex justify-center pt-3 pb-1 shrink-0">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+      </div>
+
+      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
+        {#if header}{@render header()}{/if}
+        {#if body}{@render body()}{/if}
+        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
+          {#if footer}{@render footer()}{/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop: Centered modal -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 20, duration: 200 }}
+    >
+      {#if header}{@render header()}{/if}
+      {#if body}{@render body()}{/if}
+      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
+        {#if footer}{@render footer()}{/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/primitives/NumberInput/NumberInput.svelte

@@ -0,0 +1,106 @@
+<script>
+  /**
+   * NumberInput Component - Flowbite Native (Pure Tailwind)
+   * Quantity stepper with increment/decrement buttons
+   *
+   * Matches Figma design:
+   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
+   * - Display: bg-gray-50, border-gray-300
+   * - Height: 37px
+   * - Icons: 10x10px
+   */
+  import { twMerge } from 'tailwind-merge';
+
+  /** @type {{
+    value?: number,
+    min?: number,
+    max?: number,
+    disabled?: boolean,
+    onchange?: (value: number) => void,
+    class?: string,
+    [key: string]: any
+  }} */
+  let {
+    value = 0,
+    min = 0,
+    max = Infinity,
+    disabled = false,
+    onchange,
+    class: className = "",
+    ...restProps
+  } = $props();
+
+  function increment() {
+    if (value < max && !disabled) {
+      const newValue = value + 1;
+      onchange?.(newValue);
+    }
+  }
+
+  function decrement() {
+    if (value > min && !disabled) {
+      const newValue = value - 1;
+      onchange?.(newValue);
+    }
+  }
+
+  let isMinDisabled = $derived(disabled || value <= min);
+  let isMaxDisabled = $derived(disabled || value >= max);
+
+  // Button base classes matching Figma spec
+  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
+  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
+  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
+
+  let decrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-l-lg"
+  ));
+
+  let incrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-r-lg"
+  ));
+
+  // Display classes matching Figma spec
+  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
+
+  let containerClasses = $derived(twMerge(
+    "inline-flex items-center",
+    className
+  ));
+</script>
+
+<div class={containerClasses} {...restProps}>
+  <button
+    type="button"
+    class={decrementClasses}
+    onclick={decrement}
+    disabled={isMinDisabled}
+    aria-label="Decrease quantity"
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
+    </svg>
+  </button>
+
+  <span class={displayClasses}>
+    {value}
+  </span>
+
+  <button
+    type="button"
+    class={incrementClasses}
+    onclick={increment}
+    disabled={isMaxDisabled}
+    aria-label="Increase quantity"
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+    </svg>
+  </button>
+</div>

package/dist/primitives/NumberInput/NumberInput.svelte.d.ts

@@ -0,0 +1,23 @@
+export default NumberInput;
+type NumberInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        value?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        disabled?: boolean | undefined;
+        onchange?: ((value: number) => void) | undefined;
+        class?: string | undefined;
+    }>): void;
+};
+declare const NumberInput: import("svelte").Component<{
+    [key: string]: any;
+    value?: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onchange?: (value: number) => void;
+    class?: string;
+}, {}, "">;
+//# sourceMappingURL=NumberInput.svelte.d.ts.map

package/dist/primitives/NumberInput/NumberInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/NumberInput/NumberInput.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA+GA;;YARY,MAAM;UACR,MAAM;UACN,MAAM;eACD,OAAO;eACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YAC1B,MAAM;WAGwC"}

package/dist/primitives/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './NumberInput.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/NumberInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/NumberInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/primitives/NumberInput/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/primitives/Pagination/Pagination.stories.svelte

@@ -1,76 +1,76 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Pagination from './Pagination.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Pagination',
-    component: Pagination,
-    tags: ['autodocs'],
-    argTypes: {
-      totalPages: { control: 'number' },
-      currentPage: { control: 'number' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Page navigation control for paginated data.',
-        },
-      },
-    },
-  });
-
-  let page1 = $state(1);
-  let page2 = $state(5);
-  let page3 = $state(1);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={10} bind:currentPage={page1} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Middle Page">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={10} bind:currentPage={page2} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Few Pages">
-  {#snippet template()}
-    <div>
-      <Pagination totalPages={3} bind:currentPage={page3} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Many Pages">
-  {#snippet template()}
-    <Pagination totalPages={100} currentPage={50} />
-  {/snippet}
-</Story>
-
-<Story name="In Context">
-  {#snippet template()}
-    <div class="border rounded-lg p-4">
-      <h3 class="font-medium mb-4">Search Results</h3>
-      <ul class="space-y-2 mb-4">
-        {#each [1, 2, 3, 4, 5] as i}
-          <li class="p-3 border rounded hover:bg-gray-50">
-            Result item {i}
-          </li>
-        {/each}
-      </ul>
-      <div class="border-t pt-4">
-        <Pagination totalPages={20} bind:currentPage={page1} />
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pagination from './Pagination.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {
+      totalPages: { control: 'number' },
+      currentPage: { control: 'number' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Page navigation control for paginated data.',
+        },
+      },
+    },
+  });
+
+  let page1 = $state(1);
+  let page2 = $state(5);
+  let page3 = $state(1);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page1} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Middle Page">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page2} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Few Pages">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={3} bind:currentPage={page3} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Many Pages">
+  {#snippet template()}
+    <Pagination totalPages={100} currentPage={50} />
+  {/snippet}
+</Story>
+
+<Story name="In Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4">
+      <h3 class="font-medium mb-4">Search Results</h3>
+      <ul class="space-y-2 mb-4">
+        {#each [1, 2, 3, 4, 5] as i}
+          <li class="p-3 border rounded hover:bg-gray-50">
+            Result item {i}
+          </li>
+        {/each}
+      </ul>
+      <div class="border-t pt-4">
+        <Pagination totalPages={20} bind:currentPage={page1} />
+      </div>
+    </div>
+  {/snippet}
+</Story>