@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/selects/cmp.search-multiselect.svelte

@@ -1,533 +0,0 @@
-<script lang="ts" generics="T">import { Icon } from '../icon';
-import { SelectLocalization } from './select-localization';
-import IconAdd from '@fluentui/svg-icons/icons/add_16_filled.svg?raw';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
-import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
-import Fuse from 'fuse.js';
-import { nanoid } from 'nanoid';
-import { dndzone } from 'svelte-dnd-action';
-import Select from 'svelte-select';
-let { value = null, loadOptions: loadOptionsFn, debounce = 350, placeholder = '', disabled = false, loading = false, creatable = null, inlineSelection = false, hideEmptyState = false, showFullItem = false, showChevron = false, maxVisibleItems = undefined, reorderable = false, compareBy, on, icon, chevronIcon, optionSnippet } = $props();
-const valuesEqual = (a, b) => (compareBy ? compareBy(a) === compareBy(b) : a === b);
-const loc = new SelectLocalization();
-let listOpen = $state(false);
-let filterText = $state('');
-const floatingConfig = { strategy: 'absolute' };
-let loadingIndicatorShown = $state(false);
-let loadingIndicatorTimeout = null;
-$effect(() => {
-    if (loading) {
-        if (!loadingIndicatorTimeout) {
-            loadingIndicatorTimeout = window.setTimeout(() => {
-                loadingIndicatorShown = true;
-            }, 700);
-        }
-    }
-    else {
-        if (loadingIndicatorTimeout) {
-            clearTimeout(loadingIndicatorTimeout);
-            loadingIndicatorTimeout = null;
-        }
-        loadingIndicatorShown = false;
-    }
-});
-let selectValue = $derived(value?.map((v) => ({
-    id: nanoid(),
-    label: v.label,
-    value: v.value,
-    $isCreated: false
-})) ?? []);
-const nonInlineSelectionItems = $derived(maxVisibleItems ? selectValue.slice(0, maxVisibleItems) : selectValue);
-const nonInlineSelectionHiddenItemsCount = $derived(selectValue.length - nonInlineSelectionItems.length);
-let createOption = $state(null);
-let actualOptions = $state([]);
-const generateOptions = (selected, actual, created) => {
-    const generated = actual
-        .filter((x) => !selected.some((v) => valuesEqual(v.value, x.value)))
-        .map((x) => ({
-        label: x.label,
-        value: x.value,
-        $isCreated: false
-    }));
-    if (created) {
-        const createdOptionExists = generated.some((x) => x.label.toLowerCase() === created.label.toLowerCase()) ||
-            selectValue.some((x) => x.label.toLowerCase() === created.label.toLowerCase());
-        if (!createdOptionExists) {
-            generated.unshift({
-                label: created.label,
-                value: created.value,
-                $isCreated: true
-            });
-        }
-    }
-    return generated;
-};
-let optionItems = $state([]);
-$effect(() => {
-    if (!listOpen) {
-        createOption = null;
-    }
-    optionItems = generateOptions(selectValue, actualOptions, createOption);
-});
-const loadOptions = async (search) => {
-    actualOptions = await loadOptionsFn(search);
-    return generateOptions(selectValue, actualOptions, createOption);
-};
-const onSelectChange = (items) => {
-    const isExistentOption = (opt) => !opt.$isCreated;
-    const createdItem = items.find((x) => !isExistentOption(x));
-    if (createdItem?.$isCreated === true) {
-        on?.create?.(createdItem.value);
-        createOption = null;
-    }
-    else {
-        on?.change?.(items.filter(isExistentOption).map((x) => ({ label: x.label, value: x.value })));
-    }
-};
-const itemFilter = (label, query) => {
-    if (!query) {
-        return true;
-    }
-    const fuse = new Fuse([label]);
-    const result = fuse.search(query);
-    return result.length > 0;
-};
-const onSelectFilter = () => {
-    if (!creatable || loading) {
-        return;
-    }
-    if (!creatable.validateFn(filterText)) {
-        return;
-    }
-    if (selectValue.some((x) => x.value === filterText)) {
-        return;
-    }
-    if (createOption?.label !== filterText) {
-        createOption = { label: filterText, value: filterText, $isCreated: true };
-    }
-};
-const onClear = (item) => {
-    const items = Array.isArray(item) ? item : [item];
-    const itemsRemaining = selectValue.filter((x) => !items.some((i) => !i.$isCreated && valuesEqual(i.value, x.value)));
-    on?.change?.(itemsRemaining.map((x) => ({ label: x.label, value: x.value })));
-};
-const removeItem = (item) => {
-    const itemsRemaining = selectValue.filter((x) => !valuesEqual(x.value, item.value));
-    on?.change?.(itemsRemaining.map((x) => ({ label: x.label, value: x.value })));
-};
-const flipDurationMs = 200;
-const handleDndConsider = (e) => {
-    selectValue = e.detail.items;
-};
-const handleDndFinalize = (e) => {
-    selectValue = e.detail.items;
-    on?.change?.(selectValue.map((x) => ({ label: x.label, value: x.value })));
-};
-</script>
-
-<div
-  class="search-multiselect"
-  class:search-multiselect--disabled={disabled}
-  class:search-multiselect--loading={loadingIndicatorShown}
-  class:search-multiselect--inline={inlineSelection}
-  class:search-multiselect--inline-full-item={inlineSelection && showFullItem}
-  class:search-multiselect--list-hidden={hideEmptyState && !optionItems?.length}>
-  {#if !inlineSelection && nonInlineSelectionItems.length}
-    {#if reorderable}
-      <div
-        class="search-multiselect-tags"
-        use:dndzone={{
-          items: nonInlineSelectionItems,
-          flipDurationMs,
-          dragDisabled: disabled || nonInlineSelectionItems.length < 2,
-          type: 'search-multiselect-tags',
-          dropTargetStyle: {}
-        }}
-        onconsider={handleDndConsider}
-        onfinalize={handleDndFinalize}>
-        {#each nonInlineSelectionItems as option (option.id)}
-          <div class="search-multiselect-tags__item" data-id={option.id}>
-            <span class="search-multiselect-tags__drag-handle" data-dnd-handle title="Drag to reorder">
-              <Icon src={IconReorderDotsVertical} />
-            </span>
-            <span class="search-multiselect-tags__item-text">
-              {option.label}
-            </span>
-            <button
-              type="button"
-              class="search-multiselect-tags__deselect"
-              inert={disabled}
-              onclick={() => removeItem({ label: option.label, value: option.value })}>
-              <Icon src={IconDismiss} />
-            </button>
-          </div>
-        {/each}
-      </div>
-      {#if nonInlineSelectionHiddenItemsCount > 0}
-        <div class="search-multiselect-tags-others">
-          {loc.nMore(nonInlineSelectionHiddenItemsCount)}
-        </div>
-      {/if}
-    {:else}
-      <div class="search-multiselect-tags">
-        {#each nonInlineSelectionItems as option (option.value)}
-          <div class="search-multiselect-tags__item">
-            <span class="search-multiselect-tags__item-text">
-              {option.label}
-            </span>
-            <button
-              type="button"
-              class="search-multiselect-tags__deselect"
-              inert={disabled}
-              onclick={() => removeItem({ label: option.label, value: option.value })}>
-              <Icon src={IconDismiss} />
-            </button>
-          </div>
-        {/each}
-        {#if nonInlineSelectionHiddenItemsCount > 0}
-          <div class="search-multiselect-tags__item">
-            <span class="search-multiselect-tags__item-text">
-              {loc.nMore(nonInlineSelectionHiddenItemsCount)}
-            </span>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/if}
-  <Select
-    containerStyles="font-size: 1em;"
-    value={selectValue}
-    items={optionItems}
-    multiple={true}
-    disabled={disabled}
-    floatingConfig={floatingConfig}
-    placeholder={placeholder}
-    bind:loading={loading}
-    clearable={false}
-    bind:listOpen={listOpen}
-    listOffset={2}
-    showChevron={!loading}
-    placeholderAlwaysShow={!inlineSelection}
-    itemFilter={itemFilter}
-    bind:filterText={filterText}
-    hideEmptyState={hideEmptyState}
-    loadOptions={loadOptions}
-    debounceWait={debounce}
-    on:change={({ detail }) => onSelectChange(detail)}
-    on:filter={onSelectFilter}
-    on:clear={({ detail }) => onClear(detail)}>
-    <div slot="item" let:item class="search-multiselect__option">
-      {#if optionSnippet}
-        {@render optionSnippet({ item })}
-      {:else}
-        {#if item.$isCreated}
-          <Icon src={IconAdd} />
-        {/if}
-        {item.label}
-      {/if}
-    </div>
-    <div class="search-multiselect__selection" slot="selection" let:selection>
-      <span class="search-multiselect__selection-text">
-        {selection.label}
-      </span>
-    </div>
-    <span slot="prepend" class="search-multiselect__icon search-multiselect__icon--prepend">
-      {#if icon}
-        {@render icon()}
-      {/if}
-    </span>
-    <span slot="chevron-icon" class="search-multiselect__icon">
-      {#if chevronIcon}
-        {@render chevronIcon()}
-      {:else if showChevron}
-        <Icon src={IconChevronDown} />
-      {:else}
-        <Icon src={IconSearch} />
-      {/if}
-    </span>
-    <span slot="multi-clear-icon" class="search-multiselect__icon">
-      <Icon src={IconDismiss} />
-    </span>
-    <svelte:fragment slot="empty">
-      <div class="search-multiselect__no-options">{loc.noMatch}</div>
-    </svelte:fragment>
-  </Select>
-</div>
-
-<!--
-@component
-Multi-value select with async search, built on svelte-select with fuzzy search. Supports debounced loading, external tags with drag-and-drop reordering, inline selection mode, and item creation.
-
-### CSS Custom Properties
-Uses the same `--sc-kit--multiselect--*` variables as the Multiselect component.
--->
-
-<style>.search-multiselect {
-  --_multiselect--root--font-size: var(--sc-kit--multiselect--root--font-size, 1rem);
-  --_multiselect--height: var(--sc-kit--multiselect--height, 2em);
-  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
-  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#ffffff, #1c1c1c));
-  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#f9fafb, #1f2937));
-  --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, 0.25em);
-  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, 0.875em);
-  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#2e2e2e, #ffffff));
-  --_multiselect--placeholder--color: var(--sc-kit--multiselect--placeholder--color, light-dark(#d1d5db, #4b5563));
-  --_multiselect--icon--color: var(--sc-kit--multiselect--icon--color, light-dark(#d1d5db, #4b5563));
-  --_multiselect--padding-inline: var(--sc-kit--multiselect--padding-inline, 0.5em);
-  --_multiselect--padding-block: var(--sc-kit--multiselect--padding-block, 0.25em);
-  --_multiselect--options--max-height: var(--sc-kit--multiselect--options--max-height, 20em);
-  --_multiselect--item--hover--background: var(
-    --sc-kit--multiselect--item--hover--background,
-    light-dark(#f2f2f2, #2e2e2e)
-  );
-  --_multiselect--item--active--background: var(
-    --sc-kit--multiselect--item--active--background,
-    light-dark(#f9fafb, #374151)
-  );
-  --_multiselect--tag--color: var(--sc-kit--multiselect--tag--color, var(--_multiselect--text--color));
-  --_multiselect--tag--background: var(--sc-kit--multiselect--tag--background, var(--_multiselect--background));
-  --_multiselect--tag--border-color: var(--sc-kit--multiselect--tag--border-color, var(--_multiselect--border-color));
-  --_multiselect--tag--border-radius: var(--sc-kit--multiselect--tag--border-radius, var(--_multiselect--border-radius));
-  --_multiselect--tag--font-size: var(--sc-kit--multiselect--tag--font-size, calc(var(--_multiselect--text--font-size) * 0.9));
-  --_multiselect--tag--padding-inline: var(--sc-kit--multiselect--tag--padding-inline, var(--_multiselect--padding-inline));
-  --_multiselect--tag--padding-block: var(--sc-kit--multiselect--tag--padding-block, var(--_multiselect--padding-block));
-  --_multiselect--chevron--pointer-events: var(--sc-kit--multiselect--chevron--pointer-events, none);
-  --_multiselect--group-header--color: var(--sc-kit--multiselect--group-header--color, var(--_multiselect--placeholder--color));
-  --_multiselect--group-header--font-weight: var(--sc-kit--multiselect--group-header--font-weight, 500);
-  --_multiselect--group-item--padding-left: var(--sc-kit--multiselect--group-item--padding-left, 1em);
-  --_multiselect--inline--tag--background: var(
-    --sc-kit--multiselect--inline--tag--background,
-    light-dark(#f2f2f3, #374151)
-  );
-  --background: var(--_multiselect--background);
-  --border: 1px solid var(--_multiselect--border-color);
-  --border-focused: var(--border);
-  --border-hover: var(--border);
-  --border-radius: var(--_multiselect--border-radius);
-  --border-radius-focused: var(--border-radius);
-  --box-sizing: border-box;
-  --chevron-background: transparent;
-  --chevron-border: transparent;
-  --chevron-color: transparent;
-  --chevron-height: auto;
-  --chevron-pointer-events: var(--_multiselect--chevron--pointer-events);
-  --chevron-width: auto;
-  --disabled-background: var(--_multiselect--background--disabled);
-  --disabled-border-color: var(--_multiselect--border-color);
-  --disabled-color: var(--_multiselect--text--color);
-  --disabled-placeholder-color: var(--placeholder-color);
-  --disabled-placeholder-opacity: var(--placeholder-opacity);
-  --font-size: var(--_multiselect--text--font-size);
-  --height: var(--_multiselect--height);
-  --icons-color: var(--_multiselect--icon--color);
-  --indicators-bottom: auto;
-  --indicators-position: static;
-  --indicators-right: auto;
-  --indicators-top: auto;
-  --input--color: var(--_multiselect--text--color);
-  --input-left: 0;
-  --input-letter-spacing: 1;
-  --input-margin: 0;
-  --input-padding: 0 var(--_multiselect--padding-inline) 0 0;
-  --item-active-background: var(--_multiselect--item--active--background);
-  --item-color: var(--_multiselect--text--color);
-  --item-first-border-radius: 0;
-  --item-height: auto;
-  --item-hover-bg: var(--_multiselect--item--hover--background);
-  --item-hover-color: var(--_multiselect--text--color);
-  --item-is-active-bg: var(--_multiselect--item--active--background);
-  --item-is-active-color: var(--_multiselect--text--color);
-  --item-is-not-selectable-color: var(--_multiselect--group-header--color);
-  --item-line-height: 1.4;
-  --item-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-  --item-transition: auto;
-  --list-background: var(--background);
-  --list-border: var(--border);
-  --list-border-radius: var(--border-radius);
-  --list-max-height: var(--_multiselect--options--max-height);
-  --list-position: absolute;
-  --list-shadow: none;
-  --list-z-index: 2;
-  --loading--margin: 0;
-  --loading-color: var(--icons-color);
-  --loading-height: max-content;
-  --loading-width: max-content;
-  --margin: 0;
-  --max-height: var(--height);
-  --multi-item-active-outline: none;
-  --multi-item-bg: transparent;
-  --multi-item-border-radius: 0;
-  --multi-item-clear-icon-color: transparent;
-  --multi-item-color: transparent;
-  --multi-item-gap: 0;
-  --multi-item-height: 0;
-  --multi-item-margin: 0;
-  --multi-item-outline: none;
-  --multi-item-padding: 0;
-  --multi-max-width: 0;
-  --multi-select-input-margin: 0;
-  --multi-select-input-padding: 0;
-  --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
-  --padding: 0;
-  --placeholder-color: var(--_multiselect--placeholder--color);
-  --placeholder-opacity: 0.8;
-  --selected-item-color: auto;
-  --selected-item-overflow: auto;
-  --selected-item-padding: auto;
-  --spinner-color: var(--icons-color);
-  --spinner-height: var(--_multiselect--text--font-size);
-  --spinner-width: var(--_multiselect--text--font-size);
-  --value-container-overflow: hidden;
-  --value-container-padding: 0 var(--_multiselect--padding-inline) 0 0;
-  --width: var(--_multiselect--width);
-  --group-title-color: var(--_multiselect--group-header--color);
-  --group-title-font-weight: var(--_multiselect--group-header--font-weight);
-  --group-title-font-size: var(--_multiselect--text--font-size);
-  --group-title-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-  --group-item-padding-left: var(--_multiselect--group-item--padding-left);
-  font-size: var(--_multiselect--root--font-size);
-  width: var(--_multiselect--width);
-  position: relative;
-}
-.search-multiselect__icon {
-  --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1.25em;
-  display: flex;
-  align-items: center;
-}
-.search-multiselect__icon--prepend {
-  padding: 0 var(--_multiselect--padding-inline);
-}
-:global(.search-multiselect__icon--prepend:not(:has(*))) {
-  padding-right: 0 !important;
-}
-.search-multiselect__option {
-  font-size: var(--_multiselect--text--font-size);
-}
-.search-multiselect__selection {
-  font-size: var(--_multiselect--tag--font-size);
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-.search-multiselect__selection-text {
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.search-multiselect__no-options {
-  color: var(--_multiselect--placeholder--color);
-  padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-}
-.search-multiselect--disabled {
-  cursor: default;
-  pointer-events: none;
-}
-.search-multiselect--loading {
-  pointer-events: none;
-}
-.search-multiselect--loading::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
-  opacity: 0.5;
-}
-.search-multiselect :global(.value-container) {
-  gap: 0 !important;
-}
-.search-multiselect--inline {
-  --max-height: auto;
-  --multi-item-active-outline: none;
-  --multi-item-bg: var(--_multiselect--inline--tag--background);
-  --multi-item-border-radius: var(--_multiselect--border-radius);
-  --multi-item-clear-icon-color: var(--_multiselect--icon--color);
-  --multi-item-color: var(--_multiselect--text--color);
-  --multi-item-gap: var(--_multiselect--padding-inline);
-  --multi-item-height: calc(var(--_multiselect--height) - 2 * var(--_multiselect--padding-block));
-  --multi-item-margin: 0;
-  --multi-item-outline: 1px solid var(--_multiselect--border-color);
-  --multi-item-padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
-  --multi-max-width: 9.375em;
-  --multi-select-input-margin: 0;
-  --multi-select-input-padding: 0;
-  --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
-}
-.search-multiselect--inline :global(.value-container) {
-  gap: 0.25em !important;
-}
-.search-multiselect--inline-full-item {
-  --multi-max-width: none;
-}
-.search-multiselect--list-hidden {
-  --list-border: none;
-}
-
-.search-multiselect-tags {
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.search-multiselect-tags :global([contenteditable]) {
-  user-select: text;
-}
-.search-multiselect-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-  margin-bottom: 0.25em;
-  min-width: 0;
-  width: 100%;
-}
-.search-multiselect-tags__item {
-  display: flex;
-  gap: 0.375em;
-  vertical-align: middle;
-  border: 1px solid var(--_multiselect--tag--border-color);
-  font-size: var(--_multiselect--tag--font-size);
-  padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
-  color: var(--_multiselect--tag--color);
-  background: var(--_multiselect--tag--background);
-  border-radius: var(--_multiselect--tag--border-radius);
-  max-width: 100%;
-}
-.search-multiselect-tags__item-text {
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.search-multiselect-tags__deselect {
-  --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1.25em;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-.search-multiselect-tags__drag-handle {
-  --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1em;
-  cursor: grab;
-  display: flex;
-  align-items: center;
-  font-size: 0.7em;
-  user-select: none;
-}
-
-.search-multiselect-tags-others {
-  color: var(--_multiselect--placeholder--color);
-  font-size: var(--_multiselect--tag--font-size);
-  padding: var(--_multiselect--tag--padding-block) 0;
-}</style>

package/dist/ui/selects/cmp.search-multiselect.svelte.d.ts

@@ -1,69 +0,0 @@
-import type { SelectCreateItemSettings, SelectOption } from './types';
-import type { Snippet } from 'svelte';
-declare function $$render<T>(): {
-    props: {
-        value?: SelectOption<T>[] | null;
-        /** Async function to load options based on search query */
-        loadOptions: (query: string) => Promise<SelectOption<T>[]>;
-        /** Debounce wait time in ms for search input @default 350 */
-        debounce?: number;
-        placeholder?: string;
-        disabled?: boolean;
-        loading?: boolean;
-        /** Settings for creating new items in the dropdown */
-        creatable?: SelectCreateItemSettings | null;
-        /** Show selected items as inline tags inside the control */
-        inlineSelection?: boolean;
-        /** Hide the dropdown when there are no matching options */
-        hideEmptyState?: boolean;
-        /** Do not truncate inline tag text */
-        showFullItem?: boolean;
-        /** Show chevron icon instead of search icon */
-        showChevron?: boolean;
-        /** Maximum number of visible tags in external selection @default unlimited */
-        maxVisibleItems?: number;
-        /** Enable drag-and-drop reordering of external tags */
-        reorderable?: boolean;
-        /** Custom equality comparator for option values. When provided, two values are equal if compareBy(a) === compareBy(b). */
-        compareBy?: (value: T) => string | number;
-        on?: {
-            change?: (value: SelectOption<T>[]) => void;
-            create?: (label: string) => void;
-        };
-        /** Left icon snippet */
-        icon?: Snippet;
-        /** Custom chevron icon snippet */
-        chevronIcon?: Snippet;
-        /** Custom option rendering */
-        optionSnippet?: Snippet<[{
-            item: SelectOption<T>;
-        }]>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-/**
- * Multi-value select with async search, built on svelte-select with fuzzy search. Supports debounced loading, external tags with drag-and-drop reordering, inline selection mode, and item creation.
- *
- * ### CSS Custom Properties
- * Uses the same `--sc-kit--multiselect--*` variables as the Multiselect component.
- */
-declare const Cmp: $$IsomorphicComponent;
-type Cmp<T> = InstanceType<typeof Cmp<T>>;
-export default Cmp;