feat(component): New radio component (#161)

* radio initial

* initial radio

* Update src/components/Radio/Radio.vue

* Update src/components/Radio/Radio.vue

* Update docs/components/radio/examples/ListRadio.vue

* Update docs/components/radio/examples/LinkRadio.vue

* Update docs/components/radio/examples/InlineRadio.vue

* Update docs/components/radio/examples/HorizontalListRadio.vue

* Update docs/components/radio/examples/DisabledRadio.vue

* Update docs/components/radio/examples/DefaultRadio.vue

* Update docs/components/radio/examples/BorderedRadio.vue

* Update src/components/Radio/Radio.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

src/components/Radio/Radio.vue

@@ -0,0 +1,40 @@
+<template>
+  <label class="flex w-[100%] items-center">
+    <input type="radio" v-model="model" :disabled="disabled" :name="name" :value="value"
+      :class="radioClasses">
+    <span :class="labelClasses">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRadioClasses } from './composables/useRadioClasses'
+
+interface RadioProps {
+  modelValue?: string;
+  name?: string;
+  value?: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  value: '',
+  name: '',
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { radioClasses, labelClasses } = useRadioClasses()
+</script>

src/components/Radio/composables/useRadioClasses.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+// Radio
+export const radioDefaultClasses = 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+export const radioLabelClasses = 'm-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300'
+
+export function useRadioClasses() {
+  const radioClasses = computed(() => {
+    return radioDefaultClasses
+  })
+
+  const labelClasses = computed(() => {
+    return radioLabelClasses
+  })
+
+  return {
+    radioClasses,
+    labelClasses,
+  }
+}

src/index.ts

@@ -60,4 +60,6 @@ export { default as Toggle } from './components/Toggle/Toggle.vue'
 
 export { default as Range } from './components/Range/Range.vue'
 
+export { default as Radio } from './components/Radio/Radio.vue'
+
 export * from './composables'