@edgedev/create-edge-app 1.1.4 → 1.1.6

package/components/ui/pin-input/PinInputInput.vue

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

package/components/ui/pin-input/PinInputSeparator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 import { Dot } from 'lucide-vue-next'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui'
 
 const props = defineProps<PrimitiveProps>()
 const forwardedProps = useForwardProps(props)

package/components/ui/pin-input/index.ts

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

package/components/ui/popover/Popover.vue

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

package/components/ui/popover/PopoverContent.vue

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

package/components/ui/popover/PopoverTrigger.vue

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

package/components/ui/popover/index.ts

@@ -1,3 +1,3 @@
 export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'

package/components/ui/progress/Progress.vue

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

package/components/ui/radio-group/RadioGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()

package/components/ui/radio-group/RadioGroupItem.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import type { RadioGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
-  type RadioGroupItemProps,
+
   useForwardProps,
-} from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from 'reka-ui'
+import { computed } from 'vue'
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
 
@@ -25,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

package/components/ui/range-calendar/RangeCalendar.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/range-calendar/RangeCalendarCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
 
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <RangeCalendarCell
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
     v-bind="forwardedProps"
   >
     <slot />

package/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
+import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
 
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       // Selection End
       'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
       // Outside months
-      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
       // Disabled
       'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
       // Unavailable

package/components/ui/range-calendar/RangeCalendarGrid.vue

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

package/components/ui/range-calendar/RangeCalendarGridBody.vue

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

package/components/ui/range-calendar/RangeCalendarGridHead.vue

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

package/components/ui/range-calendar/RangeCalendarGridRow.vue

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

package/components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 
@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+  <RangeCalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
     <slot />
   </RangeCalendarHeadCell>
 </template>

package/components/ui/range-calendar/RangeCalendarHeader.vue

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

package/components/ui/range-calendar/RangeCalendarHeading.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
 
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 

package/components/ui/range-calendar/RangeCalendarNextButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
 import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/range-calendar/RangeCalendarPrevButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '~/components/ui/button'
 import { ChevronLeft } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/resizable/ResizableHandle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '~/lib/utils'
 import { GripVertical } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()

package/components/ui/resizable/ResizablePanelGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()

package/components/ui/resizable/index.ts

@@ -1,3 +1,3 @@
-export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
 export { default as ResizableHandle } from './ResizableHandle.vue'
-export { SplitterPanel as ResizablePanel } from 'radix-vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { SplitterPanel as ResizablePanel } from 'reka-ui'

package/components/ui/scroll-area/ScrollArea.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
   type ScrollAreaRootProps,
   ScrollAreaViewport,
-} from 'radix-vue'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 import ScrollBar from './ScrollBar.vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
 

package/components/ui/scroll-area/ScrollBar.vue

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

package/components/ui/select/Select.vue

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

package/components/ui/select/SelectContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '~/lib/utils'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -7,9 +7,9 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

package/components/ui/select/SelectGroup.vue

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

package/components/ui/select/SelectItem.vue

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

package/components/ui/select/SelectItemText.vue

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

package/components/ui/select/SelectLabel.vue

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

package/components/ui/select/SelectScrollDownButton.vue

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

package/components/ui/select/SelectScrollUpButton.vue

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

package/components/ui/select/SelectSeparator.vue

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

package/components/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 
@@ -19,13 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
   <SelectTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
       props.class,
     )"
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50" />
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
     </SelectIcon>
   </SelectTrigger>
 </template>

package/components/ui/select/SelectValue.vue

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

package/components/ui/select/index.ts

@@ -1,11 +1,11 @@
 export { default as Select } from './Select.vue'
-export { default as SelectValue } from './SelectValue.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
 export { default as SelectContent } from './SelectContent.vue'
 export { default as SelectGroup } from './SelectGroup.vue'
 export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
 export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

package/components/ui/separator/Separator.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Separator, type SeparatorProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
+import { Separator, type SeparatorProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -15,6 +17,19 @@ const delegatedProps = computed(() => {
 <template>
   <Separator
     v-bind="delegatedProps"
-    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
-  />
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
 </template>

package/components/ui/sheet/Sheet.vue

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

package/components/ui/sheet/SheetClose.vue

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