@youcan/celeste 0.6.3

package/src/components/textarea/textarea.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { TextareaHTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<TextAreaProps>(), {
+  disabled: false,
+  placeholder: 'Placeholder',
+  showCount: true,
+});
+
+const modelValue = defineModel<string>();
+</script>
+
+<script lang="ts">
+export interface TextAreaProps {
+  class?: TextareaHTMLAttributes['class'];
+  placeholder: string;
+  showCount?: boolean;
+  disabled?: boolean;
+  maxLength?: TextareaHTMLAttributes['maxlength'];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx(
+      'celeste-textarea-wrapper',
+      props.class,
+    )"
+    :aria-disabled="disabled"
+    @click="$el.querySelector('textarea')?.focus()"
+  >
+    <textarea
+      v-model="modelValue"
+      v-bind="$attrs"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+      :disabled="disabled"
+      class="celeste-textarea"
+    />
+    <span v-if="showCount && Number(maxLength)" class="celeste-textarea-count">
+      {{ `${modelValue?.length || 0}/${maxLength}` }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin transition-default {
+  transition-property: background-color, border-color, box-shadow, text-decoration-color, color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+}
+
+.celeste-textarea-wrapper {
+  @include transition-default;
+
+  --spacing: var(--spacing-10);
+
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding: var(--spacing);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-10);
+  background: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  cursor: text;
+  gap: var(--spacing-8);
+
+  &:hover:not(:focus-within) {
+    border-color: var(--color-bg-weak-50);
+    background: var(--color-bg-weak-50);
+    box-shadow: none;
+    color: var(--color-text-sub-600);
+  }
+
+  &:focus-within {
+    &:not([aria-disabled='true']) {
+      border: 1px solid var(--color-stroke-strong-950);
+      outline: none;
+      box-shadow: var(--shadow-buttons-important-focus);
+    }
+  }
+
+  .celeste-textarea-count {
+    --resize-handle-offset: 16px;
+
+    display: flex;
+    position: absolute;
+    color: var(--color-text-soft-400);
+    font: var(--subheading-2xs);
+    inset-block-end: var(--spacing);
+    inset-inline-end: calc(var(--spacing) + var(--resize-handle-offset));
+  }
+
+  &[aria-disabled='true'] {
+    border-color: transparent;
+    background: var(--color-bg-weak-50);
+    box-shadow: none;
+    cursor: not-allowed;
+
+    .celeste-textarea-count {
+      color: var(--color-icon-disabled-300);
+    }
+  }
+
+  &[error='true'] {
+    border: 1px solid var(--color-state-error-base);
+
+    .celeste-textarea-count {
+      color: var(--color-state-error-base);
+    }
+  }
+
+  .celeste-textarea {
+    @include transition-default;
+
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--font-size-2);
+    resize: vertical;
+
+    &::placeholder {
+      @include transition-default;
+
+      color: var(--color-text-soft-400);
+    }
+
+    &:hover {
+      &::placeholder {
+        color: var(--color-text-sub-600);
+      }
+    }
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      color: var(--color-text-disabled-300);
+      pointer-events: none;
+
+      &::placeholder {
+        color: var(--color-text-disabled-300);
+      }
+    }
+  }
+}
+</style>

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/stories/tooltip.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import Tooltip from '../tooltip.vue';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    title: 'Tooltip content.',
+  },
+
+  render: args => ({
+    components: { Tooltip, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; justify-content: center;">
+        <Tooltip v-bind="args">
+          <Button type="neutral" variant="stroke" size="xs">Hover or focus</Button>
+        </Tooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Dark: Story = {
+  args: {
+    variant: 'dark',
+    title: 'Tooltip content.',
+  },
+
+  render: args => ({
+    components: { Tooltip, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; justify-content: center;">
+        <Tooltip v-bind="args">
+          <Button type="neutral" variant="stroke" size="xs">Hover or focus</Button>
+        </Tooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    title: 'Tooltip content.',
+    disableHoverableContent: true,
+  },
+
+  render: args => ({
+    components: { Tooltip, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; justify-content: center;">
+        <div style="display: flex; gap: 1em; width: fit-content;">
+          <Tooltip v-bind="args" size="md">
+            <Button type="neutral" variant="stroke" size="xs">Medium</Button>
+          </Tooltip>
+          <Tooltip v-bind="args">
+            <Button type="neutral" variant="stroke" size="xs">Small (default)</Button>
+          </Tooltip>
+          <Tooltip v-bind="args" size="xs">
+            <Button type="neutral" variant="stroke" size="xs">XSmall</Button>
+          </Tooltip>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Position: Story = {
+  args: {
+    title: 'Tooltip content.',
+    disableHoverableContent: true,
+  },
+
+  render: args => ({
+    components: { Tooltip, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; justify-content: center;">
+        <div style="display: grid; gap: 1em; grid-template-columns: repeat(2, 1fr); width: fit-content;">
+          <Tooltip v-bind="args" side="left">
+            <Button type="neutral" variant="stroke" size="xs">Left</Button>
+          </Tooltip>
+          <Tooltip v-bind="args">
+            <Button type="neutral" variant="stroke" size="xs">Top</Button>
+          </Tooltip>
+          <Tooltip v-bind="args" side="bottom">
+            <Button type="neutral" variant="stroke" size="xs">Bottom</Button>
+          </Tooltip>
+          <Tooltip v-bind="args" side="right">
+            <Button type="neutral" variant="stroke" size="xs">Right</Button>
+          </Tooltip>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Description: Story = {
+  args: {
+    size: 'md',
+    dismissible: true,
+    icon: 'i-celeste-global-line',
+    title: 'Content Title',
+    description: 'Insert tooltip description here. It would look much better as three lines of text.',
+  },
+
+  render: args => ({
+    components: { Tooltip, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; justify-content: center;">
+        <Tooltip v-bind="args" style="width: 270px;">
+          <Button type="neutral" variant="stroke" size="xs">Hover or focus</Button>
+        </Tooltip>
+      </div>
+    `,
+  }),
+};

package/src/components/tooltip/tooltip.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import type { TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'radix-vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import clsx from 'clsx';
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, useForwardPropsEmits } from 'radix-vue';
+import { type HTMLAttributes, ref } from 'vue';
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  delayDuration: 0,
+  sideOffset: 12,
+  variant: 'light',
+  size: 'sm',
+});
+
+const emits = defineEmits<TooltipRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+
+const isOpen = ref(props.defaultOpen);
+
+function close() {
+  isOpen.value = false;
+}
+</script>
+
+<script lang="ts">
+export interface TooltipProps extends TooltipRootProps, TooltipContentProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  variant?: 'light' | 'dark';
+  icon?: string;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+}
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot
+      v-bind="forwarded"
+      :open="props.open || isOpen"
+      @update:open="(state) => isOpen = state"
+    >
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal class="celeste-tooltip-portal">
+        <TooltipContent
+          v-bind="{ ...forwarded, ...$attrs }"
+          :size="size"
+          :variant="variant"
+          :class="clsx('celeste-tooltip-content', props.class)"
+        >
+          <i v-if="icon" :class="`celeste-tooltip-content-icon ${icon}`" />
+          <div class="celeste-tooltip-content-box">
+            <span v-if="title" class="celeste-tooltip-content-title">{{ title }}</span>
+            <span v-if="description" class="celeste-tooltip-content-description">
+              {{ description }}
+            </span>
+          </div>
+          <CompactButton
+            v-if="dismissible"
+            variant="ghost"
+            icon="i-celeste-close-line"
+            @click="close"
+          />
+          <TooltipArrow as-child>
+            <span class="celeste-tooltip-content-arrow" />
+          </TooltipArrow>
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<style scoped lang="scss">
+:deep(.celeste-tooltip-content) {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  width: auto;
+  max-width: calc(var(--radix-tooltip-content-available-width) / 1.5);
+  height: auto;
+  animation: var(--animation-fast) ease-out forwards;
+  border: 1px solid transparent;
+  opacity: 0;
+  background-color: var(--color-bg-white-0);
+  box-shadow:
+    0 12px 24px 0 rgb(14 18 27 / 6%),
+    0 1px 2px 0 rgb(14 18 27 / 3%);
+  gap: var(--spacing-12);
+  scale: 0.98;
+
+  &[data-state='delayed-open'] {
+    animation-name: open;
+  }
+
+  &[data-state='closed'] {
+    &[data-side='left'] {
+      animation-name: close-left;
+    }
+
+    &[data-side='right'] {
+      animation-name: close-right;
+    }
+
+    &[data-side='top'] {
+      animation-name: close-top;
+    }
+
+    &[data-side='bottom'] {
+      animation-name: close-bottom;
+    }
+  }
+
+  .celeste-tooltip-content-box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+
+    .celeste-tooltip-content-description {
+      font: var(--paragraph-xs);
+    }
+  }
+
+  .celeste-tooltip-content-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .celeste-tooltip-content-arrow {
+    --tooltip-arrow-size: 8px;
+
+    position: absolute;
+    width: var(--tooltip-arrow-size);
+    border: 1px solid transparent;
+    border-bottom-left-radius: calc(var(--radius-6) / 2);
+    background-color: var(--color-bg-white-0);
+    rotate: -45deg;
+    aspect-ratio: 1;
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
+    inset-inline-start: calc(var(--tooltip-arrow-size) / 2 * -1);
+    inset-block-start: calc((var(--tooltip-arrow-size) / 2 + 1px) * -1);
+  }
+
+  &[variant='light'] {
+    border-color: var(--color-stroke-soft-200);
+
+    .celeste-tooltip-content-icon {
+      color: var(--color-icon-sub-600);
+    }
+
+    .celeste-tooltip-content-title {
+      color: var(--color-text-strong-950);
+    }
+
+    .celeste-tooltip-content-description {
+      color: var(--color-text-sub-600);
+    }
+
+    .celeste-tooltip-content-arrow {
+      border-color: var(--color-stroke-soft-200);
+    }
+  }
+
+  &[variant='dark'] {
+    background-color: var(--color-bg-strong-950);
+
+    .celeste-tooltip-content-icon {
+      color: var(--color-icon-soft-400);
+    }
+
+    .celeste-tooltip-content-title {
+      color: var(--color-text-white-0);
+    }
+
+    .celeste-tooltip-content-description {
+      color: var(--color-text-soft-400);
+    }
+
+    .celeste-tooltip-content-arrow {
+      background-color: var(--color-bg-strong-950);
+    }
+  }
+
+  &[size='xs'] {
+    padding: var(--spacing-2) var(--spacing-6);
+    border-radius: var(--radius-4);
+
+    .celeste-tooltip-content-title {
+      font: var(--paragraph-xs);
+    }
+  }
+
+  &[size='sm'] {
+    padding: var(--spacing-4) var(--spacing-10);
+    border-radius: var(--radius-6);
+
+    .celeste-tooltip-content-title {
+      font: var(--paragraph-sm);
+    }
+  }
+
+  &[size='md'] {
+    padding: var(--spacing-12);
+    border-radius: var(--radius-12);
+
+    .celeste-tooltip-content-title {
+      font: var(--label-sm);
+    }
+  }
+
+  &[data-side='left'],
+  &[data-side='right'] {
+    .celeste-tooltip-content-arrow {
+      translate: calc(var(--tooltip-arrow-size) / 4 * -1) 0;
+    }
+  }
+
+  &:has(button):not(:has(.celeste-tooltip-content-description)) {
+    align-items: center;
+  }
+}
+
+@keyframes open {
+  to {
+    translate: 0;
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+$directions: (
+  left: calc(var(--spacing-4) * -1) 0,
+  right: var(--spacing-4) 0,
+  top: 0 calc(var(--spacing-4) * -1),
+  bottom: 0 var(--spacing-4),
+);
+
+@each $dir, $position in $directions {
+  @keyframes close-#{$dir} {
+    from {
+      translate: 0;
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      translate: #{$position};
+      scale: 0.98;
+      opacity: 0;
+    }
+  }
+}
+</style>

package/src/composables/use-delegated-props.ts

@@ -0,0 +1,20 @@
+import { computed, type ComputedRef } from 'vue';
+
+export function useDelegatedProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+>(
+  props: T,
+  excludeKeys: K | K[] = ['class'] as K[],
+): ComputedRef<Omit<T, K>> {
+  return computed(() => {
+    const keysToExclude = Array.isArray(excludeKeys) ? excludeKeys : [excludeKeys];
+    const delegated = { ...props } as T;
+
+    keysToExclude.forEach((key) => {
+      delete delegated[key];
+    });
+
+    return delegated as Omit<T, K>;
+  });
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import * as components from '@/components';
+import 'virtual:uno.css';
+
+export const Celeste = {
+  install(vue: App) {
+    Object.entries(components).forEach(([name, component]) => {
+      vue.component(name, component);
+    });
+  },
+};
+
+export * from '@/components';

package/src/shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}