@youcan/celeste 0.6.102 → 0.7.1

package/src/components/file-upload/file-upload-area.vue

@@ -1,9 +1,34 @@
 <script setup lang="ts">
+import type { InputHTMLAttributes } from 'vue';
 import { useDropZone } from '@vueuse/core';
 import clsx from 'clsx';
-import { computed, type InputHTMLAttributes, useTemplateRef } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import Button from '@/components/button/button.vue';
 
+export interface FileUploadAreaProps {
+  label?: string;
+  description?: string;
+  labelOnDrop?: string;
+  triggerLabel?: string;
+  maxSize?: number;
+  maxFiles?: number;
+  multiple?: boolean;
+  icon?: string;
+  accept?: InputHTMLAttributes['accept'];
+  onTriggerClick?: () => void;
+  class?: InputHTMLAttributes['class'];
+}
+
+export interface FileError {
+  message: string;
+  type: 'size' | 'type' | 'count';
+  files: File[];
+}
+
+export interface FileUploadAreaEmit {
+  error: [error: FileError];
+}
+
 const props = withDefaults(defineProps<FileUploadAreaProps>(), {
   icon: 'i-celeste-upload-cloud-2-line',
   label: 'Choose a file or drag & drop it here.',
@@ -101,32 +126,6 @@ function handleTriggerClick(e: Event) {
 }
 </script>
 
-<script lang="ts">
-export interface FileUploadAreaProps {
-  label?: string;
-  description?: string;
-  labelOnDrop?: string;
-  triggerLabel?: string;
-  maxSize?: number;
-  maxFiles?: number;
-  multiple?: boolean;
-  icon?: string;
-  accept?: InputHTMLAttributes['accept'];
-  onTriggerClick?: () => void;
-  class?: InputHTMLAttributes['class'];
-}
-
-export interface FileError {
-  message: string;
-  type: 'size' | 'type' | 'count';
-  files: File[];
-}
-
-export interface FileUploadAreaEmit {
-  error: [error: FileError];
-}
-</script>
-
 <template>
   <component
     :is="uploadComponent"

package/src/components/file-upload/stories/file-upload-area.stories.ts

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { FileError } from '../file-upload-area.vue';
 import { ref, watch } from 'vue';
 import Sonner from '@/components/sonner/sonner.vue';
 import { toast } from '@/utils/sonner';
-import FileUploadArea, { type FileError } from '../file-upload-area.vue';
+import FileUploadArea from '../file-upload-area.vue';
 import 'vue-sonner/style.css';
 
 const meta: Meta<typeof FileUploadArea> = {

package/src/components/hint-text/hint-text.vue

@@ -2,18 +2,16 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = withDefaults(defineProps<HintTextProps>(), {
-  state: 'default',
-});
-</script>
-
-<script lang="ts">
 export interface HintTextProps {
   text?: string;
   icon?: string;
   class?: HTMLAttributes['class'];
   state?: 'default' | 'disabled' | 'error';
 }
+
+const props = withDefaults(defineProps<HintTextProps>(), {
+  state: 'default',
+});
 </script>
 
 <template>

package/src/components/label/label.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, type LabelProps, Primitive } from 'radix-vue';
+import { Label, Primitive } from 'reka-ui';
 import Tooltip from '@/components/tooltip/tooltip.vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 

package/src/components/modal/modal-close.vue

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

package/src/components/modal/modal-content.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'radix-vue';
+import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DialogContentProps & {

package/src/components/modal/modal-header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogClose as ModalClose, DialogDescription as ModalDescription, DialogTitle as ModalTitle } from 'radix-vue';
+import { DialogClose as ModalClose, DialogDescription as ModalDescription, DialogTitle as ModalTitle } from 'reka-ui';
 import CompactButton from '@/components/button/compact-button.vue';
 
 const props = withDefaults(defineProps<{

package/src/components/modal/modal-trigger.vue

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

package/src/components/modal/modal.vue

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

package/src/components/pagination/pagination-content.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
+import type { PaginationListProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationList, type PaginationListProps } from 'radix-vue';
+import { PaginationList } from 'reka-ui';
 
-const props = defineProps<PaginationContentProps>();
-
-const delegated = reactiveOmit(props, 'class');
-</script>
-
-<script lang="ts">
 export interface PaginationContentProps extends PaginationListProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<PaginationContentProps>();
+
+const delegated = reactiveOmit(props, 'class');
 </script>
 
 <template>

package/src/components/pagination/pagination-ellipsis.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
+import type { PaginationEllipsisProps as PrimitivePaginationEllipsisProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationEllipsis, type PaginationEllipsisProps as PrimitivePaginationEllipsisProps } from 'radix-vue';
+import { PaginationEllipsis } from 'reka-ui';
 
-const props = defineProps<PaginationEllipsisProps>();
-
-const delegated = reactiveOmit(props, 'class');
-</script>
-
-<script lang="ts">
 export interface PaginationEllipsisProps extends PrimitivePaginationEllipsisProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<PaginationEllipsisProps>();
+
+const delegated = reactiveOmit(props, 'class');
 </script>
 
 <template>
@@ -40,7 +39,7 @@ export interface PaginationEllipsisProps extends PrimitivePaginationEllipsisProp
   margin: -1px;
   padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   border-width: 0;
   white-space: nowrap;
 }

package/src/components/pagination/pagination-first.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import type { PaginationFirstProps as PrimitivePaginationFirstProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationFirst, type PaginationFirstProps as PrimitivePaginationFirstProps, useForwardProps } from 'radix-vue';
+import { PaginationFirst, useForwardProps } from 'reka-ui';
+
+export interface PaginationFirstProps extends PrimitivePaginationFirstProps {
+  class?: HTMLAttributes['class'];
+}
 
 const props = defineProps<PaginationFirstProps>();
 
@@ -10,12 +15,6 @@ const delegated = reactiveOmit(props, 'class');
 const forwarded = useForwardProps(delegated);
 </script>
 
-<script lang="ts">
-export interface PaginationFirstProps extends PrimitivePaginationFirstProps {
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <PaginationFirst
     :class="clsx('celeste-pagination-element', 'celeste-pagination-first', props.class)"

package/src/components/pagination/pagination-item.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
+import type { PaginationListItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationListItem, type PaginationListItemProps } from 'radix-vue';
+import { PaginationListItem } from 'reka-ui';
 
-const props = defineProps<PaginationItemProps>();
-
-const delegated = reactiveOmit(props, 'class', 'isActive', 'disabled');
-</script>
-
-<script lang="ts">
 export interface PaginationItemProps extends PaginationListItemProps {
   class?: HTMLAttributes['class'];
   isActive?: boolean;
   disabled?: boolean;
 }
+
+const props = defineProps<PaginationItemProps>();
+
+const delegated = reactiveOmit(props, 'class', 'isActive', 'disabled');
 </script>
 
 <template>

package/src/components/pagination/pagination-last.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import type { PaginationLastProps as PrimitivePaginationLastProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationLast, type PaginationLastProps as PrimitivePaginationLastProps, useForwardProps } from 'radix-vue';
+import { PaginationLast, useForwardProps } from 'reka-ui';
+
+export interface PaginationLastProps extends PrimitivePaginationLastProps {
+  class?: HTMLAttributes['class'];
+}
 
 const props = defineProps<PaginationLastProps>();
 
@@ -10,12 +15,6 @@ const delegated = reactiveOmit(props, 'class');
 const forwarded = useForwardProps(delegated);
 </script>
 
-<script lang="ts">
-export interface PaginationLastProps extends PrimitivePaginationLastProps {
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <PaginationLast
     :class="clsx('celeste-pagination-element', 'celeste-pagination-last', props.class)"

package/src/components/pagination/pagination-next.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import type { PaginationNextProps as PrimitivePaginationNextProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationNext, type PaginationNextProps as PrimitivePaginationNextProps, useForwardProps } from 'radix-vue';
+import { PaginationNext, useForwardProps } from 'reka-ui';
+
+export interface PaginationNextProps extends PrimitivePaginationNextProps {
+  class?: HTMLAttributes['class'];
+}
 
 const props = defineProps<PaginationNextProps>();
 
@@ -10,12 +15,6 @@ const delegated = reactiveOmit(props, 'class');
 const forwarded = useForwardProps(delegated);
 </script>
 
-<script lang="ts">
-export interface PaginationNextProps extends PrimitivePaginationNextProps {
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <PaginationNext
     :class="clsx('celeste-pagination-element', 'celeste-pagination-next', props.class)"

package/src/components/pagination/pagination-previous.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import type { PaginationPrevProps as PrimitivePaginationPreviousProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
 import {
   PaginationPrev as PaginationPrevious,
-  type PaginationPrevProps as PrimitivePaginationPreviousProps,
+
   useForwardProps,
-} from 'radix-vue';
+} from 'reka-ui';
+
+export interface PaginationPreviousProps extends PrimitivePaginationPreviousProps {
+  class?: HTMLAttributes['class'];
+}
 
 const props = defineProps<PaginationPreviousProps>();
 
@@ -14,12 +19,6 @@ const delegated = reactiveOmit(props, 'class');
 const forwarded = useForwardProps(delegated);
 </script>
 
-<script lang="ts">
-export interface PaginationPreviousProps extends PrimitivePaginationPreviousProps {
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <PaginationPrevious
     :class="clsx('celeste-pagination-element', 'celeste-pagination-previous', props.class)"

package/src/components/pagination/pagination.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { clsx } from 'clsx';
-import { PaginationRoot, type PaginationRootEmits, type PaginationRootProps, useForwardPropsEmits } from 'radix-vue';
+import { PaginationRoot, useForwardPropsEmits } from 'reka-ui';
+
+export interface PaginationProps extends PaginationRootProps {
+  class?: HTMLAttributes['class'];
+  variant?: 'basic' | 'rounded' | 'group';
+}
 
 const props = withDefaults(defineProps<PaginationProps>(), { variant: 'basic' });
 const emits = defineEmits<PaginationRootEmits>();
@@ -11,13 +17,6 @@ const delegated = reactiveOmit(props, 'class');
 const forwarded = useForwardPropsEmits(delegated, emits);
 </script>
 
-<script lang="ts">
-export interface PaginationProps extends PaginationRootProps {
-  class?: HTMLAttributes['class'];
-  variant: 'basic' | 'rounded' | 'group';
-}
-</script>
-
 <template>
   <PaginationRoot
     v-slot="sprops"

package/src/components/popover/popover-content.vue

@@ -1,18 +1,33 @@
 <script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps as RekaPopoverContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   PopoverArrow,
   PopoverClose,
   PopoverContent,
-  type PopoverContentEmits,
+
   PopoverPortal,
-  type PopoverContentProps as RadixPopoverContentProps,
+
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 import CompactButton from '@/components/button/compact-button.vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
+export interface PopoverContentProps {
+  class?: HTMLAttributes['class'];
+  side?: RekaPopoverContentProps['side'];
+  sideOffset?: RekaPopoverContentProps['sideOffset'];
+  align?: RekaPopoverContentProps['align'];
+  alignOffset?: RekaPopoverContentProps['alignOffset'];
+  title?: string;
+  description?: string;
+  showTail?: boolean;
+  dismissible?: boolean;
+  icon?: string;
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -35,22 +50,6 @@ const sideOffset = props.showTail ? 0 : props.sideOffset ?? 8;
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
-<script lang="ts">
-export interface PopoverContentProps {
-  class?: HTMLAttributes['class'];
-  side?: RadixPopoverContentProps['side'];
-  sideOffset?: RadixPopoverContentProps['sideOffset'];
-  align?: RadixPopoverContentProps['align'];
-  alignOffset?: RadixPopoverContentProps['alignOffset'];
-  title?: string;
-  description?: string;
-  showTail?: boolean;
-  dismissible?: boolean;
-  icon?: string;
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-}
-</script>
-
 <template>
   <PopoverPortal>
     <PopoverContent
@@ -138,7 +137,7 @@ $icon-size-map: (
   z-index: 50;
   min-width: 200px;
   max-width: 400px;
-  transform-origin: var(--radix-popover-content-transform-origin);
+  transform-origin: var(--reka-popover-content-transform-origin);
   animation: var(--animation-fast) ease-out forwards;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-16);

package/src/components/popover/popover-trigger.vue

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

package/src/components/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>();

package/src/components/popover/stories/popover.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import {
   PopoverClose,
-} from 'radix-vue';
+} from 'reka-ui';
 import TextInput from '@/components/text-input/text-input.vue';
 import Button from '../../button/button.vue';
 import PopoverContent from '../popover-content.vue';

package/src/components/progress/progress-bar.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   ProgressIndicator,
   ProgressRoot,
-  type ProgressRootProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+
+} from 'reka-ui';
+import { computed } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(

package/src/components/progress/progress-circle.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   ProgressIndicator,
   ProgressRoot,
-  type ProgressRootProps,
-} from 'radix-vue';
+
+} from 'reka-ui';
 import { computed } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 

package/src/components/radio-group/radio-group-card.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, Primitive } from 'radix-vue';
+import { Label, Primitive } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {

package/src/components/radio-group/radio-group-item.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps, useForwardPropsEmits } from 'radix-vue';
+import { RadioGroupIndicator, RadioGroupItem, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();

package/src/components/radio-group/radio-group-label.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, type LabelProps, Primitive } from 'radix-vue';
+import { Label, Primitive } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {

package/src/components/radio-group/radio-group.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();

package/src/components/rich-editor/config.ts

@@ -135,7 +135,7 @@ export function selectedOption(editor: Editor, children: ToolbarChildOption[]):
   }
 
   for (const child of children) {
-    if (Object.prototype.hasOwnProperty.call(child.active, 'fontSize')) {
+    if (typeof child.active === 'object' && Object.hasOwn(child.active, 'fontSize')) {
       const currentFontSize = editor.getAttributes('textStyle').fontSize || '16px';
 
       return currentFontSize;

package/src/components/rich-editor/extra-settings.vue

@@ -109,7 +109,7 @@ function onActionClick(name: string, editor: Editor) {
   <div class="show-more-wrapper">
     <Select
       v-model="defaultValue"
-      @update:model-value="onActionClick($event, props.editor)"
+      @update:model-value="onActionClick($event as string, props.editor)"
       @update:open="clearSelectedValue"
     >
       <SelectTrigger variant="inline">

package/src/components/rich-editor/link-bubble.vue

@@ -216,7 +216,7 @@ onUnmounted(() => {
             <Label for="open-in-new-tab">
               Open in new tab
             </Label>
-            <Switch id="open-in-new-tab" v-model:checked="openInNewTab" />
+            <Switch id="open-in-new-tab" v-model="openInNewTab" />
           </div>
         </div>
       </template>

package/src/components/rich-editor/rich-editor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PropType } from 'vue';
 import type { ToolbarItem } from './types';
 import Link from '@tiptap/extension-link';
 import TextAlign from '@tiptap/extension-text-align';
@@ -6,7 +7,7 @@ import { TextStyleKit } from '@tiptap/extension-text-style';
 import { CharacterCount, Placeholder } from '@tiptap/extensions';
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
-import { computed, onBeforeUnmount, onMounted, type PropType, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import CompactButton from '@/components/button/compact-button.vue';
 import SelectContent from '@/components/select/select-content.vue';
 import SelectIcon from '@/components/select/select-icon.vue';
@@ -170,7 +171,7 @@ onBeforeUnmount(() => {
           <div class="select-menu-wrapper">
             <Select
               :model-value="selectedOption(editor, item.children)"
-              @update:model-value="onActionClick(editor, item.slug, $event)"
+              @update:model-value="onActionClick(editor, item.slug, $event as string)"
             >
               <SelectTrigger variant="inline">
                 <SelectValue />

package/src/components/scroll-area/scroll-area.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
-  type ScrollAreaRootProps,
+
   ScrollAreaViewport,
-} from 'radix-vue';
+} from 'reka-ui';
 import { useDelegatedProps } from '@/composables';
 import ScrollBar from './scroll-bar.vue';