@youcan/celeste 0.6.3

package/src/components/segmented-control/index.ts

@@ -0,0 +1,5 @@
+export * from './segmented-control-item.vue';
+export { default as SegmentedControlItem } from './segmented-control-item.vue';
+
+export * from './segmented-control.vue';
+export { default as SegmentedControl } from './segmented-control.vue';

package/src/components/segmented-control/segmented-control-item.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { ToggleGroupItem as SegmentedControlItem, type ToggleGroupItemProps } from 'radix-vue';
+
+const props = defineProps<ToggleGroupItemProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+
+function onKeydown(e: KeyboardEvent) {
+  const item = e.currentTarget as HTMLButtonElement;
+
+  if ((e.key === 'Enter' || e.key === ' ') && item.getAttribute('data-state') === 'on') {
+    e.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <SegmentedControlItem
+    v-bind="delegatedProps"
+    :class="clsx('celeste-segmented-control-item', props.class)"
+    @keydown="onKeydown"
+  >
+    <slot />
+  </SegmentedControlItem>
+</template>
+
+<style scoped>
+.celeste-segmented-control-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  justify-content: center;
+  width: 100%;
+  padding: var(--spacing-4);
+  transition: all var(--animation-fast) ease-out;
+  border: none;
+  border-radius: var(--radius-6);
+  background-color: transparent;
+  color: var(--color-text-soft-400);
+  font: var(--label-sm);
+  cursor: pointer;
+
+  &[data-state='on'] {
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-toggle-switch);
+    color: var(--color-text-strong-950);
+    pointer-events: none;
+  }
+
+  &[data-state='off']:hover {
+    color: var(--color-text-sub-600);
+  }
+
+  &:disabled {
+    color: var(--color-text-disabled-300);
+    pointer-events: none;
+    user-select: none;
+  }
+}
+</style>

