@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-G2V7D7VC.js

@@ -0,0 +1,371 @@
+import { ScrollArea } from './chunk-CNRV2IGH.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-AFCSDND5.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { ClockIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var timePickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-[var(--time-picker-trigger-radius)] 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-[color:var(--time-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--time-picker-focus-ring-width)]",
+    "aria-invalid:ring-[color:var(--time-picker-focus-ring-destructive)]/20 dark:aria-invalid:ring-[color:var(--time-picker-focus-ring-destructive)]/40 aria-invalid:border-[color:var(--time-picker-focus-ring-destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--time-picker-trigger-height-sm)] px-2.5 py-1 text-sm",
+        md: "h-[var(--time-picker-trigger-height-md)] px-3 py-1 text-base md:text-sm",
+        lg: "h-[var(--time-picker-trigger-height-lg)] 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"
+    }
+  }
+);
+var timeScrollListVariants = cva(
+  [
+    "flex flex-col overflow-y-auto",
+    "max-h-60 min-w-12"
+  ],
+  {
+    variants: {
+      type: {
+        hour: "",
+        minute: "",
+        period: "min-w-14"
+      }
+    },
+    defaultVariants: {
+      type: "hour"
+    }
+  }
+);
+var timeItemVariants = cva(
+  [
+    "flex items-center justify-center px-2 py-1.5 text-sm cursor-pointer rounded-sm 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
+    }
+  }
+);
+function parseTime(time) {
+  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 };
+}
+function formatTime(hours, minutes) {
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+}
+function to12Hour(hours) {
+  const period = hours >= 12 ? "PM" : "AM";
+  let hour12 = hours % 12;
+  if (hour12 === 0) hour12 = 12;
+  return { hour12, period };
+}
+function to24Hour(hour12, period) {
+  if (period === "AM") {
+    return hour12 === 12 ? 0 : hour12;
+  }
+  return hour12 === 12 ? 12 : hour12 + 12;
+}
+function formatDisplayTime(hours, minutes, use12Hour) {
+  if (use12Hour) {
+    const { hour12, period } = to12Hour(hours);
+    return `${String(hour12)}:${minutes.toString().padStart(2, "0")} ${period}`;
+  }
+  return formatTime(hours, minutes);
+}
+function getHourOptions(use12Hour) {
+  if (use12Hour) {
+    return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  }
+  return Array.from({ length: 24 }, (_, i) => i);
+}
+function getMinuteOptions(step) {
+  const options = [];
+  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
+}) {
+  const [open, setOpen] = React.useState(false);
+  const parsedDefault = parseTime(defaultValue);
+  const [internalHours, setInternalHours] = React.useState(
+    parsedDefault?.hours
+  );
+  const [internalMinutes, setInternalMinutes] = React.useState(
+    parsedDefault?.minutes
+  );
+  const [internalPeriod, setInternalPeriod] = React.useState(
+    () => parsedDefault ? to12Hour(parsedDefault.hours).period : "AM"
+  );
+  const parsedValue = parseTime(value);
+  const isControlled = value !== void 0;
+  const currentHours = isControlled ? parsedValue?.hours : internalHours;
+  const currentMinutes = isControlled ? parsedValue?.minutes : internalMinutes;
+  const currentPeriod = isControlled ? parsedValue ? to12Hour(parsedValue.hours).period : "AM" : internalPeriod;
+  const hourListRef = React.useRef(null);
+  const minuteListRef = React.useRef(null);
+  const periodListRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const timeoutId = setTimeout(() => {
+      if (currentHours !== void 0) {
+        const selectedHour = hourListRef.current?.querySelector('[data-selected="true"]');
+        selectedHour?.scrollIntoView({ block: "center", behavior: "instant" });
+      }
+      if (currentMinutes !== void 0) {
+        const selectedMinute = minuteListRef.current?.querySelector('[data-selected="true"]');
+        selectedMinute?.scrollIntoView({ block: "center", behavior: "instant" });
+      }
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [open, currentHours, currentMinutes]);
+  const handleHourSelect = (hour) => {
+    let newHours = hour;
+    if (use12Hour) {
+      newHours = to24Hour(hour, currentPeriod);
+    }
+    if (!isControlled) {
+      setInternalHours(newHours);
+    }
+    const mins = currentMinutes ?? 0;
+    if (!isControlled) {
+      setInternalMinutes(mins);
+    }
+    onChange?.(formatTime(newHours, mins));
+  };
+  const handleMinuteSelect = (minute) => {
+    if (!isControlled) {
+      setInternalMinutes(minute);
+    }
+    const hrs = currentHours ?? 0;
+    if (!isControlled && currentHours === void 0) {
+      setInternalHours(hrs);
+    }
+    onChange?.(formatTime(currentHours ?? 0, minute));
+  };
+  const handlePeriodSelect = (period) => {
+    if (!isControlled) {
+      setInternalPeriod(period);
+    }
+    if (currentHours !== void 0) {
+      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) => {
+    setOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+  const hasValue = currentHours !== void 0 && currentMinutes !== void 0;
+  const displayValue = hasValue ? formatDisplayTime(currentHours, currentMinutes, use12Hour) : null;
+  const hourOptions = getHourOptions(use12Hour);
+  const minuteOptions = getMinuteOptions(minuteStep);
+  const displayHour = currentHours !== void 0 ? use12Hour ? to12Hour(currentHours).hour12 : currentHours : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "data-slot": "time-picker", ...props, children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "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,
+          id,
+          role: "combobox",
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: displayValue ?? placeholder }),
+            /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-auto p-0",
+          "data-slot": "time-picker-content",
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-label": "Time selection",
+              className: "flex divide-x",
+              role: "listbox",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b", children: use12Hour ? "Hour" : "Hours" }),
+                  /* @__PURE__ */ jsx(ScrollArea, { className: "h-60", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: hourListRef,
+                      "aria-label": "Hours",
+                      className: cn(timeScrollListVariants({ type: "hour" })),
+                      role: "group",
+                      children: hourOptions.map((hour) => {
+                        const isSelected = displayHour === hour;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            "aria-selected": isSelected,
+                            className: cn(timeItemVariants({ selected: isSelected })),
+                            "data-selected": isSelected,
+                            role: "option",
+                            type: "button",
+                            onClick: () => {
+                              handleHourSelect(hour);
+                            },
+                            children: use12Hour ? hour : hour.toString().padStart(2, "0")
+                          },
+                          hour
+                        );
+                      })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b", children: "Min" }),
+                  /* @__PURE__ */ jsx(ScrollArea, { className: "h-60", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: minuteListRef,
+                      "aria-label": "Minutes",
+                      className: cn(timeScrollListVariants({ type: "minute" })),
+                      role: "group",
+                      children: minuteOptions.map((minute) => {
+                        const isSelected = currentMinutes === minute;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            "aria-selected": isSelected,
+                            className: cn(timeItemVariants({ selected: isSelected })),
+                            "data-selected": isSelected,
+                            role: "option",
+                            type: "button",
+                            onClick: () => {
+                              handleMinuteSelect(minute);
+                            },
+                            children: minute.toString().padStart(2, "0")
+                          },
+                          minute
+                        );
+                      })
+                    }
+                  ) })
+                ] }),
+                use12Hour && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b", children: "\xA0" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: periodListRef,
+                      "aria-label": "Period",
+                      className: cn(timeScrollListVariants({ type: "period" }), "h-auto"),
+                      role: "group",
+                      children: ["AM", "PM"].map((period) => {
+                        const isSelected = currentPeriod === period;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            "aria-selected": isSelected,
+                            className: cn(timeItemVariants({ selected: isSelected })),
+                            "data-selected": isSelected,
+                            role: "option",
+                            type: "button",
+                            onClick: () => {
+                              handlePeriodSelect(period);
+                            },
+                            children: period
+                          },
+                          period
+                        );
+                      })
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        name,
+        type: "hidden",
+        value: hasValue ? formatTime(currentHours, currentMinutes) : ""
+      }
+    )
+  ] });
+}
+
+export { TimePicker, timeItemVariants, timePickerTriggerVariants, timeScrollListVariants };
+//# sourceMappingURL=chunk-G2V7D7VC.js.map
+//# sourceMappingURL=chunk-G2V7D7VC.js.map

