@classic-homes/theme-svelte 0.1.4 → 0.1.6

package/dist/lib/components/DateTimePicker.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** Current date/time value */
+    value?: Date | null;
+    /** Callback when value changes */
+    onValueChange?: (date: Date | null) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Minimum selectable date */
+    min?: Date;
+    /** Maximum selectable date */
+    max?: Date;
+    /** Time format (12h or 24h) */
+    timeFormat?: '12h' | '24h';
+    /** Minute step interval (default: 15) */
+    minuteStep?: number;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the trigger */
+    class?: string;
+}
+declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/lib/components/HeaderSearch.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+  /**
+   * HeaderSearch - Docusaurus-style search component for the header
+   *
+   * A flexible, configurable search component that displays a trigger button
+   * in the header and opens a modal dialog with search input and results.
+   *
+   * Features:
+   * - Backend-agnostic (callback-based integration)
+   * - Keyboard shortcut support (Cmd/Ctrl+K)
+   * - Full keyboard navigation in results
+   * - Custom result rendering via snippets
+   * - Loading and empty states
+   *
+   * @example Basic usage:
+   * ```svelte
+   * <HeaderSearch
+   *   enabled={true}
+   *   placeholder="Search..."
+   *   onSearch={(query) => handleSearch(query)}
+   *   onSelect={(item) => goto(item.href)}
+   *   results={searchResults}
+   *   loading={isSearching}
+   * />
+   * ```
+   */
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
+  import Spinner from './Spinner.svelte';
+
+  interface Props<T = SearchResultItem> {
+    /** Whether search is enabled/visible */
+    enabled?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Called when user types (debounced). App should update results prop. */
+    onSearch?: (query: string) => void;
+    /** Called when user selects a result */
+    onSelect?: (item: T) => void;
+    /** Called when search dialog opens/closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Search results to display (flat list or grouped) */
+    results?: T[] | SearchResultGroup<T>[];
+    /** Whether results are currently loading */
+    loading?: boolean;
+    /** Message when no results found */
+    emptyMessage?: string;
+    /** Enable Cmd/Ctrl+K shortcut (default: true) */
+    enableShortcut?: boolean;
+    /** Custom shortcut key (default: 'k') */
+    shortcutKey?: string;
+    /** Trigger button variant: 'default' shows full search box, 'icon' shows icon-only button */
+    variant?: 'default' | 'icon';
+    /** Size variant for trigger button */
+    size?: 'sm' | 'md';
+    /** Custom result item renderer - receives (item, isSelected) */
+    renderResult?: Snippet<[T, boolean]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+    /** Additional classes for trigger button */
+    class?: string;
+  }
+
+  let {
+    enabled = true,
+    placeholder = 'Search...',
+    onSearch,
+    onSelect,
+    onOpenChange,
+    results = [],
+    loading = false,
+    emptyMessage = 'No results found.',
+    enableShortcut = true,
+    shortcutKey = 'k',
+    variant = 'default',
+    size = 'md',
+    renderResult,
+    renderEmpty,
+    class: className,
+  }: Props = $props();
+
+  // State
+  let open = $state(false);
+  let query = $state('');
+  let selectedIndex = $state(0);
+  let inputRef: HTMLInputElement | undefined = $state();
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Flatten results for keyboard navigation
+  const flatResults = $derived.by(() => {
+    if (!results || results.length === 0) return [];
+    // Check if grouped results
+    if (results.length > 0 && 'items' in results[0]) {
+      return (results as SearchResultGroup[]).flatMap((g) => g.items);
+    }
+    return results as SearchResultItem[];
+  });
+
+  // Keyboard shortcut handler
+  $effect(() => {
+    if (!enableShortcut || typeof window === 'undefined') return;
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
+        e.preventDefault();
+        open = true;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeydown);
+    return () => window.removeEventListener('keydown', handleKeydown);
+  });
+
+  // Focus input when dialog opens
+  $effect(() => {
+    if (open && inputRef) {
+      requestAnimationFrame(() => inputRef?.focus());
+    }
+  });
+
+  // Debounced search
+  function handleInput(value: string) {
+    query = value;
+    selectedIndex = 0;
+
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      onSearch?.(value);
+    }, 200);
+  }
+
+  // Keyboard navigation within results
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, flatResults.length - 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, 0);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (flatResults[selectedIndex]) {
+          handleSelect(flatResults[selectedIndex]);
+        }
+        break;
+    }
+  }
+
+  function handleSelect(item: SearchResultItem) {
+    onSelect?.(item);
+    open = false;
+    query = '';
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+    onOpenChange?.(isOpen);
+    if (!isOpen) {
+      query = '';
+      selectedIndex = 0;
+    }
+  }
+</script>
+
+{#if enabled}
+  <!-- Trigger Button -->
+  {#if variant === 'icon'}
+    <!-- Icon-only variant -->
+    <button
+      type="button"
+      onclick={() => (open = true)}
+      class={cn(
+        'inline-flex items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        size === 'sm' ? 'h-8 w-8' : 'h-9 w-9',
+        className
+      )}
+      aria-label="Search"
+      title={enableShortcut ? `Search (⌘/${shortcutKey.toUpperCase()})` : 'Search'}
+    >
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+    </button>
+  {:else}
+    <!-- Default full search box variant -->
+    <button
+      type="button"
+      onclick={() => (open = true)}
+      class={cn(
+        'flex items-center gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        size === 'sm' ? 'h-8' : 'h-9',
+        className
+      )}
+      aria-label="Search"
+    >
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+      <span class="hidden sm:inline">{placeholder}</span>
+      {#if enableShortcut}
+        <kbd
+          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex"
+        >
+          <span class="text-xs">⌘</span>{shortcutKey.toUpperCase()}
+        </kbd>
+      {/if}
+    </button>
+  {/if}
+
+  <!-- Search Dialog -->
+  <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      />
+      <DialogPrimitive.Content
+        class="fixed left-[50%] top-[20%] z-50 w-full max-w-lg translate-x-[-50%] overflow-hidden rounded-lg border bg-background shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:top-[15%]"
+        aria-describedby={undefined}
+      >
+        <!-- Search Input -->
+        <div class="flex items-center border-b px-3">
+          <svg
+            class="h-4 w-4 shrink-0 text-muted-foreground"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            bind:this={inputRef}
+            type="search"
+            {placeholder}
+            value={query}
+            oninput={(e) => handleInput(e.currentTarget.value)}
+            onkeydown={handleKeydown}
+            class="flex h-12 w-full bg-transparent px-3 py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+          />
+          {#if loading}
+            <Spinner size="sm" class="shrink-0" />
+          {/if}
+        </div>
+
+        <!-- Results Area -->
+        <div class="max-h-[300px] overflow-y-auto p-2" role="listbox">
+          {#if loading && flatResults.length === 0}
+            <div class="flex items-center justify-center py-6">
+              <Spinner size="sm" />
+              <span class="ml-2 text-sm text-muted-foreground">Searching...</span>
+            </div>
+          {:else if flatResults.length === 0 && query}
+            {#if renderEmpty}
+              {@render renderEmpty()}
+            {:else}
+              <div class="py-6 text-center text-sm text-muted-foreground">
+                {emptyMessage}
+              </div>
+            {/if}
+          {:else if flatResults.length === 0}
+            <div class="py-6 text-center text-sm text-muted-foreground">Type to search...</div>
+          {:else}
+            {#each flatResults as item, index (item.id)}
+              <button
+                type="button"
+                onclick={() => handleSelect(item)}
+                class={cn(
+                  'flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors',
+                  index === selectedIndex
+                    ? 'bg-accent text-accent-foreground'
+                    : 'hover:bg-accent/50'
+                )}
+                role="option"
+                aria-selected={index === selectedIndex}
+              >
+                {#if renderResult}
+                  {@render renderResult(item, index === selectedIndex)}
+                {:else}
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate font-medium">{item.title}</div>
+                    {#if item.description}
+                      <div class="truncate text-xs text-muted-foreground">
+                        {item.description}
+                      </div>
+                    {/if}
+                  </div>
+                  {#if item.category}
+                    <span class="shrink-0 text-xs text-muted-foreground">
+                      {item.category}
+                    </span>
+                  {/if}
+                {/if}
+              </button>
+            {/each}
+          {/if}
+        </div>
+
+        <!-- Footer with keyboard hints -->
+        <div
+          class="flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground"
+        >
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">↑↓</kbd>
+            <span>Navigate</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">↵</kbd>
+            <span>Select</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <kbd class="rounded border bg-muted px-1.5 py-0.5">esc</kbd>
+            <span>Close</span>
+          </div>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  </DialogPrimitive.Root>
+{/if}

package/dist/lib/components/HeaderSearch.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { SearchResultItem, SearchResultGroup } from '../types/layout.js';
+interface Props<T = SearchResultItem> {
+    /** Whether search is enabled/visible */
+    enabled?: boolean;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Called when user types (debounced). App should update results prop. */
+    onSearch?: (query: string) => void;
+    /** Called when user selects a result */
+    onSelect?: (item: T) => void;
+    /** Called when search dialog opens/closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Search results to display (flat list or grouped) */
+    results?: T[] | SearchResultGroup<T>[];
+    /** Whether results are currently loading */
+    loading?: boolean;
+    /** Message when no results found */
+    emptyMessage?: string;
+    /** Enable Cmd/Ctrl+K shortcut (default: true) */
+    enableShortcut?: boolean;
+    /** Custom shortcut key (default: 'k') */
+    shortcutKey?: string;
+    /** Trigger button variant: 'default' shows full search box, 'icon' shows icon-only button */
+    variant?: 'default' | 'icon';
+    /** Size variant for trigger button */
+    size?: 'sm' | 'md';
+    /** Custom result item renderer - receives (item, isSelected) */
+    renderResult?: Snippet<[T, boolean]>;
+    /** Custom empty state renderer */
+    renderEmpty?: Snippet;
+    /** Additional classes for trigger button */
+    class?: string;
+}
+declare const HeaderSearch: import("svelte").Component<Props<SearchResultItem>, {}, "">;
+type HeaderSearch = ReturnType<typeof HeaderSearch>;
+export default HeaderSearch;

package/dist/lib/components/MultiSelect.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import Spinner from './Spinner.svelte';
+
+  export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when values change */
+    onValueChange?: (values: string[]) => void;
+    /** Array of selectable options */
+    options: MultiSelectOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the multiselect is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Maximum number of selections allowed */
+    max?: number;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+  }
+
+  let {
+    value = $bindable([]),
+    onValueChange,
+    options,
+    placeholder = 'Select options...',
+    emptyMessage = 'No results found.',
+    disabled = false,
+    required = false,
+    name,
+    id,
+    error,
+    max,
+    loading = false,
+    onSearch,
+    debounceMs = 300,
+    class: className,
+  }: Props = $props();
+
+  let searchQuery = $state('');
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let open = $state(false);
+
+  // Get labels for selected values
+  const selectedLabels = $derived(
+    value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean) as string[]
+  );
+
+  // Always filter options locally based on search query
+  const filteredOptions = $derived.by(() => {
+    if (!searchQuery) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+
+  // Check if max selections reached
+  const maxReached = $derived(max !== undefined && value.length >= max);
+
+  function handleSearchInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    searchQuery = target.value;
+
+    if (onSearch) {
+      // Debounce the search callback
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        onSearch(searchQuery);
+      }, debounceMs);
+    }
+  }
+
+  function handleValueChange(newValues: string[] | undefined) {
+    if (newValues !== undefined) {
+      value = newValues;
+      onValueChange?.(newValues);
+    }
+  }
+
+  function removeValue(valueToRemove: string) {
+    const newValues = value.filter((v) => v !== valueToRemove);
+    value = newValues;
+    onValueChange?.(newValues);
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+    if (!isOpen) {
+      searchQuery = '';
+    }
+  }
+
+  // Cleanup debounce timer on unmount
+  $effect(() => {
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  });
+</script>
+
+<div class={cn('w-full', className)}>
+  <!-- Selected tags -->
+  {#if selectedLabels.length > 0}
+    <div class="flex flex-wrap gap-1 mb-2">
+      {#each value as selectedValue}
+        {@const label = options.find((o) => o.value === selectedValue)?.label}
+        {#if label}
+          <span
+            class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+          >
+            {label}
+            <button
+              type="button"
+              onclick={() => removeValue(selectedValue)}
+              class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+              {disabled}
+              aria-label={`Remove ${label}`}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </span>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  <ComboboxPrimitive.Root
+    type="multiple"
+    {disabled}
+    {required}
+    {name}
+    bind:open
+    onOpenChange={handleOpenChange}
+    onValueChange={handleValueChange}
+    {value}
+  >
+    <div class="relative">
+      <ComboboxPrimitive.Input
+        {id}
+        placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
+        oninput={handleSearchInput}
+        onfocus={() => (open = true)}
+        onclick={() => (open = true)}
+        class={cn(
+          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive focus:ring-destructive'
+        )}
+        aria-invalid={error ? 'true' : undefined}
+      />
+    </div>
+
+    <ComboboxPrimitive.Content
+      class="relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+      sideOffset={4}
+    >
+      <div class="p-1 max-h-[300px] overflow-y-auto">
+        {#if loading}
+          <div class="flex items-center justify-center py-6">
+            <Spinner size="sm" />
+            <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+          </div>
+        {:else if filteredOptions.length === 0}
+          <div class="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        {:else}
+          {#each filteredOptions as option}
+            {@const isSelected = value.includes(option.value)}
+            {@const isDisabledByMax = maxReached && !isSelected}
+            <ComboboxPrimitive.Item
+              value={option.value}
+              label={option.label}
+              disabled={option.disabled || isDisabledByMax}
+              class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+            >
+              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                {#if isSelected}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="h-4 w-4"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                {:else}
+                  <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                {/if}
+              </span>
+              {option.label}
+            </ComboboxPrimitive.Item>
+          {/each}
+        {/if}
+      </div>
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Root>
+</div>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,40 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when values change */
+    onValueChange?: (values: string[]) => void;
+    /** Array of selectable options */
+    options: MultiSelectOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the multiselect is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Maximum number of selections allowed */
+    max?: number;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+}
+declare const MultiSelect: import("svelte").Component<Props, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;