From f69a3b0c6580504e9c1136cc52ccb386dcbce983 Mon Sep 17 00:00:00 2001
From: Matthew L McPeak <m.mcpeak98@icloud.com>
Date: Mon, 13 Jul 2026 18:16:17 -0400
Subject: [PATCH] refactor: rewrite the Select root family without reka-ui

Root/Value/Label/Group/Separator/ItemText now share a small
provide/inject context. SelectValue's label lookup is backed by an
itemLabels map that SelectItem populates on mount (next commit) --
matching the existing behavior where the trigger's displayed label
only resolves once the dropdown has opened at least once.
---
 .../src/components/ui/select/Select.vue       | 51 ++++++++++++++-----
 .../src/components/ui/select/SelectGroup.vue  | 19 ++-----
 .../components/ui/select/SelectItemText.vue   | 14 +----
 .../src/components/ui/select/SelectLabel.vue  | 15 ++----
 .../components/ui/select/SelectSeparator.vue  | 17 ++-----
 .../src/components/ui/select/SelectValue.vue  | 15 +++---
 .../src/components/ui/select/context.ts       | 14 +++++
 7 files changed, 76 insertions(+), 69 deletions(-)
 create mode 100644 packages/library/src/components/ui/select/context.ts

diff --git a/packages/library/src/components/ui/select/Select.vue b/packages/library/src/components/ui/select/Select.vue
index c94bbe8..bf60823 100644
--- a/packages/library/src/components/ui/select/Select.vue
+++ b/packages/library/src/components/ui/select/Select.vue
@@ -1,19 +1,46 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "reka-ui"
-import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+import { computed, provide, reactive, ref, useId } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { SelectContextKey } from './context'
 
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
+const props = defineProps<{
+  modelValue?: string
+  defaultValue?: string
+  disabled?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+}>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:open': [value: boolean]
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emit, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+const open = useVModel(props, 'open', emit, {
+  passive: true,
+  defaultValue: props.defaultOpen ?? false,
+})
+
+const disabled = computed(() => props.disabled ?? false)
+const triggerRef = ref<HTMLElement | null>(null)
+const itemLabels = reactive(new Map<string, string>())
+
+provide(SelectContextKey, {
+  open,
+  modelValue,
+  disabled,
+  triggerRef,
+  contentId: `select-content-${useId()}`,
+  itemLabels,
+  registerLabel: (value: string, label: string) => { itemLabels.set(value, label) },
+  unregisterLabel: (value: string) => { itemLabels.delete(value) },
+})
 </script>
 
 <template>
-  <SelectRoot
-    v-slot="slotProps"
-    data-slot="select"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </SelectRoot>
+  <slot />
 </template>
diff --git a/packages/library/src/components/ui/select/SelectGroup.vue b/packages/library/src/components/ui/select/SelectGroup.vue
index 1662d6c..2586d79 100644
--- a/packages/library/src/components/ui/select/SelectGroup.vue
+++ b/packages/library/src/components/ui/select/SelectGroup.vue
@@ -1,21 +1,12 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectGroup } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectGroup
-    data-slot="select-group"
-    v-bind="delegatedProps"
-    :class="cn('scroll-my-1 p-1', props.class)"
-  >
+  <div data-slot="select-group" role="group" :class="cn('scroll-my-1 p-1', props.class)">
     <slot />
-  </SelectGroup>
+  </div>
 </template>
diff --git a/packages/library/src/components/ui/select/SelectItemText.vue b/packages/library/src/components/ui/select/SelectItemText.vue
index b6700b1..91cf967 100644
--- a/packages/library/src/components/ui/select/SelectItemText.vue
+++ b/packages/library/src/components/ui/select/SelectItemText.vue
@@ -1,15 +1,3 @@
-<script setup lang="ts">
-import type { SelectItemTextProps } from "reka-ui"
-import { SelectItemText } from "reka-ui"
-
-const props = defineProps<SelectItemTextProps>()
-</script>
-
 <template>
-  <SelectItemText
-    data-slot="select-item-text"
-    v-bind="props"
-  >
-    <slot />
-  </SelectItemText>
+  <span data-slot="select-item-text"><slot /></span>
 </template>
diff --git a/packages/library/src/components/ui/select/SelectLabel.vue b/packages/library/src/components/ui/select/SelectLabel.vue
index a3dd751..e0ee986 100644
--- a/packages/library/src/components/ui/select/SelectLabel.vue
+++ b/packages/library/src/components/ui/select/SelectLabel.vue
@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SelectLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectLabel
-    data-slot="select-label"
-    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
-  >
+  <div data-slot="select-label" :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)">
     <slot />
-  </SelectLabel>
+  </div>
 </template>
diff --git a/packages/library/src/components/ui/select/SelectSeparator.vue b/packages/library/src/components/ui/select/SelectSeparator.vue
index 3279645..ca8cb5a 100644
--- a/packages/library/src/components/ui/select/SelectSeparator.vue
+++ b/packages/library/src/components/ui/select/SelectSeparator.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectSeparator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectSeparator
-    data-slot="select-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
-  />
+  <div data-slot="select-separator" role="separator" :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)" />
 </template>
diff --git a/packages/library/src/components/ui/select/SelectValue.vue b/packages/library/src/components/ui/select/SelectValue.vue
index d5ce58b..f54bceb 100644
--- a/packages/library/src/components/ui/select/SelectValue.vue
+++ b/packages/library/src/components/ui/select/SelectValue.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { SelectValueProps } from "reka-ui"
-import { SelectValue } from "reka-ui"
+import { inject } from 'vue'
+import { SelectContextKey } from './context'
 
-const props = defineProps<SelectValueProps>()
+const props = defineProps<{ placeholder?: string }>()
+const context = inject(SelectContextKey)!
 </script>
 
 <template>
-  <SelectValue
+  <span
     data-slot="select-value"
-    v-bind="props"
+    :data-placeholder="context.modelValue.value ? undefined : placeholder"
   >
-    <slot />
-  </SelectValue>
+    <slot>{{ context.modelValue.value !== undefined ? context.itemLabels.get(context.modelValue.value) : placeholder }}</slot>
+  </span>
 </template>
diff --git a/packages/library/src/components/ui/select/context.ts b/packages/library/src/components/ui/select/context.ts
new file mode 100644
index 0000000..e99fcd4
--- /dev/null
+++ b/packages/library/src/components/ui/select/context.ts
@@ -0,0 +1,14 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface SelectContext {
+  open: Ref<boolean>
+  modelValue: Ref<string | undefined>
+  disabled: Ref<boolean>
+  triggerRef: Ref<HTMLElement | null>
+  contentId: string
+  itemLabels: Map<string, string>
+  registerLabel: (value: string, label: string) => void
+  unregisterLabel: (value: string) => void
+}
+
+export const SelectContextKey: InjectionKey<SelectContext> = Symbol('SelectContext')