@youcan/celeste 0.6.3

package/src/components/button/link-button.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<LinkButtonProps>(), {
+  size: 'sm',
+  intent: 'primary',
+  as: 'a',
+});
+</script>
+
+<script lang="ts">
+export interface LinkButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'sm' | 'md';
+  intent?: 'primary' | 'black' | 'gray' | 'error';
+  underline?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :disabled
+    :as-child
+    :class="clsx(
+      'celeste-link-button',
+      `celeste-link-button-${intent}`,
+      `celeste-link-button-${size}`,
+      disabled && 'celeste-link-button-disabled',
+      underline && 'celeste-link-button-underline',
+      props.class,
+    )"
+    :role="as === 'a' ? 'link' : 'button'"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+.celeste-link-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition-property: color, text-decoration-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:disabled,
+  &-disabled {
+    color: var(--color-text-disabled-300);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  &-underline {
+    text-decoration: underline;
+  }
+
+  &-md {
+    height: 20px;
+    font: var(--label-sm);
+
+    :deep(i) {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--label-xs);
+
+    :deep(i) {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &-primary:not(&-disabled) {
+    color: var(--color-primary-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-primary-darker);
+    }
+  }
+
+  &-black:not(&-disabled) {
+    color: var(--color-text-strong-950);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-strong-950);
+    }
+  }
+
+  &-gray:not(&-disabled) {
+    color: var(--color-text-sub-600);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-sub-600);
+    }
+  }
+
+  &-error:not(&-disabled) {
+    color: var(--color-state-error-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-red-700);
+    }
+  }
+}
+</style>

package/src/components/button/social-button.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+const props = withDefaults(defineProps<SocialButtonProps>(), {
+  variant: 'stroke',
+});
+</script>
+
+<script lang="ts">
+export interface SocialButtonProps {
+  brand: 'apple' | 'twitter' | 'google' | 'facebook' | 'linkedin' | 'github';
+  variant?: 'fill' | 'stroke';
+  class?: string;
+  label?: string;
+}
+</script>
+
+<template>
+  <Primitive
+    :aria-label="label"
+    role="button"
+    :class="clsx(
+      'celeste-social-button',
+      `celeste-social-button-${brand}`,
+      `celeste-social-button-${variant}`,
+      props.class,
+    )"
+    as="button"
+  >
+    <i :class="`i-celeste-brand-${brand}-${variant === 'fill' ? 'white' : 'original'}`" />
+    <span v-if="label" role="presentation">{{ label }}</span>
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'sass:string';
+
+@property --celeste-social-button-bg {
+  syntax: '<color>';
+  initial-value: rgb(0 0 0 / 0%);
+  inherits: false;
+}
+
+$brand-map: (
+  'google': (
+    bg: #f14336,
+    hover: rgb(0 0 0 / 16%),
+  ),
+  'apple': (
+    bg: #000,
+    hover: rgb(255 255 255 / 16%),
+  ),
+  'twitter': (
+    bg: #000,
+    hover: rgb(255 255 255 / 16%),
+  ),
+  'facebook': (
+    bg: #1977f3,
+    hover: rgb(0 0 0 / 16%),
+  ),
+  'linkedin': (
+    bg: #0077b5,
+    hover: rgb(0 0 0 / 16%),
+  ),
+  'github': (
+    bg: #24292f,
+    hover: rgb(255 255 255 / 16%),
+  ),
+);
+
+.celeste-social-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-10);
+  transition-property: --celeste-social-button-bg, background-color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-10);
+  font: var(--label-sm);
+  gap: var(--spacing-8);
+  cursor: pointer;
+
+  span {
+    padding-inline-end: var(--spacing-6);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--shadow-buttons-important-focus);
+  }
+
+  &-fill {
+    color: var(--color-text-white-0);
+  }
+
+  &-stroke {
+    border-color: var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-xs);
+    color: var(--text-strong-950);
+
+    &:hover {
+      border-color: transparent;
+      background: var(--color-bg-weak-50);
+    }
+  }
+
+  i {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  @each $k, $v in $brand-map {
+    &-#{$k}:not(&-stroke) {
+      background:
+        linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%),
+        #{map.get($v, bg)};
+
+      &:hover {
+        --celeste-social-button-bg: #{map.get($v, hover)};
+      }
+    }
+  }
+}
+</style>

package/src/components/button/stories/button.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '../button.vue';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Button v-bind="args">
+        Continue
+        <i class="i-celeste-arrow-right-s-line"></i>
+      </Button>
+    `,
+  }),
+};

package/src/components/button/stories/compact-button.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CompactButton from '../compact-button.vue';
+
+const meta: Meta<typeof CompactButton> = {
+  title: 'Components/CompactButton',
+  component: CompactButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CompactButton>;
+
+export const Default: Story = {
+  args: {
+    variant: 'stroke',
+    icon: 'i-celeste-close-line',
+    size: 'lg',
+    rounded: false,
+  },
+
+  render: args => ({
+    components: { CompactButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CompactButton v-bind="args">
+      </CompactButton>
+    `,
+  }),
+};