package/src/components/segmented-control/segmented-control.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { ToggleGroupRoot as SegmentedControlRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<Omit<ToggleGroupRootProps, 'type'> & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SegmentedControlRoot
+    :class="clsx('celeste-segmented-control', props.class)"
+    v-bind="forwarded"
+    type="single"
+  >
+    <slot />
+  </SegmentedControlRoot>
+</template>
+
+<style scoped>
+.celeste-segmented-control {
+  display: flex;
+  gap: var(--spacing-4);
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-4);
+  border-radius: var(--radius-10);
+  background-color: var(--color-bg-weak-50);
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/segmented-control/stories/segmented-control.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import SegmentedControlItem from '../segmented-control-item.vue';
+import SegmentedControl from '../segmented-control.vue';
+
+const meta: Meta<typeof SegmentedControl> = {
+  title: 'Components/Segmented Control',
+  component: SegmentedControl,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'light',
+    orientation: 'horizontal',
+    loop: true,
+    rovingFocus: true,
+    disabled: false,
+    dir: 'ltr',
+  },
+
+  render: args => ({
+    components: { SegmentedControl, SegmentedControlItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlItem value="light">
+          <i class="i-celeste-sun-line" /> Light
+        </SegmentedControlItem>
+        <SegmentedControlItem value="dark">
+          <i class="i-celeste-moon-line" /> Dark
+        </SegmentedControlItem>
+        <SegmentedControlItem value="system" disabled>
+          <i class="i-celeste-settings-line" /> System
+        </SegmentedControlItem>
+      </SegmentedControl>`,
+  }),
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+    defaultValue: 'light',
+  },
+  render: args => ({
+    components: { SegmentedControl, SegmentedControlItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlItem value="light">
+          <i class="i-celeste-sun-line" /> Light
+        </SegmentedControlItem>
+        <SegmentedControlItem value="dark">
+          <i class="i-celeste-moon-line" /> Dark
+        </SegmentedControlItem>
+        <SegmentedControlItem value="system" disabled>
+          <i class="i-celeste-settings-line" /> System
+        </SegmentedControlItem>
+      </SegmentedControl>
+    `,
+  }),
+};
+
+export const LabelsOnly: Story = {
+  args: {
+    orientation: 'horizontal',
+    defaultValue: 'light',
+  },
+  render: args => ({
+    components: { SegmentedControl, SegmentedControlItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlItem value="light">
+          Light
+        </SegmentedControlItem>
+        <SegmentedControlItem value="dark">
+          Dark
+        </SegmentedControlItem>
+        <SegmentedControlItem value="system">
+          System
+        </SegmentedControlItem>
+      </SegmentedControl>
+    `,
+  }),
+};
+
+export const IconsOnly: Story = {
+  args: {
+    orientation: 'horizontal',
+    defaultValue: 'light',
+  },
+  render: args => ({
+    components: { SegmentedControl, SegmentedControlItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlItem value="light">
+          <i class="i-celeste-sun-line" />
+        </SegmentedControlItem>
+        <SegmentedControlItem value="dark">
+          <i class="i-celeste-moon-line" />
+        </SegmentedControlItem>
+        <SegmentedControlItem value="system">
+          <i class="i-celeste-settings-line" />
+        </SegmentedControlItem>
+      </SegmentedControl>
+    `,
+  }),
+};

package/src/components/select/index.ts

@@ -0,0 +1,26 @@
+export * from './select-content.vue';
+export { default as SelectContent } from './select-content.vue';
+
+export * from './select-group.vue';
+export { default as SelectGroup } from './select-group.vue';
+
+export * from './select-icon.vue';
+export { default as SelectIcon } from './select-icon.vue';
+
+export * from './select-item.vue';
+export { default as SelectItem } from './select-item.vue';
+
+export * from './select-label.vue';
+export { default as SelectLabel } from './select-label.vue';
+
+export * from './select-separator.vue';
+export { default as SelectSeparator } from './select-separator.vue';
+
+export * from './select-trigger.vue';
+export { default as SelectTrigger } from './select-trigger.vue';
+
+export * from './select-value.vue';
+export { default as SelectValue } from './select-value.vue';
+
+export * from './select.vue';
+export { default as Select } from './select.vue';

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectContent, type SelectContentEmits, type SelectContentProps, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue';
+
+const props = withDefaults(defineProps<SelectContentProps & {
+  class?: HTMLAttributes['class'];
+  width?: 'full' | 'fit';
+}>(), { width: 'full' });
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="forwarded"
+      position="popper"
+      :data-width="width"
+      :class="clsx('celeste-select-content', props.class)"
+    >
+      <SelectViewport class="celeste-select-view-port">
+        <slot />
+      </SelectViewport>
+    </SelectContent>
+  </SelectPortal>
+</template>
+
+<style scoped lang="scss">
+:deep(.celeste-select-content) {
+  z-index: 50;
+  max-height: var(--radix-select-content-available-height);
+  overflow-y: scroll;
+  animation: var(--animation-fast) forwards;
+  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);
+  scale: 0.98;
+  gap: var(--spacing-4);
+
+  &[data-side='top'] {
+    margin-block-start: var(--spacing-4);
+    animation-name: open-top;
+  }
+
+  &[data-side='bottom'] {
+    margin-block-end: var(--spacing-4);
+    animation-name: open-bottom;
+  }
+
+  &[width='full'] {
+    width: var(--radix-select-trigger-width);
+  }
+
+  .celeste-select-view-port {
+    padding: var(--spacing-8);
+  }
+}
+
+@keyframes open-bottom {
+  to {
+    scale: 1;
+    margin-block-start: var(--spacing-8);
+  }
+}
+
+@keyframes open-top {
+  to {
+    scale: 1;
+    margin-block-end: var(--spacing-8);
+  }
+}
+</style>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectGroup, type SelectGroupProps } from 'radix-vue';
+
+const props = defineProps<SelectGroupProps>();
+</script>
+
+<template>
+  <SelectGroup v-bind="props">
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/select/select-icon.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <span v-bind="delegatedProps" :class="clsx('celeste-select-icon', props.class)">
+    <slot />
+  </span>
+</template>
+
+<style scoped lang="scss">
+.celeste-select-icon {
+  --select-icon-size: 20px;
+
+  width: var(--select-icon-size);
+  height: var(--select-icon-size);
+  transition: color var(--animation-fast) ease-out;
+
+  & > :where(i, svg, img) {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectItem, SelectItemIndicator, type SelectItemProps, SelectItemText } from 'radix-vue';
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <SelectItem v-bind="delegatedProps" :class="clsx('celeste-select-item', props.class)">
+    <SelectItemText> <slot /></SelectItemText>
+    <SelectItemIndicator>
+      <i class="i-celeste-check-line" />
+    </SelectItemIndicator>
+  </SelectItem>
+</template>
+
+<style scoped lang="scss">
+.celeste-select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-8);
+  gap: var(--spacing-4);
+  border-radius: var(--radius-8);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  cursor: pointer;
+
+  &:deep(.celeste-select-icon) {
+    flex-shrink: 0;
+    color: var(--color-icon-sub-600);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-bg-weak-50);
+  }
+
+  &:deep(> span) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+  }
+
+  &[data-disabled] {
+    color: var(--color-text-disabled-300);
+    pointer-events: none;
+    user-select: none;
+
+    &:deep(i) {
+      color: var(--color-icon-disabled-300);
+    }
+
+    &:deep(.celeste-select-icon > img) {
+      opacity: 0.3;
+    }
+  }
+}
+</style>

