@youcan/celeste 0.15.0 → 0.16.0

package/dist/es/drawer-header.js

@@ -0,0 +1,2 @@
+import { t as drawer_header_default } from "./chunks/drawer-header.js";
+export { drawer_header_default as default };

package/dist/es/drawer-title.js

@@ -0,0 +1,2 @@
+import { t as drawer_title_default } from "./chunks/drawer-title.js";
+export { drawer_title_default as default };

package/dist/es/drawer-trigger.js

@@ -0,0 +1,2 @@
+import { t as drawer_trigger_default } from "./chunks/drawer-trigger.js";
+export { drawer_trigger_default as default };

package/dist/es/drawer.js

@@ -0,0 +1,2 @@
+import { t as drawer_default } from "./chunks/drawer.js";
+export { drawer_default as default };

package/dist/es/index.js

@@ -23,6 +23,11 @@ import { t as dropdown_menu_sub_trigger_default } from "./chunks/dropdown-menu-s
 import { t as popover_content_default } from "./chunks/popover-content.js";
 import { t as popover_trigger_default } from "./chunks/popover-trigger.js";
 import { t as range_calendar_default } from "./chunks/range-calendar.js";
+import { t as drawer_content_default } from "./chunks/drawer-content.js";
+import { t as drawer_description_default } from "./chunks/drawer-description.js";
+import { t as drawer_title_default } from "./chunks/drawer-title.js";
+import { t as drawer_trigger_default } from "./chunks/drawer-trigger.js";
+import { t as drawer_body_default } from "./chunks/drawer-body.js";
 import { t as dropdown_menu_group_default } from "./chunks/dropdown-menu-group.js";
 import { t as dropdown_menu_sub_default } from "./chunks/dropdown-menu-sub.js";
 import { t as dropdown_menu_trigger_default } from "./chunks/dropdown-menu-trigger.js";
@@ -91,6 +96,10 @@ import { t as combobox_default } from "./chunks/combobox.js";
 import { t as date_picker_default } from "./chunks/date-picker.js";
 import { t as digit_input_group_default } from "./chunks/digit-input-group.js";
 import { t as digit_input_default } from "./chunks/digit-input.js";
+import { t as drawer_close_default } from "./chunks/drawer-close.js";
+import { t as drawer_footer_default } from "./chunks/drawer-footer.js";
+import { t as drawer_header_default } from "./chunks/drawer-header.js";
+import { t as drawer_default } from "./chunks/drawer.js";
 import { t as dropdown_menu_default } from "./chunks/dropdown-menu.js";
 import { t as file_upload_area_default } from "./chunks/file-upload-area.js";
 import { t as hint_text_default } from "./chunks/hint-text.js";
@@ -224,4 +233,4 @@ var Celeste = { install(vue) {
 	});
 } };
 //#endregion
