@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/recipes/inputs/Search.svelte

@@ -39,15 +39,15 @@
     children,
     ...restProps
   }: Props = $props();
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.lg);
-
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
+  };
+
+  let sizeConfig = $derived(sizes[size] || sizes.lg);
+
   function handleInput(event: Event) {
     value = (event.target as HTMLInputElement).value;
     oninput?.(event);
@@ -72,31 +72,31 @@
   function handleBlur(event: FocusEvent) {
     onblur?.(event);
   }
-</script>
-
-<div class="relative w-full {sizeConfig.wrapper} {className}">
-  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onkeydown={handleKeydown}
-    onkeyup={handleKeyup}
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {...restProps}
-  />
-  {#if children}
-    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
-      {@render children()}
-    </div>
-  {/if}
-</div>
+</script>
+
+<div class="relative w-full {sizeConfig.wrapper} {className}">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onkeydown={handleKeydown}
+    onkeyup={handleKeyup}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    {...restProps}
+  />
+  {#if children}
+    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -24,7 +24,7 @@
     disabled = false,
     onselect,
   }: Props = $props();
-
+
   let isOpen = $state(false);
   let triggerRef = $state<HTMLButtonElement>();
   let menuRef = $state<HTMLDivElement>();
@@ -111,59 +111,59 @@
         break;
     }
   }
