init

Initial mock up of the app

src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,42 @@
+<script setup>
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultChecked: { type: Boolean, required: false },
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  value: { type: String, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["update:checked"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <CheckboxIndicator
+      class="flex h-full w-full items-center justify-center text-current"
+    >
+      <CheckIcon class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>