fix/selector-fecha

frontend/src/lib/components/ui/input/input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Calendar } from 'lucide-svelte';
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 	import { cn, type WithElementRef } from "$lib/utils.js";
 
@@ -18,6 +19,19 @@
 		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
+
+	const isDateInput = $derived(type === 'date' || type === 'datetime-local');
+
+	function openDatePicker() {
+		if (!ref) return;
+
+		if ('showPicker' in ref && typeof ref.showPicker === 'function') {
+			ref.showPicker();
+			return;
+		}
+
+		ref.click();
+	}
 </script>
 
 {#if type === "file"}
@@ -35,6 +49,31 @@
 		bind:value
 		{...restProps}
 	/>
+{:else if isDateInput}
+	<div class="relative w-full">
+		<input
+			bind:this={ref}
+			data-slot={dataSlot}
+			class={cn(
+				"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 pr-11 text-base text-foreground outline-none transition-[color,box-shadow] appearance-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+				"[&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0"
+			)}
+			type={type}
+			bind:value
+			{...restProps}
+		/>
+		<button
+			type="button"
+			aria-label="Abrir selector de fecha"
+			onclick={openDatePicker}
+			class="absolute top-1/2 right-1 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none"
+		>
+			<Calendar aria-hidden="true" class="h-4 w-4" />
+		</button>
+	</div>
 {:else}
 	<input
 		bind:this={ref}