@thangnqdev/ui 0.1.2 → 0.2.0

package/src/forms/DatePicker.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import { Calendar as CalendarIcon, Clock, ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { cn } from '../utils/cn';
-import { Button } from '../buttons/Button';
 import { Popover } from '../overlays/Popover';
+import { useControllableState } from '../utils/useControllableState';
 
 // Utility helper to format date as YYYY-MM-DD
 export function formatDate(d: Date | null | undefined): string {
@@ -35,7 +35,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {
       value: controlledValue,
-      defaultValue,
+      defaultValue = null,
       onChange,
       placeholder = 'Select date...',
       minDate,
@@ -47,30 +47,32 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     ref
   ) => {
-    const [internalDate, setInternalDate] = useState<Date | null>(
-      defaultValue !== undefined ? defaultValue : null
-    );
-    const selectedDate = controlledValue !== undefined ? controlledValue : internalDate;
+    const [selectedDate, setSelectedDate] = useControllableState<Date | null>({
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      name: 'DatePicker',
+    });
 
     const [viewDate, setViewDate] = useState<Date>(selectedDate || new Date());
     const [isOpen, setIsOpen] = useState(false);
+    const [focusedDate, setFocusedDate] = useState<Date>(selectedDate || new Date());
 
     useEffect(() => {
       if (selectedDate) {
         setViewDate(selectedDate);
+        setFocusedDate(selectedDate);
       }
     }, [selectedDate]);
 
     const handleSelectDate = (d: Date) => {
-      setInternalDate(d);
-      onChange?.(d);
+      setSelectedDate(d);
       setIsOpen(false);
     };
 
     const handleClear = (e: React.MouseEvent) => {
       e.stopPropagation();
-      setInternalDate(null);
-      onChange?.(null);
+      setSelectedDate(null);
     };
 
     const prevMonth = () => {
@@ -115,22 +117,74 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 
     const todayStr = formatDate(new Date());
     const selectedStr = selectedDate ? formatDate(selectedDate) : '';
+    const focusedStr = formatDate(focusedDate);
+
+    // Keyboard navigation within the calendar grid
+    const handleGridKeyDown = (e: React.KeyboardEvent) => {
+      let nextDate = new Date(focusedDate);
+      let handled = false;
+
+      if (e.key === 'ArrowLeft') {
+        nextDate.setDate(nextDate.getDate() - 1);
+        handled = true;
+      } else if (e.key === 'ArrowRight') {
+        nextDate.setDate(nextDate.getDate() + 1);
+        handled = true;
+      } else if (e.key === 'ArrowUp') {
+        nextDate.setDate(nextDate.getDate() - 7);
+        handled = true;
+      } else if (e.key === 'ArrowDown') {
+        nextDate.setDate(nextDate.getDate() + 7);
+        handled = true;
+      } else if (e.key === 'PageUp') {
+        nextDate.setMonth(nextDate.getMonth() - 1);
+        handled = true;
+      } else if (e.key === 'PageDown') {
+        nextDate.setMonth(nextDate.getMonth() + 1);
+        handled = true;
+      } else if (e.key === 'Home') {
+        nextDate.setDate(1);
+        handled = true;
+      } else if (e.key === 'End') {
+        const lastDay = new Date(nextDate.getFullYear(), nextDate.getMonth() + 1, 0).getDate();
+        nextDate.setDate(lastDay);
+        handled = true;
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleSelectDate(focusedDate);
+        return;
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+
+      if (handled) {
+        e.preventDefault();
+        setFocusedDate(nextDate);
+        if (nextDate.getMonth() !== viewDate.getMonth() || nextDate.getFullYear() !== viewDate.getFullYear()) {
+          setViewDate(new Date(nextDate.getFullYear(), nextDate.getMonth(), 1));
+        }
+      }
+    };
 
     return (
       <div ref={ref} className={cn('relative inline-block w-full', className)}>
         <Popover
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
+          open={isOpen}
+          onOpenChange={setIsOpen}
           trigger={
             <button
               type="button"
               disabled={disabled}
-              onClick={() => !disabled && setIsOpen(!isOpen)}
+              aria-haspopup="dialog"
+              aria-expanded={isOpen}
+              aria-label={selectedDate ? `Selected date: ${formatDisplayDate(selectedDate)}` : placeholder}
               className={cn(
-                'w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer',
+                'w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
                 disabled
                   ? 'opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]'
-                  : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50'
+                  : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]'
               )}
             >
               <div className="flex items-center gap-2.5 truncate">
@@ -143,7 +197,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               <div className="flex items-center gap-1 text-[var(--ui-text-muted)]">
                 {clearable && selectedDate && !disabled && (
                   <span
+                    role="button"
+                    tabIndex={0}
+                    aria-label="Clear date"
                     onClick={handleClear}
+                    onKeyDown={(e) => e.key === 'Enter' && handleClear(e as unknown as React.MouseEvent)}
                     className="p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors"
                   >
                     <X className="w-3.5 h-3.5" />
@@ -153,24 +211,35 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             </button>
           }
         >
-          <div className="p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+          <div
+            role="dialog"
+            aria-label="Choose date"
+            className="p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3"
+            onKeyDown={handleGridKeyDown}
+          >
             {/* Header: Month Year + Prev/Next */}
             <div className="flex items-center justify-between">
-              <span className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider">
+              <span
+                id="calendar-month-heading"
+                className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider"
+                aria-live="polite"
+              >
                 {viewDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
               </span>
               <div className="flex items-center gap-1">
                 <button
                   type="button"
                   onClick={prevMonth}
-                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors"
+                  aria-label="Previous month"
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer"
                 >
                   <ChevronLeft className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={nextMonth}
-                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors"
+                  aria-label="Next month"
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer"
                 >
                   <ChevronRight className="w-4 h-4" />
                 </button>
@@ -185,7 +254,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                     key={idx}
                     type="button"
                     onClick={() => handleSelectDate(preset.date)}
-                    className="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors"
+                    className="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors cursor-pointer"
                   >
                     {preset.label}
                   </button>
@@ -194,31 +263,60 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             )}
 
             {/* Weekday headers */}
-            <div className="grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono">
-              {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
-                <div key={d} className="py-1">
-                  {d}
+            <div
+              role="row"
+              className="grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono"
+            >
+              {[
+                { short: 'Su', full: 'Sunday' },
+                { short: 'Mo', full: 'Monday' },
+                { short: 'Tu', full: 'Tuesday' },
+                { short: 'We', full: 'Wednesday' },
+                { short: 'Th', full: 'Thursday' },
+                { short: 'Fr', full: 'Friday' },
+                { short: 'Sa', full: 'Saturday' },
+              ].map((d) => (
+                <div key={d.short} role="columnheader" aria-label={d.full} className="py-1">
+                  {d.short}
                 </div>
               ))}
             </div>
 
             {/* Day grid */}
-            <div className="grid grid-cols-7 gap-1">
+            <div
+              role="grid"
+              aria-labelledby="calendar-month-heading"
+              className="grid grid-cols-7 gap-1"
+            >
               {days.map((item, idx) => {
                 const itemStr = formatDate(item.date);
                 const isSelected = itemStr === selectedStr;
                 const isToday = itemStr === todayStr;
+                const isFocused = itemStr === focusedStr;
+
+                const fullDateLabel = item.date.toLocaleDateString('en-US', {
+                  weekday: 'long',
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                });
 
                 return (
                   <button
                     key={idx}
                     type="button"
+                    role="gridcell"
                     disabled={item.disabled}
+                    aria-selected={isSelected}
+                    aria-current={isToday ? 'date' : undefined}
+                    aria-label={fullDateLabel}
+                    tabIndex={isFocused ? 0 : -1}
                     onClick={() => handleSelectDate(item.date)}
                     className={cn(
-                      'h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer',
+                      'h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer outline-none',
                       item.disabled && 'opacity-25 cursor-not-allowed pointer-events-none',
                       !item.currentMonth && 'text-[var(--ui-text-muted)] opacity-50',
+                      isFocused && 'ring-2 ring-[var(--ui-primary)]',
                       isSelected
                         ? 'bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30'
                         : isToday
@@ -257,11 +355,14 @@ export interface DateRangePickerProps {
 }
 
 export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
-  ({ value: controlledVal, defaultValue, onChange, placeholder = 'Select date range...', className, disabled = false }, ref) => {
-    const [internalRange, setInternalRange] = useState<DateRange>(
-      defaultValue || { from: null, to: null }
-    );
-    const range = controlledVal || internalRange;
+  ({ value: controlledVal, defaultValue = { from: null, to: null }, onChange, placeholder = 'Select date range...', className, disabled = false }, ref) => {
+    const [range, setRange] = useControllableState<DateRange>({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: 'DateRangePicker',
+    });
+
     const [viewDate, setViewDate] = useState<Date>(range.from || new Date());
     const [isOpen, setIsOpen] = useState(false);
 
@@ -277,8 +378,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
           setIsOpen(false);
         }
       }
-      setInternalRange(next);
-      onChange?.(next);
+      setRange(next);
     };
 
     const displayText =
@@ -302,14 +402,16 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     return (
       <div ref={ref} className={cn('relative inline-block w-full', className)}>
         <Popover
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
+          open={isOpen}
+          onOpenChange={setIsOpen}
           trigger={
             <button
               type="button"
               disabled={disabled}
-              onClick={() => !disabled && setIsOpen(!isOpen)}
-              className="w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer"
+              aria-haspopup="dialog"
+              aria-expanded={isOpen}
+              aria-label={displayText}
+              className="w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]"
             >
               <div className="flex items-center gap-2.5 truncate">
                 <CalendarIcon className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
@@ -320,30 +422,40 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             </button>
           }
         >
-          <div className="p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+          <div
+            role="dialog"
+            aria-label="Choose date range"
+            className="p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3"
+          >
             <div className="flex items-center justify-between">
-              <span className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider">
+              <span id="range-month-heading" className="text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider">
                 {viewDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
               </span>
               <div className="flex items-center gap-1">
                 <button
                   type="button"
                   onClick={() => setViewDate(new Date(year, month - 1, 1))}
-                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]"
+                  aria-label="Previous month"
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer"
                 >
                   <ChevronLeft className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={() => setViewDate(new Date(year, month + 1, 1))}
-                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]"
+                  aria-label="Next month"
+                  className="p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer"
                 >
                   <ChevronRight className="w-4 h-4" />
                 </button>
               </div>
             </div>
 
-            <div className="grid grid-cols-7 gap-1 text-center">
+            <div
+              role="grid"
+              aria-labelledby="range-month-heading"
+              className="grid grid-cols-7 gap-1 text-center"
+            >
               {Array.from({ length: firstDayIndex }).map((_, i) => (
                 <div key={`empty-${i}`} />
               ))}
@@ -360,6 +472,9 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
                   <button
                     key={idx}
                     type="button"
+                    role="gridcell"
+                    aria-selected={Boolean(isFrom || isTo || isInRange)}
+                    aria-label={d.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                     onClick={() => handleDayClick(d)}
                     className={cn(
                       'h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer',
@@ -391,59 +506,202 @@ export interface TimePickerProps {
   format?: '12h' | '24h';
   className?: string;
   disabled?: boolean;
+  placeholder?: string;
 }
 
 export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
-  ({ value: controlledVal, defaultValue = '12:00', onChange, format = '24h', className, disabled = false }, ref) => {
-    const [internalTime, setInternalTime] = useState(defaultValue);
-    const time = controlledVal !== undefined ? controlledVal : internalTime;
+  (
+    {
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      format = '24h',
+      className,
+      disabled = false,
+      placeholder = 'Select time...',
+    },
+    ref
+  ) => {
+    const is12h = format === '12h';
+    const fallbackDefault = defaultValue ?? (is12h ? '12:00 PM' : '12:00');
+
+    const [time, setTime] = useControllableState<string>({
+      value: controlledVal,
+      defaultValue: fallbackDefault,
+      onChange,
+      name: 'TimePicker',
+    });
 
-    const [hours, setHours] = useState(time.split(':')[0] || '12');
-    const [minutes, setMinutes] = useState(time.split(':')[1] || '00');
     const [isOpen, setIsOpen] = useState(false);
 
-    const updateTime = (newH: string, newM: string) => {
-      const full = `${newH.padStart(2, '0')}:${newM.padStart(2, '0')}`;
-      setHours(newH);
-      setMinutes(newM);
-      setInternalTime(full);
-      onChange?.(full);
+    // Parsing helper
+    const parseTime = (str: string, is12: boolean) => {
+      if (!str) return { hours: is12 ? '12' : '12', minutes: '00', period: 'AM' };
+      const trimmed = str.trim();
+      let period = 'AM';
+      let cleanTime = trimmed;
+      if (trimmed.toLowerCase().includes('pm')) {
+        period = 'PM';
+        cleanTime = trimmed.replace(/pm/i, '').trim();
+      } else if (trimmed.toLowerCase().includes('am')) {
+        period = 'AM';
+        cleanTime = trimmed.replace(/am/i, '').trim();
+      }
+      const parts = cleanTime.split(':');
+      let h = parts[0] ? parts[0].padStart(2, '0') : is12 ? '12' : '00';
+      const m = parts[1] ? parts[1].padStart(2, '0') : '00';
+      return { hours: h, minutes: m, period };
+    };
+
+    const { hours, minutes, period } = parseTime(time, is12h);
+
+    const updateTime = (newH: string, newM: string, newPeriod?: string) => {
+      let formatted: string;
+      if (is12h) {
+        const p = newPeriod ?? period;
+        formatted = `${newH.padStart(2, '0')}:${newM.padStart(2, '0')} ${p}`;
+      } else {
+        formatted = `${newH.padStart(2, '0')}:${newM.padStart(2, '0')}`;
+      }
+      setTime(formatted);
+    };
+
+    const hourOptions = is12h
+      ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'))
+      : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+
+    const minuteOptions = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+
+    const hourListRef = useRef<HTMLDivElement>(null);
+    const minuteListRef = useRef<HTMLDivElement>(null);
+    const periodListRef = useRef<HTMLDivElement>(null);
+
+    // Auto-focus active option when opened
+    useEffect(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          const activeHourEl = hourListRef.current?.querySelector<HTMLElement>('[aria-selected="true"]');
+          activeHourEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+
+    const handleHourKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const idx = hourOptions.indexOf(hours);
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const next = hourOptions[(idx + 1) % hourOptions.length];
+        updateTime(next, minutes, period);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prev = hourOptions[(idx - 1 + hourOptions.length) % hourOptions.length];
+        updateTime(prev, minutes, period);
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector<HTMLElement>('[aria-selected="true"]') || minuteListRef.current?.querySelector<HTMLElement>('[role="option"]');
+        activeMinEl?.focus();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+
+    const handleMinuteKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const idx = minuteOptions.indexOf(minutes);
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const next = minuteOptions[(idx + 1) % minuteOptions.length];
+        updateTime(hours, next, period);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prev = minuteOptions[(idx - 1 + minuteOptions.length) % minuteOptions.length];
+        updateTime(hours, prev, period);
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        const activeHourEl = hourListRef.current?.querySelector<HTMLElement>('[aria-selected="true"]');
+        activeHourEl?.focus();
+      } else if (e.key === 'ArrowRight' && is12h) {
+        e.preventDefault();
+        const activePeriodEl = periodListRef.current?.querySelector<HTMLElement>('[aria-selected="true"]');
+        activePeriodEl?.focus();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+
+    const handlePeriodKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const next = period === 'AM' ? 'PM' : 'AM';
+        updateTime(hours, minutes, next);
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector<HTMLElement>('[aria-selected="true"]');
+        activeMinEl?.focus();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setIsOpen(false);
+      }
     };
 
     return (
       <div ref={ref} className={cn('relative inline-block w-full', className)}>
         <Popover
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
+          open={isOpen}
+          onOpenChange={setIsOpen}
           trigger={
             <button
               type="button"
               disabled={disabled}
-              onClick={() => !disabled && setIsOpen(!isOpen)}
-              className="w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer"
+              aria-haspopup="dialog"
+              aria-expanded={isOpen}
+              aria-label={`Selected time: ${time}`}
+              className={cn(
+                'w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
+                disabled && 'opacity-50 cursor-not-allowed'
+              )}
             >
               <div className="flex items-center gap-2.5">
-                <Clock className="w-4 h-4 text-[var(--ui-text-muted)]" />
-                <span className="font-mono text-sm font-semibold text-[var(--ui-text-primary)]">{time}</span>
+                <Clock className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
+                <span className="font-mono text-sm font-semibold text-[var(--ui-text-primary)]">
+                  {time || placeholder}
+                </span>
               </div>
             </button>
           }
         >
-          <div className="p-4 w-52 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3">
+          <div
+            role="dialog"
+            aria-label="Choose time"
+            className="p-4 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3"
+          >
             <span className="text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono">
               Select Time ({format})
             </span>
             <div className="flex items-center justify-center gap-2">
-              <div className="h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1">
-                {Array.from({ length: 24 }).map((_, i) => {
-                  const h = String(i).padStart(2, '0');
+              {/* Hours */}
+              <div
+                ref={hourListRef}
+                tabIndex={0}
+                onKeyDown={handleHourKeyDown}
+                className="h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]"
+                role="listbox"
+                aria-label="Hour"
+              >
+                {hourOptions.map((h) => {
+                  const isSelected = hours === h;
                   return (
                     <div
                       key={h}
-                      onClick={() => updateTime(h, minutes)}
+                      tabIndex={isSelected ? 0 : -1}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => updateTime(h, minutes, period)}
                       className={cn(
-                        'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors',
-                        hours === h
+                        'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]',
+                        isSelected
                           ? 'bg-[var(--ui-primary)] text-white'
                           : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
                       )}
@@ -454,22 +712,68 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 })}
               </div>
               <span className="text-sm font-bold">:</span>
-              <div className="h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1">
-                {['00', '05', '10', '15', '20', '25', '30', '35', '40', '41', '45', '50', '55'].map((m) => (
-                  <div
-                    key={m}
-                    onClick={() => updateTime(hours, m)}
-                    className={cn(
-                      'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors',
-                      minutes === m
-                        ? 'bg-[var(--ui-primary)] text-white'
-                        : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
-                    )}
-                  >
-                    {m}
-                  </div>
-                ))}
+              {/* Minutes */}
+              <div
+                ref={minuteListRef}
+                tabIndex={0}
+                onKeyDown={handleMinuteKeyDown}
+                className="h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]"
+                role="listbox"
+                aria-label="Minute"
+              >
+                {minuteOptions.map((m) => {
+                  const isSelected = minutes === m;
+                  return (
+                    <div
+                      key={m}
+                      tabIndex={isSelected ? 0 : -1}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => updateTime(hours, m, period)}
+                      className={cn(
+                        'text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]',
+                        isSelected
+                          ? 'bg-[var(--ui-primary)] text-white'
+                          : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                      )}
+                    >
+                      {m}
+                    </div>
+                  );
+                })}
               </div>
+              {/* Period (AM/PM) for 12h */}
+              {is12h && (
+                <div
+                  ref={periodListRef}
+                  tabIndex={0}
+                  onKeyDown={handlePeriodKeyDown}
+                  className="h-40 border border-[var(--ui-border-subtle)] rounded-xl p-1 w-14 text-center space-y-1 flex flex-col justify-center focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]"
+                  role="listbox"
+                  aria-label="Period"
+                >
+                  {['AM', 'PM'].map((p) => {
+                    const isSelected = period === p;
+                    return (
+                      <div
+                        key={p}
+                        tabIndex={isSelected ? 0 : -1}
+                        role="option"
+                        aria-selected={isSelected}
+                        onClick={() => updateTime(hours, minutes, p)}
+                        className={cn(
+                          'text-xs py-2 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]',
+                          isSelected
+                            ? 'bg-[var(--ui-primary)] text-white'
+                            : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                        )}
+                      >
+                        {p}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
             </div>
           </div>
         </Popover>