move rangecalendar, popover and daterangepicker to ui package

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>