feat: Radio button element (refs #12)

package.json

@@ -52,6 +52,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.0.15",
     "@vueuse/core": "^10.6.1",
+    "nanoid": "^5.0.3",
     "tailwind-merge": "^1.14.0",
     "unplugin-auto-import": "^0.16.7"
   },

src/components/BuiRadio/BuiRadio.story.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import BuiRadio  from './BuiRadio.vue'
+import {reactive, ref} from 'vue'
+
+const model = ref("1")
+
+</script>
+
+<template>
+  <Story title="BuiRadio" :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="INFO">
+      {{`v-model value: ${model}`}}
+    </Variant>
+    <Variant title="Only radio">
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" />
+      </div>
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" />
+      </div>
+    </Variant>
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" >My Label <template #description>My description</template></BuiRadio>
+      </div>
+    </Variant>
+    <Variant title="Disabled">
+      <div class="p-2">
+        <BuiRadio :disabled="true" option-value="2" v-model="model" >My Label <template #description>My description</template></BuiRadio>
+      </div>
+    </Variant>
+    <Variant title="List">
+      <fieldset>
+        <div class="flex flex-col">
+          <BuiRadio groupName="options" option-value="1" v-model="model" >Option 1 </BuiRadio>
+          <BuiRadio  groupName="options" option-value="2" v-model="model">Option 2</BuiRadio>
+        </div>
+      </fieldset>
+    </Variant>
+  </Story>
+</template>

src/components/BuiRadio/BuiRadio.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { twJoin, twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
+import InactiveRadioIcon from '@/components/BuiRadio/svgComponents/InactiveRadioIcon.vue'
+import ActiveRadioIcon from '@/components/BuiRadio/svgComponents/ActiveRadioIcon.vue'
+import { nanoid } from 'nanoid'
+
+interface IBuiRadioProps {
+  disabled?: boolean | undefined
+  groupName?: string
+  optionValue: string
+  value: string
+}
+const props = withDefaults(defineProps<IBuiRadioProps>(), {
+  disabled: false
+})
+
+const emit = defineEmits(['input'])
+const model = computed({
+  get() {
+    return props.value
+  },
+  set(event) {
+    emit('input', event)
+  }
+})
+
+const id = nanoid(10)
+
+const disabledAttrValue = computed(() => {
+  return Object.keys(props).includes('disabled') && props.disabled !== false ? true : undefined
+})
+
+const baseLabelClasses = 'font-semibold leading-6 text-sm hover:cursor-pointer'
+const disabledLabelClasses = 'hover:!cursor-default text-gray-400'
+
+const baseDescriptionClasses = 'font-normal leading-4 text-xs '
+const disabledDescriptionClasses = 'text-gray-400'
+
+const finalClasses = computed(() => {
+  return {
+    labelClasses: twMerge(baseLabelClasses, !!disabledAttrValue.value && disabledLabelClasses),
+    descriptionClasses: twMerge(
+      baseDescriptionClasses,
+      !!disabledAttrValue.value && disabledDescriptionClasses
+    )
+  }
+})
+</script>
+<template>
+  <div class="flex flex-row gap-2 group">
+    <div class="pt-1">
+      <input
+        :id="id"
+        v-model="model"
+        type="radio"
+        :name="props.groupName"
+        :value="props.optionValue"
+        class="peer hidden"
+        :disabled="disabledAttrValue"
+      />
+      <label :for="id" class="hidden peer-checked:!block">
+        <ActiveRadioIcon :disabled="disabledAttrValue" />
+      </label>
+      <label class="block peer-checked:!hidden" :for="id">
+        <InactiveRadioIcon :disabled="disabledAttrValue" />
+      </label>
+    </div>
+    <label class="flex-1 flex flex-col" :for="id">
+      <div v-if="$slots.default" :class="finalClasses.labelClasses"><slot></slot></div>
+      <div v-if="$slots.description" :class="finalClasses.descriptionClasses">
+        <slot name="description"></slot>
+      </div>
+    </label>
+  </div>
+</template>

src/components/BuiRadio/svgComponents/ActiveRadioIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect x="2" y="2" width="12" height="12" rx="6" stroke-width="4" :class="rectClasses" />
+    />
+  </svg>
+</template>
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+const props = withDefaults(defineProps<{ disabled: boolean }>(), {
+  disabled: false
+})
+
+const rectClasses = twMerge(
+  'cursor-pointer stroke-primary-500 group-hover:stroke-primary-550  fill-white group-hover:fill-slate-150',
+  props.disabled &&
+    'cursor-default group-hover:stroke-primary-500 group-hover:fill-transparent opacity-[0.32] fill-transparent'
+)
+</script>

src/components/BuiRadio/svgComponents/InactiveRadioIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    class="group"
+  >
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" :class="rectClasses" />
+  </svg>
+</template>
+
+<style scoped>
+.bui-radiobutton:not(.disabled) {
+  fill-opacity: 0.16;
+  stroke-opacity: 1;
+}
+.group:hover .bui-radiobutton {
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
+.dark .group:hover .bui-radiobutton {
+  fill-opacity: 0.32;
+  stroke-opacity: 1;
+}
+
+.dark .bui-radiobutton.disabled {
+  fill-opacity: 0.16 !important;
+  stroke-opacity: 0.16 !important;
+}
+</style>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+const props = withDefaults(defineProps<{ disabled: boolean }>(), {
+  disabled: false
+})
+
+const rectClasses = twMerge(
+  'bui-radiobutton',
+  'dark:stroke-primary-500 dark:fill-primary-500  dark:group-hover:fill-primary-500 dark:group-hover:[.bui-radiobutton-hover]',
+  'cursor-pointer stroke-gray-300 fill-white group-hover:fill-gray-150',
+  props.disabled &&
+    'disabled cursor-default dark:fill-white dark:stroke-white dark:group-hover:fill-white fill-slate-200 group-hover:fill-slate-200'
+)
+</script>

tailwind.config.ts

@@ -28,6 +28,8 @@ module.exports = {
           500: '#292841'
         },
         slate: {
+          150: '#F0F3FF',
+          200: '#EBECEF',
           300: '#D0D3DA'
         },
         gray: {