<script setup>
import { useVModel } from "@vueuse/core";
import { Icon } from "@iconify/vue";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiNativeSelect", inheritAttrs: false });
const props = defineProps({
  defaultValue: { type: [String, Number], required: false },
  modelValue: { type: [String, Number], required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue
});
</script>

<template>
  <div
    data-slot="native-select"
    :class="cn('relative', props.class)"
  >
    <select
      v-model="modelValue"
      v-bind="$attrs"
      data-slot="native-select-trigger"
      :class="cn(
  'text-zinc-700 border-zinc-200 h-9 w-full min-w-0 appearance-none rounded border bg-transparent px-3 py-1 pr-8 text-base transition-colors ease-out duration-180 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
  'aria-invalid:border-red-400 hover:border-zinc-300 focus-visible:border-(--primary)',
  props.class
)"
    >
      <slot />
    </select>
    <Icon
      icon="lucide:chevron-down"
      data-slot="native-select-icon"
      class="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-zinc-500"
      aria-hidden="true"
    />
  </div>
</template>
