@youcan/celeste 0.6.3

package/src/components/dropdown/stories/dropdown.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Dropdown from '../dropdown.vue';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Select...',
+    multiple: false,
+
+    options: [
+      { value: 1, label: 'Option 1', icon: 'i-celeste-globe-line' },
+      { value: 2, label: 'Option 2', image: 'https://cdn3.pixelcut.app/7/20/uncrop_hero_bdf08a8ca6.jpg' },
+      { value: 3, label: 'Option 3', icon: 'i-celeste-information-line' },
+    ],
+
+    searchable: true,
+    disabled: false,
+    size: 'sm',
+
+    badgeProps: {
+      size: 'sm',
+      variant: 'light',
+      label: '3',
+      state: 'information',
+      type: 'basic',
+    },
+
+    type: 'compact-input',
+    error: false,
+  },
+
+  render: args => ({
+    components: { Dropdown },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Dropdown v-model="" v-bind="args">
+         <template #prefix>
+           <i class="i-celeste-global-line" />
+         </template>
+      </Dropdown>
+    `,
+  }),
+};

package/src/components/dropdown-menu/dropdown-menu-content.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      force-mount
+      :class="clsx('celeste-dropdown-menu-content', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
+
+<style lang="scss">
+.celeste-dropdown-menu-content {
+  --dropdown-width: 100%;
+  --dropdown-max-width: 350px;
+
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: var(--dropdown-width);
+  min-width: 300px;
+  max-width: var(--dropdown-max-width);
+  margin-top: var(--spacing-10);
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transition-property: display, transform, opacity;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  transition-behavior: allow-discrete;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  gap: var(--spacing-4);
+
+  &[data-state='closed'] {
+    display: none;
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  &[data-state='open'] {
+    display: block;
+    transform: translateY(0);
+    opacity: 1;
+
+    @starting-style {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+  }
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-group.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup class="celeste-dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+</style>

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; label: string; sublabel?: string; description?: string }>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="clsx(
+      'celeste-dropdown-menu-item',
+      props.class,
+    )"
+  >
+    <div class="celeste-dropdown-menu-item-prefix">
+      <slot name="prefix" />
+    </div>
+
+    <div class="celeste-dropdown-menu-item-body">
+      <div class="celeste-dropdown-menu-item-text">
+        <span class="celeste-dropdown-menu-item-label" :title="label">{{ label }}</span>
+        <span
+          v-if="sublabel"
+          :title="sublabel"
+          class="celeste-dropdown-menu-item-sublabel"
+        >{{ sublabel }}</span>
+      </div>
+      <div v-if="description" class="celeste-dropdown-menu-item-description">
+        {{ description }}
+      </div>
+    </div>
+
+    <div class="celeste-dropdown-menu-item-suffix">
+      <slot name="suffix" />
+    </div>
+  </DropdownMenuItem>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  transition-property: background-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border-radius: var(--radius-8);
+  background: var(--color-bg-white-0);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  i {
+    color: var(--color-icon-sub-600);
+  }
+
+  &:focus-visible,
+  &:not([data-disabled]):hover,
+  &[data-highlighted] {
+    outline: none;
+    background: var(--color-bg-weak-50);
+  }
+
+  &-body {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacing-4);
+    width: fit-content;
+    max-width: 400px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &-text {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
+
+  &-label,
+  &-sublabel {
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-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);
+    overflow: hidden;
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+    text-overflow: ellipsis;
+  }
+
+  .celeste-dropdown-menu-item-prefix,
+  .celeste-dropdown-menu-item-suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 50%;
+    height: fit-content;
+    color: var(--color-icon-sub-600);
+
+    &:deep(i) {
+      color: var(--color-icon-sub-600);
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--color-text-disabled-300);
+    cursor: auto;
+
+    .celeste-dropdown-menu-item-label,
+    .celeste-dropdown-menu-item-sublabel,
+    .celeste-dropdown-menu-item-prefix,
+    .celeste-dropdown-menu-item-suffix,
+    .celeste-dropdown-menu-item-description {
+      color: var(--color-text-disabled-300);
+
+      :deep(i) {
+        color: var(--color-icon-disabled-300);
+      }
+    }
+  }
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-label.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="clsx('celeste-dropdown-menu-label', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-menu-label {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: var(--spacing-8);
+  color: var(--color-text-soft-400);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue';
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="clsx('celeste-dropdown-menu-separator', props.class)" />
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-menu-separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-stroke-soft-200);
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-sub-content.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuSubContent
+      v-bind="forwarded"
+      force-mount
+      :class="clsx(props.class, 'celeste-dropdown-menu-sub-content')"
+    >
+      <slot />
+    </DropdownMenuSubContent>
+  </DropdownMenuPortal>
+</template>
+
+<style lang="scss">
+.celeste-dropdown-menu-sub-content {
+  --dropdown-width: 100%;
+
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: var(--dropdown-width);
+  min-width: 300px;
+  margin-top: var(--spacing-10);
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transition-property: transform, opacity, display;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  transition-behavior: allow-discrete;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  gap: var(--spacing-4);
+
+  &[data-state='closed'] {
+    display: none;
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  &[data-state='open'] {
+    display: block;
+    transform: translateY(0);
+    opacity: 1;
+
+    @starting-style {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+  }
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-sub-trigger.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue';
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="clsx(props.class, 'celeste-dropdown-menu-sub-trigger')"
+  >
+    <slot />
+    <i class="i-celeste-arrow-right-s-line" />
+  </DropdownMenuSubTrigger>
+</template>
+
+<style>
+.celeste-dropdown-menu-sub-trigger {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-8);
+  transition-property: background-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border-radius: var(--radius-8);
+  background: var(--color-bg-white-0);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  i {
+    color: var(--color-icon-sub-600);
+
+    &:dir(rtl) {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:focus-visible,
+  &:not([data-disabled]):hover,
+  &[data-state='open'],
+  &[data-highlighted] {
+    outline: none;
+    background: var(--color-bg-weak-50);
+  }
+
+  &[data-disabled] {
+    color: var(--color-text-disabled-300);
+    cursor: auto;
+
+    :deep(i) {
+      color: var(--color-text-disabled-300);
+    }
+  }
+}
+</style>

package/src/components/dropdown-menu/dropdown-menu-sub.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

package/src/components/dropdown-menu/dropdown-menu-trigger.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger class="celeste-dropdown-menu-trigger" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
+
+<style lang="scss" scoped>
+.celeste-dropdown-menu-trigger {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-8);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  color: var(--color-text-sub-600);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  :deep(i) {
+    color: var(--color-icon-soft-400);
+  }
+
+  &:hover {
+    background: var(--color-bg-weak-50);
+  }
+
+  &[data-state='open'] {
+    border: 1px solid var(--color-stroke-strong-950);
+    box-shadow: var(--shadow-buttons-important-focus);
+    color: var(--color-text-strong-950);
+  }
+
+  &[data-disabled] {
+    background: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+    cursor: auto;
+
+    &:deep(i) {
+      color: var(--color-icon-disabled-300);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { DropdownMenuRoot, type DropdownMenuRootProps } from 'radix-vue';
+import { ref } from 'vue';
+
+const props = defineProps<DropdownMenuRootProps>();
+
+const delegatedProps = useDelegatedProps(props, 'open');
+
+const open = ref(false);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="delegatedProps" v-model:open="open">
+    <slot />
+  </DropdownMenuRoot>
+</template>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+</style>

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,29 @@
+export * from './dropdown-menu-content.vue';
+export { default as DropdownMenuContent } from './dropdown-menu-content.vue';
+
+export * from './dropdown-menu-group.vue';
+export { default as DropdownMenuGroup } from './dropdown-menu-group.vue';
+
+export * from './dropdown-menu-item.vue';
+export { default as DropdownMenuItem } from './dropdown-menu-item.vue';
+
+export * from './dropdown-menu-label.vue';
+export { default as DropdownMenuLabel } from './dropdown-menu-label.vue';
+
+export * from './dropdown-menu-separator.vue';
+export { default as DropdownMenuSeparator } from './dropdown-menu-separator.vue';
+
+export * from './dropdown-menu-sub-content.vue';
+export { default as DropdownMenuSubContent } from './dropdown-menu-sub-content.vue';
+
+export * from './dropdown-menu-sub-trigger.vue';
+export { default as DropdownMenuSubTrigger } from './dropdown-menu-sub-trigger.vue';
+
+export * from './dropdown-menu-sub.vue';
+export { default as DropdownMenuSub } from './dropdown-menu-sub.vue';
+
+export * from './dropdown-menu-trigger.vue';
+export { default as DropdownMenuTrigger } from './dropdown-menu-trigger.vue';
+
+export * from './dropdown-menu.vue';
+export { default as DropdownMenu } from './dropdown-menu.vue';