@etus/ui 0.1.0

package/src/components/forms/TimePicker/TimePicker.tsx

@@ -0,0 +1,383 @@
+import type { TimePickerProps } from "./TimePicker.types"
+
+import { ClockIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../feedback/Popover"
+import { ScrollArea } from "../../layout/ScrollArea"
+import {
+  timeItemVariants,
+  timePickerTriggerVariants,
+  timeScrollListVariants,
+} from "./TimePicker.variants"
+
+/**
+ * Parse a time string in HH:mm format to hours and minutes
+ */
+function parseTime(time: string | undefined): null | { hours: number; minutes: number } {
+  if (!time) return null
+  const match = /^(\d{1,2}):(\d{2})$/.exec(time)
+  if (!match?.[1] || !match[2]) return null
+  const hours = Number.parseInt(match[1], 10)
+  const minutes = Number.parseInt(match[2], 10)
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null
+  return { hours, minutes }
+}
+
+/**
+ * Format hours and minutes to HH:mm string
+ */
+function formatTime(hours: number, minutes: number): string {
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`
+}
+
+/**
+ * Convert 24h hours to 12h format with period
+ */
+function to12Hour(hours: number): { hour12: number; period: "AM" | "PM" } {
+  const period = hours >= 12 ? "PM" : "AM"
+  let hour12 = hours % 12
+  if (hour12 === 0) hour12 = 12
+  return { hour12, period }
+}
+
+/**
+ * Convert 12h format to 24h hours
+ */
+function to24Hour(hour12: number, period: "AM" | "PM"): number {
+  if (period === "AM") {
+    return hour12 === 12 ? 0 : hour12
+  }
+  return hour12 === 12 ? 12 : hour12 + 12
+}
+
+/**
+ * Format time for display
+ */
+function formatDisplayTime(
+  hours: number,
+  minutes: number,
+  use12Hour: boolean
+): string {
+  if (use12Hour) {
+    const { hour12, period } = to12Hour(hours)
+    return `${String(hour12)}:${minutes.toString().padStart(2, "0")} ${period}`
+  }
+  return formatTime(hours, minutes)
+}
+
+/**
+ * Generate array of hour options
+ */
+function getHourOptions(use12Hour: boolean): number[] {
+  if (use12Hour) {
+    return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+  }
+  return Array.from({ length: 24 }, (_, i) => i)
+}
+
+/**
+ * Generate array of minute options based on step
+ */
+function getMinuteOptions(step: number): number[] {
+  const options: number[] = []
+  for (let i = 0; i < 60; i += step) {
+    options.push(i)
+  }
+  return options
+}
+
+function TimePicker({
+  className,
+  value,
+  defaultValue,
+  placeholder = "Select time",
+  disabled = false,
+  use12Hour = false,
+  minuteStep = 1,
+  onChange,
+  onOpenChange,
+  size = "md",
+  variant = "default",
+  required = false,
+  invalid = false,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}: TimePickerProps) {
+  const [open, setOpen] = React.useState(false)
+
+  // Parse default value
+  const parsedDefault = parseTime(defaultValue)
+  const [internalHours, setInternalHours] = React.useState<number | undefined>(
+    parsedDefault?.hours
+  )
+  const [internalMinutes, setInternalMinutes] = React.useState<number | undefined>(
+    parsedDefault?.minutes
+  )
+  const [internalPeriod, setInternalPeriod] = React.useState<"AM" | "PM">(() =>
+    parsedDefault ? to12Hour(parsedDefault.hours).period : "AM"
+  )
+
+  // Parse controlled value
+  const parsedValue = parseTime(value)
+  const isControlled = value !== undefined
+
+  // Get current hours/minutes based on controlled vs uncontrolled
+  const currentHours = isControlled ? parsedValue?.hours : internalHours
+  const currentMinutes = isControlled ? parsedValue?.minutes : internalMinutes
+  const currentPeriod = isControlled
+    ? parsedValue
+      ? to12Hour(parsedValue.hours).period
+      : "AM"
+    : internalPeriod
+
+  // Scroll refs for auto-scrolling to selected values
+  const hourListRef = React.useRef<HTMLDivElement>(null)
+  const minuteListRef = React.useRef<HTMLDivElement>(null)
+  const periodListRef = React.useRef<HTMLDivElement>(null)
+
+  // Scroll to selected items when popover opens
+  React.useEffect(() => {
+    if (!open) return
+
+    // Use setTimeout to ensure DOM is ready
+    const timeoutId = setTimeout(() => {
+      if (currentHours !== undefined) {
+        const selectedHour = hourListRef.current?.querySelector('[data-selected="true"]')
+        selectedHour?.scrollIntoView({ block: "center", behavior: "instant" })
+      }
+      if (currentMinutes !== undefined) {
+        const selectedMinute = minuteListRef.current?.querySelector('[data-selected="true"]')
+        selectedMinute?.scrollIntoView({ block: "center", behavior: "instant" })
+      }
+    }, 0)
+
+    return () => { clearTimeout(timeoutId) }
+  }, [open, currentHours, currentMinutes])
+
+  const handleHourSelect = (hour: number) => {
+    let newHours = hour
+    if (use12Hour) {
+      newHours = to24Hour(hour, currentPeriod)
+    }
+
+    if (!isControlled) {
+      setInternalHours(newHours)
+    }
+
+    // Only call onChange if we have both hours and minutes
+    const mins = currentMinutes ?? 0
+    if (!isControlled) {
+      setInternalMinutes(mins)
+    }
+    onChange?.(formatTime(newHours, mins))
+  }
+
+  const handleMinuteSelect = (minute: number) => {
+    if (!isControlled) {
+      setInternalMinutes(minute)
+    }
+
+    // Only call onChange if we have hours
+    const hrs = currentHours ?? 0
+    if (!isControlled && currentHours === undefined) {
+      setInternalHours(hrs)
+    }
+    onChange?.(formatTime(currentHours ?? 0, minute))
+  }
+
+  const handlePeriodSelect = (period: "AM" | "PM") => {
+    if (!isControlled) {
+      setInternalPeriod(period)
+    }
+
+    if (currentHours !== undefined) {
+      const hour12 = use12Hour
+        ? currentHours % 12 || 12
+        : to12Hour(currentHours).hour12
+      const newHours = to24Hour(hour12, period)
+      if (!isControlled) {
+        setInternalHours(newHours)
+      }
+      onChange?.(formatTime(newHours, currentMinutes ?? 0))
+    }
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen)
+    onOpenChange?.(isOpen)
+  }
+
+  const hasValue = currentHours !== undefined && currentMinutes !== undefined
+  const displayValue = hasValue
+    ? formatDisplayTime(currentHours, currentMinutes, use12Hour)
+    : null
+
+  const hourOptions = getHourOptions(use12Hour)
+  const minuteOptions = getMinuteOptions(minuteStep)
+
+  // Calculate display hour for matching in 12h mode
+  const displayHour = currentHours !== undefined
+    ? use12Hour
+      ? to12Hour(currentHours).hour12
+      : currentHours
+    : undefined
+
+  return (
+    <div className={cn("relative", className)} data-slot="time-picker" {...props}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            className={cn(
+              timePickerTriggerVariants({ size, variant }),
+              !displayValue && "text-muted-foreground"
+            )}
+            aria-expanded={open}
+            aria-haspopup="dialog"
+            aria-invalid={invalid}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-required={required}
+            data-size={size}
+            data-slot="time-picker-trigger"
+            data-state={open ? "open" : "closed"}
+            data-variant={variant}
+            disabled={disabled}
+            id={id}
+            role="combobox"
+            type="button"
+          >
+            <span className="flex-1 truncate">
+              {displayValue ?? placeholder}
+            </span>
+            <ClockIcon className="size-4 shrink-0 opacity-50" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-auto p-0"
+          data-slot="time-picker-content"
+        >
+          <div
+            aria-label="Time selection"
+            className="flex divide-x"
+            role="listbox"
+          >
+            {/* Hours Column */}
+            <div className="flex flex-col">
+              <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                {use12Hour ? "Hour" : "Hours"}
+              </div>
+              <ScrollArea className="h-[200px]">
+                <div
+                  ref={hourListRef}
+                  aria-label="Hours"
+                  className={cn(timeScrollListVariants({ type: "hour" }))}
+                  role="group"
+                >
+                  {hourOptions.map((hour) => {
+                    const isSelected = displayHour === hour
+                    return (
+                      <button
+                        key={hour}
+                        aria-selected={isSelected}
+                        className={cn(timeItemVariants({ selected: isSelected }))}
+                        data-selected={isSelected}
+                        role="option"
+                        type="button"
+                        onClick={() => { handleHourSelect(hour); }}
+                      >
+                        {use12Hour ? hour : hour.toString().padStart(2, "0")}
+                      </button>
+                    )
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {/* Minutes Column */}
+            <div className="flex flex-col">
+              <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                Min
+              </div>
+              <ScrollArea className="h-[200px]">
+                <div
+                  ref={minuteListRef}
+                  aria-label="Minutes"
+                  className={cn(timeScrollListVariants({ type: "minute" }))}
+                  role="group"
+                >
+                  {minuteOptions.map((minute) => {
+                    const isSelected = currentMinutes === minute
+                    return (
+                      <button
+                        key={minute}
+                        aria-selected={isSelected}
+                        className={cn(timeItemVariants({ selected: isSelected }))}
+                        data-selected={isSelected}
+                        role="option"
+                        type="button"
+                        onClick={() => { handleMinuteSelect(minute); }}
+                      >
+                        {minute.toString().padStart(2, "0")}
+                      </button>
+                    )
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {/* AM/PM Column (12-hour mode only) */}
+            {use12Hour && (
+              <div className="flex flex-col">
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b">
+                  &nbsp;
+                </div>
+                <div
+                  ref={periodListRef}
+                  aria-label="Period"
+                  className={cn(timeScrollListVariants({ type: "period" }), "h-auto")}
+                  role="group"
+                >
+                  {(["AM", "PM"] as const).map((period) => {
+                    const isSelected = currentPeriod === period
+                    return (
+                      <button
+                        key={period}
+                        aria-selected={isSelected}
+                        className={cn(timeItemVariants({ selected: isSelected }))}
+                        data-selected={isSelected}
+                        role="option"
+                        type="button"
+                        onClick={() => { handlePeriodSelect(period); }}
+                      >
+                        {period}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      {name && (
+        <input
+          name={name}
+          type="hidden"
+          value={hasValue ? formatTime(currentHours, currentMinutes) : ""}
+        />
+      )}
+    </div>
+  )
+}
+
+export { TimePicker }

package/src/components/forms/TimePicker/TimePicker.types.ts

@@ -0,0 +1,94 @@
+import type { ComponentProps } from "react"
+
+/**
+ * TimePicker size variants
+ */
+export type TimePickerSize = "lg" | "md" | "sm"
+
+/**
+ * TimePicker visual variants
+ */
+export type TimePickerVariant = "default" | "filled" | "flushed"
+
+/**
+ * TimePicker component props
+ */
+export interface TimePickerProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "value"> {
+  /**
+   * The default time value (uncontrolled) in "HH:mm" format
+   */
+  defaultValue?: string
+
+  /**
+   * Whether the time picker is disabled
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * ID for the input (used for label association)
+   */
+  id?: string
+
+  /**
+   * Whether the field has an invalid value
+   * @default false
+   */
+  invalid?: boolean
+
+  /**
+   * Step interval for minutes (e.g., 15 for 00, 15, 30, 45)
+   * @default 1
+   */
+  minuteStep?: number
+
+  /**
+   * Name attribute for form submission
+   */
+  name?: string
+
+  /**
+   * Callback when the time changes
+   */
+  onChange?: (time: string | undefined) => void
+
+  /**
+   * Callback when the popover open state changes
+   */
+  onOpenChange?: (open: boolean) => void
+
+  /**
+   * Placeholder text shown when no time is selected
+   * @default "Select time"
+   */
+  placeholder?: string
+
+  /**
+   * Whether the field is required
+   * @default false
+   */
+  required?: boolean
+
+  /**
+   * Visual size of the trigger
+   * @default "md"
+   */
+  size?: TimePickerSize
+
+  /**
+   * Use 12-hour format with AM/PM selector
+   * @default false
+   */
+  use12Hour?: boolean
+
+  /**
+   * The controlled time value in "HH:mm" format (24h)
+   */
+  value?: string
+
+  /**
+   * Visual variant of the trigger
+   * @default "default"
+   */
+  variant?: TimePickerVariant
+}

package/src/components/forms/TimePicker/TimePicker.variants.ts

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * TimePicker trigger variant styles using CVA
+ */
+export const timePickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-md border bg-transparent font-normal transition-[color,box-shadow] outline-none",
+    "text-left",
+    "placeholder:text-muted-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-sm",
+        md: "h-9 px-3 py-1 text-base md:text-sm",
+        lg: "h-10 px-3.5 py-1.5 text-base",
+      },
+      variant: {
+        default: "border-input shadow-xs dark:bg-input/30",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Time scroll list styles
+ */
+export const timeScrollListVariants = cva(
+  [
+    "flex flex-col overflow-y-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+    "max-h-[200px] min-w-[48px]",
+  ],
+  {
+    variants: {
+      type: {
+        hour: "",
+        minute: "",
+        period: "min-w-[56px]",
+      },
+    },
+    defaultVariants: {
+      type: "hour",
+    },
+  }
+)
+
+/**
+ * Time item button styles
+ */
+export const timeItemVariants = cva(
+  [
+    "flex items-center justify-center px-2 py-1.5 text-sm cursor-pointer rounded transition-colors",
+    "hover:bg-accent hover:text-accent-foreground",
+    "focus-visible:outline-none focus-visible:bg-accent focus-visible:text-accent-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+)
+
+export type TimePickerTriggerVariantProps = VariantProps<typeof timePickerTriggerVariants>
+export type TimeScrollListVariantProps = VariantProps<typeof timeScrollListVariants>
+export type TimeItemVariantProps = VariantProps<typeof timeItemVariants>

package/src/components/forms/TimePicker/index.ts

@@ -0,0 +1,14 @@
+export * from './TimePicker'
+export {
+  type TimeItemVariantProps,
+  timeItemVariants,
+  type TimePickerTriggerVariantProps,
+  timePickerTriggerVariants,
+  type TimeScrollListVariantProps,
+  timeScrollListVariants,
+} from './TimePicker.variants'
+export type {
+  TimePickerProps,
+  TimePickerSize,
+  TimePickerVariant,
+} from './TimePicker.types'