@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/DatePicker.tsx

@@ -1,784 +1,784 @@
-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 { 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 {
-  if (!d) return '';
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, '0');
-  const day = String(d.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-}
-
-export function formatDisplayDate(d: Date | null | undefined): string {
-  if (!d) return '';
-  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-}
-
-export interface DatePickerProps {
-  value?: Date | null;
-  defaultValue?: Date | null;
-  onChange?: (date: Date | null) => void;
-  placeholder?: string;
-  minDate?: Date;
-  maxDate?: Date;
-  disabled?: boolean;
-  clearable?: boolean;
-  className?: string;
-  presets?: { label: string; date: Date }[];
-}
-
-export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
-  (
-    {
-      value: controlledValue,
-      defaultValue = null,
-      onChange,
-      placeholder = 'Select date...',
-      minDate,
-      maxDate,
-      disabled = false,
-      clearable = true,
-      className,
-      presets,
-    },
-    ref
-  ) => {
-    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) => {
-      setSelectedDate(d);
-      setIsOpen(false);
-    };
-
-    const handleClear = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      setSelectedDate(null);
-    };
-
-    const prevMonth = () => {
-      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
-    };
-
-    const nextMonth = () => {
-      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
-    };
-
-    // Calendar generation logic
-    const year = viewDate.getFullYear();
-    const month = viewDate.getMonth();
-    const firstDayIndex = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    const daysInPrevMonth = new Date(year, month, 0).getDate();
-
-    const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = [];
-
-    // Prev month padding days
-    for (let i = firstDayIndex - 1; i >= 0; i--) {
-      const d = new Date(year, month - 1, daysInPrevMonth - i);
-      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
-      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
-    }
-
-    // Current month days
-    for (let i = 1; i <= daysInMonth; i++) {
-      const d = new Date(year, month, i);
-      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
-      days.push({ date: d, currentMonth: true, disabled: Boolean(isDis) });
-    }
-
-    // Next month padding days to complete grid of 35 or 42
-    const totalSlots = days.length > 35 ? 42 : 35;
-    const remainingSlots = totalSlots - days.length;
-    for (let i = 1; i <= remainingSlots; i++) {
-      const d = new Date(year, month + 1, i);
-      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
-      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
-    }
-
-    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
-          open={isOpen}
-          onOpenChange={setIsOpen}
-          trigger={
-            <button
-              type="button"
-              disabled={disabled}
-              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 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)]'
-              )}
-            >
-              <div className="flex items-center gap-2.5 truncate">
-                <CalendarIcon className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
-                <span className={selectedDate ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
-                  {selectedDate ? formatDisplayDate(selectedDate) : placeholder}
-                </span>
-              </div>
-
-              <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" />
-                  </span>
-                )}
-              </div>
-            </button>
-          }
-        >
-          <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
-                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}
-                  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}
-                  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>
-              </div>
-            </div>
-
-            {/* Presets if provided */}
-            {presets && presets.length > 0 && (
-              <div className="flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]">
-                {presets.map((preset, idx) => (
-                  <button
-                    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 cursor-pointer"
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-            )}
-
-            {/* Weekday headers */}
-            <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
-              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 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
-                        ? 'border border-[var(--ui-primary)] text-[var(--ui-primary)]'
-                        : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
-                    )}
-                  >
-                    {item.date.getDate()}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </Popover>
-      </div>
-    );
-  }
-);
-DatePicker.displayName = 'DatePicker';
-
-/* -------------------------------------------------------------------------------------------------
- * DateRangePicker Component
- * -----------------------------------------------------------------------------------------------*/
-export interface DateRange {
-  from: Date | null;
-  to: Date | null;
-}
-
-export interface DateRangePickerProps {
-  value?: DateRange;
-  defaultValue?: DateRange;
-  onChange?: (range: DateRange) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
-  ({ 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);
-
-    const handleDayClick = (d: Date) => {
-      let next: DateRange;
-      if (!range.from || (range.from && range.to)) {
-        next = { from: d, to: null };
-      } else {
-        if (d < range.from) {
-          next = { from: d, to: range.from };
-        } else {
-          next = { from: range.from, to: d };
-          setIsOpen(false);
-        }
-      }
-      setRange(next);
-    };
-
-    const displayText =
-      range.from && range.to
-        ? `${formatDisplayDate(range.from)} – ${formatDisplayDate(range.to)}`
-        : range.from
-        ? `${formatDisplayDate(range.from)} – ...`
-        : placeholder;
-
-    // Calendar generation
-    const year = viewDate.getFullYear();
-    const month = viewDate.getMonth();
-    const firstDayIndex = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-
-    const days: Date[] = [];
-    for (let i = 1; i <= daysInMonth; i++) {
-      days.push(new Date(year, month, i));
-    }
-
-    return (
-      <div ref={ref} className={cn('relative inline-block w-full', className)}>
-        <Popover
-          open={isOpen}
-          onOpenChange={setIsOpen}
-          trigger={
-            <button
-              type="button"
-              disabled={disabled}
-              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" />
-                <span className={range.from ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
-                  {displayText}
-                </span>
-              </div>
-            </button>
-          }
-        >
-          <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 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))}
-                  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))}
-                  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
-              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}`} />
-              ))}
-              {days.map((d, idx) => {
-                const dStr = formatDate(d);
-                const fromStr = range.from ? formatDate(range.from) : '';
-                const toStr = range.to ? formatDate(range.to) : '';
-                const isFrom = dStr === fromStr;
-                const isTo = dStr === toStr;
-                const isInRange =
-                  range.from && range.to && d > range.from && d < range.to;
-
-                return (
-                  <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',
-                      (isFrom || isTo) && 'bg-[var(--ui-primary)] text-white shadow-md',
-                      isInRange && 'bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none',
-                      !isFrom && !isTo && !isInRange && 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
-                    )}
-                  >
-                    {d.getDate()}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </Popover>
-      </div>
-    );
-  }
-);
-DateRangePicker.displayName = 'DateRangePicker';
-
-/* -------------------------------------------------------------------------------------------------
- * TimePicker Component
- * -----------------------------------------------------------------------------------------------*/
-export interface TimePickerProps {
-  value?: string;
-  defaultValue?: string;
-  onChange?: (time: string) => void;
-  format?: '12h' | '24h';
-  className?: string;
-  disabled?: boolean;
-  placeholder?: string;
-}
-
-export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
-  (
-    {
-      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 [isOpen, setIsOpen] = useState(false);
-
-    // 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
-          open={isOpen}
-          onOpenChange={setIsOpen}
-          trigger={
-            <button
-              type="button"
-              disabled={disabled}
-              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)] shrink-0" />
-                <span className="font-mono text-sm font-semibold text-[var(--ui-text-primary)]">
-                  {time || placeholder}
-                </span>
-              </div>
-            </button>
-          }
-        >
-          <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">
-              {/* 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}
-                      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 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)]'
-                      )}
-                    >
-                      {h}
-                    </div>
-                  );
-                })}
-              </div>
-              <span className="text-sm font-bold">:</span>
-              {/* 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>
-      </div>
-    );
-  }
-);
-TimePicker.displayName = 'TimePicker';
+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 { 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 {
+  if (!d) return '';
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export function formatDisplayDate(d: Date | null | undefined): string {
+  if (!d) return '';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export interface DatePickerProps {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  clearable?: boolean;
+  className?: string;
+  presets?: { label: string; date: Date }[];
+}
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = null,
+      onChange,
+      placeholder = 'Select date...',
+      minDate,
+      maxDate,
+      disabled = false,
+      clearable = true,
+      className,
+      presets,
+    },
+    ref
+  ) => {
+    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) => {
+      setSelectedDate(d);
+      setIsOpen(false);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setSelectedDate(null);
+    };
+
+    const prevMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+    };
+
+    const nextMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+    };
+
+    // Calendar generation logic
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = [];
+
+    // Prev month padding days
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const d = new Date(year, month - 1, daysInPrevMonth - i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+
+    // Current month days
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(year, month, i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: true, disabled: Boolean(isDis) });
+    }
+
+    // Next month padding days to complete grid of 35 or 42
+    const totalSlots = days.length > 35 ? 42 : 35;
+    const remainingSlots = totalSlots - days.length;
+    for (let i = 1; i <= remainingSlots; i++) {
+      const d = new Date(year, month + 1, i);
+      const isDis = (minDate && d < minDate) || (maxDate && d > maxDate);
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+
+    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
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              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 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)]'
+              )}
+            >
+              <div className="flex items-center gap-2.5 truncate">
+                <CalendarIcon className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />
+                <span className={selectedDate ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
+                  {selectedDate ? formatDisplayDate(selectedDate) : placeholder}
+                </span>
+              </div>
+
+              <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" />
+                  </span>
+                )}
+              </div>
+            </button>
+          }
+        >
+          <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
+                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}
+                  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}
+                  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>
+              </div>
+            </div>
+
+            {/* Presets if provided */}
+            {presets && presets.length > 0 && (
+              <div className="flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]">
+                {presets.map((preset, idx) => (
+                  <button
+                    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 cursor-pointer"
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Weekday headers */}
+            <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
+              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 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
+                        ? 'border border-[var(--ui-primary)] text-[var(--ui-primary)]'
+                        : 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                    )}
+                  >
+                    {item.date.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+);
+DatePicker.displayName = 'DatePicker';
+
+/* -------------------------------------------------------------------------------------------------
+ * DateRangePicker Component
+ * -----------------------------------------------------------------------------------------------*/
+export interface DateRange {
+  from: Date | null;
+  to: Date | null;
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (range: DateRange) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
+  ({ 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);
+
+    const handleDayClick = (d: Date) => {
+      let next: DateRange;
+      if (!range.from || (range.from && range.to)) {
+        next = { from: d, to: null };
+      } else {
+        if (d < range.from) {
+          next = { from: d, to: range.from };
+        } else {
+          next = { from: range.from, to: d };
+          setIsOpen(false);
+        }
+      }
+      setRange(next);
+    };
+
+    const displayText =
+      range.from && range.to
+        ? `${formatDisplayDate(range.from)} – ${formatDisplayDate(range.to)}`
+        : range.from
+        ? `${formatDisplayDate(range.from)} – ...`
+        : placeholder;
+
+    // Calendar generation
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+    const days: Date[] = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(new Date(year, month, i));
+    }
+
+    return (
+      <div ref={ref} className={cn('relative inline-block w-full', className)}>
+        <Popover
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              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" />
+                <span className={range.from ? 'text-[var(--ui-text-primary)] font-medium' : 'text-[var(--ui-text-muted)]'}>
+                  {displayText}
+                </span>
+              </div>
+            </button>
+          }
+        >
+          <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 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))}
+                  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))}
+                  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
+              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}`} />
+              ))}
+              {days.map((d, idx) => {
+                const dStr = formatDate(d);
+                const fromStr = range.from ? formatDate(range.from) : '';
+                const toStr = range.to ? formatDate(range.to) : '';
+                const isFrom = dStr === fromStr;
+                const isTo = dStr === toStr;
+                const isInRange =
+                  range.from && range.to && d > range.from && d < range.to;
+
+                return (
+                  <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',
+                      (isFrom || isTo) && 'bg-[var(--ui-primary)] text-white shadow-md',
+                      isInRange && 'bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none',
+                      !isFrom && !isTo && !isInRange && 'hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]'
+                    )}
+                  >
+                    {d.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+);
+DateRangePicker.displayName = 'DateRangePicker';
+
+/* -------------------------------------------------------------------------------------------------
+ * TimePicker Component
+ * -----------------------------------------------------------------------------------------------*/
+export interface TimePickerProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (time: string) => void;
+  format?: '12h' | '24h';
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
+  (
+    {
+      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 [isOpen, setIsOpen] = useState(false);
+
+    // 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
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={
+            <button
+              type="button"
+              disabled={disabled}
+              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)] shrink-0" />
+                <span className="font-mono text-sm font-semibold text-[var(--ui-text-primary)]">
+                  {time || placeholder}
+                </span>
+              </div>
+            </button>
+          }
+        >
+          <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">
+              {/* 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}
+                      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 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)]'
+                      )}
+                    >
+                      {h}
+                    </div>
+                  );
+                })}
+              </div>
+              <span className="text-sm font-bold">:</span>
+              {/* 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>
+      </div>
+    );
+  }
+);
+TimePicker.displayName = 'TimePicker';