@youcan/celeste 0.6.3

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

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  type PopoverContentEmits,
+  PopoverPortal,
+  type PopoverContentProps as RadixPopoverContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<PopoverContentProps>(),
+  {
+    showTail: true,
+    side: 'bottom',
+    dismissible: true,
+    iconSize: 'lg',
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = useDelegatedProps(props, ['class', 'title']);
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<script lang="ts">
+export interface PopoverContentProps {
+  class?: HTMLAttributes['class'];
+  side?: RadixPopoverContentProps['side'];
+  title?: string;
+  description?: string;
+  showTail?: boolean;
+  dismissible?: boolean;
+  icon?: string;
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :side-offset="showTail ? 0 : 8"
+      :class="
+        clsx(
+          'celeste-popover-content-wrapper',
+          props.class,
+        )
+      "
+    >
+      <div
+        class="celeste-popover-content"
+        :style="{ padding: !$slots.default ? 'var(--spacing-16)' : '' }"
+      >
+        <template v-if="!$slots.default">
+          <span
+            v-if="icon"
+            class="celeste-popover-icon"
+            :data-icon-size="iconSize"
+          >
+            <i
+              :class="icon"
+            />
+          </span>
+          <p class="celeste-popover-title">
+            {{ title }}
+          </p>
+          <p class="celeste-popover-description">
+            {{ description }}
+          </p>
+        </template>
+        <slot v-else />
+      </div>
+      <PopoverArrow
+        v-if="showTail"
+        as-child
+        :width="16"
+        :height="8"
+      >
+        <span class="celeste-popover-arrow" />
+      </PopoverArrow>
+      <PopoverClose
+        v-if="dismissible"
+        as-child
+        class="PopoverClose"
+        aria-label="Close"
+      >
+        <CompactButton
+          variant="ghost"
+          icon="i-celeste-close-line"
+          class="celeste-popover-close-button"
+        />
+      </PopoverClose>
+      <div v-if="$slots.footer" class="celeste-popover-footer">
+        <slot name="footer" />
+      </div>
+    </PopoverContent>
+  </PopoverPortal>
+</template>
+
+<style scoped lang="scss">
+@use 'sass:map';
+
+$icon-size-map: (
+  'sm': (
+    size: 32px,
+    padding: var(--spacing-6),
+  ),
+  'md': (
+    size: 40px,
+    padding: var(--spacing-6),
+  ),
+  'lg': (
+    size: 48px,
+    padding: var(--spacing-12),
+  ),
+  'xl': (
+    size: 56px,
+    padding: var(--spacing-14),
+  ),
+  'xxl': (
+    size: 64px,
+    padding: var(--spacing-16),
+  ),
+);
+
+:deep(.celeste-popover-content-wrapper) {
+  z-index: 50;
+  min-width: 200px;
+  max-width: 400px;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  animation: var(--animation-fast) ease-out forwards;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  opacity: 0;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  scale: 0.95;
+
+  &[data-state='open'] {
+    animation-name: open;
+  }
+
+  &[data-state='closed'] {
+    animation-name: close;
+  }
+
+  .celeste-popover-arrow {
+    display: block;
+    position: relative;
+    width: 16px;
+    height: 8px;
+    overflow: hidden;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      width: 16px;
+      height: 16px;
+      transform: translate(-50%, -50%);
+      border: 1px solid var(--color-stroke-soft-200);
+      border-radius: var(--radius-2);
+      background-color: var(--color-bg-white-0);
+      rotate: 45deg;
+    }
+  }
+
+  .celeste-popover-close-button {
+    position: absolute;
+    inset-inline-end: var(--spacing-16);
+    inset-block-start: var(--spacing-16);
+  }
+
+  .celeste-popover-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+
+    .celeste-popover-title,
+    .celeste-popover-description {
+      margin: var(--spacing-0);
+    }
+
+    .celeste-popover-title {
+      color: var(--color-text-strong-950);
+      font: var(--label-md);
+    }
+
+    .celeste-popover-description {
+      color: var(--color-text-sub-600);
+      font: var(--paragraph-sm);
+    }
+
+    .celeste-popover-icon {
+      box-sizing: border-box;
+      margin-block-end: var(--spacing-16);
+      border: 1px solid var(--color-stroke-soft-200);
+      border-radius: 50%;
+      color: var(--color-icon-sub-600);
+
+      @each $key, $value in $icon-size-map {
+        &[data-icon-size='#{$key}'] {
+          width: map.get($value, size);
+          height: map.get($value, size);
+          padding: map.get($value, padding);
+        }
+      }
+
+      i {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .celeste-popover-footer {
+    display: flex;
+    padding: var(--spacing-16);
+    border-block-start: 1px solid var(--color-stroke-soft-200);
+  }
+}
+
+@keyframes open {
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes close {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+
+  to {
+    scale: 0.95;
+    opacity: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger
+    class="celeste-popover-trigger"
+    v-bind="props"
+    as="div"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
+
+<style scoped lang="scss">
+.celeste-popover-trigger {
+  width: fit-content;
+  cursor: pointer;
+}
+</style>

package/src/components/popover/popover.vue

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

package/src/components/popover/stories/popover.stories.ts

@@ -0,0 +1,341 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '../../button/button.vue';
+import PopoverContent from '../popover-content.vue';
+import PopoverTrigger from '../popover-trigger.vue';
+import Popover from '../popover.vue';
+
+const meta: Meta<typeof PopoverContent> = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    side: {
+      control: { type: 'select' },
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against when open.',
+    },
+    title: {
+      control: { type: 'text' },
+      description: 'The title text for the popover',
+    },
+    description: {
+      control: { type: 'text' },
+      description: 'The description text for the popover',
+    },
+    icon: {
+      control: { type: 'text' },
+      description: 'Icon class name to display',
+    },
+    iconSize: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg', 'xl', 'xxl'],
+      description: 'Size of the icon',
+    },
+    showTail: {
+      control: { type: 'boolean' },
+      description: 'Whether to show the arrow/tail',
+    },
+    dismissible: {
+      control: { type: 'boolean' },
+      description: 'Whether to show the close button',
+    },
+  },
+  args: {
+    side: 'bottom',
+    title: 'Popover Title',
+    description: 'This is the popover description text.',
+    showTail: true,
+    dismissible: true,
+    iconSize: 'lg',
+    icon: 'i-celeste-search-eye-line',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover>
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            Open Popover
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent 
+          v-bind="args"
+        />
+      </Popover>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover v-bind="args">
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            Show Info
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent 
+          icon="i-celeste-star-line"
+          title="Information" 
+          description="This popover includes an icon to provide visual context for the message."
+        />
+      </Popover>
+    `,
+  }),
+};
+
+export const IconSizes: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+        <Popover v-bind="args">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral">
+              Small Icon
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            icon="i-celeste-star-line"
+            icon-size="sm"
+            title="Small Icon" 
+            description="This popover has a small icon size."
+          />
+        </Popover>
+
+        <Popover v-bind="args">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral">
+              Medium Icon
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            icon="i-celeste-star-line"
+            icon-size="md"
+            title="Medium Icon" 
+            description="This popover has a medium icon size."
+          />
+        </Popover>
+
+        <Popover v-bind="args">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral">
+              Large Icon
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            icon="i-celeste-star-line"
+            icon-size="lg"
+            title="Large Icon" 
+            description="This popover has a large icon size."
+          />
+        </Popover>
+
+        <Popover v-bind="args">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral">
+              Extra Large
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            icon="i-celeste-star-line"
+            icon-size="xl"
+            title="Extra Large Icon" 
+            description="This popover has an extra large icon size."
+          />
+        </Popover>
+
+        <Popover v-bind="args">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral">
+              Extra Extra Large
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            icon="i-celeste-star-line"
+            icon-size="xxl"
+            title="Extra Large Icon" 
+            description="This popover has an extra large icon size."
+          />
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithFooter: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover v-bind="args">
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            Show Actions
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent 
+          icon="i-celeste-error-warning-line"
+          title="Confirm Action" 
+          description="Are you sure you want to proceed with this action? This cannot be undone."
+        >
+          <template #footer>
+            <div style="display: flex; gap: 8px; justify-content: flex-end; width: 100%;">
+              <Button variant="stroke" intent="neutral">
+                Cancel
+              </Button>
+              <Button variant="fill" intent="primary" type="button">
+                Confirm
+              </Button>
+            </div>
+          </template>
+        </PopoverContent>
+      </Popover>
+    `,
+  }),
+};
+
+export const NotDismissible: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover v-bind="args">
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            No Close Button
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent 
+          :dismissible="false"
+          icon="i-celeste-search-line"
+          title="Non-dismissible" 
+          description="This popover doesn't have a close button. Click outside to close."
+        />
+      </Popover>
+    `,
+  }),
+};
+
+export const NoTail: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover v-bind="args">
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            No Tail
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent 
+          :show-tail="false"
+          icon="i-celeste-notification-line"
+          title="Clean Look" 
+          description="This popover has no arrow/tail for a cleaner appearance."
+        />
+      </Popover>
+    `,
+  }),
+};
+
+export const Positioning: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-gap: var(--spacing-8)">
+        <div />
+        <Popover v-bind="args" style="grid-column-start: 2;">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral" style="width: 100%;">
+              Top
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            side="top"
+            title="Top Position" 
+            description="This popover appears above the trigger."
+          />
+        </Popover>
+
+        <div />
+        <Popover v-bind="args" style="grid-column-start: 3; grid-row-start: 2;">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral" style="width: 100%;">
+              Left
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            side="left"
+            title="Left Position" 
+            description="This popover appears to the left of the trigger."
+          />
+        </Popover>
+
+        <div />
+        <Popover v-bind="args" style="grid-column-start: 2; grid-row-start: 3;">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral" style="width: 100%;">
+              Right
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            side="right"
+            title="Right Position" 
+            description="This popover appears to the right of the trigger."
+          />
+        </Popover>
+
+        <div />
+        <Popover v-bind="args" style="grid-column-start: 1; grid-row-start: 2;">
+          <PopoverTrigger>
+            <Button variant="stroke" intent="neutral" style="width: 100%;">
+              Bottom
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent 
+            side="bottom"
+            title="Bottom Position" 
+            description="This popover appears below the trigger (default)."
+          />
+        </Popover>
+      </div>
+    `,
+  }),
+};

package/src/components/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export * from './scroll-area.vue';
+export { default as ScrollArea } from './scroll-area.vue';

package/src/components/scroll-area/scroll-area.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import ScrollBar from './scroll-bar.vue';
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="clsx('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/components/scroll-area/scroll-bar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      clsx('flex touch-none select-none transition-colors',
+           orientation === 'vertical'
+             && 'h-full w-1.5 border-l border-l-transparent p-px',
+           orientation === 'horizontal'
+             && 'h-1.5 flex-col border-t border-t-transparent p-px',
+           props.class)"
+  >
+    <ScrollAreaThumb class="thumb relative flex-1 rounded-full" />
+  </ScrollAreaScrollbar>
+</template>
+
+<style scoped>
+.thumb {
+  background-color: var(--color-bg-soft-200);
+}
+</style>