@youcan/celeste 0.6.3

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { DEFAULT_SWATCH } from '@/utils/color';
+import tinycolor from 'tinycolor2';
+import { computed } from 'vue';
+import { defineColorModel } from './composable/use-color-model';
+
+const props = withDefaults(defineProps<ColorSwatchProps>(), {
+  label: 'Recommended Colors',
+  swatch: () => DEFAULT_SWATCH,
+});
+const emit = defineEmits<ColorSwatchEmits>();
+
+const tinyColorRef = defineColorModel(props, emit);
+
+const activeSwatchColorBg = computed(() => {
+  return `0 0 0 2px var(--color-bg-white-0), 0 0 0 4px ${tinyColorRef.value.toRgbString()}`;
+});
+
+function handleSwatchColorClick(newColor: string) {
+  tinyColorRef.value = tinycolor(newColor);
+}
+
+function isSwatchColorSelected(color: string) {
+  return tinyColorRef.value.toHex8String().toLocaleLowerCase() === tinycolor(color).toHex8String().toLocaleLowerCase();
+}
+</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">
+      {{ label }}
+    </span>
+    <div class="color-palette">
+      <div
+        v-for="swatchColor in swatch"
+        :key="swatchColor"
+        class="palette-color"
+        :style="{ background: swatchColor }"
+        :aria-selected="isSwatchColorSelected(swatchColor.toLowerCase())"
+        :title="swatchColor"
+        :aria-label="`Color:${swatchColor}`"
+        role="option"
+        tabindex="0"
+        @click="handleSwatchColorClick(swatchColor)"
+        @keydown.space="handleSwatchColorClick(swatchColor)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-color-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+
+  .swatch-label {
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+
+  .color-palette {
+    display: flex;
+    gap: var(--spacing-4);
+    align-items: center;
+
+    .palette-color {
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      margin: var(--spacing-4);
+      padding: var(--spacing-4);
+      border-radius: 50%;
+
+      &[aria-selected='true'] {
+        box-shadow: v-bind('activeSwatchColorBg');
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+import tinycolor from 'tinycolor2';
+import { computed, type WritableComputedRef } from 'vue';
+
+type TinyColorFormat = 'hex8' | 'hex' | 'rgb' | 'hsv' | 'hsl';
+
+export interface useTinyColorModelProps {
+  modelValue?: tinycolor.ColorInput;
+}
+
+export const ColorPickerEmits = ['update:modelValue'];
+
+export function defineColorModel(props: useTinyColorModelProps, emit: any): WritableComputedRef<tinycolor.Instance, tinycolor.ColorInput> {
+  let originalFormat: TinyColorFormat;
+
+  const tinyColorRef = computed({
+    get: () => {
+      const colorInput = props.modelValue;
+      const value = tinycolor(colorInput);
+
+      originalFormat = value.getFormat() as TinyColorFormat;
+
+      return value;
+    },
+    set: (newValue: tinycolor.ColorInput) => {
+      const newTinyColor = tinycolor(newValue);
+      const transformedValue = transformToOriginalInputFormat(
+        newTinyColor,
+        originalFormat,
+      );
+
+      emit('update:modelValue', transformedValue);
+    },
+  });
+
+  return tinyColorRef;
+}
+
+function transformToOriginalInputFormat(color: tinycolor.Instance, originalFormat?: TinyColorFormat): any {
+  return color.toString(originalFormat);
+}

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

@@ -0,0 +1,51 @@
+import { onUnmounted, readonly, ref, type Ref } from 'vue';
+
+export interface UseUserPageSelectReturn {
+  isDisabled: Readonly<Ref<boolean, boolean>>;
+  togglePageUserSelect: () => void;
+  preventPageUserSelect: () => void;
+  allowPageUserSelect: () => void;
+}
+
+export function useUserPageSelection(): UseUserPageSelectReturn {
+  const isDisabled = ref(false);
+  let styleElement: HTMLStyleElement | null = null;
+
+  const preventPageUserSelect = (): void => {
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.textContent = 'body > * { user-select: none; }';
+      document.head.appendChild(styleElement);
+      isDisabled.value = true;
+    }
+  };
+
+  const allowPageUserSelect = (): void => {
+    if (styleElement) {
+      styleElement.remove();
+      styleElement = null;
+      isDisabled.value = false;
+    }
+  };
+
+  const togglePageUserSelect = (): void => {
+    if (styleElement) {
+      allowPageUserSelect();
+
+      return;
+    }
+
+    preventPageUserSelect();
+  };
+
+  onUnmounted(() => {
+    allowPageUserSelect();
+  });
+
+  return {
+    isDisabled: readonly(isDisabled),
+    togglePageUserSelect,
+    preventPageUserSelect,
+    allowPageUserSelect,
+  };
+}

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from '@/utils/color.ts';
+import { computed, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { useUserPageSelection } from './composable/use-user-select.ts';
+
+const hue = defineModel({
+  default: 0,
+});
+
+const pullDirection = ref<'right' | 'left'>();
+
+const containerRef = useTemplateRef('slider-track');
+
+const { preventPageUserSelect, allowPageUserSelect } = useUserPageSelection();
+
+watch(hue, (newHue: number, oldHue: number) => {
+  if (newHue !== 0 && newHue - oldHue > 0)
+    pullDirection.value = 'right';
+  if (newHue !== 0 && newHue - oldHue < 0)
+    pullDirection.value = 'left';
+});
+
+const pointerLeft = computed(() => {
+  if (hue.value === 0 && pullDirection.value === 'right')
+    return '100%';
+
+  return `${(hue.value * 100) / 360}%`;
+},
+);
+
+const trackThumbBg = computed(() => {
+  return `hsl(${hue.value}, 100%, 50%)`;
+});
+
+function handleChange(e: MouseEvent | TouchEvent, skip?: boolean) {
+  if (!skip) {
+    e.preventDefault();
+  }
+
+  const container = containerRef.value;
+
+  if (!container) {
+    return;
+  }
+
+  const containerWidth = container.clientWidth;
+
+  const { x: xOffset } = getAbsolutePosition(container);
+  const { x: pageX } = getPageXYFromEvent(e);
+
+  const left = pageX - xOffset;
+
+  let h;
+  let percent;
+
+  if (left < 0) {
+    h = 0;
+  }
+  else if (left > containerWidth) {
+    h = 360;
+  }
+  else {
+    percent = left * 100 / containerWidth;
+    h = Math.round(360 * percent / 100);
+  }
+  if (hue.value !== h) {
+    emitChange(h);
+  }
+}
+
+function emitChange(h: number) {
+  hue.value = h;
+}
+
+function handleMouseDown(e: MouseEvent) {
+  handleChange(e, true);
+  preventPageUserSelect();
+
+  window.addEventListener('mousemove', handleChange);
+  window.addEventListener('mouseup', handleMouseUp);
+}
+
+function handleMouseUp() {
+  allowPageUserSelect();
+  unbindEventListeners();
+}
+
+function unbindEventListeners() {
+  window.removeEventListener('mousemove', handleChange);
+  window.removeEventListener('mouseup', handleMouseUp);
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  const direction = resolveArrowDirection(e);
+
+  if (!direction) {
+    return;
+  }
+
+  e.preventDefault();
+
+  const currentValue = hue.value;
+  let newValue;
+
+  switch (direction) {
+    case 'left': {
+      newValue = currentValue - 1 < 0 ? 0 : Math.floor(currentValue - 1);
+      break;
+    }
+    case 'right': {
+      newValue = currentValue + 1 > 360 ? 360 : Math.ceil(currentValue + 1);
+      break;
+    }
+  }
+  if (typeof newValue !== 'undefined') {
+    emitChange(newValue);
+  }
+}
+
+onUnmounted(() => {
+  unbindEventListeners();
+});
+</script>
+
+<template>
+  <div class="celeste-color-slider">
+    <div
+      ref="slider-track"
+      class="slider-track"
+      role="slider"
+      :aria-valuenow="hue"
+      aria-valuemin="0"
+      aria-valuemax="360"
+      aria-label="Hue"
+      tabindex="0"
+      @mousedown="handleMouseDown"
+      @touchmove.passive="handleChange"
+      @touchstart.passive="handleChange"
+      @keydown="handleKeyDown"
+    >
+      <div
+        class="celeste-color-thumb"
+        :style="{ left: pointerLeft, background: trackThumbBg }"
+        role="presentation"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-color-slider {
+  .slider-track {
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  }
+}
+</style>

package/src/components/color-picker/index.ts

@@ -0,0 +1,14 @@
+export * from './alpha-slider.vue';
+export { default as AlphaSlider } from './alpha-slider.vue';
+
+export * from './color-area.vue';
+export { default as ColorArea } from './color-area.vue';
+
+export * from './color-picker.vue';
+export { default as ColorPicker } from './color-picker.vue';
+
+export * from './color-swatch.vue';
+export { default as ColorSwatch } from './color-swatch.vue';
+
+export * from './hue-slider.vue';
+export { default as HueSlider } from './hue-slider.vue';

package/src/components/color-picker/stories/color-picker.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import ColorPicker from '../color-picker.vue';
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'Components/Color Picker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Default: Story = {
+  args: {
+  },
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('hsl(228, 100%, 60%)');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-bind="args" v-model="color"/>
+    `,
+  }),
+};
+
+export const WithRGBDefault: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('rgb(255, 100, 50)');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};
+
+export const WithHSLDefault: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('hsl(320, 70%, 60%)');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};
+
+export const HexOnly: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('#FF6B35');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};
+
+export const RGBAndHSL: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('rgb(100, 200, 150)');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};
+
+export const WithTransparentColor: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('rgba(255, 100, 50, 0.5)');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};
+
+export const CustomLabel: Story = {
+  args: {},
+  render: (args: Story['args']) => ({
+    components: { ColorPicker },
+    setup() {
+      const color = ref('#007bff');
+      return { args, color };
+    },
+    template: `
+      <ColorPicker v-model="color" v-bind="args" />
+    `,
+  }),
+};

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class'];
+  heading?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    class="celeste-command-group"
+    :class="props.class"
+  >
+    <ComboboxLabel v-if="heading" class="celeste-command-label">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
+
+<style scoped>
+.celeste-command-group {
+  overflow: hidden;
+}
+
+.celeste-command-label {
+  padding: var(--spacing-4) var(--spacing-8);
+  color: var(--color-text-soft-400);
+  font: var(--subheading-xs);
+  text-transform: uppercase;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <div class="celeste-command-input" cmdk-input-wrapper>
+    <i i-celeste-search-line class="celeste-command-input-icon" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="clsx('celeste-command-input-primitive', props.class)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.celeste-command-input {
+  --icon-color: var(--color-icon-soft-400);
+  --placeholder-color: var(--color-text-soft-400);
+
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  transition:
+    color,
+    background-color var(--animation-normal) ease;
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+
+.celeste-command-input:hover {
+  --icon-color: var(--color-icon-sub-600);
+  --placeholder-color: var(--color-text-sub-600);
+
+  background: var(--color-bg-weak-50);
+}
+
+.celeste-command-input-primitive {
+  width: 100%;
+  transition: color var(--animation-normal) ease;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+}
+
+.celeste-command-input-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  transition: color var(--animation-normal) ease;
+  color: var(--icon-color);
+}
+
+.celeste-command-input-primitive::placeholder {
+  transition: color var(--animation-normal) ease;
+  color: var(--placeholder-color);
+}
+</style>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    class="celeste-command-item"
+    :class="props.class"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+
+<style>
+.celeste-command-item {
+  padding: var(--spacing-8);
+  border-radius: var(--radius-8);
+  background: var(--color-bg-white-0);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+}
+
+.celeste-command-item[data-highlighted] {
+  background: var(--color-bg-weak-50);
+}
+
+.celeste-command-item[data-disabled] {
+  color: var(--color-icon-disabled-300);
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="forwarded"
+    class="celeste-command-list"
+    :class="props.class"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
+
+<style>
+.celeste-command-list {
+  max-height: 300px;
+  overflow: hidden auto;
+}
+</style>