<script setup lang="ts">
import { type InputHTMLAttributes, useAttrs } from "vue";
import { cn } from "@/lib/utils";

interface Props extends /* @vue-ignore */ InputHTMLAttributes {
  class?: string;
  modelValue?: string | number;
}

const props = defineProps<Props>();
defineEmits<{ "update:modelValue": [value: string] }>();

const attrs = useAttrs();
</script>

<template>
  <input
    v-bind="{ ...attrs, ...props }"
    :value="modelValue"
    :class="
      cn(
        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
    @input="
      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
    "
  />
</template>
