@aiaiai-pt/design-system 0.4.1 → 0.4.3

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/components/FilterPanel.svelte

@@ -0,0 +1,261 @@
+<!--
+  @component FilterPanel
+
+  Typed, labeled filter bar for admin/data UIs.
+  Each filter renders as the appropriate widget based on its type:
+  select → Select dropdown, boolean → Toggle pair, search → Combobox.
+
+  Consumes --filter-chip-*, --filter-bar-clear-*, and --input-* tokens from components.css.
+
+  @example
+  <FilterPanel
+    filters={[
+      { key: 'status', label: 'Status', type: 'select', options: [
+        { value: 'open', label: 'Open' },
+        { value: 'closed', label: 'Closed' },
+      ]},
+      { key: 'active', label: 'Active', type: 'boolean' },
+    ]}
+    bind:value={activeFilters}
+    onchange={handleFilterChange}
+  />
+-->
+<script module>
+  /**
+   * @typedef {{ value: string, label: string }} FilterOption
+   * @typedef {{
+   *   key: string,
+   *   label: string,
+   *   type: 'select' | 'boolean' | 'search',
+   *   options?: FilterOption[],
+   *   onsearch?: (query: string) => void,
+   *   searchItems?: FilterOption[],
+   *   searchLoading?: boolean,
+   * }} FilterFieldDef
+   */
+</script>
+
+<script>
+  import Select from './Select.svelte';
+  import Combobox from './Combobox.svelte';
+
+  let {
+    /** @type {FilterFieldDef[]} */
+    filters = [],
+    /** @type {Record<string, any>} */
+    value = $bindable({}),
+    /** @type {((value: Record<string, any>) => void) | undefined} */
+    onchange = undefined,
+    /** @type {(() => void) | undefined} */
+    onclear = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const activeCount = $derived(
+    Object.values(value).filter(v => v !== undefined && v !== null && v !== '').length
+  );
+
+  /**
+   * @param {string} key
+   * @param {string | undefined} val
+   */
+  function setFilter(key, val) {
+    value = { ...value, [key]: val === '' || val === undefined ? undefined : val };
+    onchange?.(value);
+  }
+
+  /**
+   * @param {string} key
+   * @param {string} optionValue
+   */
+  function toggleBoolean(key, optionValue) {
+    value = {
+      ...value,
+      [key]: value[key] === optionValue ? undefined : optionValue,
+    };
+    onchange?.(value);
+  }
+
+  function clearAll() {
+    value = {};
+    onchange?.({});
+    onclear?.();
+  }
+</script>
+
+{#if filters.length > 0}
+<div
+  class="filter-panel {className}"
+  role="group"
+  aria-label="Filters"
+  {...rest}
+>
+  {#each filters as filter (filter.key)}
+    <div class="filter-field">
+      {#if filter.type === 'select' && filter.options}
+        <Select
+          size="sm"
+          label={filter.label}
+          value={value[filter.key] ?? ''}
+          options={[{ value: '', label: 'All' }, ...filter.options]}
+          onchange={(val) => setFilter(filter.key, val)}
+        />
+      {:else if filter.type === 'boolean'}
+        {@const opts = filter.options ?? [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }]}
+        <span class="filter-field-label">{filter.label}</span>
+        <div class="filter-bool-chips">
+          {#each opts as opt (opt.value)}
+            {@const active = value[filter.key] === opt.value}
+            <button
+              class="filter-chip"
+              class:filter-chip-active={active}
+              aria-pressed={active}
+              type="button"
+              onclick={() => toggleBoolean(filter.key, opt.value)}
+            >{opt.label}</button>
+          {/each}
+        </div>
+      {:else if filter.type === 'search'}
+        <Combobox
+          size="sm"
+          label={filter.label}
+          placeholder="All"
+          items={filter.searchItems ?? []}
+          value={value[filter.key] ?? ''}
+          onchange={(val) => setFilter(filter.key, val)}
+          onsearch={filter.onsearch}
+          loading={filter.searchLoading ?? false}
+        />
+      {/if}
+    </div>
+  {/each}
+
+  {#if activeCount >= 2}
+    <button
+      class="filter-panel-clear"
+      onclick={clearAll}
+      type="button"
+    >
+      Clear all
+    </button>
+  {/if}
+</div>
+{/if}
+
+<style>
+  .filter-panel {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-md);
+    flex-wrap: wrap;
+  }
+
+  .filter-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    min-width: 140px;
+    max-width: 220px;
+  }
+
+  .filter-field-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .filter-bool-chips {
+    display: flex;
+    gap: var(--filter-chip-gap);
+  }
+
+  /* Reuse existing filter-chip tokens */
+  .filter-chip {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    height: var(--filter-chip-height);
+    padding: var(--filter-chip-padding);
+    font-family: var(--filter-chip-font);
+    font-size: var(--filter-chip-size);
+    letter-spacing: var(--filter-chip-tracking);
+    color: var(--filter-chip-color);
+    background: var(--filter-chip-bg);
+    border: var(--filter-chip-border);
+    border-radius: var(--filter-chip-radius);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--filter-chip-transition);
+    user-select: none;
+  }
+
+  .filter-chip:hover {
+    background: var(--filter-chip-bg-hover);
+  }
+
+  .filter-chip:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .filter-chip-active {
+    background: var(--filter-chip-bg-active);
+    color: var(--filter-chip-color-active);
+    border: var(--filter-chip-border-active);
+  }
+
+  .filter-chip-active:hover {
+    background: var(--filter-chip-bg-active);
+  }
+
+  .filter-panel-clear {
+    all: unset;
+    box-sizing: border-box;
+    font-family: var(--filter-chip-font);
+    font-size: var(--filter-chip-size);
+    letter-spacing: var(--filter-chip-tracking);
+    color: var(--filter-bar-clear-color);
+    cursor: pointer;
+    white-space: nowrap;
+    padding-bottom: var(--space-xs);
+    transition: color var(--filter-chip-transition);
+  }
+
+  .filter-panel-clear:hover {
+    color: var(--filter-bar-clear-color-hover);
+  }
+
+  .filter-panel-clear:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    border-radius: var(--radius-sm);
+  }
+
+  @media (max-width: 640px) {
+    .filter-panel {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+    }
+
+    .filter-panel::-webkit-scrollbar {
+      display: none;
+    }
+
+    .filter-field {
+      flex-shrink: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .filter-chip,
+    .filter-panel-clear {
+      transition: none;
+    }
+  }
+</style>

package/components/FilterPanel.svelte.d.ts

@@ -0,0 +1,59 @@
+export default FilterPanel;
+export type FilterOption = {
+  value: string;
+  label: string;
+};
+export type FilterFieldDef = {
+  key: string;
+  label: string;
+  type: "select" | "boolean" | "search";
+  options?: FilterOption[];
+  /** Async search callback for 'search' type filters (FK relationships) */
+  onsearch?: (query: string) => void;
+  /** Items for 'search' type, managed by parent */
+  searchItems?: FilterOption[];
+  /** Loading state for 'search' type */
+  searchLoading?: boolean;
+};
+type FilterPanel = {
+  $on?(type: string, callback: (e: any) => void): () => void;
+  $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FilterPanel
+ *
+ * Typed, labeled filter bar for admin/data UIs.
+ * Each filter renders as the appropriate widget based on its type:
+ * select → Select dropdown, boolean → Toggle pair, search → Combobox.
+ *
+ * @example
+ * <FilterPanel
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'select', options: [
+ *       { value: 'open', label: 'Open' },
+ *       { value: 'closed', label: 'Closed' },
+ *     ]},
+ *     { key: 'active', label: 'Active', type: 'boolean' },
+ *   ]}
+ *   bind:value={activeFilters}
+ *   onchange={handleFilterChange}
+ * />
+ */
+declare const FilterPanel: import("svelte").Component<
+  {
+    filters?: FilterFieldDef[];
+    value?: Record<string, any>;
+    onchange?: (value: Record<string, any>) => void;
+    onclear?: () => void;
+    class?: string;
+  } & Record<string, any>,
+  {},
+  "value"
+>;
+type $$ComponentProps = {
+  filters?: FilterFieldDef[];
+  value?: Record<string, any>;
+  onchange?: (value: Record<string, any>) => void;
+  onclear?: () => void;
+  class?: string;
+} & Record<string, any>;

package/components/index.js

@@ -48,6 +48,7 @@ export { default as Combobox } from "./Combobox.svelte";
 // Search
 export { default as SearchInput } from "./SearchInput.svelte";
 export { default as FilterBar } from "./FilterBar.svelte";
+export { default as FilterPanel } from "./FilterPanel.svelte";
 export { default as CommandPalette } from "./CommandPalette.svelte";
 
 // Tabs

package/package.json

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