@youcan/celeste 0.6.3

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import clsx from 'clsx';
+import { DialogClose as ModalClose, DialogDescription as ModalDescription, DialogTitle as ModalTitle } from 'radix-vue';
+
+const props = withDefaults(defineProps<{
+  title: string;
+  icon?: string;
+  description?: string;
+  dismissible?: boolean;
+  alignment?: 'horizontal' | 'vertical';
+  type?: 'default' | 'success' | 'information' | 'warning' | 'error';
+  class?: HTMLAttributes['class'];
+}>(), {
+  type: 'default',
+  alignment: 'horizontal',
+  dismissible: true,
+});
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-modal-header', props.class)"
+    :data-dismissible="dismissible"
+    :data-alignment="alignment"
+    :data-type="type"
+  >
+    <div v-if="icon" class="icon">
+      <i :class="icon" />
+    </div>
+    <div v-if="title || description" class="content">
+      <ModalTitle v-if="title" as-child>
+        <h2 class="title">
+          {{ title }}
+        </h2>
+      </ModalTitle>
+      <ModalDescription v-if="description" as-child>
+        <p class="description">
+          {{ description }}
+        </p>
+      </ModalDescription>
+    </div>
+    <ModalClose v-if="dismissible" as-child>
+      <CompactButton
+        class="close"
+        icon="i-celeste-close-line"
+        variant="ghost"
+      />
+    </ModalClose>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-modal-header {
+  --modal-header-icon-size: 24px;
+
+  display: flex;
+  gap: var(--spacing-14);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-16);
+  border-block-end: 1px solid var(--color-stroke-soft-200);
+
+  .icon {
+    display: flex;
+    align-items: center;
+    color: var(--color-icon-sub-600);
+
+    & > i {
+      width: var(--modal-header-icon-size);
+      height: var(--modal-header-icon-size);
+    }
+  }
+
+  .content {
+    display: grid;
+    gap: var(--spacing-4);
+    flex: 2;
+
+    .title,
+    .description {
+      margin: 0;
+    }
+
+    .title {
+      color: var(--color-text-strong-950);
+      font: var(--label-sm);
+    }
+
+    .description {
+      color: var(--color-text-sub-600);
+      font: var(--paragraph-xs);
+    }
+  }
+
+  &[data-dismissible='false'] {
+    align-items: flex-start;
+
+    .content {
+      .title {
+        align-items: stretch;
+        font: var(--label-md);
+      }
+
+      .description {
+        font: var(--paragraph-sm);
+      }
+    }
+  }
+
+  &[data-alignment='vertical'] {
+    flex-direction: column;
+    align-items: center;
+
+    .content {
+      text-align: center;
+    }
+
+    .close {
+      position: absolute;
+      inset-inline-end: var(--spacing-16);
+    }
+  }
+
+  &:has(.description) {
+    --modal-header-icon-size: 20px;
+
+    .icon {
+      padding: var(--spacing-10);
+      border: 1px solid transparent;
+      border-radius: var(--radius-full);
+    }
+
+    &[data-dismissible='false'] .icon {
+      padding: var(--spacing-8);
+      border-radius: var(--radius-10);
+    }
+
+    &[data-type='default'] .icon {
+      border-color: var(--color-stroke-soft-200);
+    }
+
+    &[data-type='success'] .icon {
+      background: var(--color-state-success-lighter);
+      color: var(--color-state-success-base);
+    }
+
+    &[data-type='information'] .icon {
+      background: var(--color-state-information-lighter);
+      color: var(--color-state-information-base);
+    }
+
+    &[data-type='warning'] .icon {
+      background: var(--color-state-warning-lighter);
+      color: var(--color-state-warning-base);
+    }
+
+    &[data-type='error'] .icon {
+      background: var(--color-state-error-lighter);
+      color: var(--color-state-error-base);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue';
+import { DialogTrigger as ModalTrigger } from 'radix-vue';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <ModalTrigger v-bind="props" as-child>
+    <slot />
+  </ModalTrigger>
+</template>

package/src/components/modal/modal.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import { DialogRoot as ModalRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ModalRoot v-bind="forwarded">
+    <slot />
+  </ModalRoot>
+</template>

package/src/components/modal/stories/modal.stories.ts

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import LinkButton from '@/components/button/link-button.vue';
+import Label from '@/components/label/label.vue';
+import TextInput from '@/components/text-input/text-input.vue';
+import ModalBody from '../modal-body.vue';
+import ModalClose from '../modal-close.vue';
+import ModalContent from '../modal-content.vue';
+import ModalFooter from '../modal-footer.vue';
+import ModalHeader from '../modal-header.vue';
+import ModalTrigger from '../modal-trigger.vue';
+import Modal from '../modal.vue';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalClose, TextInput, Label, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Modal v-bind="args">
+        <ModalTrigger>
+          <Button variant="stroke" intent="neutral">Click to open</Button>
+        </ModalTrigger>
+        <ModalContent style="width: 400px">
+          <ModalHeader
+            icon="i-celeste-settings-2-line"
+            title="Email Verification"
+            description="Enter your email to get a verification code."
+          />
+          <ModalBody>
+            <div style="display: grid; gap: 4px;">
+              <Label label-text="Email address" sublabel="(Optional)" required />
+              <TextInput type="email" placeholder="hello@live.fr" size="md" />
+            </div>
+          </ModalBody>
+          <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+            <ModalClose>
+              <Button intent="neutral" variant="stroke" size="sm">Cancel</Button>
+            </ModalClose>
+            <Button size="sm">Send Code</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    `,
+  }),
+};
+
+export const WithoutDescription: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalClose, TextInput, Label, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Modal v-bind="args">
+        <ModalTrigger>
+          <Button variant="stroke" intent="neutral">Click to open</Button>
+        </ModalTrigger>
+        <ModalContent style="width: 400px">
+          <ModalHeader
+            icon="i-celeste-settings-2-line"
+            title="Email Verification"
+          />
+          <ModalBody>
+            <div style="display: grid; gap: 4px;">
+              <Label label-text="Email address" sublabel="(Optional)" required />
+              <TextInput type="email" placeholder="hello@live.fr" size="md" />
+            </div>
+          </ModalBody>
+          <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+            <ModalClose>
+              <Button intent="neutral" variant="stroke" size="sm">Cancel</Button>
+            </ModalClose>
+            <Button size="sm">Send Code</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    `,
+  }),
+};
+
+export const WithoutIcon: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Modal, ModalTrigger, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalClose, TextInput, Label, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Modal v-bind="args">
+        <ModalTrigger>
+          <Button variant="stroke" intent="neutral">Click to open</Button>
+        </ModalTrigger>
+        <ModalContent style="width: 400px">
+          <ModalHeader title="Email Verification"/>
+          <ModalBody>
+            <div style="display: grid; gap: 4px;">
+              <Label label-text="Email address" sublabel="(Optional)" required />
+              <TextInput type="email" placeholder="hello@live.fr" size="md" />
+            </div>
+          </ModalBody>
+          <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+            <ModalClose>
+              <Button intent="neutral" variant="stroke" size="sm">Cancel</Button>
+            </ModalClose>
+            <Button size="sm">Send Code</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    `,
+  }),
+};
+
+export const Alignment: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Modal, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalClose, TextInput, Label, LinkButton, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; align-items: center; justify-content: center; gap: 16px;">
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Horizontal</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              alignment="horizontal"
+              type="error"
+              icon="i-celeste-error-warning-fill"
+              title="Delete account?"
+              description="If you delete your account, you will not be able to log in again. Are you sure?"
+            />
+            <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+              <ModalClose>
+                <Button intent="neutral" variant="stroke" size="sm">No, thanks</Button>
+              </ModalClose>
+              <Button intent="error" size="sm">Delete</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Vertical</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              alignment="vertical"
+              type="error"
+              icon="i-celeste-error-warning-fill"
+              title="Delete account?"
+              description="If you delete your account, you will not be able to log in again. Are you sure?"
+            />
+            <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+              <ModalClose>
+                <Button intent="neutral" variant="stroke" size="sm">No, thanks</Button>
+              </ModalClose>
+              <Button intent="error" size="sm">Delete</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    `,
+  }),
+};
+
+export const Status: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { Modal, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalClose, TextInput, Label, LinkButton, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; align-items: center; justify-content: center; gap: 16px;">
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Success</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              type="success"
+              icon="i-celeste-checkbox-circle-fill"
+              title="Payment Received"
+              description="Your payment has been successfully received. You have unlocked premium services now."
+            />
+            <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+              <ModalClose>
+                <Button intent="neutral" variant="stroke" size="sm">Cancel</Button>
+              </ModalClose>
+              <Button size="sm">View Receipt</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Information</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              type="information"
+              icon="i-celeste-information-fill"
+              title="New Feature Announcement"
+              description="We are excited to introduce a new feature that allows you to collaborate seamlessly with team members."
+            />
+            <ModalFooter style="display: flex; justify-content: space-between; align-items: center;">
+              <LinkButton type="gray">I'm not interested</LinkButton>
+              <div style="display: flex; gap: 12px; justify-content: end;">
+                <ModalClose>
+                  <Button intent="neutral" variant="stroke" size="sm">Cancel</Button>
+                </ModalClose>
+                <Button size="sm">Learn More</Button>
+              </div>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Warning</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              type="warning"
+              icon="i-celeste-alert-fill"
+              title="Server Maintenance"
+              description="Our servers will go undergo maintenance on May 20, 2023, from 10:00 PM to 2:00 AM UTC."
+            />
+            <ModalFooter style="display: flex; justify-content: space-between; align-items: center;">
+              <ModalClose>
+                <LinkButton type="gray">Don't show it again</LinkButton>
+              </ModalClose>
+              <Button intent="neutral" size="sm">Learn More</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+        <Modal v-bind="args">
+          <ModalTrigger>
+            <Button variant="stroke" intent="neutral">Error</Button>
+          </ModalTrigger>
+          <ModalContent style="width: 440px">
+            <ModalHeader
+              :dismissible="false"
+              type="error"
+              icon="i-celeste-error-warning-fill"
+              title="Delete account?"
+              description="If you delete your account, you will not be able to log in again. Are you sure?"
+            />
+            <ModalFooter style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+              <ModalClose>
+                <Button intent="neutral" variant="stroke" size="sm">No, thanks</Button>
+              </ModalClose>
+              <Button intent="error" size="sm">Delete</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    `,
+  }),
+};

package/src/components/popover/index.ts

@@ -0,0 +1,8 @@
+export * from './popover-content.vue';
+export { default as PopoverContent } from './popover-content.vue';
+
+export * from './popover-trigger.vue';
+export { default as PopoverTrigger } from './popover-trigger.vue';
+
+export * from './popover.vue';
+export { default as Popover } from './popover.vue';