package/dist/chunk-G2V7D7VC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TimePicker/TimePicker.variants.ts","../src/components/forms/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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","file":"chunk-G2V7D7VC.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * TimePicker trigger variant styles using CVA\n */\nexport const timePickerTriggerVariants = cva(\n  // Base styles\n  [\n    \"inline-flex w-full items-center justify-between gap-2 rounded-[var(--time-picker-trigger-radius)] border bg-transparent font-normal transition-[color,box-shadow] outline-none\",\n    \"text-left\",\n    \"placeholder:text-muted-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-[color:var(--time-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--time-picker-focus-ring-width)]\",\n    \"aria-invalid:ring-[color:var(--time-picker-focus-ring-destructive)]/20 dark:aria-invalid:ring-[color:var(--time-picker-focus-ring-destructive)]/40 aria-invalid:border-[color:var(--time-picker-focus-ring-destructive)]\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--time-picker-trigger-height-sm)] px-2.5 py-1 text-sm\",\n        md: \"h-[var(--time-picker-trigger-height-md)] px-3 py-1 text-base md:text-sm\",\n        lg: \"h-[var(--time-picker-trigger-height-lg)] px-3.5 py-1.5 text-base\",\n      },\n      variant: {\n        default: \"border-input shadow-xs dark:bg-input/30\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Time scroll list styles\n */\nexport const timeScrollListVariants = cva(\n  [\n    \"flex flex-col overflow-y-auto\",\n    \"max-h-60 min-w-12\",\n  ],\n  {\n    variants: {\n      type: {\n        hour: \"\",\n        minute: \"\",\n        period: \"min-w-14\",\n      },\n    },\n    defaultVariants: {\n      type: \"hour\",\n    },\n  }\n)\n\n/**\n * Time item button styles\n */\nexport const timeItemVariants = cva(\n  [\n    \"flex items-center justify-center px-2 py-1.5 text-sm cursor-pointer rounded-sm transition-colors\",\n    \"hover:bg-accent hover:text-accent-foreground\",\n    \"focus-visible:outline-none focus-visible:bg-accent focus-visible:text-accent-foreground\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      selected: {\n        true: \"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      selected: false,\n    },\n  }\n)\n\nexport type TimePickerTriggerVariantProps = VariantProps<typeof timePickerTriggerVariants>\nexport type TimeScrollListVariantProps = VariantProps<typeof timeScrollListVariants>\nexport type TimeItemVariantProps = VariantProps<typeof timeItemVariants>\n","import type { TimePickerProps } from \"./TimePicker.types\"\n\nimport { ClockIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../../feedback/Popover\"\nimport { ScrollArea } from \"../../layout/ScrollArea\"\nimport {\n  timeItemVariants,\n  timePickerTriggerVariants,\n  timeScrollListVariants,\n} from \"./TimePicker.variants\"\n\n/**\n * Parse a time string in HH:mm format to hours and minutes\n */\nfunction parseTime(time: string | undefined): null | { hours: number; minutes: number } {\n  if (!time) return null\n  const match = /^(\\d{1,2}):(\\d{2})$/.exec(time)\n  if (!match?.[1] || !match[2]) return null\n  const hours = Number.parseInt(match[1], 10)\n  const minutes = Number.parseInt(match[2], 10)\n  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null\n  return { hours, minutes }\n}\n\n/**\n * Format hours and minutes to HH:mm string\n */\nfunction formatTime(hours: number, minutes: number): string {\n  return `${hours.toString().padStart(2, \"0\")}:${minutes.toString().padStart(2, \"0\")}`\n}\n\n/**\n * Convert 24h hours to 12h format with period\n */\nfunction to12Hour(hours: number): { hour12: number; period: \"AM\" | \"PM\" } {\n  const period = hours >= 12 ? \"PM\" : \"AM\"\n  let hour12 = hours % 12\n  if (hour12 === 0) hour12 = 12\n  return { hour12, period }\n}\n\n/**\n * Convert 12h format to 24h hours\n */\nfunction to24Hour(hour12: number, period: \"AM\" | \"PM\"): number {\n  if (period === \"AM\") {\n    return hour12 === 12 ? 0 : hour12\n  }\n  return hour12 === 12 ? 12 : hour12 + 12\n}\n\n/**\n * Format time for display\n */\nfunction formatDisplayTime(\n  hours: number,\n  minutes: number,\n  use12Hour: boolean\n): string {\n  if (use12Hour) {\n    const { hour12, period } = to12Hour(hours)\n    return `${String(hour12)}:${minutes.toString().padStart(2, \"0\")} ${period}`\n  }\n  return formatTime(hours, minutes)\n}\n\n/**\n * Generate array of hour options\n */\nfunction getHourOptions(use12Hour: boolean): number[] {\n  if (use12Hour) {\n    return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]\n  }\n  return Array.from({ length: 24 }, (_, i) => i)\n}\n\n/**\n * Generate array of minute options based on step\n */\nfunction getMinuteOptions(step: number): number[] {\n  const options: number[] = []\n  for (let i = 0; i < 60; i += step) {\n    options.push(i)\n  }\n  return options\n}\n\nfunction TimePicker({\n  className,\n  value,\n  defaultValue,\n  placeholder = \"Select time\",\n  disabled = false,\n  use12Hour = false,\n  minuteStep = 1,\n  onChange,\n  onOpenChange,\n  size = \"md\",\n  variant = \"default\",\n  required = false,\n  invalid = false,\n  id,\n  name,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  ...props\n}: TimePickerProps) {\n  const [open, setOpen] = React.useState(false)\n\n  // Parse default value\n  const parsedDefault = parseTime(defaultValue)\n  const [internalHours, setInternalHours] = React.useState<number | undefined>(\n    parsedDefault?.hours\n  )\n  const [internalMinutes, setInternalMinutes] = React.useState<number | undefined>(\n    parsedDefault?.minutes\n  )\n  const [internalPeriod, setInternalPeriod] = React.useState<\"AM\" | \"PM\">(() =>\n    parsedDefault ? to12Hour(parsedDefault.hours).period : \"AM\"\n  )\n\n  // Parse controlled value\n  const parsedValue = parseTime(value)\n  const isControlled = value !== undefined\n\n  // Get current hours/minutes based on controlled vs uncontrolled\n  const currentHours = isControlled ? parsedValue?.hours : internalHours\n  const currentMinutes = isControlled ? parsedValue?.minutes : internalMinutes\n  const currentPeriod = isControlled\n    ? parsedValue\n      ? to12Hour(parsedValue.hours).period\n      : \"AM\"\n    : internalPeriod\n\n  // Scroll refs for auto-scrolling to selected values\n  const hourListRef = React.useRef<HTMLDivElement>(null)\n  const minuteListRef = React.useRef<HTMLDivElement>(null)\n  const periodListRef = React.useRef<HTMLDivElement>(null)\n\n  // Scroll to selected items when popover opens\n  React.useEffect(() => {\n    if (!open) return\n\n    // Use setTimeout to ensure DOM is ready\n    const timeoutId = setTimeout(() => {\n      if (currentHours !== undefined) {\n        const selectedHour = hourListRef.current?.querySelector('[data-selected=\"true\"]')\n        selectedHour?.scrollIntoView({ block: \"center\", behavior: \"instant\" })\n      }\n      if (currentMinutes !== undefined) {\n        const selectedMinute = minuteListRef.current?.querySelector('[data-selected=\"true\"]')\n        selectedMinute?.scrollIntoView({ block: \"center\", behavior: \"instant\" })\n      }\n    }, 0)\n\n    return () => { clearTimeout(timeoutId) }\n  }, [open, currentHours, currentMinutes])\n\n  const handleHourSelect = (hour: number) => {\n    let newHours = hour\n    if (use12Hour) {\n      newHours = to24Hour(hour, currentPeriod)\n    }\n\n    if (!isControlled) {\n      setInternalHours(newHours)\n    }\n\n    // Only call onChange if we have both hours and minutes\n    const mins = currentMinutes ?? 0\n    if (!isControlled) {\n      setInternalMinutes(mins)\n    }\n    onChange?.(formatTime(newHours, mins))\n  }\n\n  const handleMinuteSelect = (minute: number) => {\n    if (!isControlled) {\n      setInternalMinutes(minute)\n    }\n\n    // Only call onChange if we have hours\n    const hrs = currentHours ?? 0\n    if (!isControlled && currentHours === undefined) {\n      setInternalHours(hrs)\n    }\n    onChange?.(formatTime(currentHours ?? 0, minute))\n  }\n\n  const handlePeriodSelect = (period: \"AM\" | \"PM\") => {\n    if (!isControlled) {\n      setInternalPeriod(period)\n    }\n\n    if (currentHours !== undefined) {\n      const hour12 = use12Hour\n        ? currentHours % 12 || 12\n        : to12Hour(currentHours).hour12\n      const newHours = to24Hour(hour12, period)\n      if (!isControlled) {\n        setInternalHours(newHours)\n      }\n      onChange?.(formatTime(newHours, currentMinutes ?? 0))\n    }\n  }\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen)\n    onOpenChange?.(isOpen)\n  }\n\n  const hasValue = currentHours !== undefined && currentMinutes !== undefined\n  const displayValue = hasValue\n    ? formatDisplayTime(currentHours, currentMinutes, use12Hour)\n    : null\n\n  const hourOptions = getHourOptions(use12Hour)\n  const minuteOptions = getMinuteOptions(minuteStep)\n\n  // Calculate display hour for matching in 12h mode\n  const displayHour = currentHours !== undefined\n    ? use12Hour\n      ? to12Hour(currentHours).hour12\n      : currentHours\n    : undefined\n\n  return (\n    <div className={cn(\"relative\", className)} data-slot=\"time-picker\" {...props}>\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger asChild>\n          <button\n            className={cn(\n              timePickerTriggerVariants({ size, variant }),\n              !displayValue && \"text-muted-foreground\"\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-invalid={invalid}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-required={required}\n            data-size={size}\n            data-slot=\"time-picker-trigger\"\n            data-state={open ? \"open\" : \"closed\"}\n            data-variant={variant}\n            disabled={disabled}\n            id={id}\n            role=\"combobox\"\n            type=\"button\"\n          >\n            <span className=\"flex-1 truncate\">\n              {displayValue ?? placeholder}\n            </span>\n            <ClockIcon className=\"size-4 shrink-0 opacity-50\" />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-auto p-0\"\n          data-slot=\"time-picker-content\"\n        >\n          <div\n            aria-label=\"Time selection\"\n            className=\"flex divide-x\"\n            role=\"listbox\"\n          >\n            {/* Hours Column */}\n            <div className=\"flex flex-col\">\n              <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b\">\n                {use12Hour ? \"Hour\" : \"Hours\"}\n              </div>\n              <ScrollArea className=\"h-60\">\n                <div\n                  ref={hourListRef}\n                  aria-label=\"Hours\"\n                  className={cn(timeScrollListVariants({ type: \"hour\" }))}\n                  role=\"group\"\n                >\n                  {hourOptions.map((hour) => {\n                    const isSelected = displayHour === hour\n                    return (\n                      <button\n                        key={hour}\n                        aria-selected={isSelected}\n                        className={cn(timeItemVariants({ selected: isSelected }))}\n                        data-selected={isSelected}\n                        role=\"option\"\n                        type=\"button\"\n                        onClick={() => { handleHourSelect(hour); }}\n                      >\n                        {use12Hour ? hour : hour.toString().padStart(2, \"0\")}\n                      </button>\n                    )\n                  })}\n                </div>\n              </ScrollArea>\n            </div>\n\n            {/* Minutes Column */}\n            <div className=\"flex flex-col\">\n              <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b\">\n                Min\n              </div>\n              <ScrollArea className=\"h-60\">\n                <div\n                  ref={minuteListRef}\n                  aria-label=\"Minutes\"\n                  className={cn(timeScrollListVariants({ type: \"minute\" }))}\n                  role=\"group\"\n                >\n                  {minuteOptions.map((minute) => {\n                    const isSelected = currentMinutes === minute\n                    return (\n                      <button\n                        key={minute}\n                        aria-selected={isSelected}\n                        className={cn(timeItemVariants({ selected: isSelected }))}\n                        data-selected={isSelected}\n                        role=\"option\"\n                        type=\"button\"\n                        onClick={() => { handleMinuteSelect(minute); }}\n                      >\n                        {minute.toString().padStart(2, \"0\")}\n                      </button>\n                    )\n                  })}\n                </div>\n              </ScrollArea>\n            </div>\n\n            {/* AM/PM Column (12-hour mode only) */}\n            {use12Hour && (\n              <div className=\"flex flex-col\">\n                <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground text-center border-b\">\n                  &nbsp;\n                </div>\n                <div\n                  ref={periodListRef}\n                  aria-label=\"Period\"\n                  className={cn(timeScrollListVariants({ type: \"period\" }), \"h-auto\")}\n                  role=\"group\"\n                >\n                  {([\"AM\", \"PM\"] as const).map((period) => {\n                    const isSelected = currentPeriod === period\n                    return (\n                      <button\n                        key={period}\n                        aria-selected={isSelected}\n                        className={cn(timeItemVariants({ selected: isSelected }))}\n                        data-selected={isSelected}\n                        role=\"option\"\n                        type=\"button\"\n                        onClick={() => { handlePeriodSelect(period); }}\n                      >\n                        {period}\n                      </button>\n                    )\n                  })}\n                </div>\n              </div>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {name && (\n        <input\n          name={name}\n          type=\"hidden\"\n          value={hasValue ? formatTime(currentHours, currentMinutes) : \"\"}\n        />\n      )}\n    </div>\n  )\n}\n\nexport { TimePicker }\n"]}