@youcan/celeste 0.6.102 → 0.7.1

package/src/components/button/fancy-button.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<FancyButtonProps>(), {
-  size: 'md',
-  intent: 'primary',
-  as: 'button',
-});
-</script>
-
-<script lang="ts">
 export interface FancyButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error' | 'basic';
 }
+
+const props = withDefaults(defineProps<FancyButtonProps>(), {
+  size: 'md',
+  intent: 'primary',
+  as: 'button',
+});
 </script>
 
 <template>
@@ -85,8 +84,8 @@ $intent-map: (
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  transition-property: --celeste-fbutton-bg-start, --celeste-fbutton-bg-end, background-color, color, border-color,
-    box-shadow;
+  transition-property:
+    --celeste-fbutton-bg-start, --celeste-fbutton-bg-end, background-color, color, border-color, box-shadow;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   border: none;

package/src/components/button/link-button.vue

@@ -1,16 +1,9 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<LinkButtonProps>(), {
-  size: 'md',
-  intent: 'primary',
-  as: 'a',
-});
-</script>
-
-<script lang="ts">
 export interface LinkButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'sm' | 'md';
@@ -18,6 +11,12 @@ export interface LinkButtonProps extends PrimitiveProps {
   underline?: boolean;
   disabled?: boolean;
 }
+
+const props = withDefaults(defineProps<LinkButtonProps>(), {
+  size: 'md',
+  intent: 'primary',
+  as: 'a',
+});
 </script>
 
 <template>

package/src/components/button/social-button.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SocialButtonProps>(), {
-  variant: 'stroke',
-});
-</script>
-
-<script lang="ts">
 export interface SocialButtonProps {
   brand: 'apple' | 'twitter' | 'google' | 'facebook' | 'linkedin' | 'github';
   variant?: 'fill' | 'stroke';
   class?: string;
   label?: string;
 }
+
+const props = withDefaults(defineProps<SocialButtonProps>(), {
+  variant: 'stroke',
+});
 </script>
 
 <template>

