Merge pull request 'fix/selector-fecha' (#287) from fix/selector-fecha into development

Reviewed-on: ADUANASOFT/anexo76#287

frontend/src/app.css

@@ -38,6 +38,7 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.623 0.214 259.815);
+	color-scheme: light;
 }
 
 .dark {
@@ -72,6 +73,7 @@
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.488 0.243 264.376);
+	color-scheme: dark;
 }
 
 
@@ -128,6 +130,19 @@
 		color: var(--color-foreground);
 		-webkit-text-fill-color: var(--color-foreground);
 	}
+
+	input[type="date"]::-webkit-calendar-picker-indicator,
+	input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+		display: none;
+		opacity: 0;
+	}
+
+	.dark input[type="date"]::-webkit-calendar-picker-indicator,
+	.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+		cursor: pointer;
+		filter: invert(1) brightness(1.15);
+		opacity: 0.9;
+	}
 }
 
 @layer components {

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}