"use client"; import * as React from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/registry/primitives/core/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/registry/primitives/core/select"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { cn } from "@/lib/registry/cn"; interface TimeValue { hour: string; minute: string; period?: "AM" | "PM"; } interface TimePickerProps { value?: TimeValue; onChange?: (value: TimeValue | undefined) => void; placeholder?: string; } export function TimePicker({ value, onChange, placeholder = "Pick a time", }: TimePickerProps) { const [time, setTime] = React.useState(value); const [isOpen, setIsOpen] = React.useState(false); // Generate hours (12-hour format) const hours = Array.from({ length: 12 }, (_, i) => { const hour = i + 1; return { value: hour.toString().padStart(2, "0"), label: hour.toString() }; }); // Generate minutes const minutes = Array.from({ length: 60 }, (_, i) => { const minute = i.toString().padStart(2, "0"); return { value: minute, label: minute }; }); const periods = [ { value: "AM", label: "AM" }, { value: "PM", label: "PM" }, ]; const handleTimeChange = (field: keyof TimeValue, val: string) => { const newTime = { hour: time?.hour || "12", minute: time?.minute || "00", period: time?.period || "AM", [field]: val, }; setTime(newTime); onChange?.(newTime); }; const formatTime = (timeValue?: TimeValue) => { if (!timeValue) return null; return `${timeValue.hour}:${timeValue.minute} ${timeValue.period}`; }; return (

); }

Time picker

Showcase

Time picker