Time Picker

1'use client';
2 
3import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
4import { cva } from 'class-variance-authority';
5import type * as React from 'react';
6 
7import { DropdownMenuRadioGroup } from '@/components/ui/dropdown-menu';
8import { cn } from '@/lib/utils';
9 
10// ============================================================================
11// TYPES & INTERFACES
12// ============================================================================
13 
14export interface TimePickerItemProps extends React.ComponentProps<
15  typeof DropdownMenuPrimitive.RadioItem
16> {
17  size?: 'default' | 'lg';
18}
19 
20export interface TimePickerListProps extends React.ComponentProps<
21  typeof DropdownMenuRadioGroup
22> {
23  readonly className?: string;
24  readonly size?: 'default' | 'lg';
25}
26 
27// ============================================================================
28// SIZE VARIANTS
29// ============================================================================
30 
31const timePickerItemVariants = cva(
32  [
33    'flex justify-center items-center bg-transparent text-fg-secondary cursor-pointer rounded-none outline-none',
34    'hover:bg-stateslayer-overlay-hover hover:text-fg-primary',
35    'active:bg-stateslayer-overlay-pressed active:text-fg-primary',
36    'data-[state=checked]:bg-stateslayer-overlay-active data-[state=checked]:text-fg-primary-inverse',
37    'disabled:cursor-not-allowed disabled:bg-stateslayer-overlay-disabled disabled:text-fg-disabled',
38    'aspect-square',
39  ],
40  {
41    variants: {
42      size: {
43        default: 'label-regular-primary size-7',
44        lg: 'label-large-primary size-8',
45      },
46    },
47    defaultVariants: {
48      size: 'default',
49    },
50  },
51);
52 
53// ============================================================================
54// COMPONENTS - TimePickerItem
55// ============================================================================
56 
57/**
58 * Individual time picker list item (hour or minute)
59 */
60export const TimePickerItem = ({
61  size = 'default',
62  className,
63  onSelect,
64  ...props
65}: TimePickerItemProps) => {
66  return (
67    <DropdownMenuPrimitive.RadioItem
68      data-slot="time-picker-item"
69      {...props}
70      onSelect={e => {
71        e.preventDefault();
72        onSelect?.(e);
73      }}
74      className={cn(timePickerItemVariants({ size }), className)}
75    />
76  );
77};
78 
79TimePickerItem.displayName = 'TimePickerItem';
80 
81// ============================================================================
82// COMPONENTS - TimePickerList
83// … truncated