<template>
  <input
    v-bind="$attrs"
    v-model="value"
    :class="$style.root"
  />
</template>

<style module lang="scss">
  .root {
    @apply bg-surface0 border-surface2 border rounded-lg focus:outline-none focus:border-blue-400 py-2 px-3;

    width: 100%;
    transition: 200ms ease border-color;
  }
</style>

<script setup lang="ts">
  import { useVModel } from "@vueuse/core"

  const props = defineProps<{
	  modelValue: string
  }>()

  const value = useVModel(props)
</script>