@youcan/celeste 0.15.0 → 0.17.0

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

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import type { DrawerContentEmits, DrawerContentProps as RekaDrawerContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import {
+  DrawerContent,
+  DrawerHandle,
+  DrawerOverlay,
+  DrawerPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+export interface DrawerContentProps extends RekaDrawerContentProps {
+  class?: HTMLAttributes['class'];
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<DrawerContentProps>();
+
+const emits = defineEmits<DrawerContentEmits>();
+
+const forwarded = useForwardPropsEmits(reactiveOmit(props, 'class'), emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay class="celeste-drawer-overlay" />
+    <DrawerContent
+      :class="clsx('celeste-drawer-content', props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <DrawerHandle class="celeste-drawer-handle" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
+
+<style scoped>
+.celeste-drawer-overlay {
+  position: fixed;
+  z-index: 50;
+  transition: opacity 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  background: var(--color-overlay-overlay);
+  inset: 0;
+  backdrop-filter: blur(10px);
+
+  &[data-state='open'] {
+    animation: celeste-drawer-fade-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: celeste-drawer-fade-out 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+
+  &[data-swiping] {
+    transition-duration: 0ms;
+  }
+}
+
+.celeste-drawer-content {
+  --drawer-duration: 450ms;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  display: flex;
+  position: fixed;
+  z-index: 50;
+  flex-direction: column;
+  transition: transform var(--drawer-duration) var(--drawer-ease);
+  outline: none;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+
+  &[data-swiping] {
+    transition-duration: 0ms;
+  }
+
+  &[data-swipe-direction='right'],
+  &[data-swipe-direction='left'] {
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 400px;
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+  }
+
+  &[data-swipe-direction='right'] {
+    right: 0;
+    border-left: 1px solid var(--color-stroke-soft-200);
+
+    &[data-state='open'] {
+      animation: celeste-drawer-in-right var(--drawer-duration) var(--drawer-ease);
+    }
+
+    &[data-state='closed'] {
+      animation: celeste-drawer-out-right 300ms var(--drawer-ease) forwards;
+    }
+  }
+
+  &[data-swipe-direction='left'] {
+    left: 0;
+    border-right: 1px solid var(--color-stroke-soft-200);
+
+    &[data-state='open'] {
+      animation: celeste-drawer-in-left var(--drawer-duration) var(--drawer-ease);
+    }
+
+    &[data-state='closed'] {
+      animation: celeste-drawer-out-left 300ms var(--drawer-ease) forwards;
+    }
+  }
+
+  &[data-swipe-direction='down'],
+  &[data-swipe-direction='up'] {
+    right: 0;
+    left: 0;
+    max-height: calc(100dvh - var(--spacing-48));
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+  }
+
+  &[data-swipe-direction='down'] {
+    bottom: 0;
+    border-top: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--radius-20) var(--radius-20) 0 0;
+
+    &[data-state='open'] {
+      animation: celeste-drawer-in-down var(--drawer-duration) var(--drawer-ease);
+    }
+
+    &[data-state='closed'] {
+      animation: celeste-drawer-out-down 300ms var(--drawer-ease) forwards;
+    }
+  }
+
+  &[data-swipe-direction='up'] {
+    top: 0;
+    border-bottom: 1px solid var(--color-stroke-soft-200);
+    border-radius: 0 0 var(--radius-20) var(--radius-20);
+
+    &[data-state='open'] {
+      animation: celeste-drawer-in-up var(--drawer-duration) var(--drawer-ease);
+    }
+
+    &[data-state='closed'] {
+      animation: celeste-drawer-out-up 300ms var(--drawer-ease) forwards;
+    }
+  }
+}
+
+.celeste-drawer-handle {
+  display: none;
+  flex-shrink: 0;
+  align-self: center;
+  width: 32px;
+  height: 4px;
+  margin: var(--spacing-8) 0 0;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-soft-200);
+  cursor: grab;
+}
+
+.celeste-drawer-content[data-swipe-direction='down'] .celeste-drawer-handle {
+  display: block;
+}
+
+.celeste-drawer-content[data-swipe-direction='up'] .celeste-drawer-handle {
+  display: block;
+  order: 1;
+  margin: 0 0 var(--spacing-8);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-drawer-overlay,
+  .celeste-drawer-content {
+    transition-duration: 0ms;
+    animation-duration: 1ms !important;
+  }
+}
+
+@keyframes celeste-drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes celeste-drawer-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes celeste-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes celeste-drawer-out-right {
+  from {
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes celeste-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes celeste-drawer-out-left {
+  from {
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes celeste-drawer-in-down {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes celeste-drawer-out-down {
+  from {
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes celeste-drawer-in-up {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes celeste-drawer-out-up {
+  from {
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+</style>

package/src/components/drawer/drawer-description.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DrawerDescriptionProps as RekaDrawerDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DrawerDescription } from 'reka-ui';
+
+export interface DrawerDescriptionProps extends RekaDrawerDescriptionProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<DrawerDescriptionProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DrawerDescription :class="clsx('celeste-drawer-description', props.class)" v-bind="delegated">
+    <slot />
+  </DrawerDescription>
+</template>
+
+<style scoped>
+.celeste-drawer-description {
+  margin: 0;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+</style>

package/src/components/drawer/drawer-footer.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+export interface DrawerFooterProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<DrawerFooterProps>();
+</script>
+
+<template>
+  <div :class="clsx('celeste-drawer-footer', props.class)">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.celeste-drawer-footer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: var(--spacing-20);
+  border-top: 1px solid var(--color-stroke-soft-200);
+  gap: var(--spacing-16);
+}
+</style>

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { DrawerClose } from 'reka-ui';
+import CompactButton from '@/components/button/compact-button.vue';
+import DrawerDescription from './drawer-description.vue';
+import DrawerTitle from './drawer-title.vue';
+
+export interface DrawerHeaderProps {
+  title: string;
+  description?: string;
+  icon?: string;
+  dismissible?: boolean;
+  divider?: boolean;
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<DrawerHeaderProps>(), {
+  dismissible: true,
+});
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-drawer-header', props.class)"
+    :data-size="description ? 'lg' : 'sm'"
+    :data-divider="divider"
+  >
+    <span v-if="icon" class="icon">
+      <i :class="icon" />
+    </span>
+    <div class="content">
+      <DrawerTitle>{{ title }}</DrawerTitle>
+      <DrawerDescription v-if="description">
+        {{ description }}
+      </DrawerDescription>
+    </div>
+    <slot name="actions" />
+    <DrawerClose v-if="dismissible" as-child>
+      <CompactButton
+        icon="i-celeste-close-line"
+        variant="ghost"
+        size="lg"
+      />
+    </DrawerClose>
+  </div>
+</template>
+
+<style scoped>
+.celeste-drawer-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: var(--spacing-20);
+  gap: var(--spacing-12);
+
+  &[data-size='lg'] {
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
+
+  &[data-divider='true'] {
+    border-bottom: 1px solid var(--color-stroke-soft-200);
+  }
+
+  .icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-sub-600);
+
+    i {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &[data-size='lg'] .icon {
+    padding: var(--spacing-12);
+    border: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-xs);
+  }
+
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--spacing-4);
+  }
+}
+</style>

package/src/components/drawer/drawer-title.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DrawerTitleProps as RekaDrawerTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DrawerTitle } from 'reka-ui';
+
+export interface DrawerTitleProps extends RekaDrawerTitleProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<DrawerTitleProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DrawerTitle :class="clsx('celeste-drawer-title', props.class)" v-bind="delegated">
+    <slot />
+  </DrawerTitle>
+</template>
+
+<style scoped>
+.celeste-drawer-title {
+  margin: 0;
+  color: var(--color-text-strong-950);
+  font: var(--label-lg);
+}
+</style>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DrawerTriggerProps as RekaDrawerTriggerProps } from 'reka-ui';
+import { DrawerTrigger } from 'reka-ui';
+
+export interface DrawerTriggerProps extends RekaDrawerTriggerProps {}
+
+const props = defineProps<DrawerTriggerProps>();
+</script>
+
+<template>
+  <DrawerTrigger v-bind="props">
+    <slot />
+  </DrawerTrigger>
+</template>

package/src/components/drawer/drawer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DrawerRootEmits, DrawerRootProps } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { DrawerRoot, useForwardPropsEmits } from 'reka-ui';
+
+export type DrawerSide = 'right' | 'left' | 'bottom' | 'top';
+
+export interface DrawerProps extends Omit<DrawerRootProps, 'swipeDirection'> {
+  side?: DrawerSide;
+}
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  side: 'right',
+  open: undefined,
+  modal: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const directions = { right: 'right', left: 'left', bottom: 'down', top: 'up' } as const;
+
+const forwarded = useForwardPropsEmits(reactiveOmit(props, 'side'), emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded" :swipe-direction="directions[side]">
+    <slot />
+  </DrawerRoot>
+</template>

package/src/components/drawer/index.ts

@@ -0,0 +1,18 @@
+export * from './drawer-body.vue';
+export { default as DrawerBody } from './drawer-body.vue';
+export * from './drawer-close.vue';
+export { default as DrawerClose } from './drawer-close.vue';
+export * from './drawer-content.vue';
+export { default as DrawerContent } from './drawer-content.vue';
+export * from './drawer-description.vue';
+export { default as DrawerDescription } from './drawer-description.vue';
+export * from './drawer-footer.vue';
+export { default as DrawerFooter } from './drawer-footer.vue';
+export * from './drawer-header.vue';
+export { default as DrawerHeader } from './drawer-header.vue';
+export * from './drawer-title.vue';
+export { default as DrawerTitle } from './drawer-title.vue';
+export * from './drawer-trigger.vue';
+export { default as DrawerTrigger } from './drawer-trigger.vue';
+export * from './drawer.vue';
+export { default as Drawer } from './drawer.vue';

package/src/components/drawer/stories/drawer.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import DrawerBody from '../drawer-body.vue';
+import DrawerClose from '../drawer-close.vue';
+import DrawerContent from '../drawer-content.vue';
+import DrawerFooter from '../drawer-footer.vue';
+import DrawerHeader from '../drawer-header.vue';
+import DrawerTrigger from '../drawer-trigger.vue';
+import Drawer from '../drawer.vue';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  argTypes: {
+    side: { control: 'select', options: ['right', 'left', 'bottom', 'top'] },
+  },
+  args: { side: 'right' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+const render: Story['render'] = args => ({
+  components: { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, Button },
+  setup() {
+    return { args, items: Array.from({ length: 24 }, (_, i) => `Item ${i + 1}`) };
+  },
+  template: `
+    <Drawer v-bind="args">
+      <DrawerTrigger as-child>
+        <Button variant="stroke" intent="neutral">Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader title="Virtual card" description="Manage the card and its recent transactions." icon="i-celeste-history-line" divider />
+        <DrawerBody>
+          <ul style="margin: 0; padding: 20px; display: grid; gap: 12px; list-style: none;">
+            <li v-for="item in items" :key="item">{{ item }}</li>
+          </ul>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose as-child>
+            <Button intent="neutral" variant="stroke" style="flex: 1">Cancel</Button>
+          </DrawerClose>
+          <Button style="flex: 1">Continue</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  `,
+});
+
+export const Right: Story = { render };
+
+export const Left: Story = { render, args: { side: 'left' } };
+
+export const Bottom: Story = { render, args: { side: 'bottom' } };
+
+export const Top: Story = { render, args: { side: 'top' } };
+
+export const SmallHeader: Story = {
+  render: args => ({
+    components: { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Drawer v-bind="args">
+        <DrawerTrigger as-child>
+          <Button variant="stroke" intent="neutral">Open drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader title="Insert title here" icon="i-celeste-history-line" />
+          <DrawerBody />
+        </DrawerContent>
+      </Drawer>
+    `,
+  }),
+};

package/src/components/index.ts

@@ -10,7 +10,9 @@ export * from './combobox';
 export * from './content-divider';
 export * from './counter-input';
 export * from './date-picker';
+export * from './dialog';
 export * from './digit-input';
+export * from './drawer';
 export * from './dropdown-menu';
 export * from './file-upload';
 export * from './hint-text';

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

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'reka-ui';
+import { injectDialogRootContext, DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DialogContentProps & {
@@ -13,41 +13,65 @@ const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const root = injectDialogRootContext();
 </script>
 
 <template>
   <ModalPortal>
-    <ModalOverlay class="celeste-modal-overlay" />
-    <Transition name="fade">
-      <ModalContent
-        v-bind="forwarded"
-        :class="clsx('celeste-modal-content', props.class)"
-      >
-        <slot />
-      </ModalContent>
-    </Transition>
+    <component :is="root.modal.value ? ModalOverlay : 'div'" :class="root.modal.value ? 'celeste-modal-overlay' : 'celeste-modal-viewport'">
+      <Transition name="fade">
+        <ModalContent
+          v-bind="forwarded"
+          :class="clsx('celeste-modal-content', props.class)"
+        >
+          <slot />
+        </ModalContent>
+      </Transition>
+    </component>
   </ModalPortal>
 </template>
 
 <style scoped lang="scss">
-.celeste-modal-overlay {
+.celeste-modal-overlay,
+.celeste-modal-viewport {
+  display: flex;
   position: fixed;
   z-index: 50;
+  flex-direction: column;
+  padding: var(--spacing-16);
+  overflow-y: auto;
+  inset: 0;
+}
+
+.celeste-modal-overlay {
   background: var(--color-overlay-overlay);
   backdrop-filter: blur(5px);
-  inset: 0;
+
+  &[data-state='open'] {
+    animation: celeste-fade-in var(--animation-fast) ease-out;
+  }
+
+  &[data-state='closed'] {
+    animation: celeste-fade-out var(--animation-fast) ease-in;
+  }
+}
+
+.celeste-modal-viewport {
+  pointer-events: none;
+
+  .celeste-modal-content {
+    pointer-events: auto;
+  }
 }
 
 .celeste-modal-content {
-  position: fixed;
-  z-index: 51;
-  top: 50%;
-  left: 50%;
+  position: relative;
+  max-width: 100%;
+  margin: auto;
   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%;
 }
 
 .fade-enter-active,