<script setup>
import { useVModel } from "@vueuse/core";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiInput" });
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 },
  placeholder: { type: String, required: false },
  treatEmptyAsDifferentStateFromNull: { type: Boolean, required: false }
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue
});
</script>

<template>
  <input
    v-model="modelValue"
    data-slot="input"
    :data-value="!treatEmptyAsDifferentStateFromNull ? !!modelValue : modelValue !== void 0"
    :placeholder="props.placeholder"
    :class="cn(
  'file:text-zinc-700 placeholder:text-zinc-300 text-zinc-700 border-zinc-200 h-9 w-full min-w-0 rounded border bg-transparent px-3 py-1 text-base transition-colors ease-out duration-180 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium 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
)"
  >
</template>
