add format check, update prettier rules, apply rules consistently

resources/js/Components/ui/accordion/Accordion.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import {
-  AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
+    AccordionRoot,
+    type AccordionRootEmits,
+    type AccordionRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AccordionRoot v-bind="forwarded">
-    <slot />
-  </AccordionRoot>
+    <AccordionRoot v-bind="forwarded">
+        <slot />
+    </AccordionRoot>
 </template>

resources/js/Components/ui/accordion/AccordionContent.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { AccordionContent, type AccordionContentProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { AccordionContent, type AccordionContentProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    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>
+    <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/Components/ui/accordion/AccordionItem.vue

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

resources/js/Components/ui/accordion/AccordionTrigger.vue

@@ -1,39 +1,33 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import {
-  AccordionHeader,
-  AccordionTrigger,
-  type AccordionTriggerProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+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 props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    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>
+    <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/Components/ui/accordion/index.ts

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

resources/js/Components/ui/alert-dialog/AlertDialog.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
+import {
+    type AlertDialogEmits,
+    type AlertDialogProps,
+    AlertDialogRoot,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-bind="forwarded">
-    <slot />
-  </AlertDialogRoot>
+    <AlertDialogRoot v-bind="forwarded">
+        <slot />
+    </AlertDialogRoot>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/Components/ui/button'
-import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { twMerge } from 'tailwind-merge'
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+import { buttonVariants } from '@/Components/ui/button';
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { twMerge } from 'tailwind-merge';
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="twMerge(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
+    <AlertDialogAction v-bind="delegatedProps" :class="twMerge(buttonVariants(), props.class)">
+        <slot />
+    </AlertDialogAction>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,27 +1,22 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/Components/ui/button'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { twMerge } from "tailwind-merge";
+import { buttonVariants } from '@/Components/ui/button';
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { twMerge } from 'tailwind-merge';
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
-    :class="twMerge(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      props.class,
-    )"
-  >
-    <slot />
-  </AlertDialogCancel>
+    <AlertDialogCancel
+        v-bind="delegatedProps"
+        :class="twMerge(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+        <slot />
+    </AlertDialogCancel>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,42 +1,40 @@
 <script setup lang="ts">
 import {
-  AlertDialogContent,
-  type AlertDialogContentEmits,
-  type AlertDialogContentProps,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { cn } from "@/lib/utils";
+    AlertDialogContent,
+    type AlertDialogContentEmits,
+    type AlertDialogContentProps,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <AlertDialogContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
+    <AlertDialogPortal>
+        <AlertDialogOverlay
+            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialogContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                    props.class
+                )
+            ">
+            <slot />
+        </AlertDialogContent>
+    </AlertDialogPortal>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,25 +1,21 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  AlertDialogDescription,
-  type AlertDialogDescriptionProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { AlertDialogDescription, type AlertDialogDescriptionProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <AlertDialogDescription
-    v-bind="delegatedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
-    <slot />
-  </AlertDialogDescription>
+    <AlertDialogDescription
+        v-bind="delegatedProps"
+        :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </AlertDialogDescription>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
+    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
+    <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <AlertDialogTitle
-    v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
+    <AlertDialogTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold', props.class)">
+        <slot />
+    </AlertDialogTitle>
 </template>

resources/js/Components/ui/alert-dialog/AlertDialogTrigger.vue

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

resources/js/Components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogAction } from './AlertDialogAction.vue'
-export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

resources/js/Components/ui/button/Button.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type ButtonVariants, buttonVariants } from '.'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
+import { type ButtonVariants, buttonVariants } from '.';
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
+    as: 'button',
+});
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn(buttonVariants({ variant, size }), props.class)">
+        <slot />
+    </Primitive>
 </template>

resources/js/Components/ui/button/index.ts

@@ -1,37 +1,36 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export { default as Button } from './Button.vue'
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border shadow-xs hover:text-text-primary bg-card-background dark:bg-transparent border-input dark:border-input hover:bg-white/5',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-        input: 'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent shadow-sm',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        xs: 'h-7 rounded px-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-        input: 'h-[42px] px-3 py-2 text-base',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+                outline:
+                    'border shadow-xs hover:text-text-primary bg-card-background dark:bg-transparent border-input dark:border-input hover:bg-white/5',
+                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+                input: 'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent shadow-sm',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                xs: 'h-7 rounded px-2',
+                sm: 'h-8 rounded-md px-3 text-xs',
+                lg: 'h-10 rounded-md px-8',
+                icon: 'h-9 w-9',
+                input: 'h-[42px] px-3 py-2 text-base',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
 
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

resources/js/Components/ui/calendar/Calendar.vue

@@ -1,60 +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 '.'
+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 props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>();
 
-const emits = defineEmits<CalendarRootEmits>()
+const emits = defineEmits<CalendarRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+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>
+    <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>
+        <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/Components/ui/calendar/CalendarCell.vue

@@ -1,24 +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";
+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 props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <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/Components/ui/calendar/CalendarCellTrigger.vue

@@ -1,38 +1,39 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/Components/ui/button'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/Components/ui/button';
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary 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>
+    <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-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary 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/Components/ui/calendar/CalendarDateInput.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/Components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
 import { Button } from '@/Components/ui/button';
 import { Calendar } from '@/Components/ui/calendar';
 import { CalendarIcon, XIcon } from 'lucide-vue-next';
@@ -49,9 +45,8 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 size="input"
                 :class="[
                     'w-full justify-start text-left font-normal',
-                    !model && 'text-muted-foreground'
-                ]"
-            >
+                    !model && 'text-muted-foreground',
+                ]">
                 <CalendarIcon class="mr-2 h-4 w-4" />
                 <span class="flex-1">
                     {{ model ? formatDate(model, organization?.date_format) : 'Pick a date' }}
