<script setup>
import { useVModel } from "@vueuse/core";
const props = defineProps({
  modelValue: { type: String, required: false, default: "" },
  disabled: { type: Boolean, required: false, default: false },
  name: { type: String, required: false },
  value: { type: String, required: false }
});
const emit = defineEmits([]);
const model = useVModel(props, "modelValue", emit, { passive: true });
</script>

<template>
  <label
    class="n-radio inline-flex select-none items-center hover:n-radio-hover n-disabled:n-disabled"
    :checked="model === value || null"
    :disabled="disabled || null"
  >
    <input
      v-model="model"
      type="radio"
      class="peer absolute op0"
      :disabled="disabled"
      :name="name"
      :value="value"
      @keypress.enter="model = value"
    >
    <span class="n-radio-box n-transition n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
      <div class="n-radio-inner n-transition n-checked:n-radio-inner-checked" />
    </span>
    <span><slot /></span>
  </label>
</template>
