<script setup lang="ts">
import type { KbxFieldState } from '@kbx/contracts'
defineProps<{modelValue?:string|number|null;value:string|number;name:string;label:string;disabled?:boolean;state?:KbxFieldState}>()
const emit=defineEmits<{ 'update:modelValue':[string|number] }>()
const uid=`kbx-radio-${Math.random().toString(36).slice(2)}`
</script>
<template><label class="kbx-radio" :for="uid" :data-state="state??'default'"><input :id="uid" type="radio" :name="name" :value="value" :checked="modelValue===value" :disabled="disabled" @change="emit('update:modelValue',value)"><span>{{label}}</span></label></template>
<style scoped>.kbx-radio{min-height:var(--kbx-control-height);display:inline-flex;align-items:center;gap:var(--kbx-space-2);font-size:var(--kbx-font-md)}.kbx-radio input{width:var(--kbx-checkbox-size);height:var(--kbx-checkbox-size);margin:0}.kbx-radio[data-state="changed"] span{color:var(--kbx-color-primary)}.kbx-radio[data-state="warning"] span{color:var(--kbx-color-warning-text)}.kbx-radio[data-state="ai-suggested"] span{color:var(--kbx-color-ai-text)}</style>