@@ -60,8 +55,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                     v-if="clearable && model"
                     class="ml-2 hover:bg-muted rounded p-1 transition-colors"
                     type="button"
-                    @click="handleClear"
-                >
+                    @click="handleClear">
                     <XIcon class="h-4 w-4" />
                 </button>
             </Button>
@@ -72,8 +66,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 :model-value="date"
                 :initial-focus="true"
                 @update:model-value="(date) => handleChange(date ? date.toString() : '')"
-                @blur="handleBlur"
-            />
+                @blur="handleBlur" />
         </PopoverContent>
     </Popover>
-</template> 
+</template>

resources/js/Components/ui/calendar/CalendarGrid.vue

@@ -1,24 +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'
+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 props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGrid
-    :class="cn('w-full border-collapse space-y-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGrid>
+    <CalendarGrid
+        :class="cn('w-full border-collapse space-y-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </CalendarGrid>
 </template>

resources/js/Components/ui/calendar/CalendarGridBody.vue

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

resources/js/Components/ui/calendar/CalendarGridHead.vue

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

resources/js/Components/ui/calendar/CalendarGridRow.vue

@@ -1,21 +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'
+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 props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarGridRow>
+    <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGridRow>
 </template>

resources/js/Components/ui/calendar/CalendarHeadCell.vue

@@ -1,21 +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'
+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 props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <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/Components/ui/calendar/CalendarHeader.vue

@@ -1,21 +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'
+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 props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <CalendarHeader
+        :class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </CalendarHeader>
 </template>

resources/js/Components/ui/calendar/CalendarHeading.vue

@@ -1,31 +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'
+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'] }>()
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
 
 defineSlots<{
-    default: (props: { headingValue: string }) => unknown
-}>()
+    default: (props: { headingValue: string }) => unknown;
+}>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <CalendarHeading
+        v-slot="{ headingValue }"
+        :class="cn('text-sm font-medium', props.class)"
+        v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </CalendarHeading>
 </template>

resources/js/Components/ui/calendar/CalendarNextButton.vue

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

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

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

resources/js/Components/ui/dialog/Dialog.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+import {
+    DialogRoot,
+    type DialogRootEmits,
+    type DialogRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
+    <DialogRoot v-bind="forwarded">
+        <slot />
+    </DialogRoot>
 </template>

resources/js/Components/ui/dialog/DialogClose.vue

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

resources/js/Components/ui/dialog/DialogContent.vue

@@ -1,50 +1,49 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-    <div
-                            class="absolute inset-0 bg-default-background opacity-30" />
-</DialogOverlay>
-    <div
-      :class="
-        cn(
-          'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto',
-        )"
-    >
-    <DialogContent
-    v-bind="forwarded"
-:class="cn(
-          'bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg 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',
-          props.class,
-        )"
-      >
-        <slot />
-      </DialogContent>
-    </div>
-  </DialogPortal>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            <div class="absolute inset-0 bg-default-background opacity-30" />
+        </DialogOverlay>
+        <div
+            :class="
+                cn(
+                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto'
+                )
+            ">
+            <DialogContent
+                v-bind="forwarded"
+                :class="
+                    cn(
+                        'bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg 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',
+                        props.class
+                    )
+                ">
+                <slot />
+            </DialogContent>
+        </div>
+    </DialogPortal>
 </template>

