@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -1,170 +1,170 @@
-<script lang="ts">
-  import { onMount, onDestroy, tick, setContext } from "svelte";
-  import type { Snippet } from "svelte";
-  import { bloom } from "../../utils/transitions.js";
-
-  interface Props {
-    open?: boolean;
-    activeUrl?: string;
-    placement?: string;
-    class?: string;
-    ariaLabel?: string;
-    onclose?: () => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = $bindable(false),
-    activeUrl = "",
-    placement = "bottom",
-    class: className = "",
-    ariaLabel = "Menu",
-    onclose,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  let dropdownRef: HTMLUListElement | null = $state(null);
-  let containerRef: HTMLDivElement | null = $state(null);
-  let focusedIndex = $state(-1);
-  let menuItems: HTMLElement[] = $state([]);
-
-  async function updateMenuItems() {
-    await tick();
-    if (dropdownRef) {
-      menuItems = Array.from(dropdownRef.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])'));
-    }
-  }
-
-  function focusItem(index: number) {
-    if (menuItems.length === 0) return;
-    if (index < 0) index = menuItems.length - 1;
-    if (index >= menuItems.length) index = 0;
-    focusedIndex = index;
-    menuItems[focusedIndex]?.focus();
-  }
-
-  function getTriggerElement(): Element | null {
-    const parent = containerRef?.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children);
-      const containerIndex = containerRef ? siblings.indexOf(containerRef) : -1;
-      if (containerIndex > 0) {
-        return siblings[containerIndex - 1];
-      }
-    }
-    return null;
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (!open) return;
-
-    if (dropdownRef && dropdownRef.contains(event.target as Node)) {
-      return;
-    }
-
-    const trigger = getTriggerElement();
-    if (trigger && trigger.contains(event.target as Node)) {
-      return;
-    }
-
-    open = false;
-    onclose?.();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (!open) return;
-
-    const trigger = getTriggerElement();
-    if (!dropdownRef?.contains(event.target as Node) && !trigger?.contains(event.target as Node)) {
-      return;
-    }
-
-    switch (event.key) {
-      case "Escape":
-        open = false;
-        (trigger as HTMLElement | null)?.focus();
-        event.preventDefault();
-        onclose?.();
-        break;
-      case "ArrowDown":
-        focusItem(focusedIndex + 1);
-        event.preventDefault();
-        break;
-      case "ArrowUp":
-        focusItem(focusedIndex - 1);
-        event.preventDefault();
-        break;
-      case "Home":
-        focusItem(0);
-        event.preventDefault();
-        break;
-      case "End":
-        focusItem(menuItems.length - 1);
-        event.preventDefault();
-        break;
-      case "Tab":
-        open = false;
-        onclose?.();
-        break;
-    }
-  }
-
-  $effect(() => {
-    if (open) {
-      focusedIndex = -1;
-      updateMenuItems();
-    }
-  });
-
-  onMount(() => {
-    document.addEventListener("mousedown", handleClickOutside, true);
-    document.addEventListener("keydown", handleKeydown);
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleKeydown);
-    }
-  });
-
-  setContext("dropdown", {
-    get activeUrl() { return activeUrl; },
-    close: () => {
-      open = false;
-      onclose?.();
-    }
-  });
-
-  const placementClasses: Record<string, string> = {
-    bottom: "top-full left-0 mt-1",
-    top: "bottom-full left-0 mb-1",
-    left: "right-full top-0 mr-1",
-    right: "left-full top-0 ml-1"
-  };
-
-  // Map placement to transform origin for bloom animation
-  const placementOrigins: Record<string, string> = {
-    bottom: "top left",
-    top: "bottom left",
-    left: "top right",
-    right: "top left"
-  };
-</script>
-
-{#if open}
-  <div
-    bind:this={containerRef}
-    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
-    role="menu"
-    aria-label={ariaLabel}
-    transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
-    {...restProps}
-  >
-    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </ul>
-  </div>
-{/if}
+<script lang="ts">
+  import { onMount, onDestroy, tick, setContext } from "svelte";
+  import type { Snippet } from "svelte";
+  import { bloom } from "../../utils/transitions.js";
+
+  interface Props {
+    open?: boolean;
+    activeUrl?: string;
+    placement?: string;
+    class?: string;
+    ariaLabel?: string;
+    onclose?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = $bindable(false),
+    activeUrl = "",
+    placement = "bottom",
+    class: className = "",
+    ariaLabel = "Menu",
+    onclose,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let dropdownRef: HTMLUListElement | null = $state(null);
+  let containerRef: HTMLDivElement | null = $state(null);
+  let focusedIndex = $state(-1);
+  let menuItems: HTMLElement[] = $state([]);
+
+  async function updateMenuItems() {
+    await tick();
+    if (dropdownRef) {
+      menuItems = Array.from(dropdownRef.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])'));
+    }
+  }
+
+  function focusItem(index: number) {
+    if (menuItems.length === 0) return;
+    if (index < 0) index = menuItems.length - 1;
+    if (index >= menuItems.length) index = 0;
+    focusedIndex = index;
+    menuItems[focusedIndex]?.focus();
+  }
+
+  function getTriggerElement(): Element | null {
+    const parent = containerRef?.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children);
+      const containerIndex = containerRef ? siblings.indexOf(containerRef) : -1;
+      if (containerIndex > 0) {
+        return siblings[containerIndex - 1];
+      }
+    }
+    return null;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!open) return;
+
+    if (dropdownRef && dropdownRef.contains(event.target as Node)) {
+      return;
+    }
+
+    const trigger = getTriggerElement();
+    if (trigger && trigger.contains(event.target as Node)) {
+      return;
+    }
+
+    open = false;
+    onclose?.();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!open) return;
+
+    const trigger = getTriggerElement();
+    if (!dropdownRef?.contains(event.target as Node) && !trigger?.contains(event.target as Node)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        open = false;
+        (trigger as HTMLElement | null)?.focus();
+        event.preventDefault();
+        onclose?.();
+        break;
+      case "ArrowDown":
+        focusItem(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusItem(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusItem(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusItem(menuItems.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        open = false;
+        onclose?.();
+        break;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      focusedIndex = -1;
+      updateMenuItems();
+    }
+  });
+
+  onMount(() => {
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("keydown", handleKeydown);
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  });
+
+  setContext("dropdown", {
+    get activeUrl() { return activeUrl; },
+    close: () => {
+      open = false;
+      onclose?.();
+    }
+  });
+
+  const placementClasses: Record<string, string> = {
+    bottom: "top-full left-0 mt-1",
+    top: "bottom-full left-0 mb-1",
+    left: "right-full top-0 mr-1",
+    right: "left-full top-0 ml-1"
+  };
+
+  // Map placement to transform origin for bloom animation
+  const placementOrigins: Record<string, string> = {
+    bottom: "top left",
+    top: "bottom left",
+    left: "top right",
+    right: "top left"
+  };
+</script>
+
+{#if open}
+  <div
+    bind:this={containerRef}
+    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
+    {...restProps}
+  >
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </ul>
+  </div>
+{/if}

package/dist/primitives/Dropdown/DropdownDivider.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-  }
-
-  let { class: className = '' }: Props = $props();
-</script>
-
-<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+</script>
+
+<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>

package/dist/primitives/Dropdown/DropdownItem.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Optional href to make the item a link */
-    href?: string;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Additional CSS classes */
-    class?: string;
-    /** Click handler callback (replaces dispatch('click')) */
-    onclick?: (event: MouseEvent | KeyboardEvent) => void;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    href = undefined,
-    disabled = false,
-    class: className = '',
-    onclick,
-    children
-  }: Props = $props();
-
-  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
-
-  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
-
-  function handleClick(event: MouseEvent | KeyboardEvent) {
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    onclick?.(event);
-    if (!href && context?.close) {
-      context.close();
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Enter" || event.key === " ") {
-      handleClick(event);
-    }
-  }
-
-  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
-  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
-  const disabledClasses = "opacity-50 cursor-not-allowed";
-  const defaultClasses = "text-gray-700 dark:text-gray-200";
-</script>
-
-{#if href}
-  <li>
-    <a
-      {href}
-      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </a>
-  </li>
-{:else}
-  <li>
-    <button
-      type="button"
-      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
-      role="menuitem"
-      tabindex={disabled ? -1 : 0}
-      {disabled}
-      onclick={handleClick}
-      onkeydown={handleKeydown}
-    >
-      {@render children?.()}
-    </button>
-  </li>
-{/if}
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Optional href to make the item a link */
+    href?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler callback (replaces dispatch('click')) */
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props();
+
+  const context = getContext<{ activeUrl?: string; close?: () => void }>("dropdown");
+
+  let isActive = $derived(context?.activeUrl && href && context.activeUrl === href);
+
+  function handleClick(event: MouseEvent | KeyboardEvent) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event);
+    if (!href && context?.close) {
+      context.close();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      handleClick(event);
+    }
+  }
+
+  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
+  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  const defaultClasses = "text-gray-700 dark:text-gray-200";
+</script>
+
+{#if href}
+  <li>
+    <a
+      {href}
+      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </a>
+  </li>
+{:else}
+  <li>
+    <button
+      type="button"
+      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      {disabled}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      {@render children?.()}
+    </button>
+  </li>
+{/if}

package/dist/primitives/Helper/Helper.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-  /**
-   * Helper Component - Form helper/hint text
-   *
-   * Displays helper text below form inputs with color variants
-   */
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Color variant */
-    color?: 'default' | 'red' | 'green';
-    /** Additional CSS classes */
-    class?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    color = 'default',
-    class: className = '',
-    children
-  }: Props = $props();
-
-  const colorClasses: Record<string, string> = {
-    default: 'text-gray-500 dark:text-gray-400',
-    red: 'text-red-600 dark:text-red-500',
-    green: 'text-green-600 dark:text-green-500'
-  };
-</script>
-
-<p class="mt-1 text-sm {colorClasses[color]} {className}">
-  {#if children}{@render children()}{/if}
-</p>
+<script lang="ts">
+  /**
+   * Helper Component - Form helper/hint text
+   *
+   * Displays helper text below form inputs with color variants
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Color variant */
+    color?: 'default' | 'red' | 'green';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    color = 'default',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  const colorClasses: Record<string, string> = {
+    default: 'text-gray-500 dark:text-gray-400',
+    red: 'text-red-600 dark:text-red-500',
+    green: 'text-green-600 dark:text-green-500'
+  };
+</script>
+
+<p class="mt-1 text-sm {colorClasses[color]} {className}">
+  {#if children}{@render children()}{/if}
+</p>

package/dist/primitives/Icons/ArrowLeft.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
-    stroke={color}
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
+    stroke={color}
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/ArrowRight.svelte

@@ -11,11 +11,11 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M9 18L15 12L9 6"
-    stroke={color}
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M9 18L15 12L9 6"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Availability.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-    <path
-        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M10 5.5V10.5L13.3333 12.1667"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+    <path
+        d="M10.0003 18.8327C14.6027 18.8327 18.3337 15.1017 18.3337 10.4993C18.3337 5.89698 14.6027 2.16602 10.0003 2.16602C5.39795 2.16602 1.66699 5.89698 1.66699 10.4993C1.66699 15.1017 5.39795 18.8327 10.0003 18.8327Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M10 5.5V10.5L13.3333 12.1667"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>