chore: ⬆️ Upgrade to the latest Shadcn-Vue version

components/ui/select/Select.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "radix-vue";
-import { SelectRoot, useForwardPropsEmits } from "radix-vue";
+import type { SelectRootEmits, SelectRootProps } from "reka-ui";
+import { SelectRoot, useForwardPropsEmits } from "reka-ui";
 
 const props = defineProps<SelectRootProps>();
 const emits = defineEmits<SelectRootEmits>();
@@ -9,7 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot v-bind="forwarded">
-    <slot />
-  </SelectRoot>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
 </template>

components/ui/select/SelectContent.vue

@@ -7,7 +7,7 @@ import {
     SelectPortal,
     SelectViewport,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 import { SelectScrollDownButton, SelectScrollUpButton } from ".";
 
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

components/ui/select/SelectGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectGroup, type SelectGroupProps } from "radix-vue";
+import { SelectGroup, type SelectGroupProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<

components/ui/select/SelectItem.vue

@@ -7,7 +7,7 @@ import {
     type SelectItemProps,
     SelectItemText,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,23 +24,25 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-10 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <span class="absolute left-3 flex size-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <Check class="size-4" />
-      </SelectItemIndicator>
-    </span>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class
+            )
+        "
+    >
+        <span
+            class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+        >
+            <SelectItemIndicator>
+                <Check class="h-4 w-4" />
+            </SelectItemIndicator>
+        </span>
 
-    <SelectItemText class="w-full">
-      <slot />
-    </SelectItemText>
-  </SelectItem>
+        <SelectItemText class="w-full">
+            <slot />
+        </SelectItemText>
+    </SelectItem>
 </template>

components/ui/select/SelectItemText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from "radix-vue";
+import { SelectItemText, type SelectItemTextProps } from "reka-ui";
 
 const props = defineProps<SelectItemTextProps>();
 </script>

components/ui/select/SelectLabel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import { SelectLabel, type SelectLabelProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = defineProps<

components/ui/select/SelectScrollDownButton.vue

@@ -5,7 +5,7 @@ import {
     SelectScrollDownButton,
     type SelectScrollDownButtonProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronDown class="size-4" />
+      <ChevronDown class="h-4 w-4" />
     </slot>
   </SelectScrollDownButton>
 </template>

components/ui/select/SelectScrollUpButton.vue

@@ -5,7 +5,7 @@ import {
     SelectScrollUpButton,
     type SelectScrollUpButtonProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronUp class="size-4" />
+      <ChevronUp class="h-4 w-4" />
     </slot>
   </SelectScrollUpButton>
 </template>

components/ui/select/SelectSeparator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { SelectSeparator, type SelectSeparatorProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<

components/ui/select/SelectTrigger.vue

@@ -6,11 +6,15 @@ import {
     SelectTrigger,
     type SelectTriggerProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
-    SelectTriggerProps & { class?: HTMLAttributes["class"] }
+    SelectTriggerProps & {
+        class?: HTMLAttributes["class"];
+        disableDefaultClasses?: boolean;
+        disableSelectIcon?: boolean;
+    }
 >();
 
 const delegatedProps = computed(() => {
@@ -23,16 +27,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50 shrink-0" />
-    </SelectIcon>
-  </SelectTrigger>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                !$props.disableDefaultClasses &&
+                    'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+                props.class
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child v-if="!$props.disableSelectIcon">
+            <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+        </SelectIcon>
+    </SelectTrigger>
 </template>

components/ui/select/SelectValue.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from "radix-vue";
+import { SelectValue, type SelectValueProps } from "reka-ui";
 
 const props = defineProps<SelectValueProps>();
 </script>