@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/core/listbox/ListboxItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { ListboxItem, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<ListboxItemEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ListboxItem
+    data-slot="listbox-item"
+    :class="
+      cn(
+        'data-[highlighted]:bg-hover-default data-[highlighted]:text-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <slot />
+  </ListboxItem>
+</template>

package/src/components/core/native-select/NativeSelect.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  import type { AcceptableValue } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit, useVModel } from '@vueuse/core';
+  import { UiIcon } from '@/components/UiIcon';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = defineProps<{
+    modelValue?: AcceptableValue | AcceptableValue[];
+    class?: HTMLAttributes['class'];
+  }>();
+
+  const emit = defineEmits<{
+    'update:modelValue': AcceptableValue;
+  }>();
+
+  const modelValue = useVModel(props, 'modelValue', emit, {
+    passive: true,
+    defaultValue: '',
+  });
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="
+        cn(
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground h-9 w-full min-w-0 appearance-none rounded-md border bg-background-input-default px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          '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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </select>
+    <UiIcon
+      name="chevron-down"
+      :size="16"
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>

package/src/components/core/native-select/NativeSelectOptGroup.vue

@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-background-surface-floating text-content-on-surface-primary', props.class)"
+  >
+    <slot />
+  </optgroup>
+</template>

package/src/components/core/native-select/NativeSelectOption.vue

@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-background-surface-floating text-content-on-surface-primary', props.class)"
+  >
+    <slot />
+  </option>
+</template>

package/src/components/core/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui';
+  import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import NavigationMenuViewport from './NavigationMenuViewport.vue';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      NavigationMenuRootProps & {
+        viewport?: boolean;
+      }
+    >(),
+    {
+      viewport: true,
+    },
+  );
+  const emits = defineEmits<NavigationMenuRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+    <NavigationMenuViewport v-if="viewport" />
+  </NavigationMenuRoot>
+</template>

package/src/components/core/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui';
+  import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuContentProps>();
+  const emits = defineEmits<NavigationMenuContentEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

package/src/components/core/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { NavigationMenuIndicatorProps } from 'reka-ui';
+  import { NavigationMenuIndicator, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuIndicatorProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="
+      cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuIndicator>
+</template>

package/src/components/core/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import type { NavigationMenuItemProps } from 'reka-ui';
+  import { NavigationMenuItem } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuItemProps>();
+</script>
+
+<template>
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="{ ...props, ...$attrs }"
+    :class="cn('relative', $attrs.class ?? '')"
+  >
+    <slot />
+  </NavigationMenuItem>
+</template>

package/src/components/core/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui';
+  import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuLinkProps>();
+  const emits = defineEmits<NavigationMenuLinkEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'data-[active]:focus:bg-accent data-[active]:hover:bg-accent data-[active]:bg-accent/50 data-[active]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>

package/src/components/core/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { NavigationMenuListProps } from 'reka-ui';
+  import { NavigationMenuList, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuListProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', $attrs.class ?? '')"
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

package/src/components/core/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import type { NavigationMenuTriggerProps } from 'reka-ui';
+  import { ChevronDown } from 'lucide-vue-next';
+  import { NavigationMenuTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { navigationMenuTriggerStyle } from '.';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuTriggerProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="cn(navigationMenuTriggerStyle(), 'group', $attrs.class ?? '')"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

package/src/components/core/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { NavigationMenuViewportProps } from 'reka-ui';
+  import { NavigationMenuViewport, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuViewportProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      :class="
+        cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          $attrs.class ?? '',
+        )
+      "
+    />
+  </div>
+</template>

package/src/components/core/navigation-menu/index.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export { default as NavigationMenu } from './NavigationMenu.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 data-[active]:text-accent-foreground data-[active]:hover:bg-accent data-[active]:focus:bg-accent focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+);

package/src/components/core/popover/PopoverContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      sideOffset: 4,
+      align: 'center',
+    },
+  );
+  const emits = defineEmits<PopoverContentEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background-surface-floating text-content-on-surface-primary 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border border-border-surface-default p-4 shadow-xs outline-none',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/components/core/radio-group/RadioGroupItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import type { RadioGroupItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <span
+          class="bg-accent-default absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+        />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/components/core/range-calendar/RangeCalendar.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+  import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RangeCalendarRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import {
+    RangeCalendarCell,
+    RangeCalendarCellTrigger,
+    RangeCalendarGrid,
+    RangeCalendarGridBody,
+    RangeCalendarGridHead,
+    RangeCalendarGridRow,
+    RangeCalendarHeadCell,
+    RangeCalendarHeader,
+    RangeCalendarHeading,
+    RangeCalendarNextButton,
+    RangeCalendarPrevButton,
+  } from '.';
+
+  const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>();
+
+  const emits = defineEmits<RangeCalendarRootEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RangeCalendarRoot
+    #default="{ grid, weekDays }"
+    data-slot="range-calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class="flex items-center gap-1">
+        <RangeCalendarPrevButton />
+        <RangeCalendarNextButton />
+      </div>
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger :day="weekDate" :month="month.value" />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/src/components/core/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+  import type { RangeCalendarCellTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/components/core/button';
+
+  const props = withDefaults(
+    defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      as: 'button',
+    },
+  );
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    data-slot="range-calendar-trigger"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        // Base: unselected dates use secondary content color
+        'size-8 p-0 font-normal data-[selected]:opacity-100 cursor-default text-secondary-content hover:text-secondary-content',
+        // Today (not selected): accent soft background with accent soft foreground
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selection Start: accent-default background with accent-default foreground
+        'data-[selection-start]:bg-accent-default data-[selection-start]:text-accent-default-foreground data-[selection-start]:hover:bg-accent-default data-[selection-start]:hover:text-accent-default-foreground data-[selection-start]:focus:bg-accent-default data-[selection-start]:focus:text-accent-default-foreground',
+        // Selection End: accent-default background with accent-default foreground
+        'data-[selection-end]:bg-accent-default data-[selection-end]:text-accent-default-foreground data-[selection-end]:hover:bg-accent-default data-[selection-end]:hover:text-accent-default-foreground data-[selection-end]:focus:bg-accent-default data-[selection-end]:focus:text-accent-default-foreground',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>

package/src/components/core/range-calendar/RangeCalendarHeading.vue

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

package/src/components/core/range-calendar/RangeCalendarNextButton.vue

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