@youcan/celeste 0.6.3

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+});
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    class="celeste-command-root"
+    :class="props.class"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+
+<style>
+.celeste-command-root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-8);
+  overflow: hidden;
+  border-radius: var(--radius-16);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  gap: var(--spacing-4);
+}
+</style>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxSeparator } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="clsx('celeste-command-separator', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+
+<style scoped>
+.celeste-command-separator {
+  width: 100%;
+  height: 1px;
+  background: var(--color-bg-soft-200);
+}
+</style>

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Separator } from 'radix-vue';
+
+const props = withDefaults(defineProps<ContentDividerProps>(), {
+  type: 'line',
+});
+</script>
+
+<script lang="ts">
+export interface ContentDividerProps {
+  class?: HTMLAttributes['class'] ;
+  type: 'line' | 'text' | 'text-line' | 'solid-text';
+  text?: string;
+}
+</script>
+
+<template>
+  <Separator
+    aria-label="divider"
+    :class="clsx('celeste-celecte-content-divider', props.class)"
+    class="celecte-content-divider"
+  >
+    <div
+      v-if="type === 'line'"
+      class="celecte-content-divider-type-line"
+    />
+    <div
+      v-if="type === 'text' && text"
+      class="celecte-content-divider-type-text"
+    >
+      {{ text }}
+    </div>
+    <div
+      v-if="type === 'text-line' && text"
+      class="celecte-content-divider-type-text-line"
+    >
+      <hr> <span>{{ text }}</span> <hr>
+    </div>
+    <div
+      v-if="type === 'solid-text' && text"
+      class="celecte-content-divider-type-solid-text"
+    >
+      {{ text }}
+    </div>
+  </Separator>
+</template>
+
+<style lang="scss">
+.celecte-content-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-soft-400);
+  font: var(--subheading-xs);
+  text-transform: var(--text-case-uppercase);
+  word-break: keep-all;
+
+  &-type-line {
+    flex: 1 0 0;
+    width: 100%;
+    height: 1px;
+    padding-block: var(--spacing-1);
+    background: var(--color-stroke-soft-200);
+    gap: var(--spacing-8);
+  }
+
+  &-type-text {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4) var(--spacing-8);
+    white-space: nowrap;
+  }
+
+  &-type-text-line {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    width: 100%;
+    height: var(--spacing-12);
+    font: var(--subheading-xs);
+    gap: var(--spacing-10);
+    white-space: nowrap;
+
+    hr {
+      width: 100%;
+      height: 1px;
+      border: none;
+      background: var(--color-stroke-soft-200);
+    }
+  }
+
+  &-type-solid-text {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    align-self: stretch;
+    width: 100%;
+    padding: var(--spacing-6) 20px;
+    background: var(--color-bg-weak-50);
+    gap: var(--spacing-6);
+  }
+}
+</style>

package/src/components/content-divider/index.ts

@@ -0,0 +1,2 @@
+export * from './content-divider.vue';
+export { default as ContentDivider } from './content-divider.vue';