-export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, bar_chart_default as BarChart, button_default as Button, CHART_DURATION, CHART_SERIES_COLORS, COLOR_NUMBER_VALIDATION_PATTERN, calendar_default as Calendar, Celeste, chart_card_default as ChartCard, chart_legend_default as ChartLegend, chart_plot_default as ChartPlot, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, date_picker_default as DatePicker, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, mochi_default as Mochi, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, range_calendar_default as RangeCalendar, range_picker_default as RangePicker, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, chartColor, chartTooltip, clamp, formatCompact, formatNumber, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, niceTicks, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useChartMotion, useDelegatedProps, useDirection, useLocale, useSidebar, useTabObserver };
+export { alert_default as Alert, alpha_slider_default as AlphaSlider, badge_default as Badge, bar_chart_default as BarChart, button_default as Button, CHART_DURATION, CHART_SERIES_COLORS, COLOR_NUMBER_VALIDATION_PATTERN, calendar_default as Calendar, Celeste, chart_card_default as ChartCard, chart_legend_default as ChartLegend, chart_plot_default as ChartPlot, checkbox_default as Checkbox, checkbox_card_default as CheckboxCard, checkbox_label_default as CheckboxLabel, collapsible_default as Collapsible, collapsible_content_default as CollapsibleContent, collapsible_trigger_default as CollapsibleTrigger, color_area_default as ColorArea, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, combobox_anchor_default as ComboboxAnchor, combobox_empty_default as ComboboxEmpty, combobox_group_default as ComboboxGroup, combobox_input_default as ComboboxInput, combobox_item_default as ComboboxItem, combobox_list_default as ComboboxList, combobox_root_default as ComboboxRoot, combobox_separator_default as ComboboxSeparator, combobox_trigger_default as ComboboxTrigger, compact_button_default as CompactButton, content_divider_default as ContentDivider, counter_input_default as CounterInput, DEFAULT_SWATCH, date_picker_default as DatePicker, digit_input_default as DigitInput, digit_input_group_default as DigitInputGroup, digit_input_slot_default as DigitInputSlot, drawer_default as Drawer, drawer_body_default as DrawerBody, drawer_close_default as DrawerClose, drawer_content_default as DrawerContent, drawer_description_default as DrawerDescription, drawer_footer_default as DrawerFooter, drawer_header_default as DrawerHeader, drawer_title_default as DrawerTitle, drawer_trigger_default as DrawerTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_group_default as DropdownMenuGroup, dropdown_menu_item_default as DropdownMenuItem, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, fancy_button_default as FancyButton, file_upload_area_default as FileUploadArea, HEX_VALIDATION_PATTERN, hint_text_default as HintText, hue_slider_default as HueSlider, label_default as Label, link_button_default as LinkButton, mochi_default as Mochi, modal_default as Modal, modal_body_default as ModalBody, modal_close_default as ModalClose, modal_content_default as ModalContent, modal_footer_default as ModalFooter, modal_header_default as ModalHeader, modal_trigger_default as ModalTrigger, pagination_default as Pagination, pagination_content_default as PaginationContent, pagination_ellipsis_default as PaginationEllipsis, pagination_first_default as PaginationFirst, pagination_item_default as PaginationItem, pagination_last_default as PaginationLast, pagination_next_default as PaginationNext, pagination_previous_default as PaginationPrevious, popover_default as Popover, popover_content_default as PopoverContent, popover_trigger_default as PopoverTrigger, progress_bar_default as ProgressBar, progress_circle_default as ProgressCircle, radio_group_default as RadioGroup, radio_group_card_default as RadioGroupCard, radio_group_item_default as RadioGroupItem, radio_group_label_default as RadioGroupLabel, range_calendar_default as RangeCalendar, range_picker_default as RangePicker, rich_editor_default as RichEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, segmented_control_item_default as SegmentedControlItem, select_default as Select, select_content_default as SelectContent, select_group_default as SelectGroup, select_icon_default as SelectIcon, select_item_default as SelectItem, select_label_default as SelectLabel, select_separator_default as SelectSeparator, select_trigger_default as SelectTrigger, select_value_default as SelectValue, sheet_default as Sheet, sheet_close_default as SheetClose, sheet_content_default as SheetContent, sheet_description_default as SheetDescription, sheet_footer_default as SheetFooter, sheet_header_default as SheetHeader, sheet_title_default as SheetTitle, sheet_trigger_default as SheetTrigger, sidebar_default as Sidebar, sidebar_content_default as SidebarContent, sidebar_element_default as SidebarElement, sidebar_footer_default as SidebarFooter, sidebar_group_default as SidebarGroup, sidebar_group_content_default as SidebarGroupContent, sidebar_group_label_default as SidebarGroupLabel, sidebar_header_default as SidebarHeader, sidebar_menu_default as SidebarMenu, sidebar_menu_action_default as SidebarMenuAction, sidebar_menu_badge_default as SidebarMenuBadge, sidebar_menu_button_default as SidebarMenuButton, sidebar_menu_item_default as SidebarMenuItem, sidebar_menu_sub_default as SidebarMenuSub, sidebar_menu_sub_button_default as SidebarMenuSubButton, sidebar_menu_sub_item_default as SidebarMenuSubItem, sidebar_provider_default as SidebarProvider, sidebar_separator_default as SidebarSeparator, sidebar_trigger_default as SidebarTrigger, slider_default as Slider, social_button_default as SocialButton, sonner_default as Sonner, sonner_alert_default as SonnerAlert, status_badge_default as StatusBadge, switch_default as Switch, tab_menu_default as TabMenu, tab_menu_content_default as TabMenuContent, tab_menu_item_default as TabMenuItem, tab_menu_list_default as TabMenuList, table_default as Table, table_body_default as TableBody, table_caption_default as TableCaption, table_cell_default as TableCell, table_empty_default as TableEmpty, table_footer_default as TableFooter, table_head_default as TableHead, table_header_default as TableHeader, table_row_default as TableRow, tag_default as Tag, text_input_default as TextInput, text_input_affix_default as TextInputAffix, text_input_button_default as TextInputButton, textarea_default as Textarea, tooltip_default as Tooltip, tooltip_content_default as TooltipContent, tooltip_provider_default as TooltipProvider, tooltip_root_default as TooltipRoot, tooltip_trigger_default as TooltipTrigger, bumpColorValue, chartColor, chartTooltip, clamp, formatCompact, formatNumber, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, niceTicks, provideSidebarContext, resolveArrowDirection, toast, truncColorValue, uid, useChartMotion, useDelegatedProps, useDirection, useLocale, useSidebar, useTabObserver };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -49,11 +49,11 @@
     "@unovis/vue": "1.6.7",
     "@vueuse/core": "^14.4.0",
     "clsx": "^2.1.1",
-    "reka-ui": "^2.10.1",
+    "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-tokens": "0.15.0",
-    "@youcan/celeste-icons": "0.15.0"
+    "@youcan/celeste-tokens": "0.16.0",
+    "@youcan/celeste-icons": "0.16.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DrawerViewportProps as RekaDrawerViewportProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DrawerViewport } from 'reka-ui';
+
+export interface DrawerBodyProps extends RekaDrawerViewportProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<DrawerBodyProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DrawerViewport :class="clsx('celeste-drawer-body', props.class)" v-bind="delegated">
+    <slot />
+  </DrawerViewport>
+</template>
+
+<style scoped>
+.celeste-drawer-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+</style>

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

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

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';