package/src/components/button/stories/fancy-button.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import FancyButton from '../fancy-button.vue';
+
+const meta: Meta<typeof FancyButton> = {
+  title: 'Components/FancyButton',
+  component: FancyButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FancyButton>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { FancyButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <FancyButton v-bind="args">
+        Continue
+        <i class="i-celeste-arrow-right-s-line"></i>
+      </FancyButton>
+    `,
+  }),
+};

package/src/components/button/stories/link-button.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import LinkButton from '../link-button.vue';
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Components/LinkButton',
+  component: LinkButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkButton>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkButton target="self" href="https://google.com" v-bind="args">
+        Link Button Text
+        <i class="i-celeste-arrow-right-s-line" />
+      </LinkButton>
+    `,
+  }),
+};

package/src/components/button/stories/social-button.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import SocialButton from '../social-button.vue';
+
+const meta: Meta<typeof SocialButton> = {
+  title: 'Components/SocialButton',
+  component: SocialButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SocialButton>;
+
+export const Default: Story = {
+  args: {
+    brand: 'google',
+    variant: 'fill',
+  },
+
+  render: args => ({
+    components: { SocialButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SocialButton v-bind="args">
+      </SocialButton>
+    `,
+  }),
+};

package/src/components/checkbox/checkbox.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-checkbox', props.class)"
+  >
+    <CheckboxIndicator class="celeste-checkbox-indicator" />
+  </CheckboxRoot>
+</template>
+
+<style lang="scss">
+.celeste-checkbox {
+  --checkbox-size: 16px;
+  --checkbox-checkmark-size: 8px;
+  --checkbox-indeterminate-size: 8px;
+
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  transition: background var(--animation-fast) ease-out;
+  border: none;
+  border-radius: var(--radius-4);
+  background-color: var(--color-bg-soft-200);
+  color: var(--color-static-white);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc(var(--checkbox-size) - 3px);
+    height: calc(var(--checkbox-size) - 3px);
+    transition: background var(--animation-fast) ease-out;
+    border-radius: calc(var(--radius-4) / 1.5);
+    background-color: var(--color-bg-white-0);
+    box-shadow: 0 2px 2px 0 rgb(27 28 29 / 12%);
+    inset: 1.5px;
+  }
+
+  .celeste-checkbox-indicator {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+    }
+
+    &[data-state='checked']::before {
+      width: calc(var(--checkbox-checkmark-size) / 2);
+      height: var(--checkbox-checkmark-size);
+      margin-block-start: -3px;
+      transform: scaleY(0.5);
+      animation: fade-in var(--animation-fast) linear forwards;
+      border: 1.8px solid currentcolor;
+      rotate: 45deg;
+      border-block-start: transparent;
+      border-inline-start: transparent;
+    }
+
+    &[data-state='indeterminate']::before {
+      width: var(--checkbox-indeterminate-size);
+      height: 1.8px;
+      background-color: var(--color-static-white);
+    }
+
+    @keyframes fade-in {
+      to {
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  &[data-state='checked']:not(:disabled),
+  &[data-state='indeterminate']:not(:disabled) {
+    background-color: var(--color-primary-base);
+
+    &::before {
+      background-color: var(--color-primary-base);
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
+    &[data-state='unchecked'] {
+      background-color: var(--color-primary-base);
+    }
+  }
+
+  &:hover:not(:disabled, :focus) {
+    &[data-state='unchecked'] {
+      background-color: var(--color-bg-sub-300);
+    }
+
+    &[data-state='checked'],
+    &[data-state='indeterminate'] {
+      background-color: var(--color-primary-darker);
+
+      &::before {
+        background-color: var(--color-primary-darker);
+      }
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    &::before {
+      background-color: var(--color-bg-soft-200);
+      box-shadow: none;
+    }
+  }
+}
+</style>

package/src/components/checkbox/index.ts

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

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Checkbox from '../checkbox.vue';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    defaultChecked: true,
+  },
+
+  render: args => ({
+    components: { Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <Checkbox v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const Indeterminate: Story = {
+  args: {
+    defaultChecked: true,
+    checked: 'indeterminate',
+  },
+
+  render: args => ({
+    components: { Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <Checkbox v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; gap: 1em;">
+        <Checkbox v-bind="args" />
+        <Checkbox v-bind="args" checked />
+        <Checkbox v-bind="args" checked="indeterminate" />
+      </div>
+    `,
+  }),
+};
+
+export const WithLabel: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="display: grid; gap: 1em;">
+          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+            <Checkbox v-bind="args" />
+            SMS Verification
+          </label>
+          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+            <Checkbox v-bind="args" />
+            Authenticator App
+          </label>
+          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+            <Checkbox v-bind="args" disabled />
+            Disabled
+          </label>
+         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+            <Checkbox v-bind="args" checked disabled />
+            Disabled but default checked
+          </label>
+        </div>
+      </div>
+    `,
+  }),
+};