@youcan/celeste 0.6.102 → 0.7.1

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

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

package/src/components/segmented-control/segmented-control-item.vue

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

package/src/components/segmented-control/segmented-control.vue

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

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { SelectContent, type SelectContentEmits, type SelectContentProps, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue';
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(defineProps<SelectContentProps & {
@@ -32,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style scoped lang="scss">
 :deep(.celeste-select-content) {
   z-index: 50;
-  max-height: var(--radix-select-content-available-height);
+  max-height: var(--reka-select-content-available-height);
   overflow-y: scroll;
   animation: var(--animation-fast) forwards;
   border: 1px solid var(--color-stroke-soft-200);
@@ -53,7 +54,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   }
 
   &[width='full'] {
-    width: var(--radix-select-trigger-width);
+    width: var(--reka-select-trigger-width);
   }
 
   .celeste-select-view-port {

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

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

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

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

package/src/components/select/select-label.vue

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

package/src/components/select/select-separator.vue

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

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

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

package/src/components/select/select-value.vue

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

package/src/components/select/select.vue

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

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

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogClose } from 'radix-vue';
+import { DialogClose } from 'reka-ui';
 
-const props = defineProps<SheetCloseProps>();
-</script>
-
-<script lang="ts">
 export interface SheetCloseProps extends DialogCloseProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetCloseProps>();
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
@@ -9,9 +9,14 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 import CompactButton from '@/components/button/compact-button.vue';
 
+export interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class'];
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -26,13 +31,6 @@ const delegated = reactiveOmit(props, 'class', 'side');
 const forwarded = useForwardPropsEmits(delegated, emits);
 </script>
 
-<script lang="ts">
-export interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class'];
-  side?: 'top' | 'bottom' | 'left' | 'right';
-}
-</script>
-
 <template>
   <DialogPortal>
     <DialogOverlay class="celeste-sheet-overlay" />

package/src/components/sheet/sheet-description.vue

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

package/src/components/sheet/sheet-footer.vue

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<SheetFooterProps>();
-</script>
-
-<script lang="ts">
 export interface SheetFooterProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetFooterProps>();
 </script>
 
 <template>

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

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<SheetHeaderProps>();
-</script>
-
-<script lang="ts">
 export interface SheetHeaderProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetHeaderProps>();
 </script>
 
 <template>

package/src/components/sheet/sheet-title.vue

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

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'radix-vue';
-import { DialogTrigger } from 'radix-vue';
+import type { DialogTriggerProps } from 'reka-ui';
+import { DialogTrigger } from 'reka-ui';
 
-const props = defineProps<SheetTriggerProps>();
-</script>
-
-<script lang="ts">
 export interface SheetTriggerProps extends DialogTriggerProps {}
+
+const props = defineProps<SheetTriggerProps>();
 </script>
 
 <template>

package/src/components/sheet/sheet.vue

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

package/src/components/sidebar/sidebar-element.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarElementProps>(), {
-  as: 'div',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarElementProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarElementProps>(), {
+  as: 'div',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-footer.vue

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<SidebarFooterProps>();
-</script>
-
-<script lang="ts">
 export interface SidebarFooterProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SidebarFooterProps>();
 </script>
 
 <template>

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

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

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

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<SidebarHeaderProps>();
-</script>
-
-<script lang="ts">
 export interface SidebarHeaderProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SidebarHeaderProps>();
 </script>
 
 <template>

package/src/components/sidebar/sidebar-menu-action.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
-  as: 'button',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuActionProps extends PrimitiveProps {
   showOnHover?: boolean;
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
+  as: 'button',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-menu-badge.vue

@@ -3,14 +3,6 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import Badge from '@/components/badge/badge.vue';
 
-const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
-  variant: 'lighter',
-  state: 'faded',
-  size: 'sm',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuBadgeProps {
   class?: HTMLAttributes['class'];
   variant?: 'fill' | 'light' | 'lighter' | 'stroke';
@@ -18,6 +10,12 @@ export interface SidebarMenuBadgeProps {
   size?: 'sm' | 'md';
   label?: string;
 }
+
+const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
+  variant: 'lighter',
+  state: 'faded',
+  size: 'sm',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-menu-button.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,

package/src/components/sidebar/sidebar-menu-sub-button.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
-  as: 'a',
-  size: 'md',
-  isActive: false,
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuSubButtonProps extends PrimitiveProps {
   size?: 'sm' | 'md';
   isActive?: boolean;
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
+  as: 'a',
+  size: 'md',
+  isActive: false,
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-separator.vue

@@ -3,13 +3,11 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import { ContentDivider } from '@/components';
 
-const props = defineProps<SidebarSeparatorProps>();
-</script>
-
-<script lang="ts">
 export interface SidebarSeparatorProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SidebarSeparatorProps>();
 </script>
 
 <template>

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

@@ -32,7 +32,7 @@ const { toggleSidebar } = useSidebar();
   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/sidebar/sidebar.vue

@@ -4,6 +4,12 @@ import clsx from 'clsx';
 import { Sheet, SheetContent } from '@/components/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '@/composables/use-sidebar';
 
+export interface SidebarProps {
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -16,14 +22,6 @@ const props = withDefaults(defineProps<SidebarProps>(), {
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
-<script lang="ts">
-export interface SidebarProps {
-  variant?: 'sidebar' | 'floating' | 'inset';
-  collapsible?: 'offcanvas' | 'icon' | 'none';
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <Sheet
     v-if="isMobile"

package/src/components/slider/slider.vue

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

package/src/components/sonner/sonner-alert.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Alert, type AlertProps } from '../alert';
+import type { AlertProps } from '../alert';
+import { Alert } from '../alert';
 
 export interface SonnerAlertProps extends /* @vue-ignore */ Partial<AlertProps> {
   title: string;

package/src/components/sonner/sonner.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { Toaster, type ToasterProps } from 'vue-sonner';
+import type { ToasterProps } from 'vue-sonner';
+import { Toaster } from 'vue-sonner';
 
-const props = defineProps<SonnerProps>();
-</script>
-
-<script lang="ts">
 export interface SonnerProps extends ToasterProps {}
+
+const props = defineProps<SonnerProps>();
 </script>
 
 <template>

package/src/components/switch/stories/switch.stories.ts

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Switch>;
 
 export const Default: Story = {
   args: {
-    defaultChecked: true,
+    defaultValue: true,
   },
 
   render: args => ({
@@ -53,7 +53,7 @@ export const WithLabel: Story = {
     template: `
       <div style="display: grid; gap: 1em;">
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-          <Switch v-bind="args" :default-checked="true" />
+          <Switch v-bind="args" :default-value="true" />
           SMS Verification
         </label>
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
@@ -65,7 +65,7 @@ export const WithLabel: Story = {
           Disabled
         </label>
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-          <Switch v-bind="args" :default-checked="true" disabled />
+          <Switch v-bind="args" :default-value="true" disabled />
           Disabled but default checked
         </label>
       </div>

package/src/components/switch/switch.vue

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

package/src/components/tab-menu/tab-menu-content.vue

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

package/src/components/tab-menu/tab-menu-item.vue

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

package/src/components/tab-menu/tab-menu-list.vue

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