move ui and api to seperate packages and add npm actions for them

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import {
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<{
+    class?: string;
+}>();
+
+// This has to be a localized timestamp, not UTC
+const model = defineModel<string | null>({
+    default: null,
+});
+
+const tempDate = ref(getLocalizedDayJs(model.value).format('YYYY-MM-DD'));
+
+watch(model, (value) => {
+    tempDate.value = getLocalizedDayJs(value).format('YYYY-MM-DD');
+});
+
+function updateDate(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    const newDate = getDayJsInstance()(newValue);
+    if (newDate.isValid()) {
+        model.value = getLocalizedDayJs(model.value)
+            .set('year', newDate.year())
+            .set('month', newDate.month())
+            .set('date', newDate.date())
+            .format();
+        emit('changed', model.value);
+    }
+}
+
+const datePicker = ref<HTMLInputElement | null>(null);
+
+function updateTempValue(event: Event) {
+    const target = event.target as HTMLInputElement;
+    tempDate.value = target.value;
+}
+
+const emit = defineEmits(['changed']);
+</script>
+
+<template>
+    <div class="flex items-center justify-center text-muted">
+        <input
+            ref="datePicker"
+            @change="updateTempValue"
+            @blur="updateDate"
+            @keydown.enter="updateDate"
+            :class="
+                twMerge(
+                    'bg-input-background border text-white border-input-border rounded-md',
+                    props.class
+                )
+            "
+            type="date"
+            id="start"
+            name="trip-start"
+            :value="tempDate" />
+    </div>
+</template>
+
+<style scoped>
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    opacity: 0.2;
+}
+</style>