@youcan/celeste 0.6.102 → 0.7.1

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

@@ -1,8 +1,17 @@
 <script setup lang="ts">
-import type { ComboboxTriggerProps } from 'radix-vue';
+import type { ComboboxTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxTrigger, useForwardProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { ComboboxTrigger, useForwardProps } from 'reka-ui';
+import { computed } from 'vue';
+
+export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  filled?: boolean;
+  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
+  error?: boolean;
+}
 
 const props = withDefaults(defineProps<CustomComboboxTriggerProps>(), {
   type: 'normal',
@@ -17,16 +26,6 @@ const delegatedProps = computed(() => {
 const forwarded = useForwardProps(delegatedProps);
 </script>
 
-<script lang="ts">
-export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
-  class?: HTMLAttributes['class'];
-  size?: 'xs' | 'sm' | 'md';
-  filled?: boolean;
-  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
-  error?: boolean;
-}
-</script>
-
 <template>
   <ComboboxTrigger
     v-bind="forwarded"
@@ -94,7 +93,7 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     }
   }
 
-  .celeste-dropdown-input {
+  .celeste-dropdown-trigger-label {
     display: flex;
     flex: 1 0 0;
     align-items: center;
@@ -132,13 +131,13 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     color: var(--color-text-disabled-300);
     cursor: not-allowed;
 
-    .celeste-dropdown-input {
+    &:deep(.celeste-dropdown-trigger-label) {
       color: var(--color-text-disabled-300);
       cursor: not-allowed;
     }
 
     &:deep(i),
-    .celeste-dropdown-trigger {
+    &:deep(.celeste-dropdown-trigger) {
       color: var(--color-icon-disabled-300);
       cursor: not-allowed;
     }
@@ -153,11 +152,11 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     box-shadow: var(--shadow-buttons-important-focus);
     color: var(--color-text-strong-950);
 
-    .celeste-dropdown-input {
+    &:deep(.celeste-dropdown-trigger-label) {
       color: var(--color-text-strong-950);
     }
 
-    i {
+    &:deep(i) {
       color: var(--color-icon-strong-950);
     }
   }
@@ -165,7 +164,7 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
   &-filled {
     color: var(--color-text-strong-950);
 
-    :deep(.celeste-dropdown-input) {
+    :deep(.celeste-dropdown-trigger-label) {
       color: var(--color-text-strong-950);
     }
   }
@@ -176,13 +175,14 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     background: transparent;
     box-shadow: none;
 
-    &:deep(.celeste-dropdown-input) {
+    &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
+      width: auto;
     }
 
     &:hover:not([data-disabled]),
     &[data-state='open']:not([data-disabled]) {
-      .celeste-dropdown-input {
+      &:deep(.celeste-dropdown-trigger-label) {
         color: var(--color-text-strong-950);
       }
 
@@ -198,8 +198,9 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     border-radius: 0;
     box-shadow: none;
 
-    &:deep(.celeste-dropdown-input) {
+    &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
+      width: auto;
     }
 
     &[data-state='open'] {
@@ -211,8 +212,9 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
     width: fit-content;
     gap: var(--spacing-4);
 
-    &:deep(.celeste-dropdown-input) {
+    &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
+      width: auto;
     }
   }
 

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"
@@ -296,7 +302,7 @@ export default {
     margin: -1px;
     padding: 0;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     border: 0;
     white-space: nowrap;
   }

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'] }>();