@youcan/celeste 0.6.101 → 0.7.0

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>

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';
 

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 & {