@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-K5RYFPOQ.mjs

@@ -1,852 +0,0 @@
-import {
-  renderVueOverlayTeleport,
-  useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/Select.ts
-import { defineComponent, computed, ref, h, watch, nextTick, onBeforeUnmount } from "vue";
-import {
-  classNames,
-  getSelectTriggerClasses,
-  getSelectOptionClasses,
-  selectBaseClasses,
-  selectDropdownBaseClasses,
-  selectGroupLabelClasses,
-  selectSearchInputClasses,
-  selectEmptyStateClasses,
-  selectDoneActionClasses,
-  selectDoneButtonClasses,
-  isOptionGroup,
-  createSelectSearchDebouncer,
-  getCreateSelectOptionLabel,
-  flattenSelectOptions,
-  resolveCreatableSelectOption,
-  resolveSelectFilteredOptions,
-  getSelectVirtualItemHeight,
-  fixedSizeStrategy,
-  getPickerOptionAria,
-  findFirstEnabledIndex as pickerFindFirstEnabledIndex,
-  findLastEnabledIndex as pickerFindLastEnabledIndex,
-  findNextEnabledIndex as pickerFindNextEnabledIndex,
-  icon20ViewBox,
-  chevronDownSolidIcon20PathD,
-  closeSolidIcon20PathD,
-  checkSolidIcon20PathD,
-  resolveLocaleText,
-  mergeTigerLocale,
-  getSelectLabels
-} from "@expcat/tigercat-core";
-var selectInstanceId = 0;
-var ChevronDownIcon = h(
-  "svg",
-  {
-    class: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    h("path", {
-      "fill-rule": "evenodd",
-      d: chevronDownSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var CloseIcon = h(
-  "svg",
-  {
-    class: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    h("path", {
-      "fill-rule": "evenodd",
-      d: closeSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var CheckIcon = h(
-  "svg",
-  {
-    class: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    h("path", {
-      "fill-rule": "evenodd",
-      d: checkSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var Select = defineComponent({
-  name: "TigerSelect",
-  props: {
-    /**
-     * Selected value(s) (for v-model)
-     */
-    modelValue: {
-      type: [String, Number, Array]
-    },
-    /**
-     * Available options or option groups
-     * @default []
-     */
-    options: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Select size
-     * @default 'md'
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Whether the select is disabled
-     */
-    disabled: Boolean,
-    /**
-     * Placeholder text. Defaults to ConfigProvider locale `select.placeholder`.
-     */
-    placeholder: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Enable search functionality
-     */
-    searchable: Boolean,
-    searchValue: {
-      type: String,
-      default: void 0
-    },
-    defaultSearchValue: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Allow multiple selection
-     */
-    multiple: Boolean,
-    /**
-     * Show clear button
-     * @default true
-     */
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Text shown when the options list is empty or no search result matches
-     */
-    emptyText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Maximum number of tags in multi-select display
-     * @since 0.5.0
-     */
-    maxTagCount: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Whether to use virtual scrolling
-     * @since 0.5.0
-     */
-    virtual: Boolean,
-    /**
-     * Whether search is handled remotely
-     */
-    remote: Boolean,
-    /**
-     * Debounce delay for search callbacks in milliseconds
-     * @default 0
-     */
-    searchDebounce: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Whether users can create a new option from the search query
-     */
-    creatable: Boolean,
-    /**
-     * Prefix text used for the creatable option row
-     * @default 'Create'
-     */
-    createOptionText: {
-      type: String,
-      default: "Create"
-    },
-    /**
-     * Height of the dropdown panel in pixels
-     * @default 256
-     * @since 0.5.0
-     */
-    listHeight: {
-      type: Number,
-      default: 256
-    },
-    /**
-     * Locale overrides merged on top of ConfigProvider locale
-     */
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * UI labels for custom text. Takes precedence over locale and ConfigProvider text.
-     */
-    labels: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:modelValue", "update:searchValue", "change", "search-change", "create"],
-  setup(props, { emit }) {
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const instanceId = ++selectInstanceId;
-    const listboxId = `tiger-select-listbox-${instanceId}`;
-    const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-    const isOpen = ref(false);
-    const uncontrolledSearchValue = ref(props.defaultSearchValue);
-    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
-    const activeIndex = ref(-1);
-    const createdOptions = ref([]);
-    const dropdownRef = ref(null);
-    const triggerRef = ref(null);
-    const searchInputRef = ref(null);
-    const overlay = useVueAnchoredOverlay({
-      enabled: isOpen,
-      referenceRef: triggerRef,
-      floatingRef: dropdownRef,
-      placement: "bottom-start",
-      offset: 4,
-      layout: "fullscreen-sm",
-      matchReferenceWidth: true,
-      dismissOnOutside: true,
-      dismissOnEscape: true,
-      restoreFocusOnDismiss: true,
-      onDismiss: closeDropdown
-    });
-    const virtualScrollTop = ref(0);
-    const virtualScrollRef = ref(null);
-    watch(activeIndex, (idx) => {
-      if (!props.virtual || idx < 0) return;
-      const el = virtualScrollRef.value;
-      if (!el) return;
-      const itemH = getSelectVirtualItemHeight(props.size);
-      const top = idx * itemH;
-      if (top < el.scrollTop) el.scrollTop = top;
-      else if (top + itemH > el.scrollTop + props.listHeight)
-        el.scrollTop = top + itemH - props.listHeight;
-    });
-    let searchDebouncer = createSelectSearchDebouncer({
-      delay: props.searchDebounce,
-      onSearchChange: (query) => emit("search-change", query)
-    });
-    function updateSearchValue(query) {
-      if (props.searchValue === void 0) {
-        uncontrolledSearchValue.value = query;
-      }
-      emit("update:searchValue", query);
-      searchDebouncer.schedule(query);
-    }
-    const filteredOptions = computed(() => {
-      return resolveSelectFilteredOptions(props.options, searchQuery.value, {
-        searchable: props.searchable,
-        remote: props.remote
-      });
-    });
-    const allOptions = computed(() => flattenSelectOptions(props.options));
-    const flatFilteredOptions = computed(() => flattenSelectOptions(filteredOptions.value));
-    const creatableOption = computed(
-      () => resolveCreatableSelectOption([...props.options, ...createdOptions.value], searchQuery.value, {
-        creatable: props.creatable && props.searchable
-      })
-    );
-    const flatSelectableOptions = computed(() => {
-      return creatableOption.value ? [...flatFilteredOptions.value, creatableOption.value] : flatFilteredOptions.value;
-    });
-    const labels = computed(() => getSelectLabels(mergedLocale.value, props.labels));
-    const placeholderText = computed(
-      () => resolveLocaleText(labels.value.placeholder, props.placeholder)
-    );
-    const doneText = computed(() => resolveLocaleText(labels.value.doneText));
-    const displayText = computed(() => {
-      if (props.multiple && Array.isArray(props.modelValue)) {
-        if (props.modelValue.length === 0) {
-          return placeholderText.value;
-        }
-        const currentValue = props.modelValue;
-        const selectedOptions = [...allOptions.value, ...createdOptions.value].filter(
-          (opt) => currentValue.includes(opt.value)
-        );
-        const optionLabels = selectedOptions.map((opt) => opt.label);
-        if (props.maxTagCount !== void 0 && optionLabels.length > props.maxTagCount) {
-          const visible = optionLabels.slice(0, props.maxTagCount);
-          return `${visible.join(", ")} +${optionLabels.length - props.maxTagCount}`;
-        }
-        return optionLabels.join(", ");
-      }
-      const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
-      if (value === void 0 || value === null || value === "") {
-        return placeholderText.value;
-      }
-      const option = [...allOptions.value, ...createdOptions.value].find(
-        (opt) => opt.value === value
-      );
-      return option ? option.label : placeholderText.value;
-    });
-    const showClearButton = computed(() => {
-      return props.clearable && !props.disabled && props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "" && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
-    });
-    function isSelected(option) {
-      if (props.multiple && Array.isArray(props.modelValue)) {
-        return props.modelValue.includes(option.value);
-      }
-      return props.modelValue === option.value;
-    }
-    const findFirstEnabledIndex = () => pickerFindFirstEnabledIndex(flatSelectableOptions.value);
-    const findLastEnabledIndex = () => pickerFindLastEnabledIndex(flatSelectableOptions.value);
-    const findNextEnabledIndex = (current, direction) => pickerFindNextEnabledIndex(flatSelectableOptions.value, current, direction);
-    const focusOptionAt = (index) => {
-      if (index < 0) {
-        return;
-      }
-      nextTick(() => {
-        const el = dropdownRef.value?.querySelector(`[data-option-index="${index}"]`);
-        el?.focus();
-        el?.scrollIntoView({ block: "nearest" });
-      });
-    };
-    const setActiveAndFocus = (index) => {
-      activeIndex.value = index;
-      focusOptionAt(index);
-    };
-    function toggleDropdown() {
-      if (!props.disabled) {
-        isOpen.value = !isOpen.value;
-        if (isOpen.value && props.searchable) {
-          nextTick(() => {
-            searchInputRef.value?.focus();
-          });
-        }
-      }
-    }
-    function closeDropdown() {
-      isOpen.value = false;
-      updateSearchValue("");
-      activeIndex.value = -1;
-    }
-    function selectOption(option) {
-      if (option.disabled) {
-        return;
-      }
-      if (creatableOption.value && option.value === creatableOption.value.value) {
-        createdOptions.value = [...createdOptions.value, option];
-        emit("create", option);
-      }
-      if (props.multiple) {
-        const currentValue = Array.isArray(props.modelValue) ? props.modelValue : [];
-        let newValue;
-        if (currentValue.includes(option.value)) {
-          newValue = currentValue.filter((v) => v !== option.value);
-        } else {
-          newValue = [...currentValue, option.value];
-        }
-        emit("update:modelValue", newValue);
-        emit("change", newValue);
-      } else {
-        emit("update:modelValue", option.value);
-        emit("change", option.value);
-        closeDropdown();
-        nextTick(() => {
-          ;
-          triggerRef.value?.focus();
-        });
-      }
-    }
-    function clearSelection(event) {
-      event.stopPropagation();
-      const newValue = props.multiple ? [] : void 0;
-      emit("update:modelValue", newValue);
-      emit("change", newValue);
-    }
-    function handleSearchInput(event) {
-      const target = event.target;
-      updateSearchValue(target.value);
-    }
-    function getActiveOption() {
-      if (activeIndex.value < 0) {
-        return void 0;
-      }
-      return flatSelectableOptions.value[activeIndex.value];
-    }
-    function selectActiveOption() {
-      const option = getActiveOption();
-      if (!option || option.disabled) {
-        return;
-      }
-      selectOption(option);
-    }
-    function handleTriggerKeyDown(event) {
-      if (props.disabled) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          const next = findNextEnabledIndex(activeIndex.value, 1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          const next = findNextEnabledIndex(activeIndex.value, -1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter":
-        case " ": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          selectActiveOption();
-          return;
-        }
-        case "Escape": {
-          if (isOpen.value) {
-            event.preventDefault();
-            closeDropdown();
-          }
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    function handleDropdownKeyDown(event) {
-      switch (event.key) {
-        case "ArrowDown": {
-          event.preventDefault();
-          const next = findNextEnabledIndex(activeIndex.value, 1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          const next = findNextEnabledIndex(activeIndex.value, -1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Home": {
-          event.preventDefault();
-          const next = findFirstEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "End": {
-          event.preventDefault();
-          const next = findLastEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter":
-        case " ": {
-          event.preventDefault();
-          selectActiveOption();
-          return;
-        }
-        case "Escape": {
-          event.preventDefault();
-          closeDropdown();
-          nextTick(() => {
-            ;
-            triggerRef.value?.focus();
-          });
-          return;
-        }
-        case "Tab": {
-          closeDropdown();
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    function handleSearchKeyDown(event) {
-      switch (event.key) {
-        case " ": {
-          event.stopPropagation();
-          return;
-        }
-        case "ArrowDown": {
-          event.preventDefault();
-          event.stopPropagation();
-          const next = activeIndex.value >= 0 ? activeIndex.value : findFirstEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          event.stopPropagation();
-          const next = activeIndex.value >= 0 ? activeIndex.value : findLastEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter": {
-          if (activeIndex.value >= 0) {
-            event.preventDefault();
-            event.stopPropagation();
-            selectActiveOption();
-          }
-          return;
-        }
-        case "Escape": {
-          event.preventDefault();
-          event.stopPropagation();
-          closeDropdown();
-          nextTick(() => {
-            ;
-            triggerRef.value?.focus();
-          });
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    watch(
-      isOpen,
-      (open) => {
-        if (open) {
-          const selectedIndex = (() => {
-            if (props.multiple && Array.isArray(props.modelValue)) {
-              const values = props.modelValue;
-              if (values.length === 0) {
-                return -1;
-              }
-              return flatSelectableOptions.value.findIndex(
-                (opt) => values.includes(opt.value) && !opt.disabled
-              );
-            }
-            const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
-            if (value === void 0 || value === null || value === "") {
-              return -1;
-            }
-            return flatSelectableOptions.value.findIndex(
-              (opt) => opt.value === value && !opt.disabled
-            );
-          })();
-          const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
-          activeIndex.value = nextActive;
-          if (!props.searchable) {
-            focusOptionAt(nextActive);
-          }
-        }
-      },
-      { immediate: true }
-    );
-    watch(flatSelectableOptions, () => {
-      if (!isOpen.value) {
-        return;
-      }
-      activeIndex.value = findFirstEnabledIndex();
-    });
-    watch(
-      () => props.searchDebounce,
-      (delay) => {
-        searchDebouncer.cancel();
-        searchDebouncer = createSelectSearchDebouncer({
-          delay,
-          onSearchChange: (query) => emit("search-change", query)
-        });
-      }
-    );
-    onBeforeUnmount(() => {
-      searchDebouncer.cancel();
-    });
-    return () => {
-      const triggerClasses = getSelectTriggerClasses(props.size, props.disabled, isOpen.value);
-      return h("div", { class: selectBaseClasses }, [
-        // Trigger button
-        h(
-          "button",
-          {
-            ref: triggerRef,
-            type: "button",
-            class: classNames(triggerClasses, showClearButton.value ? "pr-14" : "pr-9"),
-            disabled: props.disabled,
-            onClick: toggleDropdown,
-            onKeydown: handleTriggerKeyDown,
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen.value,
-            "aria-controls": listboxId,
-            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? getOptionId(activeIndex.value) : void 0,
-            "data-state": isOpen.value ? "open" : "closed"
-          },
-          [
-            h(
-              "span",
-              {
-                class: classNames(
-                  "flex-1 text-left truncate",
-                  displayText.value === placeholderText.value && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
-                )
-              },
-              displayText.value
-            )
-          ]
-        ),
-        h(
-          "span",
-          { class: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1" },
-          [
-            showClearButton.value && h(
-              "button",
-              {
-                type: "button",
-                class: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-select-ring,var(--tiger-primary,#2563eb))]",
-                "data-tiger-select-clear": "",
-                "aria-label": resolveLocaleText(
-                  "Clear selection",
-                  mergedLocale.value?.common?.clearText
-                ),
-                onClick: clearSelection
-              },
-              CloseIcon
-            ),
-            h(
-              "span",
-              {
-                class: classNames("inline-flex", isOpen.value && "rotate-180"),
-                "aria-hidden": "true"
-              },
-              ChevronDownIcon
-            )
-          ]
-        ),
-        // Dropdown
-        isOpen.value && renderVueOverlayTeleport(
-          h(
-            "div",
-            {
-              ref: dropdownRef,
-              class: classNames(selectDropdownBaseClasses, overlay.floatingClasses.value),
-              style: overlay.floatingStyles.value,
-              "data-positioned": overlay.positioned.value,
-              role: "listbox",
-              id: listboxId,
-              "aria-multiselectable": props.multiple ? true : void 0,
-              onKeydown: handleDropdownKeyDown
-            },
-            [
-              // Search input
-              props.searchable && h("input", {
-                ref: searchInputRef,
-                type: "text",
-                class: selectSearchInputClasses,
-                placeholder: resolveLocaleText(
-                  "Search...",
-                  mergedLocale.value?.common?.searchPlaceholder
-                ),
-                value: searchQuery.value,
-                onInput: handleSearchInput,
-                onKeydown: handleSearchKeyDown
-              }),
-              // Options list
-              filteredOptions.value.length > 0 ? (() => {
-                let optionIndex = -1;
-                const renderOptionItem = (option, idx, displayLabel = option.label) => {
-                  const selected = isSelected(option);
-                  const active = idx === activeIndex.value;
-                  const optionAria = getPickerOptionAria({
-                    selected,
-                    disabled: !!option.disabled
-                  });
-                  return h(
-                    "div",
-                    {
-                      key: option.value,
-                      id: getOptionId(idx),
-                      "data-option-index": idx,
-                      ...optionAria,
-                      tabindex: active ? 0 : -1,
-                      class: getSelectOptionClasses(selected, !!option.disabled, props.size),
-                      onMouseenter: () => {
-                        if (!option.disabled) {
-                          activeIndex.value = idx;
-                        }
-                      },
-                      onClick: () => selectOption(option)
-                    },
-                    [
-                      h("span", { class: "flex items-center justify-between w-full" }, [
-                        h("span", displayLabel),
-                        selected && h("span", CheckIcon)
-                      ])
-                    ]
-                  );
-                };
-                const hasGroups = filteredOptions.value.some(isOptionGroup);
-                if (props.virtual && !hasGroups) {
-                  const flat = filteredOptions.value.filter(
-                    (o) => !isOptionGroup(o)
-                  );
-                  const all = creatableOption.value ? [...flat, creatableOption.value] : flat;
-                  const itemH = getSelectVirtualItemHeight(props.size);
-                  const { startIndex, endIndex, totalHeight } = fixedSizeStrategy(
-                    itemH
-                  ).getRange(virtualScrollTop.value, props.listHeight, all.length, 5);
-                  const visible = [];
-                  for (let i = startIndex; i <= endIndex; i++) {
-                    const isCreate = creatableOption.value && i === all.length - 1;
-                    visible.push(
-                      renderOptionItem(
-                        all[i],
-                        i,
-                        isCreate ? getCreateSelectOptionLabel(all[i], props.createOptionText) : all[i].label
-                      )
-                    );
-                  }
-                  return h(
-                    "div",
-                    {
-                      ref: virtualScrollRef,
-                      "data-tiger-select-virtual": "",
-                      style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
-                      onScroll: (e) => {
-                        virtualScrollTop.value = e.target.scrollTop;
-                      }
-                    },
-                    [
-                      h(
-                        "div",
-                        { style: { height: `${totalHeight}px`, position: "relative" } },
-                        [
-                          h(
-                            "div",
-                            { style: { transform: `translateY(${startIndex * itemH}px)` } },
-                            visible
-                          )
-                        ]
-                      )
-                    ]
-                  );
-                }
-                const optionNodes = filteredOptions.value.map((item) => {
-                  if (isOptionGroup(item)) {
-                    return h("div", { key: item.label }, [
-                      h("div", { class: selectGroupLabelClasses }, item.label),
-                      item.options.map((option) => {
-                        optionIndex += 1;
-                        return renderOptionItem(option, optionIndex);
-                      })
-                    ]);
-                  }
-                  optionIndex += 1;
-                  return renderOptionItem(item, optionIndex);
-                });
-                if (creatableOption.value) {
-                  optionIndex += 1;
-                  optionNodes.push(
-                    renderOptionItem(
-                      creatableOption.value,
-                      optionIndex,
-                      getCreateSelectOptionLabel(
-                        creatableOption.value,
-                        props.createOptionText
-                      )
-                    )
-                  );
-                }
-                return optionNodes;
-              })() : creatableOption.value ? (() => {
-                const optionLabel = getCreateSelectOptionLabel(
-                  creatableOption.value,
-                  props.createOptionText
-                );
-                return h(
-                  "div",
-                  {
-                    key: creatableOption.value.value,
-                    id: getOptionId(0),
-                    "data-option-index": 0,
-                    role: "option",
-                    "aria-selected": false,
-                    tabindex: activeIndex.value === 0 ? 0 : -1,
-                    class: getSelectOptionClasses(false, false, props.size),
-                    onMouseenter: () => {
-                      activeIndex.value = 0;
-                    },
-                    onClick: () => selectOption(creatableOption.value)
-                  },
-                  [
-                    h(
-                      "span",
-                      { class: "flex items-center justify-between w-full" },
-                      optionLabel
-                    )
-                  ]
-                );
-              })() : h(
-                "div",
-                { class: selectEmptyStateClasses },
-                resolveLocaleText(labels.value.emptyText, props.emptyText)
-              ),
-              h("div", { class: selectDoneActionClasses }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: selectDoneButtonClasses,
-                    onClick: closeDropdown,
-                    onKeydown: (event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.stopPropagation();
-                      }
-                    }
-                  },
-                  doneText.value
-                )
-              ])
-            ]
-          ),
-          overlay.target.value
-        )
-      ]);
-    };
-  }
-});
-var Select_default = Select;
-
-export {
-  Select,
-  Select_default
-};