time-picker

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5import { useRender } from "@base-ui/react/use-render";
6import { Clock } from "lucide-react";
7import * as React from "react";
8import { cn } from "@/lib/utils";
9import { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
10import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
11import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
12import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
13import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
14import { Popover, PopoverTrigger } from "@/registry/bases/base/ui/popover";
15 
16const ROOT_NAME = "TimePicker";
17const LABEL_NAME = "TimePickerLabel";
18const INPUT_GROUP_NAME = "TimePickerInputGroup";
19const INPUT_NAME = "TimePickerInput";
20const TRIGGER_NAME = "TimePickerTrigger";
21const CONTENT_NAME = "TimePickerContent";
22const COLUMN_NAME = "TimePickerColumn";
23const COLUMN_ITEM_NAME = "TimePickerColumnItem";
24const HOUR_NAME = "TimePickerHour";
25const MINUTE_NAME = "TimePickerMinute";
26const SECOND_NAME = "TimePickerSecond";
27const PERIOD_NAME = "TimePickerPeriod";
28const CLEAR_NAME = "TimePickerClear";
29 
30const DEFAULT_STEP = 1;
31const DEFAULT_SEGMENT_PLACEHOLDER = "--";
32const DEFAULT_LOCALE = undefined;
33const SEGMENTS: Segment[] = ["hour", "minute", "second", "period"];
34const PERIODS = ["AM", "PM"] as const;
35 
36type Segment = "hour" | "minute" | "second" | "period";
37type SegmentFormat = "numeric" | "2-digit";
38type Period = (typeof PERIODS)[number];
39 
40interface DivProps
41  extends React.ComponentProps<"div">,
42    useRender.ComponentProps<"div"> {}
43 
44interface ButtonProps
45  extends React.ComponentProps<"button">,
46    useRender.ComponentProps<"button"> {}
47 
48type InputGroupElement = HTMLDivElement;
49type InputElement = HTMLInputElement;
50type TriggerElement = HTMLButtonElement;
51type ColumnElement = HTMLDivElement;
52type ColumnItemElement = HTMLButtonElement;
53 
54interface TimeValue {
55  hour?: number;
56  minute?: number;
57  second?: number;
58  period?: Period;
59}
60 
61interface ItemData {
62  value: number | string;
63  ref: React.RefObject<ColumnItemElement | null>;
64  selected: boolean;
65}
66 
67interface ColumnData {
68  id: string;
69  ref: React.RefObject<ColumnElement | null>;
70  getSelectedItemRef: () => React.RefObject<ColumnItemElement | null> | null;
71  getItems: () => ItemData[];
72}
73 
74// … truncated