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

the ui package

resources/js/packages/ui/src/number-field/NumberField.vue

@@ -0,0 +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';
+
+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 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 defaultFormatOptions = {
+    maximumFractionDigits: 2,
+};
+
+const formatOptions = computed(() => ({
+    ...defaultFormatOptions,
+    ...props.formatOptions,
+}));
+
+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>
+</template>

resources/js/packages/ui/src/number-field/NumberFieldContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+    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>
+</template>

resources/js/packages/ui/src/number-field/NumberFieldDecrement.vue

@@ -0,0 +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';
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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>
+</template>

resources/js/packages/ui/src/number-field/NumberFieldIncrement.vue

@@ -0,0 +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';
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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>
+</template>

resources/js/packages/ui/src/number-field/NumberFieldInput.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { NumberFieldInput } from 'reka-ui';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <NumberFieldInput
+        data-slot="input"
+        :class="
+            cn(
+                'flex h-9 w-full rounded-md border border-input-border bg-input-background px-3 py-1 text-base sm: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/packages/ui/src/number-field/index.ts

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