move rangecalendar, popover and daterangepicker to ui package

2026-08-15 19:52:15 +01:00 · 2025-12-02 17:46:58 +01:00
parent 7a51fca2f9
commit 814d539fb0
27 changed files with 22 additions and 8 deletions
--- a/resources/js/packages/ui/src/Input/DateRangePicker.vue
+++ b/resources/js/packages/ui/src/Input/DateRangePicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import Button from '../Buttons/Button.vue';
-import { RangeCalendar } from '@/Components/ui/range-calendar';
+import { RangeCalendar } from '../range-calendar';
 import { CalendarDate } from '@internationalized/date';
 import { CalendarIcon } from 'lucide-vue-next';
 import { computed, ref, inject, type ComputedRef, watch } from 'vue';
--- a/resources/js/packages/ui/src/Input/Dropdown.vue
+++ b/resources/js/packages/ui/src/Input/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { watch } from 'vue';

 const props = withDefaults(
--- a/resources/js/packages/ui/src/accordion/Accordion.vue
+++ b/resources/js/packages/ui/src/accordion/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    AccordionRoot,
+    type AccordionRootEmits,
+    type AccordionRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <AccordionRoot v-bind="forwarded">
+        <slot />
+    </AccordionRoot>
+</template>
--- a/resources/js/packages/ui/src/accordion/AccordionContent.vue
+++ b/resources/js/packages/ui/src/accordion/AccordionContent.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '../utils/cn';
+import { AccordionContent, type AccordionContentProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <AccordionContent
+        v-bind="delegatedProps"
+        class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-0.5">
+        <div :class="cn('pb-4 pt-0', props.class)">
+            <slot />
+        </div>
+    </AccordionContent>
+</template>
--- a/resources/js/packages/ui/src/accordion/AccordionItem.vue
+++ b/resources/js/packages/ui/src/accordion/AccordionItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '../utils/cn';
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+        <slot />
+    </AccordionItem>
+</template>
--- a/resources/js/packages/ui/src/accordion/AccordionTrigger.vue
+++ b/resources/js/packages/ui/src/accordion/AccordionTrigger.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '../utils/cn';
+import { ChevronDown } from 'lucide-vue-next';
+import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <AccordionHeader class="flex">
+        <AccordionTrigger
+            v-bind="delegatedProps"
+            :class="
+                cn(
+                    'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+                    props.class
+                )
+            ">
+            <slot />
+            <slot name="icon">
+                <ChevronDown
+                    class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            </slot>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>
--- a/resources/js/packages/ui/src/accordion/index.ts
+++ b/resources/js/packages/ui/src/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';
--- a/resources/js/packages/ui/src/index.ts
+++ b/resources/js/packages/ui/src/index.ts
@@ -37,7 +37,11 @@ import MoreOptionsDropdown from './MoreOptionsDropdown.vue';
 import FullCalendarEventContent from './FullCalendar/FullCalendarEventContent.vue';
 import FullCalendarDayHeader from './FullCalendar/FullCalendarDayHeader.vue';
 import TimeEntryCalendar from './FullCalendar/TimeEntryCalendar.vue';
+import DateRangePicker from './Input/DateRangePicker.vue';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip/index';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion/index';
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './popover/index';
+import { RangeCalendar } from './range-calendar/index';
 export type { ActivityPeriod } from './FullCalendar/idleStatusPlugin';

 export {
@@ -69,8 +73,18 @@ export {
    FullCalendarEventContent,
    FullCalendarDayHeader,
    TimeEntryCalendar,
+    DateRangePicker,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    PopoverAnchor,
+    RangeCalendar,
 };
--- a/resources/js/packages/ui/src/popover/Popover.vue
+++ b/resources/js/packages/ui/src/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <PopoverRoot v-bind="forwarded">
+        <slot />
+    </PopoverRoot>
+</template>
--- a/resources/js/packages/ui/src/popover/PopoverContent.vue
+++ b/resources/js/packages/ui/src/popover/PopoverContent.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import {
+    PopoverContent,
+    type PopoverContentEmits,
+    type PopoverContentProps,
+    PopoverPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        align: 'center',
+        sideOffset: 4,
+    }
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <PopoverPortal>
+        <PopoverContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none 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',
+                    props.class
+                )
+            ">
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>
--- a/resources/js/packages/ui/src/popover/PopoverTrigger.vue
+++ b/resources/js/packages/ui/src/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+    <PopoverTrigger v-bind="props">
+        <slot />
+    </PopoverTrigger>
+</template>
--- a/resources/js/packages/ui/src/popover/index.ts
+++ b/resources/js/packages/ui/src/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { PopoverAnchor } from 'reka-ui';
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendar.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendar.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import {
+    RangeCalendarRoot,
+    type RangeCalendarRootEmits,
+    type RangeCalendarRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+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 = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <RangeCalendarRoot
+        v-slot="{ grid, weekDays }"
+        :class="cn('p-3', props.class)"
+        v-bind="forwarded">
+        <RangeCalendarHeader>
+            <RangeCalendarPrevButton />
+            <RangeCalendarHeading />
+            <RangeCalendarNextButton />
+        </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>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarCell.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarCell
+        :class="
+            cn(
+                'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
+                props.class
+            )
+        "
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarCell>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src';
+import {
+    RangeCalendarCellTrigger,
+    type RangeCalendarCellTriggerProps,
+    useForwardProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarCellTrigger
+        :class="
+            cn(
+                buttonVariants({ variant: 'ghost' }),
+                'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
+                '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
+                // Selection Start
+                'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+                // Selection End
+                'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+                // Outside months
+                'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+                // 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>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarGrid.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarGrid
+        :class="cn('w-full border-collapse space-y-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarGrid>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarGridBody.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui';
+
+const props = defineProps<RangeCalendarGridBodyProps>();
+</script>
+
+<template>
+    <RangeCalendarGridBody v-bind="props">
+        <slot />
+    </RangeCalendarGridBody>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarGridHead.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui';
+
+const props = defineProps<RangeCalendarGridHeadProps>();
+</script>
+
+<template>
+    <RangeCalendarGridHead v-bind="props">
+        <slot />
+    </RangeCalendarGridHead>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarGridRow.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarGridRow>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarHeadCell.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeadCell
+        :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeadCell>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarHeader.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeader
+        :class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeader>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarHeading.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
+
+defineSlots<{
+    default: (props: { headingValue: string }) => unknown;
+}>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeading
+        v-slot="{ headingValue }"
+        :class="cn('text-sm font-medium', props.class)"
+        v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </RangeCalendarHeading>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarNextButton.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src';
+import { ChevronRight } from 'lucide-vue-next';
+import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarNext
+        :class="
+            cn(
+                buttonVariants({ variant: 'outline' }),
+                'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                props.class
+            )
+        "
+        v-bind="forwardedProps">
+        <slot>
+            <ChevronRight class="h-4 w-4" />
+        </slot>
+    </RangeCalendarNext>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarPrevButton.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src';
+import { ChevronLeft } from 'lucide-vue-next';
+import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarPrev
+        :class="
+            cn(
+                buttonVariants({ variant: 'outline' }),
+                'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                props.class
+            )
+        "
+        v-bind="forwardedProps">
+        <slot>
+            <ChevronLeft class="h-4 w-4" />
+        </slot>
+    </RangeCalendarPrev>
+</template>
--- a/resources/js/packages/ui/src/range-calendar/index.ts
+++ b/resources/js/packages/ui/src/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue';
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue';
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue';
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue';
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue';
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue';
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue';
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue';
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue';
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue';
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue';
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue';