move rangecalendar, popover and daterangepicker to ui package

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>

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>

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>

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>

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';