package/src/components/content-divider/stories/content-divider.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '../../button/button.vue';
+import ContentDivider from '../content-divider.vue';
+
+const meta: Meta<typeof ContentDivider> = {
+  title: 'Components/Content Divider',
+  component: ContentDivider,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContentDivider>;
+
+export const Default: Story = {
+  args: {
+    text: 'Content divider',
+  },
+
+  render: args => ({
+    components: { ContentDivider, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+    <ContentDivider v-bind="args">
+  <template #groupButtons>
+    <Button size="xxs">
+      <i class="i-celeste-arrow-left-s-line"></i>
+    </Button>
+    <Button size="xxs">
+      <i class="i-celeste-arrow-right-s-line"></i>
+    </Button>
+  </template>
+</ContentDivider>
+    `,
+  }),
+};

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

@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { SwitchRoot, SwitchThumb } from 'radix-vue';
+import { computed } from 'vue';
+import Badge, { type BadgeProps } from '../badge/badge.vue';
+import Button, { type ButtonProps } from '../button/button.vue';
+
+const props = withDefaults(defineProps<ContextMenuItemProps>(), {
+  disabled: false,
+  focused: false,
+  size: 'sm',
+});
+
+const selectedModel = defineModel<boolean>('selected');
+
+const mergedBadgeProps = computed(() => ({
+  ...props.badgeProps,
+  disabled: props.disabled,
+}));
+
+const mergedButtonProps = computed<ButtonProps | null>(() => {
+  return props.buttonProps
+    ? {
+        size: props.size === 'sm' ? 'xxs' : 'xs',
+        variant: props.size === 'sm' ? 'ghost' : 'lighter',
+        disabled: props.disabled,
+        ...props.buttonProps,
+      }
+    : null;
+});
+</script>
+
+<script lang="ts">
+export interface ContextMenuItemProps {
+  size: 'sm' | 'lg';
+  class?: string;
+  label: string;
+  sublabel?: string;
+  description?: string;
+  disabled?: boolean;
+  focused?: boolean;
+  badgeProps?: BadgeProps;
+  shortcut?: string;
+  toggle?: boolean;
+  selected: boolean;
+  buttonProps?: ButtonProps;
+  rightIcon?: string;
+}
+</script>
+
+<template>
+  <div
+    tabindex="0"
+    :aria-disabled="disabled"
+    :class="clsx(
+      'celeste-context-menu-item',
+      `celeste-context-menu-item-size-${size}`,
+      { 'celeste-context-menu-item-disabled': disabled },
+      { 'celeste-context-menu-item-selected': selected },
+      { 'celeste-context-menu-item-focused': focused },
+    )"
+  >
+    <div
+      v-if="$slots.prefix"
+      :class="clsx(
+        'celeste-context-menu-item-prefix',
+        `celeste-context-menu-item-prefix-${size}`,
+      )"
+    >
+      <slot name="prefix" />
+    </div>
+    <div class="celeste-context-menu-item-info">
+      <div
+        :class="clsx(
+          'celeste-context-menu-item-header',
+          `celeste-context-menu-item-header-${size}`,
+        )"
+      >
+        <span class="celeste-context-menu-item-label" v-html="label" />
+        <span v-if="sublabel" class="celeste-context-menu-item-sublabel">{{ sublabel }}</span>
+      </div>
+      <p v-if="props.description && props.size === 'lg'" class="celeste-context-menu-item-description">
+        {{ description }}
+      </p>
+    </div>
+    <Badge
+      v-if="mergedBadgeProps"
+      v-bind="mergedBadgeProps"
+      class="celeste-context-menu-item-badge"
+    />
+    <span v-if="shortcut" class="celeste-context-menu-item-shortcut">
+      {{ shortcut }}
+    </span>
+    <span class="celeste-context-menu-item-switch">
+      <SwitchRoot
+        v-model:checked="selectedModel"
+        :disabled="disabled"
+        class="celeste-switch-root"
+      >
+        <SwitchThumb class="celeste-switch-thumb" />
+      </SwitchRoot>
+    </span>
+    <span class="celeste-context-menu-item-button">
+      <Button
+        v-if="mergedButtonProps"
+        v-bind="mergedButtonProps"
+      >
+        <slot name="button-label" />
+      </Button>
+    </span>
+    <span v-if="rightIcon" class="celeste-context-menu-item-suffix">
+      <i :class="rightIcon" />
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.celeste-context-menu-item {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 300px;
+  min-height: 36px;
+  padding: var(--spacing-8);
+  transition-property: background-color, transform;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border-radius: var(--radius-8);
+  background: var(--color-bg-white-0);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  i {
+    color: var(--color-icon-sub-600);
+  }
+
+  .celeste-context-menu-item-shortcut {
+    padding: var(--spacing-2) var(--spacing-6);
+    border: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--spacing-4);
+    background: var(--color-bg-white-0);
+    color: var(--color-text-sub-600);
+    font: var(--subheading-xs);
+  }
+
+  .celeste-context-menu-item-switch {
+    :deep(.celeste-switch-root) {
+      display: flex;
+      position: relative;
+      flex-shrink: 0;
+      align-items: center;
+      width: 30px;
+      height: 18px;
+      padding-inline: 7px;
+      border: none;
+      border-radius: var(--radius-full);
+      background: var(--color-bg-soft-200);
+      cursor: pointer;
+
+      .celeste-switch-thumb {
+        display: block;
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        transition-property: background-color, box-shadow, transform;
+        transition-duration: var(--animation-fast);
+        transition-timing-function: ease-out;
+        border-radius: var(--radius-full);
+        outline: 4px solid var(--color-bg-white-0);
+        background: var(--color-bg-soft-200);
+      }
+
+      &[data-state='checked'] {
+        background: var(--color-primary-base);
+
+        .celeste-switch-thumb {
+          transform: translateX(12px);
+          background: var(--color-primary-base);
+        }
+      }
+
+      &[data-state='checked']:has([data-disabled]),
+      &[data-state='unchecked']:has([data-disabled]) {
+        border: 1px solid var(--color-bg-soft-200);
+        background: var(--color-bg-white-0);
+        cursor: not-allowed;
+
+        .celeste-switch-thumb {
+          outline-color: var(--color-bg-soft-200);
+          background: var(--color-stroke-soft-200);
+        }
+      }
+    }
+  }
+
+  &:hover:not(.celeste-context-menu-item-disabled) {
+    background: var(--color-bg-weak-50);
+
+    .celeste-context-menu-item-switch {
+      :deep(.celeste-switch-root) {
+        &[data-state='checked']:not([data-disabled]) {
+          background: var(--color-primary-dark);
+
+          .celeste-switch-thumb {
+            background: var(--color-primary-dark);
+          }
+        }
+
+        &[data-state='unchecked']:not([data-disabled]) {
+          background: var(--color-bg-sub-300);
+
+          .celeste-switch-thumb {
+            background: var(--color-bg-sub-300);
+          }
+        }
+      }
+    }
+  }
+
+  &-focused {
+    background: var(--color-bg-weak-50);
+  }
+
+  :deep(.celeste-input-wrapper) {
+    gap: 0;
+  }
+
+  &-size-sm {
+    height: 36px;
+  }
+
+  &-size-lg {
+    height: 56px;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
+
+  &-label {
+    color: var(--color-text-strong-950);
+    font: var(--paragraph-sm);
+  }
+
+  &-sublabel {
+    color: var(--color-text-soft-400);
+    font: var(--paragraph-xs);
+  }
+
+  &-description {
+    margin: var(--spacing-0);
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+
+  .celeste-context-menu-item-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-icon-sub-600);
+
+    &-lg {
+      padding: var(--spacing-10);
+      border: 1px solid var(--color-stroke-soft-200);
+      border-radius: var(--radius-full);
+      box-shadow: var(--shadow-regular-xs);
+      gap: var(--spacing-10);
+    }
+  }
+
+  .celeste-context-menu-item-suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: fit-content;
+    color: var(--color-icon-sub-600);
+  }
+
+  &-disabled {
+    background: var(--color-bg-white-0);
+    color: var(--color-text-disabled-300);
+    cursor: not-allowed;
+
+    :deep(i) {
+      color: var(--color-text-disabled-300);
+    }
+
+    .celeste-context-menu-item-label,
+    .celeste-context-menu-item-sublabel,
+    .celeste-context-menu-item-description,
+    .celeste-context-menu-item-shortcut {
+      color: var(--color-text-disabled-300);
+    }
+  }
+
+  &-selected {
+    background: var(--color-bg-weak-50);
+  }
+
+  .celeste-context-menu-item-info {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-4);
+  }
+
+  .celeste-context-menu-item-header-lg {
+    .celeste-context-menu-item-label {
+      font-weight: var(--font-weights-display-0);
+    }
+  }
+}
+</style>