@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/chunk-VHGCWZ6V.mjs

@@ -0,0 +1,367 @@
+// src/components/ImageAnnotation.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  createImageAnnotationBox,
+  createImageAnnotationPath,
+  defaultImageAnnotationTools,
+  getImageAnnotationCenter,
+  getImageAnnotationPathData,
+  getImageAnnotationPointFromClient,
+  getImageAnnotationShapeAriaLabel,
+  getImageAnnotationStrokeColor,
+  getImageAnnotationToolButtonClasses,
+  getImageAnnotationToolLabel,
+  imageAnnotationContainerClasses,
+  imageAnnotationDeleteButtonClasses,
+  imageAnnotationImageClasses,
+  imageAnnotationLabelClasses,
+  imageAnnotationOverlayClasses,
+  imageAnnotationReadonlyOverlayClasses,
+  imageAnnotationStageClasses,
+  imageAnnotationToolbarClasses,
+  shouldCommitImageAnnotationBox
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageAnnotation({
+  src,
+  alt = "Image to annotate",
+  value,
+  defaultValue = [],
+  selectedId,
+  defaultSelectedId,
+  tool,
+  defaultTool = "select",
+  tools = defaultImageAnnotationTools,
+  disabled = false,
+  readonly = false,
+  minSize = 0.01,
+  strokeWidth = 2,
+  showLabels = true,
+  className,
+  style,
+  onChange,
+  onSelect,
+  onToolChange,
+  onReady
+}) {
+  const containerRef = useRef(null);
+  const overlayRef = useRef(null);
+  const idSeedRef = useRef(0);
+  const drawingRef = useRef(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [displayWidth, setDisplayWidth] = useState(0);
+  const [displayHeight, setDisplayHeight] = useState(0);
+  const [innerAnnotations, setInnerAnnotations] = useState(defaultValue);
+  const [innerSelectedId, setInnerSelectedId] = useState(defaultSelectedId);
+  const [innerTool, setInnerTool] = useState(defaultTool);
+  const [draft, setDraft] = useState(null);
+  const annotations = value ?? innerAnnotations;
+  const activeSelectedId = selectedId ?? innerSelectedId;
+  const activeTool = tool ?? innerTool;
+  const canEdit = !disabled && !readonly;
+  useEffect(() => {
+    setImageLoaded(false);
+    setDraft(null);
+    if (typeof window === "undefined" || typeof window.Image !== "function") return;
+    const img = new window.Image();
+    img.onload = () => {
+      const container = containerRef.current;
+      const naturalWidth = img.naturalWidth || 1;
+      const naturalHeight = img.naturalHeight || 1;
+      const containerWidth = container?.clientWidth || naturalWidth;
+      const containerHeight = container?.clientHeight || naturalHeight;
+      const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
+      setDisplayWidth(naturalWidth * ratio);
+      setDisplayHeight(naturalHeight * ratio);
+      setImageLoaded(true);
+      onReady?.();
+    };
+    img.src = src;
+  }, [src, onReady]);
+  const commitAnnotations = useCallback(
+    (next, meta) => {
+      if (value === void 0) setInnerAnnotations(next);
+      onChange?.(next, meta);
+    },
+    [onChange, value]
+  );
+  const selectAnnotation = useCallback(
+    (annotation) => {
+      if (selectedId === void 0) setInnerSelectedId(annotation?.id);
+      onSelect?.(annotation);
+    },
+    [onSelect, selectedId]
+  );
+  const setActiveTool = useCallback(
+    (nextTool) => {
+      setDraft(null);
+      drawingRef.current = null;
+      if (tool === void 0) setInnerTool(nextTool);
+      onToolChange?.(nextTool);
+    },
+    [onToolChange, tool]
+  );
+  const createId = useCallback((shape) => {
+    idSeedRef.current += 1;
+    return `${shape}-${idSeedRef.current}`;
+  }, []);
+  const getPointFromEvent = useCallback((event) => {
+    const bounds = overlayRef.current?.getBoundingClientRect();
+    if (!bounds) return { x: 0, y: 0 };
+    return getImageAnnotationPointFromClient(event.clientX, event.clientY, bounds);
+  }, []);
+  const commitAnnotation = useCallback(
+    (annotation) => {
+      const next = [...annotations, annotation];
+      commitAnnotations(next, { type: "add", annotation });
+      selectAnnotation(annotation);
+    },
+    [annotations, commitAnnotations, selectAnnotation]
+  );
+  const commitPolygon = useCallback(() => {
+    const drawing = drawingRef.current;
+    if (!drawing || drawing.tool !== "polygon" || drawing.points.length < 3) return;
+    const annotation = createImageAnnotationPath("polygon", createId("polygon"), drawing.points);
+    drawingRef.current = null;
+    setDraft(null);
+    commitAnnotation(annotation);
+  }, [commitAnnotation, createId]);
+  const handleStageMouseDown = useCallback(
+    (event) => {
+      if (!canEdit || activeTool === "select" || activeTool === "polygon") return;
+      const point = getPointFromEvent(event);
+      drawingRef.current = { tool: activeTool, start: point, points: [point] };
+      const handleMouseMove = (moveEvent) => {
+        const drawing = drawingRef.current;
+        if (!drawing) return;
+        const nextPoint = getPointFromEvent(moveEvent);
+        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
+          setDraft(createImageAnnotationBox(drawing.tool, "draft", drawing.start, nextPoint));
+          return;
+        }
+        const nextPoints = [...drawing.points, nextPoint];
+        drawingRef.current = { ...drawing, points: nextPoints };
+        setDraft(createImageAnnotationPath("freehand", "draft", nextPoints));
+      };
+      const handleMouseUp = (upEvent) => {
+        const drawing = drawingRef.current;
+        drawingRef.current = null;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        if (!drawing) return;
+        const end = getPointFromEvent(upEvent);
+        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
+          const annotation = createImageAnnotationBox(
+            drawing.tool,
+            createId(drawing.tool),
+            drawing.start,
+            end
+          );
+          setDraft(null);
+          if (shouldCommitImageAnnotationBox(annotation, minSize)) commitAnnotation(annotation);
+          return;
+        }
+        const points = [...drawing.points, end];
+        setDraft(null);
+        if (points.length >= 2)
+          commitAnnotation(createImageAnnotationPath("freehand", createId("freehand"), points));
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [activeTool, canEdit, commitAnnotation, createId, getPointFromEvent, minSize]
+  );
+  const handleStageClick = useCallback(
+    (event) => {
+      if (!canEdit || activeTool !== "polygon") return;
+      const point = getPointFromEvent(event);
+      const drawing = drawingRef.current;
+      const points = drawing?.tool === "polygon" ? [...drawing.points, point] : [point];
+      drawingRef.current = { tool: "polygon", start: points[0], points };
+      setDraft(createImageAnnotationPath("polygon", "draft", points));
+    },
+    [activeTool, canEdit, getPointFromEvent]
+  );
+  const removeSelectedAnnotation = useCallback(() => {
+    if (!canEdit || !activeSelectedId) return;
+    const removed = annotations.find((annotation) => annotation.id === activeSelectedId);
+    const next = annotations.filter((annotation) => annotation.id !== activeSelectedId);
+    commitAnnotations(next, { type: "remove", annotation: removed });
+    selectAnnotation(null);
+  }, [activeSelectedId, annotations, canEdit, commitAnnotations, selectAnnotation]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        drawingRef.current = null;
+        setDraft(null);
+        return;
+      }
+      if (event.key === "Enter") {
+        commitPolygon();
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removeSelectedAnnotation();
+      }
+    },
+    [commitPolygon, removeSelectedAnnotation]
+  );
+  const renderAnnotation = useCallback(
+    (annotation, isDraft = false) => {
+      const selected = !isDraft && annotation.id === activeSelectedId;
+      const stroke = getImageAnnotationStrokeColor(annotation);
+      const commonProps = {
+        stroke,
+        strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
+        fill: stroke,
+        fillOpacity: annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1,
+        role: "button",
+        tabIndex: isDraft ? -1 : 0,
+        "aria-label": getImageAnnotationShapeAriaLabel(annotation),
+        className: classNames(!isDraft && "cursor-pointer focus:outline-none")
+      };
+      const onClick = (event) => {
+        if (isDraft) return;
+        event.stopPropagation();
+        selectAnnotation(annotation);
+      };
+      if (annotation.type === "rectangle") {
+        return /* @__PURE__ */ jsx(
+          "rect",
+          {
+            ...commonProps,
+            x: annotation.x * displayWidth,
+            y: annotation.y * displayHeight,
+            width: annotation.width * displayWidth,
+            height: annotation.height * displayHeight,
+            onClick
+          },
+          annotation.id
+        );
+      }
+      if (annotation.type === "ellipse") {
+        return /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            ...commonProps,
+            cx: (annotation.x + annotation.width / 2) * displayWidth,
+            cy: (annotation.y + annotation.height / 2) * displayHeight,
+            rx: annotation.width * displayWidth / 2,
+            ry: annotation.height * displayHeight / 2,
+            onClick
+          },
+          annotation.id
+        );
+      }
+      const pathAnnotation = annotation;
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...commonProps,
+          d: getImageAnnotationPathData(pathAnnotation, displayWidth, displayHeight),
+          fillOpacity: pathAnnotation.type === "polygon" ? commonProps.fillOpacity : 0,
+          onClick
+        },
+        annotation.id
+      );
+    },
+    [activeSelectedId, displayHeight, displayWidth, selectAnnotation, strokeWidth]
+  );
+  const renderedAnnotations = useMemo(
+    () => annotations.map((annotation) => renderAnnotation(annotation)),
+    [annotations, renderAnnotation]
+  );
+  const renderedLabels = showLabels ? annotations.filter((annotation) => annotation.label).map((annotation) => {
+    const center = getImageAnnotationCenter(annotation, displayWidth, displayHeight);
+    return /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: center.x,
+        y: center.y,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: imageAnnotationLabelClasses,
+        children: annotation.label
+      },
+      `${annotation.id}-label`
+    );
+  }) : null;
+  const containerClasses = classNames(imageAnnotationContainerClasses, className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs("div", { className: imageAnnotationToolbarClasses, "aria-label": "Annotation tools", children: [
+      tools.map((item) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getImageAnnotationToolButtonClasses(activeTool === item),
+          disabled: disabled || readonly,
+          "aria-pressed": activeTool === item,
+          onClick: () => setActiveTool(item),
+          children: getImageAnnotationToolLabel(item)
+        },
+        item
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: imageAnnotationDeleteButtonClasses,
+          disabled: !canEdit || !activeSelectedId,
+          onClick: removeSelectedAnnotation,
+          children: "Delete"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: imageAnnotationStageClasses,
+        style: { width: imageLoaded ? `${displayWidth}px` : void 0 },
+        role: imageLoaded ? "application" : "img",
+        "aria-label": imageLoaded ? "Image annotation editor" : "Loading image for annotation",
+        children: !imageLoaded ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] min-w-[240px] items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: imageAnnotationImageClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              ref: overlayRef,
+              className: classNames(
+                imageAnnotationOverlayClasses,
+                (!canEdit || activeTool === "select") && imageAnnotationReadonlyOverlayClasses
+              ),
+              width: displayWidth,
+              height: displayHeight,
+              viewBox: `0 0 ${displayWidth} ${displayHeight}`,
+              "aria-label": "Image annotation canvas",
+              onMouseDown: handleStageMouseDown,
+              onClick: handleStageClick,
+              onDoubleClick: commitPolygon,
+              children: [
+                renderedAnnotations,
+                draft ? renderAnnotation(draft, true) : null,
+                renderedLabels
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+ImageAnnotation.displayName = "ImageAnnotation";
+
+export {
+  ImageAnnotation
+};

package/dist/chunk-VJJ76I7U.js

@@ -1,9 +1,9 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Header.tsx
 
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Header.tsx
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
 var Header = ({
   className,
   height = "64px",
@@ -11,9 +11,11 @@ var Header = ({
   children,
   ...props
 }) => {
-  const headerClasses = tigercatCore.classNames(tigercatCore.layoutHeaderClasses, className);
+  const headerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.layoutHeaderClasses, className);
   const headerStyle = { ...style, height };
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: headerClasses, style: headerStyle, ...props, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "header", { className: headerClasses, style: headerStyle, ...props, children });
 };
 
+
+
 exports.Header = Header;

package/dist/{chunk-MO3V34YL.mjs → chunk-VM4ZQHT5.mjs}

@@ -1,14 +1,47 @@
-import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
-import { ChartLegend } from './chunk-UBP7HZSU.mjs';
-import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
-import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
-import { ChartGrid } from './chunk-677VSTPW.mjs';
-import { useState, useMemo, useCallback } from 'react';
-import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, buildChartSeriesKeys, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames, linePointTransitionClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useChartInteraction
+} from "./chunk-6QML6T3Y.mjs";
+import {
+  ChartLegend
+} from "./chunk-UBP7HZSU.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
+import {
+  ChartTooltip
+} from "./chunk-NASC6XHN.mjs";
+import {
+  ChartAxis
+} from "./chunk-RQSQXQN6.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartGrid
+} from "./chunk-677VSTPW.mjs";
 
+// src/components/AreaChart.tsx
+import { useId, useMemo, useState, useCallback } from "react";
+import {
+  classNames,
+  createAreaPath,
+  createLinearScale,
+  createLinePath,
+  createPointScale,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getStableChartGradientPrefix,
+  getNumberExtent,
+  linePointTransitionClasses,
+  stackSeriesData,
+  resolveChartPalette,
+  buildChartLegendItems,
+  buildChartSeriesKeys,
+  resolveMultiSeriesTooltipContent,
+  resolveSeriesData,
+  defaultSeriesXYTooltipFormatter
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var AreaChart = ({
   width = 320,
   height = 200,
@@ -71,7 +104,11 @@ var AreaChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const gradientPrefix = useMemo(() => getAreaGradientPrefix(), []);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("area", gradientId),
+    [gradientId]
+  );
   const innerRect = useMemo(
     () => getChartInnerRect(width, height, padding),
     [width, height, padding]
@@ -284,12 +321,15 @@ var AreaChart = ({
         (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsx("style", { children: `
               .tiger-area-animated {
-                animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+                animation: tiger-area-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
               }
               @keyframes tiger-area-draw {
                 from { stroke-dashoffset: 1; }
                 to { stroke-dashoffset: 0; }
               }
+              @media (prefers-reduced-motion: reduce) {
+                .tiger-area-animated { animation-duration: 0ms; }
+              }
             ` }),
           gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
             "linearGradient",
@@ -425,7 +465,7 @@ var AreaChart = ({
                   strokeLinejoin: "round",
                   pathLength: animated ? 1 : void 0,
                   className: classNames(
-                    "transition-opacity duration-200",
+                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
                     animated && "tiger-area-animated"
                   )
                 }
@@ -501,4 +541,7 @@ var AreaChart = ({
 };
 var AreaChart_default = AreaChart;
 
-export { AreaChart, AreaChart_default };
+export {
+  AreaChart,
+  AreaChart_default
+};

package/dist/{chunk-KR3EVG7G.mjs → chunk-VNVGSPBI.mjs}

@@ -1,8 +1,44 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, padTwo, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/TimePicker.tsx
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import {
+  classNames,
+  icon20ViewBox,
+  parseTime,
+  formatTime,
+  formatTimeDisplayWithLocale,
+  getTimePeriodLabels,
+  getTimePickerLabels,
+  getTimePickerOptionAriaLabel,
+  to12HourFormat,
+  to24HourFormat,
+  isTimeInRange,
+  generateHours,
+  generateMinutes,
+  generateSeconds,
+  getCurrentTime,
+  padTwo,
+  timePickerBaseClasses,
+  timePickerInputWrapperClasses,
+  getTimePickerInputClasses,
+  getTimePickerIconButtonClasses,
+  timePickerClearButtonClasses,
+  timePickerPanelClasses,
+  timePickerDesktopPanelContentClasses,
+  timePickerMobileWheelClasses,
+  timePickerMobileWheelSelectClasses,
+  timePickerRangeHeaderClasses,
+  getTimePickerRangeTabButtonClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  getTimePickerItemClasses,
+  getTimePickerPeriodButtonClasses,
+  timePickerFooterClasses,
+  timePickerFooterButtonClasses,
+  ClockIconPath,
+  TimePickerCloseIconPath
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -78,7 +114,7 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  const syncFromActiveValue = () => {
+  const syncFromActiveValue = useCallback(() => {
     const parsed = parseTime(activeValue);
     if (!parsed) return;
     setSelectedHours(parsed.hours);
@@ -88,10 +124,10 @@ var TimePicker = (allProps) => {
       const { period } = to12HourFormat(parsed.hours);
       setSelectedPeriod(period);
     }
-  };
+  }, [activeValue, format]);
   useEffect(() => {
     syncFromActiveValue();
-  }, [activeValue, format, activePart, isRangeMode]);
+  }, [syncFromActiveValue]);
   const labels = useMemo(
     () => getTimePickerLabels(locale, labelsOverrides),
     [locale, labelsOverrides]
@@ -422,7 +458,52 @@ var TimePicker = (allProps) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: timePickerPanelContentClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: timePickerMobileWheelClasses, children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: format === "12" ? to12HourFormat(selectedHours).hours : selectedHours,
+                "aria-label": labels.hour,
+                onChange: (event) => selectHour(Number(event.target.value)),
+                children: hoursList.map((hour) => /* @__PURE__ */ jsx("option", { value: hour, disabled: isHourDisabled(hour), children: padTwo(hour) }, hour))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedMinutes,
+                "aria-label": labels.minute,
+                onChange: (event) => selectMinute(Number(event.target.value)),
+                children: minutesList.map((minute) => /* @__PURE__ */ jsx("option", { value: minute, disabled: isMinuteDisabled(minute), children: padTwo(minute) }, minute))
+              }
+            ),
+            showSeconds && /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedSeconds,
+                "aria-label": labels.second,
+                onChange: (event) => selectSecond(Number(event.target.value)),
+                children: secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+              }
+            ),
+            format === "12" && /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedPeriod,
+                "aria-label": "Period",
+                onChange: (event) => selectPeriod(event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "AM", children: periodLabels.am }),
+                  /* @__PURE__ */ jsx("option", { value: "PM", children: periodLabels.pm })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timePickerDesktopPanelContentClasses, children: [
             /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
               /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: hoursList.map((hour) => {
@@ -540,4 +621,6 @@ var TimePicker = (allProps) => {
   ] });
 };
 
-export { TimePicker };
+export {
+  TimePicker
+};