starting to fix time tool

website/src/lib/components/ui/date-picker/DatePicker.svelte

@@ -1,39 +1,48 @@
 <script lang="ts">
-    import { CalendarIcon } from '@lucide/svelte';
+    import CalendarIcon from '@lucide/svelte/icons/calendar';
     import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
     import { cn } from '$lib/utils.js';
-    import { Button } from '$lib/components/ui/button/index.js';
+    import { buttonVariants } from '$lib/components/ui/button/index.js';
     import { Calendar } from '$lib/components/ui/calendar/index.js';
     import * as Popover from '$lib/components/ui/popover/index.js';
 
-    export let value: DateValue | undefined = undefined;
-    export let placeholder: string = 'Pick a date';
-    export let locale = 'en';
-    export let disabled: boolean = false;
-    export let onValueChange: any;
+    let {
+        value = $bindable<DateValue | undefined>(),
+        placeholder = 'Pick a date',
+        disabled = false,
+        locale,
+        class: className = '',
+    }: {
+        value?: DateValue;
+        placeholder?: string;
+        disabled?: boolean;
+        locale: string;
+        class?: string;
+    } = $props();
 
     const df = new DateFormatter(locale, {
         dateStyle: 'long',
     });
+
+    let contentRef = $state<HTMLElement | null>(null);
 </script>
 
 <Popover.Root>
-    <Popover.Trigger asChild let:builder>
-        <Button
-            variant="outline"
-            class={cn(
-                'w-[280px] justify-start text-left font-normal',
-                !value && 'text-muted-foreground',
-                $$props.class
-            )}
-            {disabled}
-            builders={[builder]}
-        >
-            <CalendarIcon class="mr-2 h-4 w-4" />
-            {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
-        </Button>
+    <Popover.Trigger
+        class={cn(
+            buttonVariants({
+                variant: 'outline',
+                class: 'justify-start text-left font-normal',
+            }),
+            !value && 'text-muted-foreground',
+            className
+        )}
+        {disabled}
+    >
+        <CalendarIcon />
+        {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
     </Popover.Trigger>
-    <Popover.Content class="w-auto p-0">
-        <Calendar bind:value initialFocus {locale} {onValueChange} />
+    <Popover.Content bind:ref={contentRef} class="w-auto p-0">
+        <Calendar type="single" captionLayout="dropdown" bind:value />
     </Popover.Content>
 </Popover.Root>