@youcan/celeste 0.6.39 → 0.6.41

package/src/components/digit-input/stories/digit-input.stories.ts

@@ -57,7 +57,7 @@ export const Default: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
         </DigitInputGroup>
@@ -78,7 +78,7 @@ export const WithPlaceholder: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
         </DigitInputGroup>
@@ -101,7 +101,7 @@ export const OTPInput: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
         </DigitInputGroup>
@@ -124,7 +124,7 @@ export const PasswordInput: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
         </DigitInputGroup>
@@ -146,7 +146,7 @@ export const Disabled: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
         </DigitInputGroup>
@@ -167,7 +167,7 @@ export const LongerInput: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 8" :key="index" :index="index" />
         </DigitInputGroup>
@@ -188,7 +188,7 @@ export const PrefilledValue: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
         </DigitInputGroup>
@@ -210,7 +210,7 @@ export const ErrorState: Story = {
       return { args, value };
     },
     template: `
-      <DigitInput v-bind="args" v-model="value">
+      <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
         <DigitInputGroup>
           <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
         </DigitInputGroup>

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './label';
 export * from './modal';
 export * from './popover';
 export * from './progress';
+export * from './radio-group';
 export * from './rich-editor';
 export * from './scroll-area';
 export * from './segmented-control';

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

@@ -41,13 +41,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 .celeste-modal-content {
   position: fixed;
   z-index: 51;
+  top: 50%;
+  left: 50%;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-20);
   background: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
   translate: -50% -50%;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
 }
 
 .fade-enter-active,

package/src/components/radio-group/index.ts

@@ -0,0 +1,5 @@
+export * from './radio-group-item.vue';
+export { default as RadioGroupItem } from './radio-group-item.vue';
+
+export * from './radio-group.vue';
+export { default as RadioGroup } from './radio-group.vue';

package/src/components/radio-group/radio-group-item.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwarded"
+    :class="clsx('celeste-radio-item', props.class)"
+  >
+    <RadioGroupIndicator class="celeste-radio-indicator" />
+  </RadioGroupItem>
+</template>
+
+<style lang="scss">
+.celeste-radio-item {
+  --celeste-radio-border: var(--color-stroke-soft-200);
+
+  all: unset;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: var(--spacing-0);
+  transition: box-shadow var(--animation-extra-fast) ease-out;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-white-0);
+  box-shadow:
+    inset 0 0 0 1.5px var(--celeste-radio-border),
+    var(--shadow-regular-xs);
+  cursor: pointer;
+
+  &:hover:not([data-disabled]) {
+    --celeste-radio-border: var(--color-stroke-sub-300);
+  }
+
+  &:focus:not([data-disabled]) {
+    --celeste-radio-border: var(--color-primary-base);
+
+    outline: none;
+  }
+
+  &[data-disabled] {
+    background-color: var(--color-bg-soft-200);
+    pointer-events: none;
+  }
+
+  &[data-state='checked']:not([data-disabled]) {
+    --celeste-radio-border: transparent;
+
+    background-color: var(--color-primary-base);
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-primary-darker);
+    }
+  }
+}
+
+.celeste-radio-indicator {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-static-white);
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="clsx('celeste-radio-wrapper', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
+
+<style lang="scss">
+  .celeste-radio-wrapper {
+  &[data-orientation='vertical'] {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/radio-group/stories/radio-group.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import RadioGroupItem from '../radio-group-item.vue';
+import RadioGroup from '../radio-group.vue';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Radio Group',
+  component: RadioGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'option2',
+    orientation: 'vertical',
+    disabled: false,
+    name: 'radio-group',
+    modelValue: '',
+    dir: 'ltr',
+    loop: true,
+    required: true,
+  },
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <RadioGroup v-bind="args" v-model="option2" style="display: flex; gap: 20px;">
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r1" value="option1"></RadioGroupItem>
+          <label for="r1" style="padding-inline-start: 10px;">Option 1</label>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r2" value="option2"></RadioGroupItem>
+          <label for="r2" style="padding-inline-start: 10px;">Option 2</label>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <RadioGroupItem id="r3" value="option3"></RadioGroupItem>
+          <label for="r3" style="padding-inline-start: 10px;">Option 3</label>
+        </div>
+      </RadioGroup>
+    `,
+  }),
+};

package/src/components/tag/index.ts

@@ -0,0 +1,2 @@
+export * from './tag.vue';
+export { default as Tag } from './tag.vue';

