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

@@ -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 ?? ":"}