@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/recipes/inputs/Search.svelte

@@ -1,102 +1,102 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { SearchOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    value?: unknown;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    disabled?: boolean;
-    id?: string;
-    name?: string;
-    class?: string;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onfocus?: (event: FocusEvent) => void;
-    onblur?: (event: FocusEvent) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  // API compatible with flowbite-svelte Search
-  let {
-    value = $bindable(""),
-    placeholder = "Search",
-    size = "lg",
-    disabled = false,
-    id = "",
-    name = "",
-    class: className = "",
-    oninput,
-    onchange,
-    onkeydown,
-    onkeyup,
-    onfocus,
-    onblur,
-    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);
-
-  function handleInput(event: Event) {
-    value = (event.target as HTMLInputElement).value;
-    oninput?.(event);
-  }
-
-  function handleChange(event: Event) {
-    onchange?.(event);
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    onkeydown?.(event);
-  }
-
-  function handleKeyup(event: KeyboardEvent) {
-    onkeyup?.(event);
-  }
-
-  function handleFocus(event: FocusEvent) {
-    onfocus?.(event);
-  }
-
-  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-hidden 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 lang="ts">
+  import type { Snippet } from 'svelte';
+  import { SearchOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    value?: unknown;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  // API compatible with flowbite-svelte Search
+  let {
+    value = $bindable(""),
+    placeholder = "Search",
+    size = "lg",
+    disabled = false,
+    id = "",
+    name = "",
+    class: className = "",
+    oninput,
+    onchange,
+    onkeydown,
+    onkeyup,
+    onfocus,
+    onblur,
+    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);
+
+  function handleInput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    oninput?.(event);
+  }
+
+  function handleChange(event: Event) {
+    onchange?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    onkeydown?.(event);
+  }
+
+  function handleKeyup(event: KeyboardEvent) {
+    onkeyup?.(event);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    onfocus?.(event);
+  }
+
+  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-hidden 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,171 +1,171 @@
-<script lang="ts">
-  import { tick } from "svelte";
-  import { ChevronDownOutline } from "../../primitives/Icons";
-  import { bloom } from "../../utils/transitions.js";
-
-  interface SelectOption {
-    label: string;
-    value: string;
-  }
-
-  interface Props {
-    options?: SelectOption[];
-    selected?: SelectOption | null;
-    placeholder?: string;
-    class?: string;
-    disabled?: boolean;
-    onselect?: (option: SelectOption) => void;
-  }
-
-  let {
-    options = [],
-    selected = $bindable(null),
-    placeholder = "Select",
-    class: className = "",
-    disabled = false,
-    onselect,
-  }: Props = $props();
-
-  let isOpen = $state(false);
-  let triggerRef = $state<HTMLButtonElement>();
-  let menuRef = $state<HTMLDivElement>();
-  let containerRef = $state<HTMLDivElement>();
-  let focusedIndex = $state(-1);
-  let optionElements = $state<HTMLElement[]>([]);
-
-  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: number) {
-    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: SelectOption) {
-    selected = option;
-    onselect?.(option);
-    isOpen = false;
-    triggerRef?.focus();
-  }
-
-  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
-  function handleClickOutside(event: MouseEvent) {
-    if (!isOpen) return;
-
-    // Check if click is inside the container (trigger or menu)
-    if (containerRef && containerRef.contains(event.target as Node)) {
-      return;
-    }
-
-    // Click was outside - close the dropdown
-    isOpen = false;
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (!isOpen) return;
-
-    // Only handle if event originated from within this dropdown
-    if (!menuRef?.contains(event.target as Node) && !triggerRef?.contains(event.target as Node)) {
-      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-hidden 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}
-      transition:bloom={{ origin: "top left" }}
-    >
-      <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 lang="ts">
+  import { tick } from "svelte";
+  import { ChevronDownOutline } from "../../primitives/Icons";
+  import { bloom } from "../../utils/transitions.js";
+
+  interface SelectOption {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    options?: SelectOption[];
+    selected?: SelectOption | null;
+    placeholder?: string;
+    class?: string;
+    disabled?: boolean;
+    onselect?: (option: SelectOption) => void;
+  }
+
+  let {
+    options = [],
+    selected = $bindable(null),
+    placeholder = "Select",
+    class: className = "",
+    disabled = false,
+    onselect,
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let triggerRef = $state<HTMLButtonElement>();
+  let menuRef = $state<HTMLDivElement>();
+  let containerRef = $state<HTMLDivElement>();
+  let focusedIndex = $state(-1);
+  let optionElements = $state<HTMLElement[]>([]);
+
+  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: number) {
+    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: SelectOption) {
+    selected = option;
+    onselect?.(option);
+    isOpen = false;
+    triggerRef?.focus();
+  }
+
+  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
+  function handleClickOutside(event: MouseEvent) {
+    if (!isOpen) return;
+
+    // Check if click is inside the container (trigger or menu)
+    if (containerRef && containerRef.contains(event.target as Node)) {
+      return;
+    }
+
+    // Click was outside - close the dropdown
+    isOpen = false;
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    // Only handle if event originated from within this dropdown
+    if (!menuRef?.contains(event.target as Node) && !triggerRef?.contains(event.target as Node)) {
+      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-hidden 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}
+      transition:bloom={{ origin: "top left" }}
+    >
+      <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>