@brumaombra/ui-vintage 0.1.0

package/dist/command.js

@@ -0,0 +1,1122 @@
+import { c as createContext, u as useForwardPropsEmits, a as useForwardProps } from "./useForwardPropsEmits-DmumnZO5.js";
+import { computed, unref, defineComponent, toRefs, ref, watch, nextTick, openBlock, createBlock, withCtx, renderSlot, createCommentVNode, createVNode, withKeys, withModifiers, watchSyncEffect, onMounted, onUnmounted, mergeProps, withMemo, reactive, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createElementVNode, createElementBlock, normalizeClass } from "vue";
+import { i as isEqual, u as useTypeahead } from "./useTypeahead-Dqe1QXq1.js";
+import { u as useDirection } from "./useDirection-SIyEYNxv.js";
+import { u as useFormControl } from "./useFormControl-7ytzz-r7.js";
+import { u as useKbd } from "./useKbd-JjFOu4f7.js";
+import { P as Primitive } from "./Primitive-D3IcFg81.js";
+import { u as usePrimitiveElement } from "./usePrimitiveElement-CijaRBgF.js";
+import { u as useCollection } from "./Collection-CmOoLBo7.js";
+import { V as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-DLAsRwUw.js";
+import { u as useVModel, e as useCurrentElement } from "./index-C1_fxYhb.js";
+import { o as createEventHook, g as refAutoReset, r as reactiveOmit } from "./index-Dfi5ESP2.js";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+import { _ as _sfc_main$9, a as _sfc_main$a, c as _sfc_main$b, e as _sfc_main$c, b as _sfc_main$d } from "./DialogTitle.vue_vue_type_script_setup_true_lang-Bw40D4AK.js";
+import { u as useId, h as handleAndDispatchCustomEvent } from "./Teleport-CuUn4UkG.js";
+import { c as createLucideIcon } from "./createLucideIcon-CCMB2vDW.js";
+import { u as useForwardExpose } from "./useForwardExpose-CNVHwdF2.js";
+import { S as Separator_default } from "./Separator-CFm_M4pb.js";
+function findValuesBetween(array, start, end) {
+  const startIndex = array.findIndex((i) => isEqual(i, start));
+  const endIndex = array.findIndex((i) => isEqual(i, end));
+  if (startIndex === -1 || endIndex === -1) return [];
+  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b);
+  return array.slice(minIndex, maxIndex + 1);
+}
+function useFilter(options) {
+  const computedOptions = computed(() => unref(options));
+  const collator = computed(() => new Intl.Collator("en", {
+    usage: "search",
+    ...computedOptions.value
+  }));
+  const startsWith = (string, substring) => {
+    if (substring.length === 0) return true;
+    string = string.normalize("NFC");
+    substring = substring.normalize("NFC");
+    return collator.value.compare(string.slice(0, substring.length), substring) === 0;
+  };
+  const endsWith = (string, substring) => {
+    if (substring.length === 0) return true;
+    string = string.normalize("NFC");
+    substring = substring.normalize("NFC");
+    return collator.value.compare(string.slice(-substring.length), substring) === 0;
+  };
+  const contains = (string, substring) => {
+    if (substring.length === 0) return true;
+    string = string.normalize("NFC");
+    substring = substring.normalize("NFC");
+    let scan = 0;
+    const sliceLen = substring.length;
+    for (; scan + sliceLen <= string.length; scan++) {
+      const slice = string.slice(scan, scan + sliceLen);
+      if (collator.value.compare(substring, slice) === 0) return true;
+    }
+    return false;
+  };
+  return {
+    startsWith,
+    endsWith,
+    contains
+  };
+}
+function valueComparator(value, currentValue, comparator) {
+  if (value === void 0) return false;
+  else if (Array.isArray(value)) return value.some((val) => compare(val, currentValue, comparator));
+  else return compare(value, currentValue, comparator);
+}
+function compare(value, currentValue, comparator) {
+  if (value === void 0 || currentValue === void 0) return false;
+  if (typeof value === "string") return value === currentValue;
+  if (typeof comparator === "function") return comparator(value, currentValue);
+  if (typeof comparator === "string") return (value == null ? void 0 : value[comparator]) === (currentValue == null ? void 0 : currentValue[comparator]);
+  return isEqual(value, currentValue);
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+const [injectListboxRootContext, provideListboxRootContext] = createContext("ListboxRoot");
+var ListboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxRoot",
+  props: {
+    modelValue: {
+      type: null,
+      required: false
+    },
+    defaultValue: {
+      type: null,
+      required: false
+    },
+    multiple: {
+      type: Boolean,
+      required: false
+    },
+    orientation: {
+      type: String,
+      required: false,
+      default: "vertical"
+    },
+    dir: {
+      type: String,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    selectionBehavior: {
+      type: String,
+      required: false,
+      default: "toggle"
+    },
+    highlightOnHover: {
+      type: Boolean,
+      required: false
+    },
+    by: {
+      type: [String, Function],
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    name: {
+      type: String,
+      required: false
+    },
+    required: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "highlight",
+    "entryFocus",
+    "leave"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { multiple, highlightOnHover, orientation, disabled, selectionBehavior, dir: propDir } = toRefs(props);
+    const { getItems } = useCollection({ isProvider: true });
+    const { handleTypeaheadSearch } = useTypeahead();
+    const { primitiveElement, currentElement } = usePrimitiveElement();
+    const kbd = useKbd();
+    const dir = useDirection(propDir);
+    const isFormControl = useFormControl(currentElement);
+    const firstValue = ref();
+    const isUserAction = ref(false);
+    const focusable = ref(true);
+    const modelValue = useVModel(props, "modelValue", emits, {
+      defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
+      passive: props.modelValue === void 0,
+      deep: true
+    });
+    function onValueChange(val) {
+      isUserAction.value = true;
+      if (props.multiple) {
+        const modelArray = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+        const index = modelArray.findIndex((i) => compare(i, val, props.by));
+        if (props.selectionBehavior === "toggle") {
+          index === -1 ? modelArray.push(val) : modelArray.splice(index, 1);
+          modelValue.value = modelArray;
+        } else {
+          modelValue.value = [val];
+          firstValue.value = val;
+        }
+      } else if (props.selectionBehavior === "toggle") if (compare(modelValue.value, val, props.by)) modelValue.value = void 0;
+      else modelValue.value = val;
+      else modelValue.value = val;
+      setTimeout(() => {
+        isUserAction.value = false;
+      }, 1);
+    }
+    const highlightedElement = ref(null);
+    const previousElement = ref(null);
+    const isVirtual = ref(false);
+    const isComposing = ref(false);
+    const virtualFocusHook = createEventHook();
+    const virtualKeydownHook = createEventHook();
+    const virtualHighlightHook = createEventHook();
+    function getCollectionItem() {
+      return getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
+    }
+    function changeHighlight(el, scrollIntoView = true) {
+      if (!el) return;
+      highlightedElement.value = el;
+      if (focusable.value) highlightedElement.value.focus();
+      if (scrollIntoView) highlightedElement.value.scrollIntoView({ block: "nearest" });
+      const highlightedItem = getItems().find((i) => i.ref === el);
+      emits("highlight", highlightedItem);
+    }
+    function highlightItem(value) {
+      if (isVirtual.value) virtualHighlightHook.trigger(value);
+      else {
+        const item = getItems().find((i) => compare(i.value, value, props.by));
+        if (item) {
+          highlightedElement.value = item.ref;
+          changeHighlight(item.ref);
+        }
+      }
+    }
+    function onKeydownEnter(event) {
+      if (highlightedElement.value && highlightedElement.value.isConnected) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!isComposing.value) highlightedElement.value.click();
+      }
+    }
+    function onKeydownTypeAhead(event) {
+      if (!focusable.value) return;
+      isUserAction.value = true;
+      if (isVirtual.value) virtualKeydownHook.trigger(event);
+      else {
+        const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+        if (isMetaKey && event.key === "a" && multiple.value) {
+          const collection = getItems();
+          const values = collection.map((i) => i.value);
+          modelValue.value = [...values];
+          event.preventDefault();
+          changeHighlight(collection[collection.length - 1].ref);
+        } else if (!isMetaKey) {
+          const el = handleTypeaheadSearch(event.key, getItems());
+          if (el) changeHighlight(el);
+        }
+      }
+      setTimeout(() => {
+        isUserAction.value = false;
+      }, 1);
+    }
+    function onCompositionStart() {
+      isComposing.value = true;
+    }
+    function onCompositionEnd() {
+      nextTick(() => {
+        isComposing.value = false;
+      });
+    }
+    function highlightFirstItem() {
+      nextTick(() => {
+        const event = new KeyboardEvent("keydown", { key: "PageUp" });
+        onKeydownNavigation(event);
+      });
+    }
+    function onLeave(event) {
+      const el = highlightedElement.value;
+      if (el == null ? void 0 : el.isConnected) previousElement.value = el;
+      highlightedElement.value = null;
+      emits("leave", event);
+    }
+    function onEnter(event) {
+      var _a, _b;
+      const entryFocusEvent = new CustomEvent("listbox.entryFocus", {
+        bubbles: false,
+        cancelable: true
+      });
+      (_a = event.currentTarget) == null ? void 0 : _a.dispatchEvent(entryFocusEvent);
+      emits("entryFocus", entryFocusEvent);
+      if (entryFocusEvent.defaultPrevented) return;
+      if (previousElement.value) changeHighlight(previousElement.value);
+      else {
+        const el = (_b = getCollectionItem()) == null ? void 0 : _b[0];
+        changeHighlight(el);
+      }
+    }
+    function onKeydownNavigation(event) {
+      const intent = getFocusIntent(event, orientation.value, dir.value);
+      if (!intent) return;
+      let collection = getCollectionItem();
+      if (highlightedElement.value) {
+        if (intent === "last") collection.reverse();
+        else if (intent === "prev" || intent === "next") {
+          if (intent === "prev") collection.reverse();
+          const currentIndex = collection.indexOf(highlightedElement.value);
+          collection = collection.slice(currentIndex + 1);
+        }
+        handleMultipleReplace(event, collection[0]);
+      }
+      if (collection.length) {
+        const index = !highlightedElement.value && intent === "prev" ? collection.length - 1 : 0;
+        changeHighlight(collection[index]);
+      }
+      if (isVirtual.value) return virtualKeydownHook.trigger(event);
+    }
+    function handleMultipleReplace(event, targetEl) {
+      var _a;
+      if (isVirtual.value || props.selectionBehavior !== "replace" || !multiple.value || !Array.isArray(modelValue.value)) return;
+      const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+      if (isMetaKey && !event.shiftKey) return;
+      if (event.shiftKey) {
+        const collection = getItems().filter((i) => i.ref.dataset.disabled !== "");
+        let lastValue = (_a = collection.find((i) => i.ref === targetEl)) == null ? void 0 : _a.value;
+        if (event.key === kbd.END) lastValue = collection[collection.length - 1].value;
+        else if (event.key === kbd.HOME) lastValue = collection[0].value;
+        if (!lastValue || !firstValue.value) return;
+        const values = findValuesBetween(collection.map((i) => i.value), firstValue.value, lastValue);
+        modelValue.value = values;
+      }
+    }
+    async function highlightSelected(event) {
+      await nextTick();
+      if (isVirtual.value) virtualFocusHook.trigger(event);
+      else {
+        const collection = getCollectionItem();
+        const item = collection.find((i) => i.dataset.state === "checked");
+        if (item) changeHighlight(item);
+        else if (collection.length) changeHighlight(collection[0]);
+      }
+    }
+    watch(modelValue, () => {
+      if (!isUserAction.value) nextTick(() => {
+        highlightSelected();
+      });
+    }, {
+      immediate: true,
+      deep: true
+    });
+    __expose({
+      highlightedElement,
+      highlightItem,
+      highlightFirstItem,
+      highlightSelected,
+      getItems
+    });
+    provideListboxRootContext({
+      modelValue,
+      onValueChange,
+      multiple,
+      orientation,
+      dir,
+      disabled,
+      highlightOnHover,
+      highlightedElement,
+      isVirtual,
+      virtualFocusHook,
+      virtualKeydownHook,
+      virtualHighlightHook,
+      by: props.by,
+      firstValue,
+      selectionBehavior,
+      focusable,
+      onLeave,
+      onEnter,
+      changeHighlight,
+      onKeydownEnter,
+      onKeydownNavigation,
+      onKeydownTypeAhead,
+      onCompositionStart,
+      onCompositionEnd,
+      highlightFirstItem
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        ref_key: "primitiveElement",
+        ref: primitiveElement,
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        dir: unref(dir),
+        "data-disabled": unref(disabled) ? "" : void 0,
+        onPointerleave: onLeave,
+        onFocusout: _cache[0] || (_cache[0] = async (event) => {
+          const target = event.relatedTarget || event.target;
+          await nextTick();
+          if (highlightedElement.value && unref(currentElement) && !unref(currentElement).contains(target)) onLeave(event);
+        })
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) }), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+          key: 0,
+          name: _ctx.name,
+          value: unref(modelValue),
+          disabled: unref(disabled),
+          required: _ctx.required
+        }, null, 8, [
+          "name",
+          "value",
+          "disabled",
+          "required"
+        ])) : createCommentVNode("v-if", true)]),
+        _: 3
+      }, 8, [
+        "as",
+        "as-child",
+        "dir",
+        "data-disabled"
+      ]);
+    };
+  }
+});
+var ListboxRoot_default = ListboxRoot_vue_vue_type_script_setup_true_lang_default;
+var ListboxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxContent",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const { CollectionSlot } = useCollection();
+    const rootContext = injectListboxRootContext();
+    const isClickFocus = refAutoReset(false, 10);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionSlot), null, {
+        default: withCtx(() => [createVNode(unref(Primitive), {
+          role: "listbox",
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          tabindex: unref(rootContext).focusable.value ? unref(rootContext).highlightedElement.value ? "-1" : "0" : "-1",
+          "aria-orientation": unref(rootContext).orientation.value,
+          "aria-multiselectable": !!unref(rootContext).multiple.value,
+          "data-orientation": unref(rootContext).orientation.value,
+          onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => isClickFocus.value = true, ["left"])),
+          onFocus: _cache[1] || (_cache[1] = (ev) => {
+            if (unref(isClickFocus)) return;
+            unref(rootContext).onEnter(ev);
+          }),
+          onKeydown: [
+            _cache[2] || (_cache[2] = withKeys((event) => {
+              if (unref(rootContext).orientation.value === "vertical" && (event.key === "ArrowLeft" || event.key === "ArrowRight") || unref(rootContext).orientation.value === "horizontal" && (event.key === "ArrowUp" || event.key === "ArrowDown")) return;
+              event.preventDefault();
+              unref(rootContext).focusable.value && unref(rootContext).onKeydownNavigation(event);
+            }, [
+              "down",
+              "up",
+              "left",
+              "right",
+              "home",
+              "end"
+            ])),
+            withKeys(unref(rootContext).onKeydownEnter, ["enter"]),
+            unref(rootContext).onKeydownTypeAhead
+          ]
+        }, {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 8, [
+          "as",
+          "as-child",
+          "tabindex",
+          "aria-orientation",
+          "aria-multiselectable",
+          "data-orientation",
+          "onKeydown"
+        ])]),
+        _: 3
+      });
+    };
+  }
+});
+var ListboxContent_default = ListboxContent_vue_vue_type_script_setup_true_lang_default;
+var ListboxFilter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxFilter",
+  props: {
+    modelValue: {
+      type: String,
+      required: false
+    },
+    autoFocus: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "input"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const modelValue = useVModel(props, "modelValue", emits, {
+      defaultValue: "",
+      passive: props.modelValue === void 0
+    });
+    const rootContext = injectListboxRootContext();
+    const { primitiveElement, currentElement } = usePrimitiveElement();
+    const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
+    const activedescendant = ref();
+    watchSyncEffect(() => {
+      var _a;
+      return activedescendant.value = (_a = rootContext.highlightedElement.value) == null ? void 0 : _a.id;
+    });
+    onMounted(() => {
+      rootContext.focusable.value = false;
+      setTimeout(() => {
+        var _a;
+        if (props.autoFocus) (_a = currentElement.value) == null ? void 0 : _a.focus();
+      }, 1);
+    });
+    onUnmounted(() => {
+      rootContext.focusable.value = true;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        ref_key: "primitiveElement",
+        ref: primitiveElement,
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        value: unref(modelValue),
+        disabled: disabled.value ? "" : void 0,
+        "data-disabled": disabled.value ? "" : void 0,
+        "aria-disabled": disabled.value ?? void 0,
+        "aria-activedescendant": activedescendant.value,
+        type: "text",
+        onKeydown: [withKeys(withModifiers(unref(rootContext).onKeydownNavigation, ["prevent"]), [
+          "down",
+          "up",
+          "home",
+          "end"
+        ]), withKeys(unref(rootContext).onKeydownEnter, ["enter"])],
+        onInput: _cache[0] || (_cache[0] = (event) => {
+          modelValue.value = event.target.value;
+          unref(rootContext).highlightFirstItem();
+        }),
+        onCompositionstart: unref(rootContext).onCompositionStart,
+        onCompositionend: unref(rootContext).onCompositionEnd
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) })]),
+        _: 3
+      }, 8, [
+        "as",
+        "as-child",
+        "value",
+        "disabled",
+        "data-disabled",
+        "aria-disabled",
+        "aria-activedescendant",
+        "onKeydown",
+        "onCompositionstart",
+        "onCompositionend"
+      ]);
+    };
+  }
+});
+var ListboxFilter_default = ListboxFilter_vue_vue_type_script_setup_true_lang_default;
+const [injectListboxGroupContext, provideListboxGroupContext] = createContext("ListboxGroup");
+var ListboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxGroup",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const id = useId(void 0, "reka-listbox-group");
+    provideListboxGroupContext({ id });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({ role: "group" }, props, { "aria-labelledby": unref(id) }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["aria-labelledby"]);
+    };
+  }
+});
+var ListboxGroup_default = ListboxGroup_vue_vue_type_script_setup_true_lang_default;
+var ListboxGroupLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxGroupLabel",
+  props: {
+    for: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "div"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const groupContext = injectListboxGroupContext({ id: "" });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(props, { id: unref(groupContext).id }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["id"]);
+    };
+  }
+});
+var ListboxGroupLabel_default = ListboxGroupLabel_vue_vue_type_script_setup_true_lang_default;
+const LISTBOX_SELECT = "listbox.select";
+const [injectListboxItemContext, provideListboxItemContext] = createContext("ListboxItem");
+var ListboxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ListboxItem",
+  props: {
+    value: {
+      type: null,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "div"
+    }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const id = useId(void 0, "reka-listbox-item");
+    const { CollectionItem } = useCollection();
+    const { forwardRef, currentElement } = useForwardExpose();
+    const rootContext = injectListboxRootContext();
+    const isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value);
+    const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by));
+    const disabled = computed(() => rootContext.disabled.value || props.disabled);
+    async function handleSelect(ev) {
+      emits("select", ev);
+      if (ev == null ? void 0 : ev.defaultPrevented) return;
+      if (!disabled.value && ev) {
+        rootContext.onValueChange(props.value);
+        rootContext.changeHighlight(currentElement.value);
+      }
+    }
+    function handleSelectCustomEvent(ev) {
+      const eventDetail = {
+        originalEvent: ev,
+        value: props.value
+      };
+      handleAndDispatchCustomEvent(LISTBOX_SELECT, handleSelect, eventDetail);
+    }
+    provideListboxItemContext({ isSelected });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionItem), { value: _ctx.value }, {
+        default: withCtx(() => [withMemo([isHighlighted.value, isSelected.value], () => createVNode(unref(Primitive), mergeProps({ id: unref(id) }, _ctx.$attrs, {
+          ref: unref(forwardRef),
+          role: "option",
+          tabindex: unref(rootContext).focusable.value ? isHighlighted.value ? "0" : "-1" : -1,
+          "aria-selected": isSelected.value,
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          disabled: disabled.value ? "" : void 0,
+          "data-disabled": disabled.value ? "" : void 0,
+          "data-highlighted": isHighlighted.value ? "" : void 0,
+          "data-state": isSelected.value ? "checked" : "unchecked",
+          onClick: handleSelectCustomEvent,
+          onKeydown: withKeys(withModifiers(handleSelectCustomEvent, ["prevent"]), ["space"]),
+          onPointermove: _cache[0] || (_cache[0] = () => {
+            if (unref(rootContext).highlightedElement.value === unref(currentElement)) return;
+            if (unref(rootContext).highlightOnHover.value && !unref(rootContext).focusable.value) unref(rootContext).changeHighlight(unref(currentElement), false);
+          })
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, [
+          "id",
+          "tabindex",
+          "aria-selected",
+          "as",
+          "as-child",
+          "disabled",
+          "data-disabled",
+          "data-highlighted",
+          "data-state",
+          "onKeydown"
+        ]), _cache, 1)]),
+        _: 3
+      }, 8, ["value"]);
+    };
+  }
+});
+var ListboxItem_default = ListboxItem_vue_vue_type_script_setup_true_lang_default;
+/**
+ * @license lucide-vue-next v1.0.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Search = createLucideIcon("search", [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "Command",
+  props: {
+    modelValue: { default: "" },
+    defaultValue: {},
+    multiple: { type: Boolean },
+    orientation: {},
+    dir: {},
+    disabled: { type: Boolean },
+    selectionBehavior: {},
+    highlightOnHover: { type: Boolean },
+    by: {},
+    asChild: { type: Boolean },
+    as: {},
+    name: {},
+    required: { type: Boolean },
+    class: {}
+  },
+  emits: ["update:modelValue", "highlight", "entryFocus", "leave"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const allItems = ref(/* @__PURE__ */ new Map());
+    const allGroups = ref(/* @__PURE__ */ new Map());
+    const { contains } = useFilter({ sensitivity: "base" });
+    const filterState = reactive({
+      search: "",
+      filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: /* @__PURE__ */ new Map(),
+        /** Set of groups with at least one visible item. */
+        groups: /* @__PURE__ */ new Set()
+      }
+    });
+    function filterItems() {
+      if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size;
+        return;
+      }
+      filterState.filtered.groups = /* @__PURE__ */ new Set();
+      let itemCount = 0;
+      for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search);
+        filterState.filtered.items.set(id, score ? 1 : 0);
+        if (score)
+          itemCount++;
+      }
+      for (const [groupId, group] of allGroups.value) {
+        for (const itemId of group) {
+          if (filterState.filtered.items.get(itemId) > 0) {
+            filterState.filtered.groups.add(groupId);
+            break;
+          }
+        }
+      }
+      filterState.filtered.count = itemCount;
+    }
+    watch(() => filterState.search, () => {
+      filterItems();
+    });
+    provideCommandContext({
+      allItems,
+      allGroups,
+      filterState
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ListboxRoot_default), mergeProps({ "data-slot": "command" }, unref(forwarded), {
+        class: unref(cn)("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded transition-colors duration-300 ease-in-out", props.class)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "CommandDialog",
+  props: {
+    open: { type: Boolean },
+    defaultOpen: { type: Boolean },
+    modal: { type: Boolean },
+    title: { default: "Command Palette" },
+    description: { default: "Search for a command to run..." }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$9), normalizeProps(guardReactiveProps(unref(forwarded))), {
+        default: withCtx((slotProps) => [
+          createVNode(unref(_sfc_main$a), { class: "overflow-hidden p-0" }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$b), { class: "sr-only" }, {
+                default: withCtx(() => [
+                  createVNode(unref(_sfc_main$c), null, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.title), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(_sfc_main$d), null, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.description), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$8, null, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 2
+          }, 1024)
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "CommandEmpty",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const { filterState } = useCommand();
+    const isRender = computed(
+      () => !!filterState.search && filterState.filtered.count === 0
+    );
+    return (_ctx, _cache) => {
+      return isRender.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
+        key: 0,
+        "data-slot": "command-empty"
+      }, unref(delegatedProps), {
+        class: unref(cn)("py-6 text-center text-sm", props.class)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "p-2" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "CommandGroup",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {},
+    heading: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const { allGroups, filterState } = useCommand();
+    const id = useId();
+    const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id));
+    provideCommandGroupContext({ id });
+    onMounted(() => {
+      if (!allGroups.value.has(id))
+        allGroups.value.set(id, /* @__PURE__ */ new Set());
+    });
+    onUnmounted(() => {
+      allGroups.value.delete(id);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ListboxGroup_default), mergeProps(unref(delegatedProps), {
+        id: unref(id),
+        "data-slot": "command-group",
+        class: unref(cn)("text-foreground overflow-hidden", props.class),
+        hidden: isRender.value ? void 0 : true
+      }), {
+        default: withCtx(() => [
+          _ctx.heading ? (openBlock(), createBlock(unref(ListboxGroupLabel_default), {
+            key: 0,
+            "data-slot": "command-group-heading",
+            class: "border-b border-(--border-light) px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-(--text-secondary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark)"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.heading), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_1$2, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "class", "hidden"]);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  "data-slot": "command-input-wrapper",
+  class: "flex h-9 items-center gap-2 border-b px-3"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "CommandInput",
+  props: {
+    modelValue: {},
+    autoFocus: { type: Boolean },
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwardedProps = useForwardProps(delegatedProps);
+    const { filterState } = useCommand();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(unref(Search), { class: "size-4 shrink-0 opacity-50" }),
+        createVNode(unref(ListboxFilter_default), mergeProps({ ...unref(forwardedProps), ..._ctx.$attrs }, {
+          modelValue: unref(filterState).search,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(filterState).search = $event),
+          "data-slot": "command-input",
+          "auto-focus": "",
+          class: unref(cn)("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", props.class)
+        }), null, 16, ["modelValue", "class"])
+      ]);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "CommandItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const id = useId();
+    const { filterState, allItems, allGroups } = useCommand();
+    const groupContext = useCommandGroup();
+    const isRender = computed(() => {
+      if (!filterState.search) {
+        return true;
+      } else {
+        const filteredCurrentItem = filterState.filtered.items.get(id);
+        if (filteredCurrentItem === void 0) {
+          return true;
+        }
+        return filteredCurrentItem > 0;
+      }
+    });
+    const itemRef = ref();
+    const currentElement = useCurrentElement(itemRef);
+    onMounted(() => {
+      var _a, _b;
+      if (!(currentElement.value instanceof HTMLElement))
+        return;
+      allItems.value.set(id, currentElement.value.textContent ?? (((_a = props.value) == null ? void 0 : _a.toString()) ?? ""));
+      const groupId = groupContext == null ? void 0 : groupContext.id;
+      if (groupId) {
+        if (!allGroups.value.has(groupId)) {
+          allGroups.value.set(groupId, /* @__PURE__ */ new Set([id]));
+        } else {
+          (_b = allGroups.value.get(groupId)) == null ? void 0 : _b.add(id);
+        }
+      }
+    });
+    onUnmounted(() => {
+      allItems.value.delete(id);
+    });
+    return (_ctx, _cache) => {
+      return isRender.value ? (openBlock(), createBlock(unref(ListboxItem_default), mergeProps({ key: 0 }, unref(forwarded), {
+        id: unref(id),
+        ref_key: "itemRef",
+        ref: itemRef,
+        "data-slot": "command-item",
+        class: unref(cn)("relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-medium text-(--text-secondary-light) outline-hidden transition-colors duration-200 select-none data-[highlighted]:bg-(--bg-selected-light) data-[highlighted]:text-(--text-primary-light) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-(--text-secondary-dark) dark:data-[highlighted]:bg-(--bg-selected-dark) dark:data-[highlighted]:text-(--text-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-current", props.class),
+        onSelect: _cache[0] || (_cache[0] = () => {
+          unref(filterState).search = "";
+        })
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["id", "class"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = { role: "presentation" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "CommandList",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardProps(delegatedProps);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ListboxContent_default), mergeProps({ "data-slot": "command-list" }, unref(forwarded), {
+        class: unref(cn)("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", props.class)
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "CommandSeparator",
+  props: {
+    orientation: {},
+    decorative: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Separator_default), mergeProps({ "data-slot": "command-separator" }, unref(delegatedProps), {
+        class: unref(cn)("bg-border -mx-1 h-px", props.class)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CommandShortcut",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        "data-slot": "command-shortcut",
+        class: normalizeClass(unref(cn)("text-muted-foreground ml-auto text-xs tracking-widest", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const [useCommand, provideCommandContext] = createContext("Command");
+const [useCommandGroup, provideCommandGroupContext] = createContext("CommandGroup");
+export {
+  _sfc_main$8 as Command,
+  _sfc_main$7 as CommandDialog,
+  _sfc_main$6 as CommandEmpty,
+  _sfc_main$5 as CommandGroup,
+  _sfc_main$4 as CommandInput,
+  _sfc_main$3 as CommandItem,
+  _sfc_main$2 as CommandList,
+  _sfc_main$1 as CommandSeparator,
+  _sfc_main as CommandShortcut,
+  provideCommandContext,
+  provideCommandGroupContext,
+  useCommand,
+  useCommandGroup
+};