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

2026-10-07 13:28:38 +08:00 · 2025-03-10 16:07:52 +08:00
parent 2b08e82c5e
commit dcad2c6ecf
107 changed files with 331 additions and 278 deletions
@@ -8,9 +8,9 @@
    "baseColor": "neutral",
    "cssVariables": true
  },
-  "framework": "vite",
  "aliases": {
    "components": "@/ui/shadcn",
-    "utils": "@/utils"
+    "utils": "@/utils",
+    "lib": "@/utils"
  }
 }
@@ -1,6 +1,7 @@
 {
  "type": "module",
  "version": "5.1.0",
+  "packageManager": "pnpm@9.10.0",
  "engines": {
    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
  },
@@ -45,7 +46,7 @@
    "path-to-regexp": "^8.2.0",
    "pinia": "^3.0.1",
    "qs": "^6.14.0",
-    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.0.2",
    "scule": "^1.3.0",
    "tailwind-merge": "^3.0.2",
    "ua-parser-js": "^2.0.2",
@@ -71,9 +71,9 @@ importers:
      qs:
        specifier: ^6.14.0
        version: 6.14.0
-      radix-vue:
-        specifier: ^1.9.17
-        version: 1.9.17(vue@3.5.13(typescript@5.8.2))
+      reka-ui:
+        specifier: ^2.0.2
+        version: 2.0.2(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
      scule:
        specifier: ^1.3.0
        version: 1.3.0
@@ -2352,9 +2352,6 @@ packages:
  '@vueuse/components@12.7.0':
    resolution: {integrity: sha512-LbaKPOx9sTPRxI8ymJt3VCm2CifmC432yaXxCGbjkuKIh2jyNlXvE7sGrLm7kbC7WkBJnUXzm3K/cI1pIE8ueQ==}

-  '@vueuse/core@10.11.1':
-    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
-
  '@vueuse/core@12.7.0':
    resolution: {integrity: sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==}

@@ -2402,18 +2399,12 @@ packages:
      universal-cookie:
        optional: true

-  '@vueuse/metadata@10.11.1':
-    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
-
  '@vueuse/metadata@12.7.0':
    resolution: {integrity: sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==}

  '@vueuse/metadata@9.13.0':
    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}

-  '@vueuse/shared@10.11.1':
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
-
  '@vueuse/shared@12.7.0':
    resolution: {integrity: sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==}

@@ -4795,11 +4786,6 @@ packages:
    engines: {node: ^18 || >=20}
    hasBin: true

-  nanoid@5.1.2:
-    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
  nanomatch@1.2.13:
    resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
    engines: {node: '>=0.10.0'}
@@ -5252,11 +5238,6 @@ packages:
  queue-tick@1.0.1:
    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}

-  radix-vue@1.9.17:
-    resolution: {integrity: sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==}
-    peerDependencies:
-      vue: '>= 3.2.0'
-
  radix3@1.1.2:
    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}

@@ -5344,6 +5325,11 @@ packages:
    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
    hasBin: true

+  reka-ui@2.0.2:
+    resolution: {integrity: sha512-pC2UF6Z+kJF96aJvIErhkSO4DJYIeq9pgvh3pntNqcZb3zFGMzw8h2uny+GnLX2CKiQV54kZNYXxecYIiPMGyg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
  repeat-element@1.1.4:
    resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
    engines: {node: '>=0.10.0'}
@@ -8881,16 +8867,6 @@ snapshots:
    transitivePeerDependencies:
      - typescript

-  '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.8.2))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
  '@vueuse/core@12.7.0(typescript@5.8.2)':
    dependencies:
      '@types/web-bluetooth': 0.0.20
@@ -8922,19 +8898,10 @@ snapshots:
    transitivePeerDependencies:
      - typescript

-  '@vueuse/metadata@10.11.1': {}
-
  '@vueuse/metadata@12.7.0': {}

  '@vueuse/metadata@9.13.0': {}

-  '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.8.2))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
  '@vueuse/shared@12.7.0(typescript@5.8.2)':
    dependencies:
      vue: 3.5.13(typescript@5.8.2)
@@ -11665,8 +11632,6 @@ snapshots:

  nanoid@5.1.0: {}

-  nanoid@5.1.2: {}
-
  nanomatch@1.2.13:
    dependencies:
      arr-diff: 4.0.0
@@ -12158,23 +12123,6 @@ snapshots:

  queue-tick@1.0.1: {}

-  radix-vue@1.9.17(vue@3.5.13(typescript@5.8.2)):
-    dependencies:
-      '@floating-ui/dom': 1.6.13
-      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.2))
-      '@internationalized/date': 3.7.0
-      '@internationalized/number': 3.6.0
-      '@tanstack/vue-virtual': 3.13.2(vue@3.5.13(typescript@5.8.2))
-      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      aria-hidden: 1.2.4
-      defu: 6.1.4
-      fast-deep-equal: 3.1.3
-      nanoid: 5.1.2
-      vue: 3.5.13(typescript@5.8.2)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
  radix3@1.1.2: {}

  rc9@2.1.2:
