@aiaiai-pt/design-system 0.4.1 → 0.4.2

package/components/Combobox.svelte

@@ -53,6 +53,10 @@
     size = 'md',
     /** @type {((value: string) => void) | undefined} */
     onchange = undefined,
+    /** @type {((query: string) => void) | undefined} — async search; when set, disables internal filtering */
+    onsearch = undefined,
+    /** @type {boolean} */
+    loading = false,
     /** @type {string} */
     class: className = '',
     ...rest
@@ -76,8 +80,21 @@
   // Selected item label for display
   const selectedItem = $derived(items.find(i => i.value === value));
 
-  // Filter items by query
+  // Debounced onsearch dispatch
+  let _searchTimer = 0;
+  $effect(() => {
+    // Subscribe to query changes; only fire if onsearch is set
+    const q = query;
+    if (!onsearch) return;
+    clearTimeout(_searchTimer);
+    if (!q) return;
+    _searchTimer = /** @type {any} */ (setTimeout(() => onsearch(q), 300));
+    return () => clearTimeout(_searchTimer);
+  });
+
+  // Filter items by query — skip when onsearch is set (parent controls items)
   const filtered = $derived.by(() => {
+    if (onsearch) return items;
     if (!query) return items;
     const q = query.toLowerCase();
     return items.filter(i =>
@@ -228,7 +245,11 @@
       role="listbox"
       aria-label={label ?? 'Options'}
     >
-      {#if filtered.length === 0}
+      {#if loading}
+        <li class="combobox-empty" role="option" aria-selected="false" aria-disabled="true">
+          Searching…
+        </li>
+      {:else if filtered.length === 0}
         <li class="combobox-empty" role="option" aria-selected="false" aria-disabled="true">
           No results found
         </li>

package/components/Combobox.svelte.d.ts

@@ -1,13 +1,13 @@
 export default Combobox;
 export type ComboboxItem = {
-    value: string;
-    label: string;
-    group?: string;
-    description?: string;
+  value: string;
+  label: string;
+  group?: string;
+  description?: string;
 };
 type Combobox = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
+  $on?(type: string, callback: (e: any) => void): () => void;
+  $set?(props: Partial<$$ComponentProps>): void;
 };
 /**
  * Combobox
@@ -34,7 +34,8 @@ type Combobox = {
  *   bind:value={selected}
  * />
  */
-declare const Combobox: import("svelte").Component<{
+declare const Combobox: import("svelte").Component<
+  {
     items?: any[];
     value?: string;
     label?: any;
@@ -44,17 +45,26 @@ declare const Combobox: import("svelte").Component<{
     help?: any;
     size?: string;
     onchange?: any;
+    /** Async search callback; when set, disables internal filtering. Parent must update `items` with results. */
+    onsearch?: (query: string) => void;
+    /** Show "Searching…" in dropdown while loading async results */
+    loading?: boolean;
     class?: string;
-} & Record<string, any>, {}, "value">;
+  } & Record<string, any>,
+  {},
+  "value"
+>;
 type $$ComponentProps = {
-    items?: any[];
-    value?: string;
-    label?: any;
-    placeholder?: string;
-    disabled?: boolean;
-    error?: any;
-    help?: any;
-    size?: string;
-    onchange?: any;
-    class?: string;
+  items?: any[];
+  value?: string;
+  label?: any;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: any;
+  help?: any;
+  size?: string;
+  onchange?: any;
+  onsearch?: (query: string) => void;
+  loading?: boolean;
+  class?: string;
 } & Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",