package/src/components/select/select-label.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 { SelectLabel, type SelectLabelProps } from 'radix-vue';
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <SelectLabel
+    v-bind="delegatedProps"
+    :class="clsx('celeste-select-label', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
+
+<style scoped lang="scss">
+.celeste-select-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/select/select-separator.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="delegatedProps"
+    :class="clsx('celeste-select-separator', props.class)"
+  />
+</template>
+
+<style scoped lang="scss">
+.celeste-select-separator {
+  width: 100%;
+  height: 1px;
+  margin-block: calc(var(--spacing-6) * 0.5);
+  background-color: var(--color-stroke-soft-200);
+}
+</style>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<SelectTriggerProps & {
+  class?: HTMLAttributes['class'];
+  variant?: 'default' | 'compact' | 'inline';
+  size?: 'xs' | 'sm' | 'md';
+  hasError?: boolean;
+}>(), {
+  variant: 'default',
+  size: 'md',
+});
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="delegatedProps"
+    :class="clsx('celeste-select-trigger', props.class)"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <i class="i-celeste-arrow-down-s-line" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
+
+<style scoped lang="scss">
+.celeste-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-10);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  cursor: pointer;
+  gap: var(--spacing-8);
+
+  & > i {
+    transition: rotate var(--animation-fast) ease-out;
+  }
+
+  &:deep(.celeste-select-value) {
+    flex: 2;
+  }
+
+  &[size='xs'] {
+    height: 32px;
+  }
+
+  &[size='sm'] {
+    height: 36px;
+  }
+
+  &[size='md'] {
+    height: 40px;
+  }
+
+  &[variant='compact'] {
+    width: fit-content;
+  }
+
+  &[variant='inline'] {
+    width: fit-content;
+    height: fit-content;
+    padding: var(--spacing-0);
+    border-radius: 0;
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &[haserror='true'] {
+    border-color: var(--color-state-error-base);
+  }
+
+  &[aria-expanded='true'] {
+    & > i {
+      rotate: 180deg;
+    }
+  }
+
+  &:focus > i {
+    color: var(--color-icon-strong-950);
+  }
+
+  &[data-placeholder] {
+    &:deep(.celeste-select-value) {
+      color: var(--color-text-sub-600);
+
+      & ~ i {
+        color: var(--color-icon-soft-400);
+      }
+    }
+
+    &:deep(.celeste-select-icon) {
+      color: var(--color-icon-soft-400);
+    }
+  }
+
+  &:disabled {
+    border-color: transparent;
+    background-color: var(--color-bg-weak-50);
+    pointer-events: none;
+
+    &:deep(.celeste-select-value) {
+      color: var(--color-text-disabled-300);
+
+      & i,
+      & ~ i {
+        color: var(--color-icon-disabled-400);
+      }
+
+      .celeste-select-icon > img {
+        opacity: 0.3;
+      }
+    }
+
+    &:deep(.celeste-select-icon) {
+      color: var(--color-icon-disabled-400);
+    }
+  }
+
+  &:not([data-placeholder]) {
+    &:deep(> :first-child.celeste-select-icon) {
+      display: none;
+    }
+  }
+
+  &:hover {
+    &[variant='inline'] {
+      & > i,
+      &:deep(.celeste-select-icon),
+      &:deep(.celeste-select-value) {
+        color: var(--color-text-strong-950);
+      }
+    }
+
+    &:not([variant='inline']) {
+      border-color: transparent;
+      background-color: var(--color-bg-weak-50);
+    }
+  }
+
+  &:focus {
+    &:not([variant='inline']) {
+      border-color: var(--color-stroke-strong-950);
+      outline-color: var(--color-stroke-soft-200);
+    }
+  }
+}
+</style>

package/src/components/select/select-value.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { SelectValue, type SelectValueProps } from 'radix-vue';
+
+const props = defineProps<SelectValueProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <SelectValue
+    v-bind="delegatedProps"
+    :class="clsx('celeste-select-value', props.class)"
+  >
+    <slot />
+  </SelectValue>
+</template>
+
+<style scoped lang="scss">
+.celeste-select-value {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  gap: var(--spacing-8);
+
+  &:deep(i),
+  &:deep(~ i) {
+    flex-shrink: 0;
+    color: var(--color-icon-sub-600);
+  }
+}
+</style>