From 8175db2cdedb72ca4f93ae2f34392fb1bdea229b Mon Sep 17 00:00:00 2001
From: Matthew L McPeak <m.mcpeak98@icloud.com>
Date: Mon, 13 Jul 2026 18:12:38 -0400
Subject: [PATCH] refactor: rewrite Checkbox and Switch without reka-ui

Both become plain role="checkbox"/role="switch" buttons driven by
useVModel, matching the existing Input.vue controlled-value pattern.
Classes and data-state/aria-checked contract are unchanged.
---
 .../src/components/ui/checkbox/Checkbox.vue   | 50 ++++++++++-----
 .../src/components/ui/switch/Switch.vue       | 64 +++++++++++--------
 2 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/packages/library/src/components/ui/checkbox/Checkbox.vue b/packages/library/src/components/ui/checkbox/Checkbox.vue
index f370cb2..29d285d 100644
--- a/packages/library/src/components/ui/checkbox/Checkbox.vue
+++ b/packages/library/src/components/ui/checkbox/Checkbox.vue
@@ -1,34 +1,50 @@
 <script setup lang="ts">
-import { CheckIcon } from '@lucide/vue';
+import { CheckIcon } from '@lucide/vue'
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+const props = defineProps<{
+  modelValue?: boolean
+  defaultValue?: boolean
+  disabled?: boolean
+  required?: boolean
+  class?: HTMLAttributes['class']
+}>()
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const checked = useVModel(props, 'modelValue', emit, {
+  passive: true,
+  defaultValue: props.defaultValue ?? false,
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+function toggle() {
+  if (props.disabled) return
+  checked.value = !checked.value
+}
 </script>
 
 <template>
-  <CheckboxRoot
-    v-slot="slotProps"
+  <button
+    type="button"
+    role="checkbox"
     data-slot="checkbox"
-    v-bind="forwarded"
+    :aria-checked="checked"
+    :aria-required="required"
+    :data-state="checked ? 'checked' : 'unchecked'"
+    :disabled="disabled"
     :class="cn('border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    @click="toggle"
   >
-    <CheckboxIndicator
+    <span
+      v-if="checked"
       data-slot="checkbox-indicator"
       class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
     >
-      <slot v-bind="slotProps">
+      <slot>
         <CheckIcon />
       </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
+    </span>
+  </button>
 </template>
diff --git a/packages/library/src/components/ui/switch/Switch.vue b/packages/library/src/components/ui/switch/Switch.vue
index f56f98b..8b5dcdb 100644
--- a/packages/library/src/components/ui/switch/Switch.vue
+++ b/packages/library/src/components/ui/switch/Switch.vue
@@ -1,44 +1,56 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SwitchRoot,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<SwitchRootProps & {
-  class?: HTMLAttributes["class"]
-  size?: "sm" | "default"
-}>(), {
-  size: "default",
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    defaultValue?: boolean
+    disabled?: boolean
+    required?: boolean
+    class?: HTMLAttributes['class']
+    size?: 'sm' | 'default'
+  }>(),
+  { size: 'default' },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+const checked = useVModel(props, 'modelValue', emit, {
+  passive: true,
+  defaultValue: props.defaultValue ?? false,
 })
 
-const emits = defineEmits<SwitchRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "size")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+function toggle() {
+  if (props.disabled) return
+  checked.value = !checked.value
+}
 </script>
 
 <template>
-  <SwitchRoot
-    v-slot="slotProps"
+  <button
+    type="button"
+    role="switch"
     data-slot="switch"
     :data-size="size"
-    v-bind="forwarded"
+    :aria-checked="checked"
+    :aria-required="required"
+    :data-state="checked ? 'checked' : 'unchecked'"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="disabled"
     :class="cn(
       'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
       props.class,
     )"
+    @click="toggle"
   >
-    <SwitchThumb
+    <span
       data-slot="switch-thumb"
+      :data-state="checked ? 'checked' : 'unchecked'"
       class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
     >
-      <slot name="thumb" v-bind="slotProps" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <slot name="thumb" />
+    </span>
+  </button>
 </template>