Add size prop to DatePicker and fix range end

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

@@ -16,6 +16,7 @@ import type { Organization } from '@/packages/api/src';
 const props = defineProps<{
     tabindex?: string;
     class?: string;
+    size?: 'sm' | 'default';
 }>();
 
 // This has to be a localized timestamp, not UTC
@@ -67,7 +68,7 @@ function handleDateSelect(newDate: DateValue | undefined) {
             <PopoverTrigger as-child>
                 <Button
                     variant="input"
-                    size="sm"
+                    :size="props.size ?? 'default'"
                     :tabindex="tabindex"
                     :class="['w-full px-2 gap-1.5', props.class]">
                     <CalendarIcon class="!size-3 text-muted-foreground" />

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

@@ -58,13 +58,14 @@ const modelValue = computed<CalendarDateRange>({
     }),
     set: (newValue) => {
         if (newValue.start) {
-            console.log(newValue.start);
             const date = newValue.start.toDate(getUserTimezone());
             emit('update:start', getLocalizedDayJs(date.toString()).format());
         }
         if (newValue.end) {
             const date = newValue.end.toDate(getUserTimezone());
             emit('update:end', getLocalizedDayJs(date.toString()).format());
+        } else {
+            emit('update:end', '');
         }
     },
 });

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

@@ -73,6 +73,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempStart"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
         </div>
@@ -89,6 +90,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempEnd"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
             <div v-else-if="end === null && !showEndTimePicker">
@@ -102,7 +104,7 @@ const dropdownContent = ref();
                     class="w-full"
                     data-testid="time_entry_range_end"
                     @keydown.enter.prevent.stop="confirmEndTime"></TimePickerSimple>
-                <DatePicker v-model="tempEnd" class="w-full"></DatePicker>
+                <DatePicker v-model="tempEnd" class="w-full" size="sm"></DatePicker>
                 <Button variant="outline" size="sm" class="w-full" @click="confirmEndTime">
                     Confirm
                 </Button>

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

@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
                 'h-8 w-8 p-0 font-normal',
                 '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
                 // Selected
-                'data-[selected]:bg-quaternary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-quaternary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+                'data-[selected]:bg-quaternary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-quaternary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-quaternary data-[selected]:focus:text-primary-foreground',
                 // Disabled
                 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
                 // Unavailable

resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue

@@ -26,9 +26,9 @@ const forwardedProps = useForwardProps(delegatedProps);
                 '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-quaternary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-quaternary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+                'data-[selection-start]:bg-quaternary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-quaternary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-quaternary data-[selection-start]:focus:text-primary-foreground',
                 // Selection End
-                'data-[selection-end]:bg-quaternary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-quaternary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+                'data-[selection-end]:bg-quaternary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-quaternary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-quaternary 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