@youcan/celeste 0.6.102 → 0.7.0

package/src/components/combobox/combobox.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
 import type { BadgeProps } from '../badge/badge.vue';
 import type { ComboboxItemPropsType } from './combobox-item.vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
-import { computed } from 'vue';
+import { useForwardPropsEmits } from 'reka-ui';
+import { computed, ref } from 'vue';
 import Badge from '../badge/badge.vue';
 import ComboboxAnchor from './combobox-anchor.vue';
 import ComboboxEmpty from './combobox-empty.vue';
@@ -16,6 +16,24 @@ import ComboboxRoot from './combobox-root.vue';
 import ComboboxSeparator from './combobox-separator.vue';
 import ComboboxTrigger from './combobox-trigger.vue';
 
+export interface ComboboxPropsType extends ComboboxRootProps {
+  options: ComboboxItemPropsType[];
+  valueBy?: string;
+  labelBy?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
+  size?: 'xs' | 'sm' | 'md';
+  emptyLabel?: string;
+  badgeProps?: BadgeProps;
+  searchable?: boolean;
+  class?: string;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<ComboboxPropsType>(), {
   placeholder: 'Select',
   size: 'md',
@@ -25,7 +43,6 @@ const emits = defineEmits<ComboboxRootEmits>();
 const delegatedProps = computed(() => {
   const {
     open,
-    filterFunction,
     options,
     valueBy,
     labelBy,
@@ -77,8 +94,11 @@ function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined
 
     if (
       props.valueBy
-      && Object.prototype.hasOwnProperty.call(value, props.valueBy)
-      && Object.prototype.hasOwnProperty.call(selectedValue, props.valueBy)) {
+      && typeof value === 'object' && value !== null
+      && typeof selectedValue === 'object' && selectedValue !== null
+      && Object.hasOwn(value, props.valueBy)
+      && Object.hasOwn(selectedValue, props.valueBy)
+    ) {
       return (value as Record<string, any>)[props.valueBy] === (selectedValue as Record<string, any>)[props.valueBy];
     }
 
@@ -96,7 +116,8 @@ function filterFunction(list: any[], searchTerm: string) {
     if (
       props.valueBy
       && typeof value === 'object'
-      && props.valueBy in value) {
+      && props.valueBy in value
+    ) {
       return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase())
         || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
     }
@@ -110,32 +131,16 @@ const mergedBadgeProps = computed(() => ({
   ...props.badgeProps,
   disabled: props.disabled,
 }));
-</script>
 
-<script lang="ts">
-export interface ComboboxPropsType extends ComboboxRootProps {
-  options: ComboboxItemPropsType[];
-  valueBy?: string;
-  labelBy?: string;
-  placeholder?: string;
-  searchPlaceholder?: string;
-  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
-  size?: 'xs' | 'sm' | 'md';
-  emptyLabel?: string;
-  badgeProps?: BadgeProps;
-  searchable?: boolean;
-  class?: string;
-}
+const searchTerm = ref('');
 
-export default {
-  inheritAttrs: false,
-};
+const filteredOptions = computed(() => filterFunction(props.options, searchTerm.value));
 </script>
 
 <template>
   <ComboboxRoot
     v-bind="forwarded"
-    :filter-function="filterFunction"
+    ignore-filter
   >
     <ComboboxAnchor as-child>
       <ComboboxTrigger
@@ -166,10 +171,7 @@ export default {
           />
         </div>
 
-        <div
-          v-if="type !== 'inline'"
-          class="celeste-dropdown-trigger-label"
-        >
+        <div class="celeste-dropdown-trigger-label">
           <span>
             {{ label }}
           </span>
@@ -185,7 +187,11 @@ export default {
 
     <ComboboxList>
       <div class="celeste-dropdown-inner-input" :class="{ 'sr-only': !searchable }">
-        <ComboboxInput :searchable="searchable" :placeholder="searchPlaceholder" />
+        <ComboboxInput
+          v-model="searchTerm"
+          :searchable="searchable"
+          :placeholder="searchPlaceholder"
+        />
         <ComboboxSeparator v-if="searchable" />
       </div>
 
@@ -197,7 +203,7 @@ export default {
 
       <ComboboxGroup>
         <ComboboxItem
-          v-for="option in props.options"
+          v-for="option in filteredOptions"
           :key="option.label"
           :label="option.label"
           :sublabel="option.sublabel"

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

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

package/src/components/command/command-input.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { ComboboxInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { ComboboxInput, useForwardProps } from 'reka-ui';
+import { computed } from 'vue';
 
 defineOptions({
   inheritAttrs: false,

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { computed } from 'vue';
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<ComboboxItemEmits>();

package/src/components/command/command-list.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui';
+import { computed } from 'vue';
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
-  dismissable: false,
-});
+const props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {

package/src/components/command/command-root.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,

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

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

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

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Separator } from 'radix-vue';
+import { Separator } from 'reka-ui';
 
-const props = withDefaults(defineProps<ContentDividerProps>(), {
-  type: 'line',
-});
-</script>
-
-<script lang="ts">
 export interface ContentDividerProps {
-  class?: HTMLAttributes['class'] ;
-  type: 'line' | 'text' | 'text-line' | 'solid-text';
+  class?: HTMLAttributes['class'];
+  type?: 'line' | 'text' | 'text-line' | 'solid-text';
   text?: string;
 }
+
+const props = withDefaults(defineProps<ContentDividerProps>(), {
+  type: 'line',
+});
 </script>
 
 <template>

package/src/components/counter-input/counter-input.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, type NumberFieldRootEmits, type NumberFieldRootProps, useForwardPropsEmits } from 'radix-vue';
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 import CompactButton from '../button/compact-button.vue';
 

package/src/components/digit-input/digit-input-group.vue

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

package/src/components/digit-input/digit-input-slot.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue';
+import { PinInputInput, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>();
 

package/src/components/digit-input/digit-input.vue

@@ -1,17 +1,20 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="Type extends PinInputType = 'text'">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = withDefaults(defineProps<PinInputRootProps & {
+export type PinInputType = 'text' | 'number';
+
+const props = withDefaults(defineProps<PinInputRootProps<Type> & {
   class?: HTMLAttributes['class'];
   hasError?: boolean;
 }>(), {
-  modelValue: () => [],
+  modelValue: () => [] as any,
   hasError: false,
 });
-const emits = defineEmits<PinInputRootEmits>();
+const emits = defineEmits<PinInputRootEmits<Type>>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'hasError');
 

package/src/components/digit-input/stories/digit-input.stories.ts

@@ -4,9 +4,19 @@ import DigitInputGroup from '../digit-input-group.vue';
 import DigitInputSlot from '../digit-input-slot.vue';
 import DigitInput from '../digit-input.vue';
 
-const meta: Meta<typeof DigitInput> = {
+interface DigitInputArgs {
+  modelValue?: (string | number)[];
+  disabled?: boolean;
+  placeholder?: string;
+  mask?: boolean;
+  otp?: boolean;
+  type?: 'text' | 'number';
+  hasError?: boolean;
+}
+
+const meta: Meta<DigitInputArgs> = {
   title: 'Components/Input/Digit Input',
-  component: DigitInput,
+  component: DigitInput as unknown as Meta<DigitInputArgs>['component'],
   argTypes: {
     modelValue: {
       control: { type: 'object' },
@@ -43,7 +53,7 @@ const meta: Meta<typeof DigitInput> = {
 
 export default meta;
 
-type Story = StoryObj<typeof DigitInput>;
+type Story = StoryObj<DigitInputArgs>;
 
 export const Default: Story = {
   args: {

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
+
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(
@@ -49,7 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   max-width: var(--dropdown-max-width);
   padding: var(--spacing-8);
   overflow: hidden;
-  transform-origin: var(--radix-popper-transform-origin);
+  transform-origin: var(--reka-popper-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/dropdown-menu/dropdown-menu-group.vue

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

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

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

package/src/components/dropdown-menu/dropdown-menu-label.vue

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

package/src/components/dropdown-menu/dropdown-menu-separator.vue

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

package/src/components/dropdown-menu/dropdown-menu-sub-content.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import {
   DropdownMenuPortal,
   DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
+
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
@@ -46,7 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   margin-block-start: var(--spacing-10);
   padding: var(--spacing-8);
   overflow: hidden auto;
-  transform-origin: var(--radix-popper-transform-origin);
+  transform-origin: var(--reka-popper-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/dropdown-menu/dropdown-menu-sub-trigger.vue

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

package/src/components/dropdown-menu/dropdown-menu-sub.vue

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

package/src/components/dropdown-menu/dropdown-menu-trigger.vue

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

package/src/components/dropdown-menu/dropdown-menu.vue

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

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