refactor!: radix-vue 迁移到 reka-ui

src/ui/components/FaAvatar/avatar/Avatar.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import type { AvatarVariants } from '.'
 import { cn } from '@/utils'
-import { AvatarRoot } from 'radix-vue'
+import { AvatarRoot } from 'reka-ui'
 import { avatarVariant } from '.'
 
 const props = withDefaults(defineProps<{

src/ui/components/FaAvatar/avatar/AvatarFallback.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'radix-vue'
-import { AvatarFallback } from 'radix-vue'
+import type { AvatarFallbackProps } from 'reka-ui'
+import { AvatarFallback } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>

src/ui/components/FaAvatar/avatar/AvatarImage.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'radix-vue'
-import { AvatarImage } from 'radix-vue'
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>

src/ui/components/FaButton/button/Button.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
 import { cn } from '@/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {

src/ui/components/FaButton/button/index.ts

@@ -8,22 +8,21 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {

src/ui/components/FaCheckbox/checkbox/Checkbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()

src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
-
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuContent,
-
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from 'radix-vue'
-import { ContextMenuGroup } from 'radix-vue'
+import type { ContextMenuGroupProps } from 'reka-ui'
+import { ContextMenuGroup } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from 'radix-vue'
+import type { ContextMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ContextMenuLabel } from 'radix-vue'
+import { ContextMenuLabel } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
@@ -17,10 +17,7 @@ const delegatedProps = computed(() => {
 <template>
   <ContextMenuLabel
     v-bind="delegatedProps"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class,
-      )"
+    :class="cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', props.class)"
   >
     <slot />
   </ContextMenuLabel>

src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuPortalProps } from 'radix-vue'
-import { ContextMenuPortal } from 'radix-vue'
+import type { ContextMenuPortalProps } from 'reka-ui'
+import { ContextMenuPortal } from 'reka-ui'
 
 const props = defineProps<ContextMenuPortalProps>()
 </script>

src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'radix-vue'
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui'
 import {
   ContextMenuRadioGroup,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuRadioGroupProps>()
 const emits = defineEmits<ContextMenuRadioGroupEmits>()

src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from 'radix-vue'
+import type { ContextMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuSeparator,
-
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue'
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui'
 import {
   ContextMenuSub,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuSubProps>()
 const emits = defineEmits<ContextMenuSubEmits>()

src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuSubContent,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from 'radix-vue'
+import type { ContextMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
-
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from 'radix-vue'
-import { ContextMenuTrigger, useForwardProps } from 'radix-vue'
+import type { ContextMenuTriggerProps } from 'reka-ui'
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuTriggerProps>()
 

src/ui/components/FaDrawer/sheet/Sheet.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()

src/ui/components/FaDrawer/sheet/SheetClose.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue'
-import { DialogClose } from 'radix-vue'
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>

src/ui/components/FaDrawer/sheet/SheetContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
 import { cn } from '@/utils'
@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import { sheetVariants } from '.'
 

src/ui/components/FaDrawer/sheet/SheetDescription.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue'
+import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogDescription } from 'radix-vue'
+import { DialogDescription } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDrawer/sheet/SheetTitle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue'
+import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogTitle } from 'radix-vue'
+import { DialogTitle } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDrawer/sheet/SheetTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

src/ui/components/FaDrawer/sheet/index.ts

@@ -8,6 +8,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 export { default as SheetHeader } from './SheetHeader.vue'
 export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
 
 export const sheetVariants = cva(
   'fixed z-2000 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500',
@@ -17,9 +18,9 @@ export const sheetVariants = cva(
         top: 'inset-x-0 top-0 shadow-[0_1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
             'inset-x-0 bottom-0 shadow-[0_-1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 shadow-[1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
+        left: 'inset-y-0 left-0 h-full w-3/4 shadow-[1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-            'inset-y-0 right-0 h-full w-3/4 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
+            'inset-y-0 right-0 h-full w-3/4 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {

src/ui/components/FaDropdown/dropdown-menu/DropdownMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue'
-import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
-
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuContent,
-
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from 'radix-vue'
-import { DropdownMenuGroup } from 'radix-vue'
+import type { DropdownMenuGroupProps } from 'reka-ui'
+import { DropdownMenuGroup } from 'reka-ui'
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'radix-vue'
+import type { DropdownMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'radix-vue'
+import type { DropdownMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'radix-vue'
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
 import {
   DropdownMenuRadioGroup,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'radix-vue'
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuSeparator,
-
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSub.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue'
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
 import {
   DropdownMenuSub,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuSubContent,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'radix-vue'
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
-
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaDropdown/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'radix-vue'
-import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuTriggerProps>()
 

src/ui/components/FaDropdown/dropdown-menu/index.ts

@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from 'reka-ui'

src/ui/components/FaDropdown/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuContentProps } from 'radix-vue'
+import type { DropdownMenuContentProps } from 'reka-ui'
 import {
   DropdownMenu,
   DropdownMenuContent,

src/ui/components/FaModal/dialog/Dialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()

src/ui/components/FaModal/dialog/DialogClose.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue'
-import { DialogClose } from 'radix-vue'
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>

src/ui/components/FaModal/dialog/DialogContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { useScrollLock } from '@vueuse/core'
@@ -9,7 +9,7 @@ import {
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogContentProps & {

src/ui/components/FaModal/dialog/DialogDescription.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue'
+import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogDescription, useForwardProps } from 'radix-vue'
+import { DialogDescription, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaModal/dialog/DialogScrollContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

src/ui/components/FaModal/dialog/DialogTitle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue'
+import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogTitle, useForwardProps } from 'radix-vue'
+import { DialogTitle, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaModal/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

src/ui/components/FaModal/dialog/index.ts

@@ -4,4 +4,6 @@ export { default as DialogContent } from './DialogContent.vue'
 export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogFooter } from './DialogFooter.vue'
 export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
 export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'

src/ui/components/FaModal/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ModalEmits, ModalProps } from '.'
 import { cn } from '@/utils'
-import { VisuallyHidden } from 'radix-vue'
+import { VisuallyHidden } from 'reka-ui'
 import {
   Dialog,
   DialogContent,

src/ui/components/FaNotification/toast/Toast.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastRootEmits } from 'radix-vue'
+import type { ToastRootEmits } from 'reka-ui'
 import type { ToastProps } from '.'
 import { cn } from '@/utils'
-import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
+import { ToastRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { toastVariants } from '.'
 

src/ui/components/FaNotification/toast/ToastAction.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastActionProps } from 'radix-vue'
+import type { ToastActionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastAction } from 'radix-vue'
+import { ToastAction } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaNotification/toast/ToastClose.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ToastCloseProps } from 'radix-vue'
+import type { ToastCloseProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { X } from 'lucide-vue-next'
-import { ToastClose } from 'radix-vue'
+import { ToastClose } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastCloseProps & {

src/ui/components/FaNotification/toast/ToastDescription.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastDescriptionProps } from 'radix-vue'
+import type { ToastDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastDescription } from 'radix-vue'
+import { ToastDescription } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaNotification/toast/ToastProvider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ToastProviderProps } from 'radix-vue'
-import { ToastProvider } from 'radix-vue'
+import type { ToastProviderProps } from 'reka-ui'
+import { ToastProvider } from 'reka-ui'
 
 const props = defineProps<ToastProviderProps>()
 </script>

src/ui/components/FaNotification/toast/ToastTitle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastTitleProps } from 'radix-vue'
+import type { ToastTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastTitle } from 'radix-vue'
+import { ToastTitle } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaNotification/toast/ToastViewport.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastViewportProps } from 'radix-vue'
+import type { ToastViewportProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastViewport } from 'radix-vue'
+import { ToastViewport } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaNotification/toast/index.ts

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority'
-import type { ToastRootProps } from 'radix-vue'
+import type { ToastRootProps } from 'reka-ui'
 
 import type { HTMLAttributes } from 'vue'
 import { cva } from 'class-variance-authority'
@@ -15,7 +15,7 @@ export { default as ToastViewport } from './ToastViewport.vue'
 export { toast, useToast } from './use-toast'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {

src/ui/components/FaPinInput/pin-input/PinInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {

src/ui/components/FaPinInput/pin-input/PinInputGroup.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { Primitive, useForwardProps } from 'radix-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaPinInput/pin-input/PinInputInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PinInputInputProps } from 'radix-vue'
+import type { PinInputInputProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { PinInputInput, useForwardProps } from 'radix-vue'
+import { PinInputInput, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { Dot } from 'lucide-vue-next'
+import { Primitive, useForwardProps } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Dot />
+    </slot>
+  </primitive>
+</template>

src/ui/components/FaPinInput/pin-input/index.ts

@@ -1,3 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
 export { default as PinInputGroup } from './PinInputGroup.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'

src/ui/components/FaPopover/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PopoverContentProps } from 'radix-vue'
+import type { PopoverContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import {
   Popover,

src/ui/components/FaPopover/popover/Popover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()

src/ui/components/FaPopover/popover/PopoverContent.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue'
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   PopoverContent,
-
   PopoverPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 defineOptions({

src/ui/components/FaPopover/popover/PopoverTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from 'radix-vue'
-import { PopoverTrigger } from 'radix-vue'
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>

src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from 'radix-vue'
+import type { ScrollAreaRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
-
   ScrollAreaViewport,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import ScrollBar from './ScrollBar.vue'
 

src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from 'radix-vue'
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {

src/ui/components/FaSelect/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>()

src/ui/components/FaSelect/select/SelectContent.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   SelectContent,
-
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
@@ -45,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 />

src/ui/components/FaSelect/select/SelectGroup.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from 'radix-vue'
+import type { SelectGroupProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectGroup } from 'radix-vue'
+import { SelectGroup } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectItem.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'radix-vue'
+import type { SelectItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   SelectItem,
   SelectItemIndicator,
-
   SelectItemText,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectItemText.vue

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

src/ui/components/FaSelect/select/SelectLabel.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from 'radix-vue'
+import type { SelectLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectLabel } from 'radix-vue'
+import { SelectLabel } from 'reka-ui'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('py-1.5 pe-8 ps-2 text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>

src/ui/components/FaSelect/select/SelectScrollDownButton.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { SelectScrollDownButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectScrollUpButton.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { SelectScrollUpButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectSeparator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from 'radix-vue'
+import type { SelectSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectSeparator } from 'radix-vue'
+import { SelectSeparator } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectTrigger.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue'
+import type { SelectTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaSelect/select/SelectValue.vue

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

src/ui/components/FaSwitch/switch/Switch.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   SwitchRoot,
-
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaTabs/tabs/Tabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()

src/ui/components/FaTabs/tabs/TabsContent.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsContentProps } from 'radix-vue'
+import type { TabsContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsContent } from 'radix-vue'
+import { TabsContent } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaTabs/tabs/TabsList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsListProps } from 'radix-vue'
+import type { TabsListProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsList } from 'radix-vue'
+import { TabsList } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaTabs/tabs/TabsTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from 'radix-vue'
+import type { TabsTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()

src/ui/components/FaToast/sonner/Sonner.vue

@@ -7,7 +7,7 @@ const props = defineProps<ToasterProps>()
 
 <template>
   <Sonner
-    class="group toaster"
+    class="toaster group"
     v-bind="props"
     :toast-options="{
       classes: {

src/ui/components/FaTooltip/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TooltipContentProps, TooltipProviderProps } from 'radix-vue'
+import type { TooltipContentProps, TooltipProviderProps } from 'reka-ui'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
 defineOptions({

src/ui/components/FaTooltip/tooltip/Tooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue'
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()

src/ui/components/FaTooltip/tooltip/TooltipContent.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue'
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 defineOptions({

src/ui/components/FaTooltip/tooltip/TooltipProvider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from 'radix-vue'
-import { TooltipProvider } from 'radix-vue'
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
 
 const props = defineProps<TooltipProviderProps>()
 </script>

src/ui/components/FaTooltip/tooltip/TooltipTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from 'radix-vue'
-import { TooltipTrigger } from 'radix-vue'
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 </script>

src/ui/shadcn/ui/form/FormControl.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
+import { Slot } from 'reka-ui'
 import { useFormField } from './useFormField'
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

src/ui/shadcn/ui/form/FormItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/utils'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type HTMLAttributes, provide } from 'vue'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 

src/ui/shadcn/ui/form/FormLabel.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue'
+import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/ui/shadcn/ui/label'
 import { cn } from '@/utils'
+import { Label } from '@/ui/shadcn/ui/label'
 import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

src/ui/shadcn/ui/form/FormMessage.vue

@@ -11,6 +11,6 @@ const { name, formMessageId } = useFormField()
     :id="formMessageId"
     as="p"
     :name="toValue(name)"
-    class="text-sm text-destructive font-medium"
+    class="text-sm font-medium text-destructive"
   />
 </template>

src/ui/shadcn/ui/form/useFormField.ts

@@ -6,7 +6,8 @@ export function useFormField() {
   const fieldContext = inject(FieldContextKey)
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
-  if (!fieldContext) { throw new Error('useFormField should be used within <FormField>') }
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
 
   const { name } = fieldContext
   const id = fieldItemContext

src/ui/shadcn/ui/label/Label.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/utils'
-import { Label, type LabelProps } from 'radix-vue'
+import { Label, type LabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()