<script setup lang="ts" generic="T extends string | number">
withDefaults(
  defineProps<{
    placeholder?: string
    disabled?: boolean
  }>(),
  {
    disabled: false,
  },
)

const value = defineModel<T>()

const inputRef = ref()

defineExpose({
  ref: inputRef,
})
</script>

<template>
  <div class="relative w-full lg-w-48">
    <input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
  </div>
</template>
