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

<template>
  <textarea
    v-model="modelValue"
    data-slot="textarea"
    :placeholder="props.placeholder"
    :class="cn(
  'placeholder:text-zinc-300 text-zinc-700 border-zinc-200 flex field-sizing-content min-h-16 w-full rounded border bg-transparent px-3 py-2 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
)"
  />
</template>