resources/js/Components/ui/dialog/DialogDescription.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription
-    v-bind="forwardedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
-    <slot />
-  </DialogDescription>
+    <DialogDescription
+        v-bind="forwardedProps"
+        :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </DialogDescription>
 </template>

resources/js/Components/ui/dialog/DialogFooter.vue

@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
+    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/dialog/DialogHeader.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
+    <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/dialog/DialogScrollContent.vue

@@ -1,59 +1,61 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-vue-next';
 import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
-          )
-        "
-        v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        props.class
+                    )
+                "
+                v-bind="forwarded"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (
+                            originalEvent.offsetX > target.clientWidth ||
+                            originalEvent.offsetY > target.clientHeight
+                        ) {
+                            event.preventDefault();
+                        }
+                    }
+                ">
+                <slot />
 
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
-        >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+                <DialogClose
+                    class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary">
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
 </template>

resources/js/Components/ui/dialog/DialogTitle.vue

@@ -1,29 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogTitle
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </DialogTitle>
+    <DialogTitle
+        v-bind="forwardedProps"
+        :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </DialogTitle>
 </template>

resources/js/Components/ui/dialog/DialogTrigger.vue

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

resources/js/Components/ui/dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

resources/js/Components/ui/dropdown-menu/DropdownMenu.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
+import {
+    DropdownMenuRoot,
+    type DropdownMenuRootEmits,
+    type DropdownMenuRootProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="forwarded">
-    <slot />
-  </DropdownMenuRoot>
+    <DropdownMenuRoot v-bind="forwarded">
+        <slot />
+    </DropdownMenuRoot>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,40 +1,41 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-vue-next';
 import {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DropdownMenuCheckboxItem,
+    type DropdownMenuCheckboxItemEmits,
+    type DropdownMenuCheckboxItemProps,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuCheckboxItem
-    v-bind="forwarded"
-    :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
-  >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class
+            )
+        ">
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Check class="w-4 h-4" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,38 +1,42 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DropdownMenuContent,
+    type DropdownMenuContentEmits,
+    type DropdownMenuContentProps,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
+    defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        sideOffset: 4,
+    }
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      v-bind="forwarded"
-      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuGroup.vue

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

resources/js/Components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,28 +1,31 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<
+    DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuItem
-    v-bind="forwardedProps"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-      inset && 'pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-  </DropdownMenuItem>
+    <DropdownMenuItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+                inset && 'pl-8',
+                props.class
+            )
+        ">
+        <slot />
+    </DropdownMenuItem>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<
+    DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuLabel
-    v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
-  >
-    <slot />
-  </DropdownMenuLabel>
+    <DropdownMenuLabel
+        v-bind="forwardedProps"
+        :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+        <slot />
+    </DropdownMenuLabel>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupEmits,
-  type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
+    DropdownMenuRadioGroup,
+    type DropdownMenuRadioGroupEmits,
+    type DropdownMenuRadioGroupProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<DropdownMenuRadioGroupProps>()
-const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioGroup v-bind="forwarded">
-    <slot />
-  </DropdownMenuRadioGroup>
+    <DropdownMenuRadioGroup v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,41 +1,42 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Circle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils';
+import { Circle } from 'lucide-vue-next';
 import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    type DropdownMenuRadioItemEmits,
+    type DropdownMenuRadioItemProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
 
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioItem
-    v-bind="forwarded"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
-  >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Circle class="h-4 w-4 fill-current" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
+    <DropdownMenuRadioItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class
+            )
+        ">
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Circle class="h-4 w-4 fill-current" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+    DropdownMenuSeparatorProps & {
+        class?: HTMLAttributes['class'];
+    }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+    <DropdownMenuSeparator
+        v-bind="delegatedProps"
+        :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
-    <slot />
-  </span>
+    <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+        <slot />
+    </span>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import {
-  DropdownMenuSub,
-  type DropdownMenuSubEmits,
-  type DropdownMenuSubProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
+    DropdownMenuSub,
+    type DropdownMenuSubEmits,
+    type DropdownMenuSubProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
 
-const props = defineProps<DropdownMenuSubProps>()
-const emits = defineEmits<DropdownMenuSubEmits>()
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuSub v-bind="forwarded">
-    <slot />
-  </DropdownMenuSub>
+    <DropdownMenuSub v-bind="forwarded">
+        <slot />
+    </DropdownMenuSub>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    DropdownMenuSubContent,
+    type DropdownMenuSubContentEmits,
+    type DropdownMenuSubContentProps,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuSubContent
-    v-bind="forwarded"
-    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 />
-  </DropdownMenuSubContent>
+    <DropdownMenuSubContent
+        v-bind="forwarded"
+        :class="
+            cn(
+                'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 />
+    </DropdownMenuSubContent>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,33 +1,30 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronRight } from 'lucide-vue-next'
-import {
-  DropdownMenuSubTrigger,
-  type DropdownMenuSubTriggerProps,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { ChevronRight } from 'lucide-vue-next';
+import { DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DropdownMenuSubTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
-  </DropdownMenuSubTrigger>
+    <DropdownMenuSubTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+                props.class
+            )
+        ">
+        <slot />
+        <ChevronRight class="ml-auto h-4 w-4" />
+    </DropdownMenuSubTrigger>
 </template>

resources/js/Components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui';
 
-const props = defineProps<DropdownMenuTriggerProps>()
+const props = defineProps<DropdownMenuTriggerProps>();
 
-const forwardedProps = useForwardProps(props)
+const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
-    <slot />
-  </DropdownMenuTrigger>
+    <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
 </template>

resources/js/Components/ui/dropdown-menu/index.ts

@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenu } from './DropdownMenu.vue';
 
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'reka-ui'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'reka-ui';

resources/js/Components/ui/number-field/NumberField.vue

@@ -1,62 +1,64 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue'
-import type { Organization } from '@/packages/api/src'
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
-const props = defineProps<NumberFieldRootProps & { 
-  class?: HTMLAttributes['class']
-  formatOptions?: {
-    maximumFractionDigits?: number
-    minimumFractionDigits?: number
-  }
-}>()
-const emits = defineEmits<NumberFieldRootEmits>()
+const props = defineProps<
+    NumberFieldRootProps & {
+        class?: HTMLAttributes['class'];
+        formatOptions?: {
+            maximumFractionDigits?: number;
+            minimumFractionDigits?: number;
+        };
+    }
+>();
+const emits = defineEmits<NumberFieldRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, formatOptions: __, ...delegated } = props
-  return delegated
-})
+    const { class: _, formatOptions: __, ...delegated } = props;
+    return delegated;
+});
 
-const organization = inject<ComputedRef<Organization>>('organization')
+const organization = inject<ComputedRef<Organization>>('organization');
 
 const locale = computed(() => {
-  const format = organization?.value?.number_format || 'comma-point'
-  
-  // space poin is not supported in reka-ui
-  switch (format) {
-    case 'point-comma':
-      return 'de-DE' // Uses point for thousands and comma for decimal
-    case 'comma-point':
-      return 'en-US' // Uses comma for thousands and point for decimal
-    case 'space-comma':
-      return 'sv-SE' // Uses space for thousands and comma for decimal
-    case 'apostrophe-point':
-      return 'de-CH' // Uses apostrophe for thousands and point for decimal
-    default:
-      return 'en-US'
-  }
-})
+    const format = organization?.value?.number_format || 'comma-point';
+
+    // space poin is not supported in reka-ui
+    switch (format) {
+        case 'point-comma':
+            return 'de-DE'; // Uses point for thousands and comma for decimal
+        case 'comma-point':
+            return 'en-US'; // Uses comma for thousands and point for decimal
+        case 'space-comma':
+            return 'sv-SE'; // Uses space for thousands and comma for decimal
+        case 'apostrophe-point':
+            return 'de-CH'; // Uses apostrophe for thousands and point for decimal
+        default:
+            return 'en-US';
+    }
+});
 
 const defaultFormatOptions = {
-  maximumFractionDigits: 2
-}
+    maximumFractionDigits: 2,
+};
 
 const formatOptions = computed(() => ({
-  ...defaultFormatOptions,
-  ...props.formatOptions
-}))
+    ...defaultFormatOptions,
+    ...props.formatOptions,
+}));
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <NumberFieldRoot 
-    v-bind="forwarded" 
-    :locale="locale"
-    :format-options="formatOptions"
-    :class="cn('grid gap-1.5', props.class)">
-    <slot />
-  </NumberFieldRoot>
+    <NumberFieldRoot
+        v-bind="forwarded"
+        :locale="locale"
+        :format-options="formatOptions"
+        :class="cn('grid gap-1.5', props.class)">
+        <slot />
+    </NumberFieldRoot>
 </template>

