@getmicdrop/svelte-components 2.8.0 → 3.0.0

package/dist/components/Input/Search.svelte

@@ -1,173 +1,196 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  // API compatible with flowbite-svelte Search
-  export let value = "";
-  export let placeholder = "Search";
-  export let size = "lg"; // sm, md, lg
-  export let disabled = false;
-  export let id = "";
-  export let name = "";
-
-  // Additional props
-  let className = "";
-  export { className as class };
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: "h-11 text-sm pl-10", wrapper: "h-11" }
-  };
-
-  $: sizeConfig = sizes[size] || sizes.lg;
-
-  function handleInput(event) {
-    value = event.target.value;
-    dispatch("input", event);
-  }
-
-  function handleChange(event) {
-    dispatch("change", event);
-  }
-
-  function handleKeydown(event) {
-    dispatch("keydown", event);
-  }
-
-  function handleKeyup(event) {
-    dispatch("keyup", event);
-  }
-
-  function handleFocus(event) {
-    dispatch("focus", event);
-  }
-
-  function handleBlur(event) {
-    dispatch("blur", event);
-  }
-</script>
-
-<div class="search-wrapper {sizeConfig.wrapper} {className}">
-  <div class="search-icon-wrapper">
-    <svg
-      class="search-icon {sizeConfig.icon}"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="search-input {sizeConfig.input}"
-    bind:value
-    on:input={handleInput}
-    on:change={handleChange}
-    on:keydown={handleKeydown}
-    on:keyup={handleKeyup}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
-    {...$$restProps}
-  />
-  {#if $$slots.default}
-    <div class="search-actions">
-      <slot />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .search-wrapper {
-    --search-bg: #f9fafb;
-    --search-text: #0d1526;
-    --search-text-placeholder: #6b7280;
-    --search-border: #e5e7eb;
-    --search-focus-ring: #3b82f6;
-    --search-icon-color: #6b7280;
-    position: relative;
-    width: 100%;
-  }
-
-  .search-icon-wrapper {
-    position: absolute;
-    inset-y: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    padding-left: 0.75rem;
-    pointer-events: none;
-  }
-
-  .search-icon {
-    color: var(--search-icon-color);
-  }
-
-  .search-input {
-    width: 100%;
-    padding-right: 0.75rem;
-    background-color: var(--search-bg);
-    color: var(--search-text);
-    font-weight: 500;
-    border: 1px solid var(--search-border);
-    border-radius: 0.5rem;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  }
-
-  .search-input:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--search-focus-ring);
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:hover:not(:focus):not(:disabled) {
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .search-input::-moz-placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  .search-input::placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  /* Hide browser's default clear button on search inputs */
-  .search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .search-actions {
-    position: absolute;
-    inset-y: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    color: var(--search-icon-color);
-  }
-
-  /* Dark mode overrides */
-  :global(.dark) .search-wrapper {
-    --search-bg: #111827;
-    --search-text: #f7f7f8;
-    --search-text-placeholder: #9ca3af;
-    --search-border: #374151;
-    --search-icon-color: #9ca3af;
-  }
-</style>
+<script>
+  /**
+   * @type {{
+   *   value?: string,
+   *   placeholder?: string,
+   *   size?: 'sm' | 'md' | 'lg',
+   *   disabled?: boolean,
+   *   id?: string,
+   *   name?: string,
+   *   class?: string,
+   *   oninput?: (e: Event) => void,
+   *   onchange?: (e: Event) => void,
+   *   onkeydown?: (e: KeyboardEvent) => void,
+   *   onkeyup?: (e: KeyboardEvent) => void,
+   *   onfocus?: (e: FocusEvent) => void,
+   *   onblur?: (e: FocusEvent) => void,
+   *   children?: import('svelte').Snippet,
+   *   [key: string]: unknown
+   * }}
+   */
+  let {
+    value = $bindable(""),
+    placeholder = "Search",
+    size = "lg",
+    disabled = false,
+    id = "",
+    name = "",
+    class: className = "",
+    oninput,
+    onchange,
+    onkeydown,
+    onkeyup,
+    onfocus,
+    onblur,
+    children,
+    ...restProps
+  } = $props();
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: "h-11 text-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="search-wrapper {sizeConfig.wrapper} {className}">
+  <div class="search-icon-wrapper">
+    <svg
+      class="search-icon {sizeConfig.icon}"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="search-input {sizeConfig.input}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onkeydown={handleKeydown}
+    onkeyup={handleKeyup}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    {...restProps}
+  />
+  {#if children}
+    <div class="search-actions">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .search-wrapper {
+    --search-bg: #f9fafb;
+    --search-text: #0d1526;
+    --search-text-placeholder: #6b7280;
+    --search-border: #e5e7eb;
+    --search-focus-ring: #3b82f6;
+    --search-icon-color: #6b7280;
+    position: relative;
+    width: 100%;
+  }
+
+  .search-icon-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: 0.75rem;
+    pointer-events: none;
+  }
+
+  .search-icon {
+    color: var(--search-icon-color);
+  }
+
+  .search-input {
+    width: 100%;
+    padding-right: 0.75rem;
+    background-color: var(--search-bg);
+    color: var(--search-text);
+    font-weight: 500;
+    border: 1px solid var(--search-border);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .search-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--search-focus-ring);
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:hover:not(:focus):not(:disabled) {
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .search-input::-moz-placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  .search-input::placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  /* Hide browser's default clear button on search inputs */
+  .search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .search-actions {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    color: var(--search-icon-color);
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .search-wrapper {
+    --search-bg: #111827;
+    --search-text: #f7f7f8;
+    --search-text-placeholder: #9ca3af;
+    --search-border: #374151;
+    --search-icon-color: #9ca3af;
+  }
+</style>

package/dist/components/Input/Search.svelte.d.ts

@@ -1,68 +1,39 @@
 export default Search;
-type Search = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-}, {
-    default: {};
-}>, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    keydown: CustomEvent<any>;
-    keyup: CustomEvent<any>;
-    focus: CustomEvent<any>;
-    blur: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type Search = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: unknown;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        disabled?: boolean | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        class?: string | undefined;
+        oninput?: ((e: Event) => void) | undefined;
+        onchange?: ((e: Event) => void) | undefined;
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        children?: Snippet<[]> | undefined;
+    }>): void;
 };
-declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-}, {
-    default: {};
-}>, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    keydown: CustomEvent<any>;
-    keyup: CustomEvent<any>;
-    focus: CustomEvent<any>;
-    blur: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Search: import("svelte").Component<{
+    [key: string]: unknown;
+    value?: string;
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    children?: import("svelte").Snippet;
+}, {}, "value">;
 //# sourceMappingURL=Search.svelte.d.ts.map

package/dist/components/Input/Search.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+GA;;YAjBe,MAAM;kBACA,MAAM;WACb,IAAI,GAAG,IAAI,GAAG,IAAI;eACd,OAAO;SACb,MAAM;WACJ,MAAM;YACL,MAAM;cACJ,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;eACjB,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;gBACjB,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;cAC5B,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;cAC1B,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;aACxB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;eACrB,OAAO,QAAQ,EAAE,OAAO;gBAIW"}

package/dist/components/Input/Select.svelte

@@ -2,43 +2,57 @@
   /**
    * Custom Select component - drop-in replacement for native select
    *
-   * @fires change - Dispatched when selection changes
-   *   Event detail: { value: any, item: { name: string, value: any } }
-   *   Usage: on:change={(e) => handleChange(e.detail.value)}
-   *   Note: Use e.detail.value, NOT e.target.value (this is a custom component, not native select)
+   * @prop onchange - Callback when selection changes
+   *   Signature: (data: { value: any, item: { name: string, value: any } }) => void
+   *   Usage: onchange={(data) => handleChange(data.value)}
    */
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
 
-  const dispatch = createEventDispatcher();
-
-  // Props matching old Flowbite wrapper for drop-in replacement
-  export let value = "";
-  export let items = []; // Array of { name: string, value: any }
-  export let placeholder = "Select an option";
-  export let label = "";
-  export let required = false;
-  export let disabled = false;
-  export let error = "";
-  export let name = "";
-  export let id = "";
-  export let animateFocus = true; // Enable focus animation effect (auto-disabled when disabled)
-
-  $: shouldAnimate = animateFocus && !disabled;
-
-  let isOpen = false;
-  let triggerElement;
-  let dropdownElement;
-  let focusedIndex = -1;
+  /**
+   * @typedef {{ name: string, value: any }} SelectItem
+   * @type {{
+   *   value?: any,
+   *   items?: SelectItem[],
+   *   placeholder?: string,
+   *   label?: string,
+   *   required?: boolean,
+   *   disabled?: boolean,
+   *   error?: string,
+   *   name?: string,
+   *   id?: string,
+   *   animateFocus?: boolean,
+   *   onchange?: (data: { value: any, item: SelectItem }) => void
+   * }}
+   */
+  let {
+    value = $bindable(""),
+    items = [],
+    placeholder = "Select an option",
+    label = "",
+    required = false,
+    disabled = false,
+    error = "",
+    name = "",
+    id = "",
+    animateFocus = true,
+    onchange
+  } = $props();
+
+  let shouldAnimate = $derived(animateFocus && !disabled);
+
+  let isOpen = $state(false);
+  let triggerElement = $state(null);
+  let dropdownElement = $state(null);
+  let focusedIndex = $state(-1);
 
   // Unique ID for this Select instance to coordinate with other Selects
   const instanceId = Math.random().toString(36).substring(2, 9);
 
-  $: selectedItem = items.find((item) => item.value === value);
-  $: displayText = selectedItem ? selectedItem.name : placeholder;
+  let selectedItem = $derived(items.find((item) => item.value === value));
+  let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
 
   function toggle() {
     if (disabled) return;
-    const wasOpen = isOpen;
     isOpen = !isOpen;
     if (isOpen) {
       focusedIndex = items.findIndex((item) => item.value === value);
@@ -61,7 +75,7 @@
 
   function selectItem(item) {
     value = item.value;
-    dispatch("change", { value: item.value, item });
+    onchange?.({ value: item.value, item });
     close();
     triggerElement?.focus();
   }
@@ -158,8 +172,8 @@
       aria-haspopup="listbox"
       aria-expanded={isOpen}
       aria-labelledby={label ? `${id || name}-label` : undefined}
-      on:click={toggle}
-      on:keydown={handleKeydown}
+      onclick={toggle}
+      onkeydown={handleKeydown}
     >
       <span class="select-value">{displayText}</span>
       <svg
@@ -180,7 +194,7 @@
     </button>
 
     {#if isOpen}
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         bind:this={dropdownElement}
         class="select-dropdown"
@@ -191,7 +205,7 @@
           : undefined}
       >
         {#each items as item, index}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
             class="select-option"
@@ -199,8 +213,8 @@
             class:select-option-focused={index === focusedIndex}
             role="option"
             aria-selected={item.value === value}
-            on:click={() => selectItem(item)}
-            on:mouseenter={() => (focusedIndex = index)}
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (focusedIndex = index)}
           >
             <span class="select-option-text">{item.name}</span>
             {#if item.value === value}