package/src/components/tag/stories/tag.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import Tag from '../tag.vue';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['stroke', 'gray'],
+      description: 'Visual variant of the tag',
+    },
+    dismissable: {
+      control: { type: 'boolean' },
+      description: 'Whether the tag can be dismissed with a close button',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Whether the tag is in a disabled state',
+    },
+    class: {
+      control: { type: 'text' },
+      description: 'Additional CSS classes to apply',
+    },
+    onDismiss: {
+      action: 'dismiss',
+      description: 'Event emitted when the dismiss button is clicked',
+    },
+  },
+  args: {
+    variant: 'stroke',
+    dismissable: false,
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {},
+  render: args => ({
+    components: { Tag },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tag v-bind="args">
+        Tag
+      </Tag>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag variant="stroke">Stroke Variant</Tag>
+        <Tag variant="gray">Gray Variant</Tag>
+      </div>
+    `,
+  }),
+};
+
+export const Dismissable: Story = {
+  render: args => ({
+    components: { Tag },
+    setup() {
+      function handleDismiss(): void {};
+      return { args, handleDismiss };
+    },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag variant="stroke" dismissable @dismiss="handleDismiss">Dismissable Stroke</Tag>
+        <Tag variant="gray" dismissable @dismiss="handleDismiss">Dismissable Gray</Tag>
+      </div>
+    `,
+  }),
+  args: {
+    dismissable: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: center;">
+        <Tag disabled variant="stroke">Disabled Stroke</Tag>
+        <Tag disabled variant="gray">Disabled Gray</Tag>
+        <Tag disabled dismissable variant="stroke">Disabled Dismissable</Tag>
+      </div>
+    `,
+  }),
+};
+
+export const TagList: Story = {
+  render: () => ({
+    components: { Tag },
+    setup() {
+      const tags = ref([
+        { id: 1, text: 'Facebook' },
+        { id: 2, text: 'Google Analytics' },
+        { id: 3, text: 'Snap' },
+        { id: 4, text: 'TikTok' },
+      ]);
+
+      const removeTag = (id: number): void => {
+        tags.value = tags.value.filter(tag => tag.id !== id);
+      };
+
+      return { tags, removeTag };
+    },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 32px;">
+        <Tag
+          v-for="tag in tags"
+          :key="tag.id"
+          :variant="tag.variant"
+          dismissable
+          @dismiss="removeTag(tag.id)"
+        >
+          {{ tag.text }}
+        </Tag>
+      </div>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <Tag variant="stroke">
+        <i class="i-celeste-star-line" />
+        Star
+      </Tag>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <Tag variant="stroke">
+        <img 
+          width="16"
+          height="16"
+          style="object-fit: fill; clip-path: circle()" 
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Flag_of_the_United_States.png/1024px-Flag_of_the_United_States.png" alt="USA" />
+        United States of America
+      </Tag>
+    `,
+  }),
+};

package/src/components/tag/tag.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<TagProps>(), {
+  variant: 'stroke',
+  dismissable: false,
+});
+
+defineEmits<TagEmits>();
+</script>
+
+<script lang="ts">
+export interface TagProps {
+  variant?: 'stroke' | 'gray';
+  class?: HTMLAttributes['class'];
+  dismissable?: boolean;
+  disabled?: boolean;
+}
+
+export interface TagEmits {
+  dismiss: [];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-tag', props.class)"
+    :data-tag-variant="variant"
+    :aria-disabled="disabled"
+  >
+    <slot />
+    <button
+      v-if="dismissable"
+      :disabled="disabled"
+      class="celeste-tag-dismiss-button"
+      aria-label="dismiss"
+      @click.prevent.stop="$emit('dismiss')"
+    >
+      <i class="i-celeste-close-line" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4) var(--spacing-8);
+  transition: background-color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-6);
+  color: var(--color-text-sub-600);
+  font: var(--label-xs);
+  gap: var(--spacing-4);
+
+  &[data-tag-variant='stroke']:not([aria-disabled='true']) {
+    border-color: var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+
+    &:hover {
+      border-color: transparent;
+      background-color: var(--color-bg-weak-50);
+    }
+  }
+
+  &[data-tag-variant='gray']:not([aria-disabled='true']) {
+    border-color: transparent;
+    background-color: var(--color-bg-weak-50);
+
+    &:hover {
+      border-color: var(--color-stroke-soft-200);
+      background-color: var(--color-bg-white-0);
+    }
+  }
+
+  .celeste-tag-dismiss-button {
+    --size: 16px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
+    margin-inline-end: calc(var(--spacing-4) * -1);
+    padding: var(--spacing-0);
+    border: none;
+    border-radius: calc(var(--radius-4) / 2);
+    background-color: transparent;
+    cursor: pointer;
+
+    i {
+      transition: background-color var(--animation-fast) ease-out;
+      background-color: var(--color-icon-soft-400);
+    }
+
+    &:disabled {
+      cursor: auto;
+
+      i {
+        background-color: var(--color-icon-disabled-300);
+      }
+    }
+
+    &:focus:not([aria-disabled='true']) {
+      outline: none;
+      box-shadow: var(--shadow-buttons-important-focus);
+    }
+
+    &:not(:disabled):hover {
+      i {
+        background-color: var(--color-icon-sub-600);
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    background-color: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+  }
+}
+</style>