resources/js/Components/ui/number-field/NumberFieldContent.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
-    <slot />
-  </div>
+    <div
+        :class="
+            cn(
+                'relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/number-field/NumberFieldDecrement.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldDecrementProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Minus } from 'lucide-vue-next';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
-    <slot>
-      <Minus class="h-4 w-4" />
-    </slot>
-  </NumberFieldDecrement>
+    <NumberFieldDecrement
+        data-slot="decrement"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+                props.class
+            )
+        ">
+        <slot>
+            <Minus class="h-4 w-4" />
+        </slot>
+    </NumberFieldDecrement>
 </template>

resources/js/Components/ui/number-field/NumberFieldIncrement.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldIncrementProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Plus } from 'lucide-vue-next';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
-    <slot>
-      <Plus class="h-4 w-4" />
-    </slot>
-  </NumberFieldIncrement>
+    <NumberFieldIncrement
+        data-slot="increment"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+                props.class
+            )
+        ">
+        <slot>
+            <Plus class="h-4 w-4" />
+        </slot>
+    </NumberFieldIncrement>
 </template>

resources/js/Components/ui/number-field/NumberFieldInput.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { NumberFieldInput } from 'reka-ui'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { NumberFieldInput } from 'reka-ui';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <NumberFieldInput
-    data-slot="input"
-    :class="cn('flex h-[42px] w-full rounded-md border border-input-border bg-input-background px-3 py-2.5 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
-  />
+    <NumberFieldInput
+        data-slot="input"
+        :class="
+            cn(
+                'flex h-[42px] w-full rounded-md border border-input-border bg-input-background px-3 py-2.5 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                props.class
+            )
+        " />
 </template>

resources/js/Components/ui/number-field/index.ts

@@ -1,5 +1,5 @@
-export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldContent } from './NumberFieldContent.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';

resources/js/Components/ui/popover/Popover.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
-import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<PopoverRootProps>()
-const emits = defineEmits<PopoverRootEmits>()
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <PopoverRoot v-bind="forwarded">
-    <slot />
-  </PopoverRoot>
+    <PopoverRoot v-bind="forwarded">
+        <slot />
+    </PopoverRoot>
 </template>

resources/js/Components/ui/popover/PopoverContent.vue

@@ -1,48 +1,47 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  PopoverContent,
-  type PopoverContentEmits,
-  type PopoverContentProps,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    PopoverContent,
+    type PopoverContentEmits,
+    type PopoverContentProps,
+    PopoverPortal,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    align: 'center',
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<PopoverContentEmits>()
+    defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        align: 'center',
+        sideOffset: 4,
+    }
+);
+const emits = defineEmits<PopoverContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+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>
+    <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>

resources/js/Components/ui/popover/PopoverTrigger.vue

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

resources/js/Components/ui/popover/index.ts

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

resources/js/Components/ui/range-calendar/RangeCalendar.vue

@@ -1,60 +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 '.'
+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 props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>();
 
-const emits = defineEmits<RangeCalendarRootEmits>()
+const emits = defineEmits<RangeCalendarRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+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>
+    <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>
+        <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>

resources/js/Components/ui/range-calendar/RangeCalendarCell.vue

@@ -1,24 +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'
+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 props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <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>

