fixes: various bits fixed / improved based on fedback

src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [Boolean, String], required: false },
+  modelValue: { type: [Boolean, String, null], required: false },
+  disabled: { type: Boolean, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits(["update:modelValue"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>