// ui/date-picker/date-picker.tsx "use client"; import { cn } from "@paubha/registry/lib/cn"; import { Calendar as CalendarIcon } from "lucide-react"; import * as React from "react"; import { Button } from "../button/button"; import { Calendar } from "../calendar/calendar"; import { Input } from "../input/input"; import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover"; const DATE_FORMATTER = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }); export interface DatePickerProps extends Omit< React.ComponentPropsWithRef<"div">, "defaultValue" | "onChange" > { value?: Date; defaultValue?: Date; onValueChange?: (date: Date | undefined) => void; placeholder?: string; disabled?: boolean; } /** * Date field · Popover + Calendar panel · trigger is a Button with glow-focus · * calendar grid is the APG date grid (arrow keys, roving tabindex) · selecting a * day only stages it, Apply commits and closes, Cancel/Escape discards · * Today stages today · controlled + uncontrolled */ export function DatePicker({ ref, className, value, defaultValue, onValueChange, placeholder = "Pick a date", disabled = false, ...props }: DatePickerProps) { const [open, setOpen] = React.useState(false); const [uncontrolled, setUncontrolled] = React.useState( defaultValue, ); const [draft, setDraft] = React.useState(undefined); const [month, setMonth] = React.useState(new Date()); const isControlled = value !== undefined; const current = isControlled ? value : uncontrolled; const handleOpenChange = (next: boolean) => { if (next) { setDraft(current); setMonth(current ?? new Date()); } setOpen(next); }; const apply = () => { if (!isControlled) setUncontrolled(draft); onValueChange?.(draft); setOpen(false); }; const today = () => { const now = new Date(); setDraft(now); setMonth(now); }; return (

} className="flex-1" />

); } DatePicker.displayName = "DatePicker"; // lib/cn.ts import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; // Our named type-scale utilities (text-ui-*, text-body-*, text-display-*) are custom // Tailwind v4 @theme tokens tailwind-merge doesn't know about out of the box. Without // this, it falls back to treating them as arbitrary text-color classes and silently // drops them whenever a real text-fg-* color class is merged in alongside. Every // component that pairs a type-scale class with a color class (the documented, required // pattern) loses its font-size/line-height/letter-spacing at runtime. const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [ { text: [ "ui-xs", "ui-sm", "ui-md", "ui-lg", "body-sm", "body-md", "body-lg", "display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl", ], }, ], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

Date Picker

Installation

Usage

On this page