@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/core/accordion/AccordionTrigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import type { AccordionTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { UiIcon } from '@/components/UiIcon';
+  import { AccordionHeader, AccordionTrigger } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <UiIcon
+          name="chevron-down"
+          :size="16"
+          class="text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/core/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background-surface-muted text-content-on-surface-primary',
+        destructive:
+          'text-destructive bg-background-surface-muted [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/components/core/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import type { AlertDialogActionProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AlertDialogAction } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/components/core/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { AlertDialogCancelProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AlertDialogCancel } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

package/src/components/core/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import {
+    AlertDialogContent,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    useForwardPropsEmits,
+  } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<AlertDialogContentEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-modal-overlay"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background-surface-modal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border-surface-default p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/components/core/badge/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Badge } from './Badge.vue';
+
+export const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/components/core/button/index.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Button } from './Button.vue';
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline:
+          'border border-input bg-transparent text-foreground shadow-xs hover:bg-hover-default',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'text-foreground hover:bg-hover-default',
+        link: 'text-link underline-offset-4 hover:underline focus-visible:border-none',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: 'h-7 rounded-md px-2 text-xs',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/components/core/calendar/Calendar.vue

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+  import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui';
+  import type { HTMLAttributes, Ref } from 'vue';
+  import type { LayoutTypes } from '.';
+  import { getLocalTimeZone, today } from '@internationalized/date';
+  import { createReusableTemplate, reactiveOmit, useVModel } from '@vueuse/core';
+  import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui';
+  import { createYear, createYearRange, toDate } from 'reka-ui/date';
+  import { computed, toRaw } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { NativeSelect, NativeSelectOption } from '@/components/core/native-select';
+  import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+  } from '.';
+
+  const props = withDefaults(
+    defineProps<
+      CalendarRootProps & {
+        class?: HTMLAttributes['class'];
+        layout?: LayoutTypes;
+        yearRange?: DateValue[];
+      }
+    >(),
+    {
+      modelValue: undefined,
+      layout: undefined,
+    },
+  );
+  const emits = defineEmits<CalendarRootEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class', 'layout', 'placeholder');
+
+  const placeholder = useVModel(props, 'placeholder', emits, {
+    passive: true,
+    defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+  }) as Ref<DateValue>;
+
+  const formatter = useDateFormatter(props.locale ?? 'en');
+
+  const yearRange = computed(() => {
+    return (
+      props.yearRange ??
+      createYearRange({
+        start:
+          props?.minValue ??
+          (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+            'year',
+            -100,
+          ),
+
+        end:
+          props?.maxValue ??
+          (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+            'year',
+            10,
+          ),
+      })
+    );
+  });
+
+  const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>();
+  const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>();
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DefineMonthTemplate #default="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                month: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+          >
+            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate #default="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                year: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="year in yearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+          >
+            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    #default="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

package/src/components/core/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+  import type { CalendarCellTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarCellTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = withDefaults(
+    defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      as: 'button',
+    },
+  );
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected: accent-default background with on-accent-default foreground
+        'data-[selected]:bg-accent-default data-[selected]:text-accent-default-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-accent-default data-[selected]:hover:text-accent-default-foreground data-[selected]:focus:bg-accent-default data-[selected]:focus:text-accent-default-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

package/src/components/core/calendar/CalendarNextButton.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+  import type { CalendarNextProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { UiIcon } from '@/components/UiIcon';
+  import { CalendarNext, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <UiIcon name="chevron-right" :size="16" />
+    </slot>
+  </CalendarNext>
+</template>

package/src/components/core/calendar/CalendarPrevButton.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+  import type { CalendarPrevProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { UiIcon } from '@/components/UiIcon';
+  import { CalendarPrev, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <UiIcon name="chevron-left" :size="16" />
+    </slot>
+  </CalendarPrev>
+</template>

package/src/components/core/card/Card.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-background-surface-muted text-content-on-surface-primary flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/core/checkbox/Checkbox.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { UiIcon } from '@/components/UiIcon';
+  import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<CheckboxRootEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    #default="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer border-input data-[state=checked]:bg-accent-default data-[state=checked]:text-accent-default-foreground data-[state=checked]:border-accent-default focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <UiIcon name="check" :size="12" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/core/drawer/DrawerContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = defineProps<
+    DialogContentProps & {
+      class?: HTMLAttributes['class'];
+      /**
+       * Shows the small "handle" bar at the top of the drawer.
+       * @default true
+       */
+      showHandle?: boolean;
+    }
+  >();
+  const emits = defineEmits<DialogContentEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class', 'showHandle');
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      data-slot="drawer-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-modal-overlay"
+    />
+    <DialogContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background-surface-modal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border border-border-surface-default shadow-lg duration-200',
+          props.class,
+        )
+      "
+    >
+      <div
+        v-if="props.showHandle ?? true"
+        data-slot="drawer-handle"
+        class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"
+      />
+      <slot />
+    </DialogContent>
+  </DialogPortal>
+</template>