resources/js/Components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -1,40 +1,45 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/Components/ui/button'
-import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/Components/ui/button';
+import {
+    RangeCalendarCellTrigger,
+    type RangeCalendarCellTriggerProps,
+    useForwardProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <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>

resources/js/Components/ui/range-calendar/RangeCalendarGrid.vue

@@ -1,24 +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'
+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 props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <RangeCalendarGrid
-    :class="cn('w-full border-collapse space-y-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </RangeCalendarGrid>
+    <RangeCalendarGrid
+        :class="cn('w-full border-collapse space-y-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarGrid>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarGridBody.vue

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

resources/js/Components/ui/range-calendar/RangeCalendarGridHead.vue

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

resources/js/Components/ui/range-calendar/RangeCalendarGridRow.vue

@@ -1,21 +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'
+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 props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <RangeCalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
-    <slot />
-  </RangeCalendarGridRow>
+    <RangeCalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarGridRow>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -1,24 +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'
+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 props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <RangeCalendarHeadCell
+        :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeadCell>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarHeader.vue

@@ -1,21 +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'
+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 props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <RangeCalendarHeader
+        :class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
+        v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeader>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarHeading.vue

@@ -1,31 +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'
+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'] }>()
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
 
 defineSlots<{
-    default: (props: { headingValue: string }) => unknown
-}>()
+    default: (props: { headingValue: string }) => unknown;
+}>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <RangeCalendarHeading
+        v-slot="{ headingValue }"
+        :class="cn('text-sm font-medium', props.class)"
+        v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </RangeCalendarHeading>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarNextButton.vue

@@ -1,32 +1,33 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/Components/ui/button'
-import { ChevronRight } from 'lucide-vue-next'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/Components/ui/button';
+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 props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+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>
+    <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>

resources/js/Components/ui/range-calendar/RangeCalendarPrevButton.vue

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

resources/js/Components/ui/range-calendar/index.ts

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

resources/js/Components/ui/select/Select.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
-import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot v-bind="forwarded">
-    <slot />
-  </SelectRoot>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
 </template>

resources/js/Components/ui/select/SelectContent.vue

@@ -1,53 +1,61 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    position: 'popper',
-  },
-)
-const emits = defineEmits<SelectContentEmits>()
+    defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        position: 'popper',
+    }
+);
+const emits = defineEmits<SelectContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SelectPortal>
-    <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-md 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',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
+    <SelectPortal>
+        <SelectContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-md 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',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class
+                )
+            ">
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]'
+                    )
+                ">
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
 </template>

