From 29bf4d22000b162e7f9ac2e48553c7216a2afef9 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 15 Apr 2026 18:21:09 -0400
Subject: [PATCH] fix(time-picker): improve layout stability, a11y, and
 separator styling

- Change input group horizontal padding from px-3 to pl-3 pr-2 to
  better accommodate the trigger button.
- Add shrink-0 to the trigger button so it does not collapse in flex
  layouts.
- Mark the Clock icon with aria-hidden to keep it out of the
  accessibility tree.
- Forward the className prop in TimePickerSeparator and apply default
  muted-foreground text styling.
---
 src/components/ui/time-picker.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/time-picker.tsx b/src/components/ui/time-picker.tsx
index 5f0f342..01c7d3d 100644
--- a/src/components/ui/time-picker.tsx
+++ b/src/components/ui/time-picker.tsx
@@ -723,7 +723,7 @@ function TimePickerInputGroup(props: DivProps) {
 					data-invalid={invalid ? "" : undefined}
 					{...inputGroupProps}
 					className={cn(
-						"flex h-10 w-full cursor-text items-center gap-0.5 rounded-md border border-input bg-background px-3 py-2 shadow-xs outline-none transition-shadow",
+						"flex h-10 w-full cursor-text items-center gap-0.5 rounded-md border border-input bg-background pl-3 pr-2 py-2 shadow-xs outline-none transition-shadow",
 						"has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50",
 						invalid && "border-destructive ring-destructive/20",
 						disabled && "cursor-not-allowed opacity-50",
@@ -1468,11 +1468,11 @@ function TimePickerTrigger(props: ButtonProps) {
 				ref={composedRef}
 				{...triggerProps}
 				className={cn(
-					"ml-auto size-7 text-muted-foreground hover:text-foreground",
+					"ml-auto size-7 shrink-0 text-muted-foreground hover:text-foreground",
 					className,
 				)}
 			>
-				{children ?? <Clock className="size-4" />}
+				{children ?? <Clock aria-hidden="true" className="size-4" />}
 			</Button>
 		</PopoverTrigger>
 	);
@@ -2149,7 +2149,7 @@ interface TimePickerSeparatorProps extends React.ComponentProps<"span"> {
 }
 
 function TimePickerSeparator(props: TimePickerSeparatorProps) {
-	const { asChild, children, ...separatorProps } = props;
+	const { asChild, children, className, ...separatorProps } = props;
 
 	const SeparatorPrimitive = asChild ? SlotPrimitive.Slot : "span";
 
@@ -2157,6 +2157,7 @@ function TimePickerSeparator(props: TimePickerSeparatorProps) {
 		<SeparatorPrimitive
 			aria-hidden="true"
 			data-slot="time-picker-separator"
+			className={cn("text-sm text-muted-foreground", className)}
 			{...separatorProps}
 		>
 			{children ?? ":"}