package/src/components/checkbox/checkbox-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/checkbox/checkbox-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/checkbox/checkbox.vue

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

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {
   args: {
-    defaultChecked: true,
+    defaultValue: true,
   },
 
   render: args => ({
@@ -33,8 +33,7 @@ export const Default: Story = {
 
 export const Indeterminate: Story = {
   args: {
-    defaultChecked: true,
-    checked: 'indeterminate',
+    defaultValue: 'indeterminate',
   },
 
   render: args => ({
@@ -63,8 +62,8 @@ export const Disabled: Story = {
     template: `
       <div style="display: flex; gap: 1em;">
         <Checkbox v-bind="args" />
-        <Checkbox v-bind="args" checked />
-        <Checkbox v-bind="args" checked="indeterminate" />
+        <Checkbox v-bind="args" :model-value="true" />
+        <Checkbox v-bind="args" model-value="indeterminate" />
       </div>
     `,
   }),

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

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

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

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

package/src/components/collapsible/collapsible.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
+
+export interface CollapsibleProps extends CollapsibleRootProps {}
 
 const props = defineProps<CollapsibleProps>();
 const emits = defineEmits<CollapsibleRootEmits>();
@@ -8,10 +10,6 @@ const emits = defineEmits<CollapsibleRootEmits>();
 const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
-<script lang="ts">
-export interface CollapsibleProps extends CollapsibleRootProps {}
-</script>
-
 <template>
   <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
     <slot :open="open" />

package/src/components/color-picker/alpha-slider.vue

@@ -5,6 +5,14 @@ import { useUserPageSelection } from '@/components/color-picker/composable/use-u
 import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from '@/utils/color';
 import { defineColorModel } from './composable/use-color-model';
 
+export interface AlphaSliderProps {
+  modelValue: tinycolor.Instance;
+}
+
+export interface AlphaSliderEmits {
+  'update:modelValue': [value: string];
+}
+
 const props = defineProps<AlphaSliderProps>();
 const emit = defineEmits<AlphaSliderEmits>();
 
@@ -116,16 +124,6 @@ onUnmounted(() => {
 });
 </script>
 
-<script lang="ts">
-export interface AlphaSliderProps {
-  modelValue: tinycolor.Instance;
-}
-
-export interface AlphaSliderEmits {
-  'update:modelValue': [value: string];
-}
-</script>
-
 <template>
   <div class="celeste-color-slider">
     <div

package/src/components/color-picker/color-area.vue

@@ -5,6 +5,11 @@ import { clamp, getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection }
 import { ColorPickerEmits, defineColorModel } from './composable/use-color-model.ts';
 import { useUserPageSelection } from './composable/use-user-select.ts';
 
+export interface ColorAreaProps {
+  hue: number;
+  modelValue: tinycolor.Instance;
+}
+
 const props = defineProps<ColorAreaProps>();
 const emit = defineEmits(['change'].concat(ColorPickerEmits));
 
@@ -57,7 +62,7 @@ watch(() => props.hue, (newHue, oldHue) => {
   }
 });
 
-function handleChange(e: MouseEvent | TouchEvent, skip = false) {
+function handleChange(e: MouseEvent | TouchEvent, _ = false) {
   e.preventDefault();
 
   const container = containerRef.value;
@@ -170,13 +175,6 @@ onUnmounted(() => {
 });
 </script>
 
-<script lang="ts">
-export interface ColorAreaProps {
-  hue: number;
-  modelValue: tinycolor.Instance;
-}
-</script>
-
 <template>
   <div
     ref="color-area"
@@ -207,7 +205,7 @@ export interface ColorAreaProps {
   width: 240px;
   height: 232px;
   border-radius: var(--radius-8);
-  background: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent),
-    v-bind(colorAreaBg);
+  background:
+    linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), v-bind(colorAreaBg);
 }
 </style>

package/src/components/color-picker/color-picker.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import type { ColorKey, HSBKey, HSLKey, RGBKey } from '@/utils/color';
+import { useForwardPropsEmits } from 'reka-ui';
 import tinycolor from 'tinycolor2';
-import { computed, type HTMLAttributes, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
-import { bumpColorValue, clamp, COLOR_NUMBER_VALIDATION_PATTERN, type ColorKey, getColorConstraints, HEX_VALIDATION_PATTERN, type HSBKey, type HSLKey, resolveArrowDirection, type RGBKey, truncColorValue } from '@/utils/color';
+import { bumpColorValue, clamp, COLOR_NUMBER_VALIDATION_PATTERN, getColorConstraints, HEX_VALIDATION_PATTERN, resolveArrowDirection, truncColorValue } from '@/utils/color';
 import { Button } from '../button';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
@@ -13,6 +15,43 @@ import AlphaSlider from './alpha-slider.vue';
 import ColorSwatch from './color-swatch.vue';
 import { defineColorModel } from './composable/use-color-model';
 
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb';
+
+export interface ColorPickerProps {
+  modelValue?: string | tinycolor.ColorInput;
+  label?: string;
+  class?: HTMLAttributes['class'];
+  formats?: ColorFormat[];
+  defaultFormat?: ColorFormat;
+  colorSwatchLabel?: string;
+}
+
+export interface ColorPickerEmits {
+  'update:modelValue': [value: string];
+}
+
+interface ColorSelectionOptions {
+  signal?: AbortSignal;
+}
+
+interface ColorSelectionResult {
+  sRGBHex: string;
+}
+
+interface EyeDropper {
+  open: (options?: ColorSelectionOptions) => Promise<ColorSelectionResult>;
+}
+
+interface EyeDropperConstructor {
+  new (): EyeDropper;
+}
+
+declare global {
+  interface Window {
+    EyeDropper?: EyeDropperConstructor | undefined;
+  }
+}
+
 const props = withDefaults(defineProps<ColorPickerProps>(), {
   modelValue: 'hsl(240, 100%, 50%)',
   formats: () => ['hex', 'rgb', 'hsl', 'hsb'],
@@ -84,7 +123,7 @@ function sipColor() {
   eyeDropper.value.open().then((result: any) => {
     const newColor = tinycolor(result.sRGBHex);
     tinyColorRef.value = newColor;
-  }).catch((e: Error) => {
+  }).catch((_: Error) => {
     // Do nothing, this prevents an error from being thrown if the user cancels the color selection.
   });
 }
@@ -238,45 +277,6 @@ function handleColorValueKeyDown(event: KeyboardEvent, key: ColorKey) {
 }
 </script>
 
-<script lang="ts">
-export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb';
-
-export interface ColorPickerProps {
-  modelValue: string | tinycolor.ColorInput;
-  label?: string;
-  class?: HTMLAttributes['class'];
-  formats?: ColorFormat[];
-  defaultFormat?: ColorFormat;
-  colorSwatchLabel?: string;
-}
-
-export interface ColorPickerEmits {
-  'update:modelValue': [value: string];
-}
-
-interface ColorSelectionOptions {
-  signal?: AbortSignal;
-}
-
-interface ColorSelectionResult {
-  sRGBHex: string;
-}
-
-interface EyeDropper {
-  open: (options?: ColorSelectionOptions) => Promise<ColorSelectionResult>;
-}
-
-interface EyeDropperConstructor {
-  new (): EyeDropper;
-}
-
-declare global {
-  interface Window {
-    EyeDropper?: EyeDropperConstructor | undefined;
-  }
-}
-</script>
-
 <template>
   <Popover>
     <PopoverTrigger>

package/src/components/color-picker/color-swatch.vue

@@ -4,6 +4,17 @@ import { computed } from 'vue';
 import { DEFAULT_SWATCH } from '@/utils/color';
 import { defineColorModel } from './composable/use-color-model';
 
+export interface ColorSwatchProps {
+  modelValue: tinycolor.Instance;
+  label: string;
+  swatch?: string[];
+  defaultColor?: string;
+}
+
+export interface ColorSwatchEmits {
+  'update:modelValue': [value: string];
+}
+
 const props = withDefaults(defineProps<ColorSwatchProps>(), {
   swatch: () => DEFAULT_SWATCH,
 });
@@ -24,19 +35,6 @@ function isSwatchColorSelected(color: string) {
 }
 </script>
 
-<script lang="ts">
-export interface ColorSwatchProps {
-  modelValue: tinycolor.Instance;
-  label: string;
-  swatch?: string[];
-  defaultColor?: string;
-}
-
-export interface ColorSwatchEmits {
-  'update:modelValue': [value: string];
-}
-</script>
-
 <template>
   <div class="celeste-color-swatch">
     <span class="swatch-label">

package/src/components/color-picker/composable/use-color-model.ts

@@ -1,5 +1,6 @@
+import type { WritableComputedRef } from 'vue';
 import tinycolor from 'tinycolor2';
-import { computed, type WritableComputedRef } from 'vue';
+import { computed } from 'vue';
 
 type TinyColorFormat = 'hex8' | 'hex' | 'rgb' | 'hsv' | 'hsl';
 

package/src/components/color-picker/composable/use-user-select.ts

@@ -1,4 +1,5 @@
-import { onUnmounted, readonly, ref, type Ref } from 'vue';
+import type { Ref } from 'vue';
+import { onUnmounted, readonly, ref } from 'vue';
 
 export interface UseUserPageSelectReturn {
   isDisabled: Readonly<Ref<boolean, boolean>>;

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

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

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

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

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'radix-vue';
+import type { ComboboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui';
+import { computed } from 'vue';
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class'];
@@ -34,7 +35,7 @@ const delegatedProps = computed(() => {
   flex-direction: column;
   gap: var(--spacing-4);
 
-  &:deep([data-radix-vue-combobox-item]) {
+  &:deep([data-reka-collection-item]) {
     width: auto;
     height: auto;
   }

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import type { ComboboxInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { TextInputProps } from '../text-input/text-input.vue';
 import clsx from 'clsx';
-import { ComboboxInput, type ComboboxInputProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-import TextInput, { type TextInputProps } from '../text-input/text-input.vue';
+import { ComboboxInput } from 'reka-ui';
+import { computed } from 'vue';
+import TextInput from '../text-input/text-input.vue';
 
 const props = defineProps<ComboboxInputProps & {
   class?: HTMLAttributes['class'];

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

@@ -1,25 +1,11 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits } from 'radix-vue';
+import type { ComboboxItemEmits } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { computed } from 'vue';
 import Checkbox from '../checkbox/checkbox.vue';
 
-const props = withDefaults(defineProps<ComboboxItemPropsType>(), {
-  size: 'sm',
-});
-const emits = defineEmits<ComboboxItemEmits>();
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<script lang="ts">
 export interface ComboboxItemPropsType {
   class?: HTMLAttributes['class'];
   label: string;
@@ -34,11 +20,24 @@ export interface ComboboxItemPropsType {
   image?: string;
   disabled?: boolean;
 }
+
+const props = withDefaults(defineProps<ComboboxItemPropsType>(), {
+  size: 'sm',
+});
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ComboboxItem
-    v-bind="forwarded"
+    v-bind="(forwarded as any)"
     :disabled="disabled"
     as-child
   >
@@ -55,7 +54,7 @@ export interface ComboboxItemPropsType {
     >
       <Checkbox
         v-if="checkbox && size === 'sm'"
-        :checked="selected"
+        :model-value="selected"
         :disabled="disabled"
       />
       <div

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   position: 'popper',
@@ -37,8 +38,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
   --dropdown-height: 300px;
-  --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
-  --dropdown-width: max(var(--radix-popper-anchor-width), 300px);
+  --dropdown-min-width: var(--reka-combobox-trigger-width, 300px);
+  --dropdown-width: max(var(--reka-popper-anchor-width), 300px);
 
   display: flex;
   z-index: 50;
@@ -50,7 +51,7 @@ div:deep(.celeste-dropdown-content) {
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
   overflow: visible;
-  transform-origin: var(--radix-combobox-content-transform-origin);
+  transform-origin: var(--reka-combobox-content-transform-origin);
   animation-duration: var(--animation-fast);
   animation-timing-function: ease-out;
   border: 1px solid var(--color-stroke-soft-200);

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

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

package/src/components/combobox/combobox-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'] }>();