@@ -12284,6 +12232,23 @@ snapshots:
    dependencies:
      jsesc: 3.0.2

+  reka-ui@2.0.2(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.2))
+      '@internationalized/date': 3.7.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.13.2(vue@3.5.13(typescript@5.8.2))
+      '@vueuse/core': 12.7.0(typescript@5.8.2)
+      '@vueuse/shared': 12.7.0(typescript@5.8.2)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 1.1.4
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
  repeat-element@1.1.4: {}

  repeat-string@1.6.1: {}
@@ -37,7 +37,7 @@ function toggleColorScheme(event: MouseEvent) {
 </script>

 <template>
-  <FaButton variant="ghost" size="icon" @click="toggleColorScheme">
+  <FaButton variant="ghost" size="icon" class="size-9" @click="toggleColorScheme">
    <FaIcon
      :name="{
        light: 'i-ri:sun-line',
@@ -12,7 +12,7 @@ const { isFullscreen, toggle } = useFullscreen()
 </script>

 <template>
-  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" @click="toggle">
+  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" class="size-9" @click="toggle">
    <FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
  </FaButton>
 </template>
@@ -12,7 +12,7 @@ const isShow = ref(false)
 </script>

 <template>
-  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3': settingsStore.mode === 'pc' }" @click="isShow = true">
+  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3 h-9': settingsStore.mode === 'pc', 'size-9': settingsStore.mode !== 'pc' }" @click="isShow = true">
    <FaIcon name="i-ri:search-line" class="size-4" />
    <template v-if="settingsStore.mode === 'pc'">
      <span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>
@@ -41,7 +41,7 @@ function handleCtrlClick() {
        <p>可切换为浏览器原生刷新</p>
      </div>
    </template>
-    <FaButton variant="ghost" size="icon" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon" class="size-9" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
      <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
    </FaButton>
  </FaTooltip>
@@ -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<{
@@ -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>
@@ -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>
@@ -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 {
@@ -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: {
@@ -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'] }>()
@@ -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>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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>
@@ -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 }>()
@@ -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>
@@ -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>
@@ -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>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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>()
@@ -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'] }>()
@@ -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 }>()
@@ -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>()

@@ -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>()
@@ -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>
@@ -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 '.'

@@ -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'] }>()
@@ -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'] }>()
@@ -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>
@@ -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: {
@@ -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>()
@@ -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'] }>()
@@ -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(
@@ -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>
@@ -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 }>()
@@ -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 }>()
@@ -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>()
@@ -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'] }>()
@@ -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 & {
@@ -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>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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>()

@@ -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'
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuContentProps } from 'radix-vue'
+import type { DropdownMenuContentProps } from 'reka-ui'
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -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>()
@@ -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>
@@ -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 & {
@@ -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'] }>()
@@ -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>
@@ -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'] }>()
@@ -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>
@@ -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'
@@ -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,
@@ -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 '.'

@@ -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'] }>()
@@ -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 & {
@@ -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'] }>()
@@ -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>
@@ -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'] }>()
@@ -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'] }>()
@@ -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: {
@@ -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'] }>(), {
@@ -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'] }>()
@@ -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'] }>()
@@ -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>
@@ -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'
@@ -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,
@@ -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>()
@@ -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({
@@ -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>
@@ -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'

@@ -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'] }>(), {
@@ -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>()
@@ -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 />
@@ -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'] }>()
@@ -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'] }>()
@@ -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>
@@ -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>
@@ -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'] }>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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>
@@ -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'] }>()
@@ -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>()
@@ -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'] }>()
@@ -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'] }>()
@@ -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'] }>()
@@ -7,7 +7,7 @@ const props = defineProps<ToasterProps>()

 <template>
  <Sonner
-    class="group toaster"
+    class="toaster group"
    v-bind="props"
    :toast-options="{
      classes: {
@@ -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({
@@ -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>()
@@ -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({
@@ -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>
@@ -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>
@@ -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()
--- a/Show More
+++ b/Show More