<script setup>
import { cn } from "../../../utils/cn";
import { ListboxFilter } from "reka-ui";
import { useCommand } from "../command";
const props = defineProps({
  invalid: { type: Boolean, required: false }
});
const emits = defineEmits(["blur"]);
const { filterState } = useCommand();
function handleBlur(event) {
  filterState.search = "";
  emits("blur", event);
}
</script>

<template>
  <ListboxFilter
    v-model="filterState.search"
    data-slot="input-group-control"
    :data-value="!!filterState.search"
    :aria-invalid="props.invalid ? 'true' : void 0"
    :class="cn(
  'flex-1 px-2 rounded-none border-none bg-transparent shadow-none peer outline-none disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100'
)"
    @blur="handleBlur"
  />
</template>
