From 9a820794a223a4fb0e07a620f22919734218c094 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 20 May 2025 10:17:35 -0700
Subject: [PATCH] improve time input AM/PM selector, partial text
 implementation

---
 src/lib/TimeInput.svelte | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index b594367..637bae8 100644
--- a/src/lib/TimeInput.svelte
+++ b/src/lib/TimeInput.svelte
@@ -3,19 +3,24 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { onMount } from 'svelte';
+	import moment from 'moment';
 
 	let {
 		name,
 		label,
 		value = $bindable(''),
+		formattedValue = $bindable(''),
 		required,
-		invalidMessage = 'Please select a time'
+		invalidMessage = 'Please select a time',
+		showText = false
 	}: {
 		name: string;
 		label?: string;
 		value?: string;
+		formattedValue?: string;
 		required?: boolean;
 		invalidMessage?: string;
+		showText?: boolean;
 	} = $props();
 
 	let ampm: 'AM' | 'PM' = $state('AM');
@@ -155,6 +160,8 @@
 
 		value = `${prefixZero((hourValue + (ampmLocal === 'PM' ? 12 : 0)).toString())}:${prefixZero(minuteValue.toString())}`;
 		updateHiddenInput();
+
+		// update formatted value
 	};
 
 	/**
@@ -298,8 +305,11 @@
 		<div class="flex flex-col">
 			<!-- AM Button -->
 			<button
-				class={['ampm rounded-t-sm border', ampm === 'AM' && 'selected']}
-				onclick={() => (ampm = 'AM')}
+				class={['ampm rounded-t-sm border', ampm === 'AM' && 'selected ring-1 ring-blue-300']}
+				onclick={() => {
+					ampm = 'AM';
+					updateValue();
+				}}
 				onkeydown={(e) => {
 					if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') minuteInput?.focus();
 					else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') pmButton.focus();
@@ -311,8 +321,14 @@
 
 			<!-- PM Button -->
 			<button
-				class={['ampm rounded-b-sm border-r border-b border-l', ampm === 'PM' && 'selected']}
-				onclick={() => (ampm = 'PM')}
+				class={[
+					'ampm rounded-b-sm border-r border-b border-l',
+					ampm === 'PM' && 'selected ring-1 ring-blue-300'
+				]}
+				onclick={() => {
+					ampm = 'PM';
+					updateValue();
+				}}
 				onkeydown={(e) => {
 					if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') amButton?.focus();
 				}}
@@ -351,7 +367,7 @@
 		@apply border-accent dark:border-accent/50 cursor-pointer px-3 py-1 font-medium;
 
 		&.selected {
-			@apply bg-accent text-background dark:bg-accent/30 dark:text-background/90;
+			@apply bg-accent text-background dark:bg-accent/30 dark:text-background/90 ring-1 ring-blue-600 dark:ring-blue-300;
 		}
 	}
 </style>