@aleph-alpha/ui-library 1.9.0 → 1.10.0

package/src/primitives/shadcn/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-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      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/primitives/shadcn/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 '@/primitives/shadcn/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/primitives/shadcn/calendar/CalendarCell.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+  import type { CalendarCellProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarCell, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

package/src/primitives/shadcn/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 '@/primitives/shadcn/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
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-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/primitives/shadcn/calendar/CalendarGrid.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { CalendarGridProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarGrid, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

package/src/primitives/shadcn/calendar/CalendarGridBody.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+  import type { CalendarGridBodyProps } from 'reka-ui';
+  import { CalendarGridBody } from 'reka-ui';
+
+  const props = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+  <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>

package/src/primitives/shadcn/calendar/CalendarGridHead.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+  import type { CalendarGridHeadProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { CalendarGridHead } from 'reka-ui';
+
+  const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>

package/src/primitives/shadcn/calendar/CalendarGridRow.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { CalendarGridRowProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarGridRow, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>

package/src/primitives/shadcn/calendar/CalendarHeadCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { CalendarHeadCellProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarHeadCell, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>

package/src/primitives/shadcn/calendar/CalendarHeader.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { CalendarHeaderProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarHeader, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>

package/src/primitives/shadcn/calendar/CalendarHeading.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+  import type { CalendarHeadingProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CalendarHeading, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
+
+  defineSlots<{
+    default: (props: { headingValue: string }) => any;
+  }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeading
+    #default="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>

package/src/primitives/shadcn/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 { Icon } from '@/primitives/shadcn/icon';
+  import { CalendarNext, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/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>
+      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+    </slot>
+  </CalendarNext>
+</template>

package/src/primitives/shadcn/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 { Icon } from '@/primitives/shadcn/icon';
+  import { CalendarPrev, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/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>
+      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+    </slot>
+  </CalendarPrev>
+</template>

package/src/primitives/shadcn/calendar/index.ts

@@ -0,0 +1,14 @@
+export { default as Calendar } from './Calendar.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarNextButton } from './CalendarNextButton.vue';
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
+
+export type LayoutTypes = 'month-and-year' | 'month-only' | 'year-only' | undefined;

package/src/primitives/shadcn/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-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/card/CardAction.vue

@@ -0,0 +1,17 @@
+<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-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/card/CardContent.vue

@@ -0,0 +1,14 @@
+<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-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
+    <slot />
+  </p>
+</template>

package/src/primitives/shadcn/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<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-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/card/CardHeader.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-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>