-
-  $effect(() => {
-    if (typeof window !== "undefined") {
-      // Use mousedown for click-outside to capture before click completes
-      document.addEventListener("mousedown", handleClickOutside, true);
-      document.addEventListener("keydown", handleKeyDown);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-        document.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  });
-</script>
-
-<div bind:this={containerRef} class="relative inline-block text-left {className}">
-  <button
-    bind:this={triggerRef}
-    type="button"
-    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    onclick={toggleDropdown}
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-label={placeholder}
-    {disabled}
-  >
-    <span class="truncate">
-      {selected?.label || placeholder}
-    </span>
-    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-  </button>
-
-  {#if isOpen}
-    <div
-      bind:this={menuRef}
-      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
-      role="listbox"
-      aria-label={placeholder}
-    >
-      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-        {#each options as option}
-          <li>
-            <button
-              type="button"
-              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
-              onclick={() => selectOption(option)}
-              role="option"
-              aria-selected={selected?.value === option.value}
-            >
-              {option.label}
-            </button>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-</div>
+
+  $effect(() => {
+    if (typeof window !== "undefined") {
+      // Use mousedown for click-outside to capture before click completes
+      document.addEventListener("mousedown", handleClickOutside, true);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  });
+</script>
+
+<div bind:this={containerRef} class="relative inline-block text-left {className}">
+  <button
+    bind:this={triggerRef}
+    type="button"
+    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    onclick={toggleDropdown}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={placeholder}
+    {disabled}
+  >
+    <span class="truncate">
+      {selected?.label || placeholder}
+    </span>
+    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={menuRef}
+      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
+      role="listbox"
+      aria-label={placeholder}
+    >
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        {#each options as option}
+          <li>
+            <button
+              type="button"
+              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
+              onclick={() => selectOption(option)}
+              role="option"
+              aria-selected={selected?.value === option.value}
+            >
+              {option.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>

package/dist/recipes/modals/AlertModal.svelte

@@ -1,130 +1,130 @@
-<script>
-  /**
-   * AlertModal - Simple alert with single action and optional auto-close
-   *
-   * A lighter alternative to StatusModal for simple notifications.
-   * Supports auto-close after a delay.
-   *
-   * @example
-   * <AlertModal
-   *   bind:show={showAlert}
-   *   variant="success"
-   *   title="Changes saved"
-   *   message="Your changes have been saved successfully."
-   *   autoClose={3000}
-   * />
-   */
-  import Modal from '../../primitives/Modal/Modal.svelte';
-  import Button from '../../primitives/Button/Button.svelte';
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    /** Whether the modal is visible */
-    show = $bindable(false),
-    /** Alert variant */
-    variant = 'info',
-    /** Alert title */
-    title = '',
-    /** Alert message */
-    message = '',
-    /** Button text */
-    buttonText = 'OK',
-    /** Auto-close delay in milliseconds (0 to disable) */
-    autoClose = 0,
-    /** Modal size */
-    size = 'small',
-    /** Callbacks */
-    onclose,
-    onconfirm,
-  } = $props();
-
-  // Variant styles
-  const variantStyles = {
-    success: {
-      bg: 'bg-green-100 dark:bg-green-900/30',
-      icon: 'text-green-600 dark:text-green-400',
-      button: 'default'
-    },
-    error: {
-      bg: 'bg-red-100 dark:bg-red-900/30',
-      icon: 'text-red-600 dark:text-red-400',
-      button: 'red'
-    },
-    warning: {
-      bg: 'bg-amber-100 dark:bg-amber-900/30',
-      icon: 'text-amber-600 dark:text-amber-400',
-      button: 'default'
-    },
-    info: {
-      bg: 'bg-blue-100 dark:bg-blue-900/30',
-      icon: 'text-blue-600 dark:text-blue-400',
-      button: 'default'
-    }
-  };
-
-  let styles = $derived(variantStyles[variant] || variantStyles.info);
-
-  function closeModal() {
-    show = false;
-    onclose?.();
-  }
-
-  function handleConfirm() {
-    onconfirm?.();
-    closeModal();
-  }
-
-  // Start auto-close timer when modal opens
-  $effect(() => {
-    if (show && autoClose > 0) {
-      const timer = setTimeout(() => {
-        closeModal();
-      }, autoClose);
-      return () => clearTimeout(timer);
-    }
-  });
-</script>
-
-<Modal bind:show {size}>
-  {#snippet header()}
-    <div class="text-center">
-      <div class="flex justify-center items-center">
-        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
-          {#if variant === 'success'}
-            <CheckOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'error'}
-            <CloseOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'warning'}
-            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
-          {:else}
-            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
-          {/if}
-        </div>
-      </div>
-      {#if title}
-        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if message}
-        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      <Button
-        size="full"
-        variant={styles.button}
-        onclick={handleConfirm}
-      >
-        {buttonText}
-      </Button>
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  /**
+   * AlertModal - Simple alert with single action and optional auto-close
+   *
+   * A lighter alternative to StatusModal for simple notifications.
+   * Supports auto-close after a delay.
+   *
+   * @example
+   * <AlertModal
+   *   bind:show={showAlert}
+   *   variant="success"
+   *   title="Changes saved"
+   *   message="Your changes have been saved successfully."
+   *   autoClose={3000}
+   * />
+   */
+  import Modal from '../../primitives/Modal/Modal.svelte';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  let {
+    /** Whether the modal is visible */
+    show = $bindable(false),
+    /** Alert variant */
+    variant = 'info',
+    /** Alert title */
+    title = '',
+    /** Alert message */
+    message = '',
+    /** Button text */
+    buttonText = 'OK',
+    /** Auto-close delay in milliseconds (0 to disable) */
+    autoClose = 0,
+    /** Modal size */
+    size = 'small',
+    /** Callbacks */
+    onclose,
+    onconfirm,
+  } = $props();
+
+  // Variant styles
+  const variantStyles = {
+    success: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      icon: 'text-green-600 dark:text-green-400',
+      button: 'default'
+    },
+    error: {
+      bg: 'bg-red-100 dark:bg-red-900/30',
+      icon: 'text-red-600 dark:text-red-400',
+      button: 'red'
+    },
+    warning: {
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+      icon: 'text-amber-600 dark:text-amber-400',
+      button: 'default'
+    },
+    info: {
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+      icon: 'text-blue-600 dark:text-blue-400',
+      button: 'default'
+    }
+  };
+
+  let styles = $derived(variantStyles[variant] || variantStyles.info);
+
+  function closeModal() {
+    show = false;
+    onclose?.();
+  }
+
+  function handleConfirm() {
+    onconfirm?.();
+    closeModal();
+  }
+
+  // Start auto-close timer when modal opens
+  $effect(() => {
+    if (show && autoClose > 0) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, autoClose);
+      return () => clearTimeout(timer);
+    }
+  });
+</script>
+
+<Modal bind:show {size}>
+  {#snippet header()}
+    <div class="text-center">
+      <div class="flex justify-center items-center">
+        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
+          {#if variant === 'success'}
+            <CheckOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'error'}
+            <CloseOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'warning'}
+            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
+          {:else}
+            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
+          {/if}
+        </div>
+      </div>
+      {#if title}
+        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if message}
+        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      <Button
+        size="full"
+        variant={styles.button}
+        onclick={handleConfirm}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  {/snippet}
+</Modal>