move calendar, dropdown-menu, select, dialog, number-field components to

the ui package

resources/js/packages/ui/src/calendar/Calendar.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import {
+    CalendarRoot,
+    type CalendarRootEmits,
+    type CalendarRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+} from '.';
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CalendarRoot v-slot="{ grid, weekDays }" :class="cn('p-3', props.class)" v-bind="forwarded">
+        <CalendarHeader>
+            <CalendarPrevButton />
+            <CalendarHeading />
+            <CalendarNextButton />
+        </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>

resources/js/packages/ui/src/calendar/CalendarCell.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarCell
+        :class="
+            twMerge(
+                'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50',
+                props.class
+            )
+        "
+        v-bind="forwardedProps">
+        <slot />
+    </CalendarCell>
+</template>

resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src';
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarCellTrigger
+        :class="
+            cn(
+                buttonVariants({ variant: 'ghost' }),
+                'h-8 w-8 p-0 font-normal',
+                '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
+                // Selected
+                'data-[selected]:bg-quaternary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-quaternary 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 data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+                props.class
+            )
+        "
+        v-bind="forwardedProps">
+        <slot />
+    </CalendarCellTrigger>
+</template>

resources/js/packages/ui/src/calendar/CalendarGrid.vue

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

resources/js/packages/ui/src/calendar/CalendarGridBody.vue

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

resources/js/packages/ui/src/calendar/CalendarGridHead.vue

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

resources/js/packages/ui/src/calendar/CalendarGridRow.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGridRow>
+</template>

resources/js/packages/ui/src/calendar/CalendarHeadCell.vue

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

resources/js/packages/ui/src/calendar/CalendarHeader.vue

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

resources/js/packages/ui/src/calendar/CalendarHeading.vue

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

resources/js/packages/ui/src/calendar/CalendarNextButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src/index';
+import { ChevronRight } from 'lucide-vue-next';
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarNext
+        :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>
+    </CalendarNext>
+</template>

resources/js/packages/ui/src/calendar/CalendarPrevButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { cn, buttonVariants } from '@/packages/ui/src';
+import { ChevronLeft } from 'lucide-vue-next';
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CalendarPrev
+        :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>
+    </CalendarPrev>
+</template>

resources/js/packages/ui/src/calendar/index.ts

@@ -0,0 +1,12 @@
+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';