@youcan/celeste 0.6.102 → 0.7.0

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

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