feat: Checkbox element (refs #6)

src/components/BuiCheckbox/BuiCheckbox.story.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import BuiCheckbox from './BuiCheckbox.vue'
+import { ref } from 'vue'
+
+const model = ref(false)
+const model2 = ref(false)
+</script>
+
+<template>
+  <Story title="BuiCheckbox" :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="INFO">
+      {{ `v-model value: ${model}` }}
+      <br />
+      {{ `v-model option 2 value: ${model2}` }}
+    </Variant>
+    <Variant title="Only checkbox">
+      <div class="p-2">
+        <BuiCheckbox v-model="model" />
+      </div>
+    </Variant>
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiCheckbox v-model="model">
+          My Label
+          <template #description>My description</template>
+        </BuiCheckbox>
+      </div>
+    </Variant>
+    <Variant title="Disabled">
+      <div class="p-2">
+        <BuiCheckbox :disabled="true" v-model="model">
+          My Label
+          <template #description>My description</template>
+        </BuiCheckbox>
+      </div>
+    </Variant>
+    <Variant title="List">
+      <form ref="modelGeneral">
+        <div class="flex flex-col">
+          <BuiCheckbox groupName="options" option-name="option1" v-model="model"
+            >Option 1
+          </BuiCheckbox>
+          <BuiCheckbox groupName="options" option-name="option2" v-model="model2"
+            >Option 2</BuiCheckbox
+          >
+        </div>
+      </form>
+    </Variant>
+  </Story>
+</template>

src/components/BuiCheckbox/BuiCheckbox.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
+import InactiveCheckboxIcon from '@/components/BuiCheckbox/svgComponents/InactiveCheckboxIcon.vue'
+import ActiveCheckboxIcon from '@/components/BuiCheckbox/svgComponents/ActiveCheckboxIcon.vue'
+import { nanoid } from 'nanoid'
+
+interface IBuiRadioProps {
+  disabled?: boolean | undefined
+  groupName?: string
+  optionName?: string
+  value: boolean
+}
+const props = withDefaults(defineProps<IBuiRadioProps>(), {
+  disabled: false,
+  value: 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="checkbox"
+        :name="props.groupName"
+        :value="props.optionName"
+        class="peer hidden"
+        :disabled="disabledAttrValue"
+      />
+      <label :for="id" class="hidden peer-checked:!block">
+        <ActiveCheckboxIcon :disabled="disabledAttrValue" />
+      </label>
+      <label class="block peer-checked:!hidden" :for="id">
+        <InactiveCheckboxIcon :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/BuiCheckbox/svgComponents/ActiveCheckboxIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    :class="svgClasses"
+  >
+    <rect width="16" height="16" rx="2" :class="rectClasses" />
+    <path
+      d="M13 6L11.9489 5L6.73797 9.99291L4.05107 7.41844L3 8.41844L5.6943 10.9929H5.6869L6.73797 12L7.78905 10.9929H7.78164L13 6Z"
+      fill="white"
+    />
+  </svg>
+</template>
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+const props = withDefaults(defineProps<{ disabled: boolean }>(), {
+  disabled: false
+})
+
+const svgClasses = twMerge('cursor-pointer', props.disabled && 'opacity-[0.32] cursor-default')
+
+const rectClasses = twMerge(
+  'fill-primary-500 group-hover:fill-primary-550',
+  props.disabled && 'group-hover:fill-primary-500'
+)
+</script>

src/components/BuiCheckbox/svgComponents/InactiveCheckboxIcon.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect x="0.5" y="0.5" width="15" height="15" rx="1.5" :class="rectClasses" />
+  </svg>
+</template>
+
+<style scoped>
+.bui-checkbox:not(.disabled) {
+  fill-opacity: 0.16;
+  stroke-opacity: 1;
+}
+.group:hover .bui-checkbox {
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
+.dark .group:hover .bui-checkbox {
+  fill-opacity: 0.32;
+  stroke-opacity: 1;
+}
+
+.dark .bui-checkbox.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-checkbox',
+  'dark:stroke-primary-500 dark:fill-primary-500  dark:group-hover:fill-primary-500 dark:group-hover:[.bui-checkbox-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: {