"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface TimeValue {
  hours: number;
  minutes: number;
  period: "AM" | "PM";
}

export interface TimePickerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: TimeValue | null;
  onChange?: (time: TimeValue | null) => void;
  placeholder?: string;
  minuteStep?: number;
}

function ClockIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  );
}

function ChevronUpIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <polyline points="18 15 12 9 6 15" />
    </svg>
  );
}

function ChevronDownIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

const formatTime = (time: TimeValue) => {
  const h = time.hours.toString().padStart(2, "0");
  const m = time.minutes.toString().padStart(2, "0");
  return `${h}:${m} ${time.period}`;
};

export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
  (
    {
      className,
      value,
      onChange,
      placeholder = "Select time",
      minuteStep = 1,
      ...props
    },
    ref
  ) => {
    const [isOpen, setIsOpen] = React.useState(false);
    const [internalTime, setInternalTime] = React.useState<TimeValue | null>(
      null
    );
    const containerRef = React.useRef<HTMLDivElement>(null);

    const time = value !== undefined ? value : internalTime;

    const updateTime = React.useCallback(
      (nextTime: TimeValue | null) => {
        if (value === undefined) {
          setInternalTime(nextTime);
        }
        onChange?.(nextTime);
      },
      [onChange, value]
    );

    React.useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (
          containerRef.current &&
          !containerRef.current.contains(event.target as Node)
        ) {
          setIsOpen(false);
        }
      };

      if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside);
      }

      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }, [isOpen]);

    const currentTime = time ?? { hours: 12, minutes: 0, period: "AM" as const };

    const incrementHours = () => {
      const newHours = currentTime.hours >= 12 ? 1 : currentTime.hours + 1;
      updateTime({ ...currentTime, hours: newHours });
    };

    const decrementHours = () => {
      const newHours = currentTime.hours <= 1 ? 12 : currentTime.hours - 1;
      updateTime({ ...currentTime, hours: newHours });
    };

    const incrementMinutes = () => {
      const newMinutes = (currentTime.minutes + minuteStep) % 60;
      updateTime({ ...currentTime, minutes: newMinutes });
    };

    const decrementMinutes = () => {
      const newMinutes =
        currentTime.minutes - minuteStep < 0
          ? 60 - minuteStep
          : currentTime.minutes - minuteStep;
      updateTime({ ...currentTime, minutes: newMinutes });
    };

    const togglePeriod = () => {
      updateTime({
        ...currentTime,
        period: currentTime.period === "AM" ? "PM" : "AM",
      });
    };

    const displayValue = time ? formatTime(time) : placeholder;

    return (
      <div
        ref={(node) => {
          containerRef.current = node;
          if (typeof ref === "function") {
            ref(node);
          } else if (ref) {
            ref.current = node;
          }
        }}
        className={cn("relative w-full max-w-xs", className)}
        {...props}
      >
        <button
          type="button"
          onClick={() => setIsOpen((prev) => !prev)}
          className={cn(
            "flex w-full items-center justify-between gap-2 rounded-lg border border-border bg-background px-4 py-3 text-sm text-foreground",
            "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          )}
        >
          <span
            className={cn(
              "text-left",
              time ? "text-foreground" : "text-muted-foreground"
            )}
          >
            {displayValue}
          </span>
          <ClockIcon className="h-4 w-4 text-muted-foreground" />
        </button>

        {isOpen ? (
          <div className="absolute z-50 mt-2 w-full rounded-xl border border-border bg-card p-4 shadow-lg">
            <div className="flex items-center justify-center gap-2">
              {/* Hours */}
              <div className="flex flex-col items-center gap-1">
                <button
                  type="button"
                  onClick={incrementHours}
                  className="rounded-md p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  aria-label="Increase hours"
                >
                  <ChevronUpIcon className="h-4 w-4" />
                </button>
                <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-background text-lg font-semibold text-foreground">
                  {currentTime.hours.toString().padStart(2, "0")}
                </div>
                <button
                  type="button"
                  onClick={decrementHours}
                  className="rounded-md p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  aria-label="Decrease hours"
                >
                  <ChevronDownIcon className="h-4 w-4" />
                </button>
              </div>

              <span className="text-xl font-semibold text-foreground">:</span>

              {/* Minutes */}
              <div className="flex flex-col items-center gap-1">
                <button
                  type="button"
                  onClick={incrementMinutes}
                  className="rounded-md p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  aria-label="Increase minutes"
                >
                  <ChevronUpIcon className="h-4 w-4" />
                </button>
                <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-background text-lg font-semibold text-foreground">
                  {currentTime.minutes.toString().padStart(2, "0")}
                </div>
                <button
                  type="button"
                  onClick={decrementMinutes}
                  className="rounded-md p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  aria-label="Decrease minutes"
                >
                  <ChevronDownIcon className="h-4 w-4" />
                </button>
              </div>

              {/* AM/PM Toggle */}
              <div className="ml-2 flex flex-col gap-1">
                <button
                  type="button"
                  onClick={() => updateTime({ ...currentTime, period: "AM" })}
                  className={cn(
                    "rounded-md px-3 py-1.5 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                    currentTime.period === "AM"
                      ? "bg-primary text-background"
                      : "bg-muted text-muted-foreground hover:text-foreground"
                  )}
                >
                  AM
                </button>
                <button
                  type="button"
                  onClick={() => updateTime({ ...currentTime, period: "PM" })}
                  className={cn(
                    "rounded-md px-3 py-1.5 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                    currentTime.period === "PM"
                      ? "bg-primary text-background"
                      : "bg-muted text-muted-foreground hover:text-foreground"
                  )}
                >
                  PM
                </button>
              </div>
            </div>

            <div className="mt-4 flex items-center justify-between">
              <button
                type="button"
                className="text-xs font-medium text-muted-foreground transition hover:text-foreground"
                onClick={() => updateTime(null)}
              >
                Clear
              </button>
              <button
                type="button"
                className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                onClick={() => setIsOpen(false)}
              >
                Done
              </button>
            </div>
          </div>
        ) : null}
      </div>
    );
  }
);

TimePicker.displayName = "TimePicker";
Time Picker

Dependencies

Files

Installation
