<script setup lang="ts">
import type { KbxFieldState } from '@kbx/contracts'
const props=withDefaults(defineProps<{modelValue?:boolean;label:string;disabled?:boolean;readonly?:boolean;helpText?:string;state?:KbxFieldState}>(),{modelValue:false,disabled:false,readonly:false,helpText:'',state:'default'})
const emit=defineEmits<{ 'update:modelValue':[boolean] }>()
const uid=`kbx-checkbox-${Math.random().toString(36).slice(2)}`
function change(event:Event){if(props.readonly||props.disabled)return;emit('update:modelValue',(event.currentTarget as HTMLInputElement).checked)}
function preventReadonly(event:Event){if(props.readonly)event.preventDefault()}
</script>
<template><label class="kbx-checkbox" :data-state="state" :data-readonly="readonly||undefined"><input :id="uid" type="checkbox" :checked="modelValue" :disabled="disabled" :aria-readonly="readonly||undefined" @click="preventReadonly" @keydown.space="preventReadonly" @change="change"><span>{{label}}</span><small v-if="helpText">{{helpText}}</small></label></template>
<style scoped>.kbx-checkbox{min-height:var(--kbx-control-height);display:grid;grid-template-columns:var(--kbx-checkbox-track) auto minmax(0,1fr);align-items:center;gap:var(--kbx-space-2);font-size:var(--kbx-font-md)}.kbx-checkbox input{width:var(--kbx-checkbox-size);height:var(--kbx-checkbox-size);margin:0}.kbx-checkbox small{color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}.kbx-checkbox[data-readonly="true"]{color:var(--kbx-color-text-muted)}.kbx-checkbox[data-state="changed"] span{color:var(--kbx-color-primary)}.kbx-checkbox[data-state="warning"] span{color:var(--kbx-color-warning-text)}.kbx-checkbox[data-state="ai-suggested"] span{color:var(--kbx-color-ai-text)}</style>
