@getmicdrop/svelte-components 5.4.0 → 5.4.1

package/dist/recipes/inputs/Search.svelte

@@ -1,85 +1,85 @@
-<script>
-  import { SearchOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  // API compatible with flowbite-svelte Search
-  let {
-    value = $bindable(""),
-    placeholder = "Search",
-    size = "lg", // sm, md, lg
-    disabled = false,
-    id = "",
-    name = "",
-    class: className = "",
-    // Callbacks
-    oninput,
-    onchange,
-    onkeydown,
-    onkeyup,
-    onfocus,
-    onblur,
-    // Snippet for trailing content
-    children,
-    ...restProps
-  } = $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);
-
-  function handleInput(event) {
-    value = event.target.value;
-    oninput?.(event);
-  }
-
-  function handleChange(event) {
-    onchange?.(event);
-  }
-
-  function handleKeydown(event) {
-    onkeydown?.(event);
-  }
-
-  function handleKeyup(event) {
-    onkeyup?.(event);
-  }
-
-  function handleFocus(event) {
-    onfocus?.(event);
-  }
-
-  function handleBlur(event) {
-    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>
+  import { SearchOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  // API compatible with flowbite-svelte Search
+  let {
+    value = $bindable(""),
+    placeholder = "Search",
+    size = "lg", // sm, md, lg
+    disabled = false,
+    id = "",
+    name = "",
+    class: className = "",
+    // Callbacks
+    oninput,
+    onchange,
+    onkeydown,
+    onkeyup,
+    onfocus,
+    onblur,
+    // Snippet for trailing content
+    children,
+    ...restProps
+  } = $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);
+
+  function handleInput(event) {
+    value = event.target.value;
+    oninput?.(event);
+  }
+
+  function handleChange(event) {
+    onchange?.(event);
+  }
+
+  function handleKeydown(event) {
+    onkeydown?.(event);
+  }
+
+  function handleKeyup(event) {
+    onkeyup?.(event);
+  }
+
+  function handleFocus(event) {
+    onfocus?.(event);
+  }
+
+  function handleBlur(event) {
+    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>

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -1,161 +1,161 @@
-<script>
-  import { tick } from "svelte";
-  import { ChevronDownOutline } from "../../primitives/Icons";
-
-  let {
-    /** @type {Array<{label: string, value: string}>} Options to display */
-    options = [],
-    /** @type {{label: string, value: string}|null} Currently selected option */
-    selected = $bindable(null),
-    /** @type {string} Placeholder text when no option is selected */
-    placeholder = "Select",
-    /** @type {string} Additional CSS classes for the container */
-    class: className = "",
-    /** @type {boolean} Whether the dropdown is disabled */
-    disabled = false,
-    // Callbacks
-    onselect,
-  } = $props();
-
-  let isOpen = $state(false);
-  let triggerRef = $state();
-  let menuRef = $state();
-  let containerRef = $state();
-  let focusedIndex = $state(-1);
-  let optionElements = $state([]);
-
-  async function toggleDropdown() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      focusedIndex = -1;
-      await tick();
-      updateOptionElements();
-    }
-  }
-
-  function updateOptionElements() {
-    if (menuRef) {
-      optionElements = Array.from(menuRef.querySelectorAll('[role="option"]'));
-    }
-  }
-
-  function focusOption(index) {
-    if (optionElements.length === 0) return;
-    if (index < 0) index = optionElements.length - 1;
-    if (index >= optionElements.length) index = 0;
-    focusedIndex = index;
-    optionElements[focusedIndex]?.focus();
-  }
-
-  function selectOption(option) {
-    selected = option;
-    onselect?.(option);
-    isOpen = false;
-    triggerRef?.focus();
-  }
-
-  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
-  function handleClickOutside(event) {
-    if (!isOpen) return;
-
-    // Check if click is inside the container (trigger or menu)
-    if (containerRef && containerRef.contains(event.target)) {
-      return;
-    }
-
-    // Click was outside - close the dropdown
-    isOpen = false;
-  }
-
-  function handleKeyDown(event) {
-    if (!isOpen) return;
-
-    // Only handle if event originated from within this dropdown
-    if (!menuRef?.contains(event.target) && !triggerRef?.contains(event.target)) {
-      return;
-    }
-
-    switch (event.key) {
-      case "Escape":
-        isOpen = false;
-        triggerRef?.focus();
-        event.preventDefault();
-        break;
-      case "ArrowDown":
-        focusOption(focusedIndex + 1);
-        event.preventDefault();
-        break;
-      case "ArrowUp":
-        focusOption(focusedIndex - 1);
-        event.preventDefault();
-        break;
-      case "Home":
-        focusOption(0);
-        event.preventDefault();
-        break;
-      case "End":
-        focusOption(optionElements.length - 1);
-        event.preventDefault();
-        break;
-      case "Tab":
-        isOpen = false;
-        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>
+<script>
+  import { tick } from "svelte";
+  import { ChevronDownOutline } from "../../primitives/Icons";
+
+  let {
+    /** @type {Array<{label: string, value: string}>} Options to display */
+    options = [],
+    /** @type {{label: string, value: string}|null} Currently selected option */
+    selected = $bindable(null),
+    /** @type {string} Placeholder text when no option is selected */
+    placeholder = "Select",
+    /** @type {string} Additional CSS classes for the container */
+    class: className = "",
+    /** @type {boolean} Whether the dropdown is disabled */
+    disabled = false,
+    // Callbacks
+    onselect,
+  } = $props();
+
+  let isOpen = $state(false);
+  let triggerRef = $state();
+  let menuRef = $state();
+  let containerRef = $state();
+  let focusedIndex = $state(-1);
+  let optionElements = $state([]);
+
+  async function toggleDropdown() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = -1;
+      await tick();
+      updateOptionElements();
+    }
+  }
+
+  function updateOptionElements() {
+    if (menuRef) {
+      optionElements = Array.from(menuRef.querySelectorAll('[role="option"]'));
+    }
+  }
+
+  function focusOption(index) {
+    if (optionElements.length === 0) return;
+    if (index < 0) index = optionElements.length - 1;
+    if (index >= optionElements.length) index = 0;
+    focusedIndex = index;
+    optionElements[focusedIndex]?.focus();
+  }
+
+  function selectOption(option) {
+    selected = option;
+    onselect?.(option);
+    isOpen = false;
+    triggerRef?.focus();
+  }
+
+  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
+  function handleClickOutside(event) {
+    if (!isOpen) return;
+
+    // Check if click is inside the container (trigger or menu)
+    if (containerRef && containerRef.contains(event.target)) {
+      return;
+    }
+
+    // Click was outside - close the dropdown
+    isOpen = false;
+  }
+
+  function handleKeyDown(event) {
+    if (!isOpen) return;
+
+    // Only handle if event originated from within this dropdown
+    if (!menuRef?.contains(event.target) && !triggerRef?.contains(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        isOpen = false;
+        triggerRef?.focus();
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        focusOption(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusOption(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusOption(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusOption(optionElements.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        isOpen = false;
+        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>