time-picker

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