resources/js/Components/ui/select/SelectGroup.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { SelectGroup, type SelectGroupProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { SelectGroup, type SelectGroupProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
-    <slot />
-  </SelectGroup>
+    <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+        <slot />
+    </SelectGroup>
 </template>

resources/js/Components/ui/select/SelectItem.vue

@@ -1,44 +1,43 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-vue-next';
 import {
-  SelectItem,
-  SelectItemIndicator,
-  type SelectItemProps,
-  SelectItemText,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    SelectItem,
+    SelectItemIndicator,
+    type SelectItemProps,
+    SelectItemText,
+    useForwardProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <Check class="h-4 w-4" />
-      </SelectItemIndicator>
-    </span>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class
+            )
+        ">
+        <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectItemIndicator>
+                <Check class="h-4 w-4" />
+            </SelectItemIndicator>
+        </span>
 
-    <SelectItemText>
-      <slot />
-    </SelectItemText>
-  </SelectItem>
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
 </template>

resources/js/Components/ui/select/SelectItemText.vue

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

resources/js/Components/ui/select/SelectLabel.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { SelectLabel, type SelectLabelProps } from 'reka-ui';
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
-    <slot />
-  </SelectLabel>
+    <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+        <slot />
+    </SelectLabel>
 </template>

resources/js/Components/ui/select/SelectScrollDownButton.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-vue-next';
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
-    <slot>
-      <ChevronDown />
-    </slot>
-  </SelectScrollDownButton>
+    <SelectScrollDownButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+        <slot>
+            <ChevronDown />
+        </slot>
+    </SelectScrollDownButton>
 </template>

resources/js/Components/ui/select/SelectScrollUpButton.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { ChevronUp } from 'lucide-vue-next';
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
-    <slot>
-      <ChevronUp />
-    </slot>
-  </SelectScrollUpButton>
+    <SelectScrollUpButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+        <slot>
+            <ChevronUp />
+        </slot>
+    </SelectScrollUpButton>
 </template>

resources/js/Components/ui/select/SelectSeparator.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+    <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>

resources/js/Components/ui/select/SelectTrigger.vue

@@ -1,36 +1,38 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-vue-next';
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectTriggerProps & { size?: 'small', class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+    SelectTriggerProps & { size?: 'small'; class?: HTMLAttributes['class'] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 const sizeClasses = computed(() => {
-  return props.size === 'small' ? 'h-[34px] text-sm' : 'h-[42px]'
-})
-
+    return props.size === 'small' ? 'h-[34px] text-sm' : 'h-[42px]';
+});
 </script>
 
 <template>
-  <SelectTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-input-background px-3 py-2.5 shadow-sm data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
-      sizeClasses,
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
-    </SelectIcon>
-  </SelectTrigger>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-input-background px-3 py-2.5 shadow-sm data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+                sizeClasses,
+                props.class
+            )
+        ">
+        <slot />
+        <SelectIcon as-child>
+            <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+        </SelectIcon>
+    </SelectTrigger>
 </template>

resources/js/Components/ui/select/SelectValue.vue

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

resources/js/Components/ui/select/index.ts

@@ -1,11 +1,11 @@
-export { default as Select } from './Select.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectValue } from './SelectValue.vue'
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';

resources/js/Components/ui/switch/Switch.vue

@@ -1,39 +1,43 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 import {
-  SwitchRoot,
-  type SwitchRootEmits,
-  type SwitchRootProps,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+    SwitchRoot,
+    type SwitchRootEmits,
+    type SwitchRootProps,
+    SwitchThumb,
+    useForwardPropsEmits,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>();
 
-const emits = defineEmits<SwitchRootEmits>()
+const emits = defineEmits<SwitchRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SwitchRoot
-    v-bind="forwarded"
-    :class="cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      props.class,
-    )"
-  >
-    <SwitchThumb
-    :class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4')"
-    >
-      <slot name="thumb" />
-    </SwitchThumb>
-  </SwitchRoot>
+    <SwitchRoot
+        v-bind="forwarded"
+        :class="
+            cn(
+                'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+                props.class
+            )
+        ">
+        <SwitchThumb
+            :class="
+                cn(
+                    'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4'
+                )
+            ">
+            <slot name="thumb" />
+        </SwitchThumb>
+    </SwitchRoot>
 </template>

resources/js/Components/ui/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from './Switch.vue'
+export { default as Switch } from './Switch.vue';

resources/js/Components/ui/table/Table.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div class="relative w-full overflow-auto">
-    <table :class="cn('w-full caption-bottom text-sm', props.class)">
-      <slot />
-    </table>
-  </div>
+    <div class="relative w-full overflow-auto">
+        <table :class="cn('w-full caption-bottom text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
 </template>

resources/js/Components/ui/table/TableBody.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
-    <slot />
-  </tbody>
+    <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
 </template>

resources/js/Components/ui/table/TableCaption.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
-    <slot />
-  </caption>
+    <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+        <slot />
+    </caption>
 </template>

resources/js/Components/ui/table/TableCell.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <td
-    :class="
-      cn(
-        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </td>
+    <td
+        :class="
+            cn(
+                'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+                props.class
+            )
+        ">
+        <slot />
+    </td>
 </template>

resources/js/Components/ui/table/TableEmpty.vue

@@ -1,37 +1,34 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
-import TableCell from './TableCell.vue'
-import TableRow from './TableRow.vue'
+import { cn } from '@/lib/utils';
+import { computed, type HTMLAttributes } from 'vue';
+import TableCell from './TableCell.vue';
+import TableRow from './TableRow.vue';
 
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  colspan?: number
-}>(), {
-  colspan: 1,
-})
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes['class'];
+        colspan?: number;
+    }>(),
+    {
+        colspan: 1,
+    }
+);
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 </script>
 
 <template>
-  <TableRow>
-    <TableCell
-      :class="
-        cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-          props.class,
-        )
-      "
-      v-bind="delegatedProps"
-    >
-      <div class="flex items-center justify-center py-10">
-        <slot />
-      </div>
-    </TableCell>
-  </TableRow>
+    <TableRow>
+        <TableCell
+            :class="cn('p-4 whitespace-nowrap align-middle text-sm text-foreground', props.class)"
+            v-bind="delegatedProps">
+            <div class="flex items-center justify-center py-10">
+                <slot />
+            </div>
+        </TableCell>
+    </TableRow>
 </template>

resources/js/Components/ui/table/TableFooter.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
-    <slot />
-  </tfoot>
+    <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+        <slot />
+    </tfoot>
 </template>

resources/js/Components/ui/table/TableHead.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
-    <slot />
-  </th>
+    <th
+        :class="
+            cn(
+                'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+                props.class
+            )
+        ">
+        <slot />
+    </th>
 </template>