@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -0,0 +1,732 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TimePicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _useDragToDismiss = require("../../hooks/useDragToDismiss.js");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _Button = _interopRequireDefault(require("../Button/Button.js"));
+var _PickerTrigger = require("../PickerTrigger/PickerTrigger.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * TimePicker supports two modes:
+ *
+ * 1. Controlled-modal mode — pass `visible`, `onChange`, `onClose`. The
+ *    component renders only the modal sheet and the caller owns open/close
+ *    state plus its own trigger UI.
+ * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
+ *    field (label / value / placeholder / chevron / clear / helper / error)
+ *    and manages its own modal open state. `onChange` is still called on
+ *    confirm.
+ */
+
+const ITEM_HEIGHT = 40;
+const VISIBLE_ITEMS = 5;
+const PICKER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+const CENTER_OFFSET = Math.floor(VISIBLE_ITEMS / 2);
+const HAPTIC_DEBOUNCE_MS = 35;
+const range = (start, endInclusive, step = 1) => {
+  const out = [];
+  for (let v = start; v <= endInclusive; v += step) {
+    out.push(v);
+  }
+  return out;
+};
+const pad2 = n => n.toString().padStart(2, '0');
+const to24h = (hour, period, format) => {
+  if (format === '24h') {
+    return hour;
+  }
+  if (period === 'AM') {
+    return hour === 12 ? 0 : hour;
+  }
+  return hour === 12 ? 12 : hour + 12;
+};
+const from24h = (hour, format) => {
+  if (format === '24h') {
+    return {
+      displayHour: hour,
+      period: 'AM'
+    };
+  }
+  if (hour === 0) {
+    return {
+      displayHour: 12,
+      period: 'AM'
+    };
+  }
+  if (hour === 12) {
+    return {
+      displayHour: 12,
+      period: 'PM'
+    };
+  }
+  if (hour > 12) {
+    return {
+      displayHour: hour - 12,
+      period: 'PM'
+    };
+  }
+  return {
+    displayHour: hour,
+    period: 'AM'
+  };
+};
+const clampMinuteToStep = (minute, step) => {
+  const rounded = Math.round(minute / step) * step;
+  return Math.min(59, Math.max(0, rounded));
+};
+const Wheel = ({
+  kind,
+  label,
+  data,
+  selectedIndex,
+  onIndexChange,
+  formatItem,
+  theme,
+  haptic,
+  testID
+}) => {
+  const listRef = (0, _react.useRef)(null);
+  const scrollY = (0, _react.useRef)((0, _index.createAnimatedValue)(selectedIndex * ITEM_HEIGHT)).current;
+  const lastIndexRef = (0, _react.useRef)(selectedIndex);
+  const lastHapticAtRef = (0, _react.useRef)(0);
+
+  // Keep list aligned when selectedIndex changes externally (e.g. value prop, format flip).
+  (0, _react.useEffect)(() => {
+    if (lastIndexRef.current !== selectedIndex) {
+      lastIndexRef.current = selectedIndex;
+      const offset = selectedIndex * ITEM_HEIGHT;
+      (0, _index.setNativeValue)(scrollY, offset);
+      // Defer to next frame so FlatList has measured.
+      requestAnimationFrame(() => {
+        listRef.current?.scrollToOffset({
+          offset,
+          animated: false
+        });
+      });
+    }
+  }, [selectedIndex, scrollY]);
+  const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
+  const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true,
+    listener: event => {
+      const y = event.nativeEvent.contentOffset.y;
+      const idx = Math.round(y / ITEM_HEIGHT);
+      if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
+        const now = Date.now();
+        if (now - lastHapticAtRef.current >= hapticDebounceMs) {
+          const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+          if (h) {
+            (0, _hapticUtils.triggerHaptic)(h);
+          }
+          lastHapticAtRef.current = now;
+        }
+        lastIndexRef.current = idx;
+      }
+    }
+  }), [scrollY, data.length, haptic, hapticDebounceMs]);
+  const onMomentumScrollEnd = (0, _react.useCallback)(event => {
+    const y = event.nativeEvent.contentOffset.y;
+    const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
+    if (idx !== selectedIndex) {
+      onIndexChange(idx);
+    }
+  }, [data.length, onIndexChange, selectedIndex]);
+  const handleA11yAction = (0, _react.useCallback)(event => {
+    const action = event.nativeEvent.actionName;
+    if (action === 'increment') {
+      const next = Math.min(data.length - 1, selectedIndex + 1);
+      if (next !== selectedIndex) {
+        onIndexChange(next);
+      }
+    } else if (action === 'decrement') {
+      const next = Math.max(0, selectedIndex - 1);
+      if (next !== selectedIndex) {
+        onIndexChange(next);
+      }
+    }
+  }, [data.length, onIndexChange, selectedIndex]);
+  const renderItem = (0, _react.useCallback)(({
+    item,
+    index
+  }) => {
+    const distance = _reactNative.Animated.subtract(_reactNative.Animated.divide(scrollY, ITEM_HEIGHT), index);
+    const opacity = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+      extrapolate: 'clamp'
+    });
+    const scale = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.85, 0.95, 1.05, 0.95, 0.85],
+      extrapolate: 'clamp'
+    });
+    const isSelected = index === selectedIndex;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.wheelItem, {
+        opacity,
+        transform: [{
+          scale
+        }]
+      }],
+      accessible: false,
+      importantForAccessibility: "no",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          fontSize: theme.typography.fontSize.xl,
+          color: isSelected ? theme.colors.text.primary : theme.colors.text.secondary,
+          fontWeight: isSelected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium,
+          letterSpacing: theme.typography.letterSpacing.normal
+        }],
+        children: formatItem(item)
+      })
+    });
+  }, [scrollY, selectedIndex, theme, formatItem]);
+  const keyExtractor = (0, _react.useCallback)((item, index) => `${kind}-${String(item)}-${index}`, [kind]);
+  const getItemLayout = (0, _react.useCallback)((_data, index) => ({
+    length: ITEM_HEIGHT,
+    offset: ITEM_HEIGHT * index,
+    index
+  }), []);
+  const currentValueText = formatItem(data[selectedIndex] ?? '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.wheelColumn,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: styles.wheelA11yLayer,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: currentValueText
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleA11yAction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.FlatList, {
+      ref: listRef,
+      data: data,
+      keyExtractor: keyExtractor,
+      renderItem: renderItem,
+      getItemLayout: getItemLayout,
+      showsVerticalScrollIndicator: false,
+      snapToInterval: ITEM_HEIGHT,
+      snapToAlignment: "start",
+      decelerationRate: "fast",
+      bounces: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      contentContainerStyle: {
+        paddingVertical: ITEM_HEIGHT * CENTER_OFFSET
+      },
+      initialScrollIndex: selectedIndex,
+      style: styles.wheelList,
+      importantForAccessibility: "no-hide-descendants"
+    })]
+  });
+};
+const TimePicker = props => {
+  const {
+    visible,
+    value,
+    onChange,
+    onClose,
+    format = '12h',
+    minuteStep = 1,
+    title = 'Select Time',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    testID,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    footerButtonStyle,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
+    haptic
+  } = props;
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(false);
+  const open = isControlled ? visible : internalOpen;
+
+  // In trigger mode the trigger field is what's on screen by default, so it
+  // carries the bare testID; the modal sheet (rendered alongside it, just
+  // closed) gets a derived id to avoid two nodes sharing the same testID.
+  const modalTestID = isControlled ? testID : testID ? `${testID}-modal` : undefined;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
+  // Live drag offset for drag-to-dismiss; the sheet's measured height is how far it travels.
+  const drag = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetHeight = (0, _react.useRef)(0);
+  const finalizeClose = (0, _react.useCallback)(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
+
+  // Animate out before finalizing, matching DatePicker/DateRangePicker — this
+  // sheet used to spring in and then vanish on close.
+  const handleCloseModal = (0, _react.useCallback)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(translateY, {
+      toValue: 40,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => finalizeClose());
+  }, [finalizeClose, opacity, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  const {
+    handleGesture
+  } = (0, _useDragToDismiss.useDragToDismiss)({
+    drag,
+    travel: () => sheetHeight.current || 320,
+    onDismiss: handleCloseModal
+  });
+  const hours = (0, _react.useMemo)(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
+  const minutes = (0, _react.useMemo)(() => range(0, 59, minuteStep), [minuteStep]);
+  const periods = (0, _react.useMemo)(() => ['AM', 'PM'], []);
+  const initial = (0, _react.useMemo)(() => {
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const minute = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    return {
+      displayHour,
+      minute,
+      period,
+      hour24: h24
+    };
+  }, [value, format, minuteStep]);
+  const [hourIndex, setHourIndex] = (0, _react.useState)(() => {
+    const idx = hours.indexOf(initial.displayHour);
+    return idx >= 0 ? idx : 0;
+  });
+  const [minuteIndex, setMinuteIndex] = (0, _react.useState)(() => {
+    const idx = minutes.indexOf(initial.minute);
+    return idx >= 0 ? idx : 0;
+  });
+  const [periodIndex, setPeriodIndex] = (0, _react.useState)(() => initial.period === 'PM' ? 1 : 0);
+
+  // Re-sync on open toggle / value change / format / step.
+  //
+  // The `!open` guard is a RENDER OPTIMISATION, not a correctness guard, and it
+  // is worth knowing which. `open` is itself a dependency, so the effect re-runs
+  // when the picker opens and reads a fresh `new Date()` either way — the state
+  // a user actually sees is identical with or without it. What it saves is three
+  // setState calls (and the extra commit they schedule) on every prop change
+  // while the picker is closed. Correctness while closed is handled by RN's
+  // Modal, which renders nothing at visible={false}.
+  //
+  // That is why its test counts render passes through React.Profiler rather than
+  // asserting on the tree: no DOM assertion can distinguish the two paths.
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      return;
+    }
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const stepped = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    const hIdx = hours.indexOf(displayHour);
+    setHourIndex(hIdx >= 0 ? hIdx : 0);
+    const mIdx = minutes.indexOf(stepped);
+    setMinuteIndex(mIdx >= 0 ? mIdx : 0);
+    setPeriodIndex(period === 'PM' ? 1 : 0);
+  }, [open, value, format, minuteStep, hours, minutes]);
+
+  // Sheet animations.
+
+  (0, _react.useEffect)(() => {
+    let anim;
+    if (open) {
+      anim = _reactNative.Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      _reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+        useNativeDriver: false
+      }), _reactNative.Animated.spring(translateY, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      })]);
+      anim.start();
+    } else {
+      opacity.setValue(0);
+      (0, _index.setNativeValue)(translateY, 40);
+      (0, _index.setNativeValue)(drag, 0);
+    }
+    return () => anim?.stop();
+  }, [open, opacity, translateY, drag, theme.motion]);
+  const announce = (0, _react.useCallback)(msg => {
+    if (_reactNative.Platform.OS === 'ios' || _reactNative.Platform.OS === 'android') {
+      _reactNative.AccessibilityInfo.announceForAccessibility(msg);
+    }
+  }, []);
+  const handleHourIndex = (0, _react.useCallback)(idx => {
+    setHourIndex(idx);
+    announce(`Hour ${hours[idx]}`);
+  }, [hours, announce]);
+  const handleMinuteIndex = (0, _react.useCallback)(idx => {
+    setMinuteIndex(idx);
+    announce(`${minutes[idx]} minutes`);
+  }, [minutes, announce]);
+  const handlePeriodIndex = (0, _react.useCallback)(idx => {
+    setPeriodIndex(idx);
+    announce(periods[idx] ?? '');
+  }, [periods, announce]);
+  const handleCancel = (0, _react.useCallback)(() => {
+    if (haptic !== false) {
+      (0, _hapticUtils.triggerHaptic)('selection');
+    }
+    handleCloseModal();
+  }, [handleCloseModal, haptic]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const period = periods[periodIndex] ?? 'AM';
+    const hour24 = to24h(displayHour, period, format);
+    const minute = minutes[minuteIndex] ?? 0;
+    if (haptic !== false) {
+      (0, _hapticUtils.triggerHaptic)('notificationSuccess');
+    }
+    onChange?.({
+      hour: hour24,
+      minute
+    });
+    handleCloseModal();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, haptic]);
+  const summary = (0, _react.useMemo)(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const minute = minutes[minuteIndex] ?? 0;
+    if (format === '24h') {
+      return `${pad2(displayHour)}:${pad2(minute)}`;
+    }
+    const period = periods[periodIndex] ?? 'AM';
+    return `${pad2(displayHour)}:${pad2(minute)} ${period}`;
+  }, [hours, hourIndex, minutes, minuteIndex, periods, periodIndex, format]);
+  const formatHourItem = (0, _react.useCallback)(item => pad2(Number(item)), []);
+  const formatMinuteItem = (0, _react.useCallback)(item => pad2(Number(item)), []);
+  const formatPeriodItem = (0, _react.useCallback)(item => String(item), []);
+  const defaultFormatValue = (0, _react.useCallback)(t => {
+    if (format === '24h') {
+      return `${pad2(t.hour)}:${pad2(t.minute)}`;
+    }
+    const {
+      displayHour,
+      period
+    } = from24h(t.hour, '12h');
+    return `${displayHour}:${pad2(t.minute)} ${period}`;
+  }, [format]);
+  const triggerValue = !isControlled && value && Number.isFinite(value.hour) && Number.isFinite(value.minute) ? (formatValue ?? defaultFormatValue)(value) : undefined;
+  const modal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: open,
+    transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleCloseModal,
+    testID: modalTestID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView
+    // Plain View + collapsable={false} — see Modal.tsx backdrop comment.
+    // Gesture handler needs its own root inside a native Modal, so the
+    // backdrop doubles as that root.
+    , {
+      collapsable: false,
+      style: styles.backdrop,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: handleCloseModal,
+        accessibilityLabel: "Close time picker",
+        accessibilityRole: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        style: [styles.sheet, {
+          paddingBottom: Math.max(insets.bottom, theme.spacing.lg),
+          transform: [{
+            translateY: _reactNative.Animated.add(translateY, drag)
+          }]
+        }, style, containerStyle],
+        onLayout: e => {
+          sheetHeight.current = e.nativeEvent.layout.height;
+        },
+        accessibilityViewIsModal: true,
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: title,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: handleGesture,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.handle
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.title, headerLabelStyle],
+              accessibilityRole: "header",
+              children: title
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.summaryWrap,
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: `Selected ${summary}`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.summary,
+            children: summary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.wheelsRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            pointerEvents: "none",
+            style: styles.selectionBand,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.bandLine
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.bandLine, styles.bandLineBottom]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Wheel, {
+            kind: "hour",
+            label: "Hour",
+            data: hours,
+            selectedIndex: hourIndex,
+            onIndexChange: handleHourIndex,
+            formatItem: formatHourItem,
+            theme: theme,
+            haptic: haptic,
+            testID: "time-picker-hour"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.separator,
+            children: ":"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Wheel, {
+            kind: "minute",
+            label: "Minute",
+            data: minutes,
+            selectedIndex: minuteIndex,
+            onIndexChange: handleMinuteIndex,
+            formatItem: formatMinuteItem,
+            theme: theme,
+            haptic: haptic,
+            testID: "time-picker-minute"
+          }), format === '12h' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.spacer
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Wheel, {
+              kind: "period",
+              label: "Period",
+              data: periods,
+              selectedIndex: periodIndex,
+              onIndexChange: handlePeriodIndex,
+              formatItem: formatPeriodItem,
+              theme: theme,
+              haptic: haptic,
+              testID: "time-picker-period"
+            })]
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            title: cancelLabel,
+            haptic: false,
+            variant: "ghost",
+            tone: "neutral",
+            onPress: handleCancel,
+            style: [styles.footerBtn, footerButtonStyle],
+            accessibilityHint: "Dismiss without changes",
+            testID: "time-picker-cancel"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            title: confirmLabel,
+            variant: "solid",
+            tone: "primary",
+            haptic: false,
+            onPress: handleConfirm,
+            style: [styles.footerBtn, footerButtonStyle],
+            accessibilityHint: "Confirm selected time",
+            testID: "time-picker-confirm"
+          })]
+        })]
+      })]
+    })
+  });
+  if (isControlled) {
+    return modal;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerTrigger.PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValue,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle,
+      testID: testID
+    }), modal]
+  });
+};
+exports.TimePicker = TimePicker;
+const styles = _reactNative.StyleSheet.create({
+  wheelColumn: {
+    width: 64,
+    height: PICKER_HEIGHT,
+    overflow: 'hidden'
+  },
+  wheelList: {
+    flexGrow: 0,
+    height: PICKER_HEIGHT
+  },
+  wheelItem: {
+    height: ITEM_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  wheelA11yLayer: {
+    ..._reactNative.StyleSheet.absoluteFill,
+    zIndex: 2
+  }
+});
+const buildStyles = theme => {
+  const sheetShadow = theme.shadows.xl;
+  return _reactNative.StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: theme.colors.background.overlay,
+      justifyContent: 'flex-end'
+    },
+    sheet: {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopLeftRadius: theme.radius.xl,
+      borderTopRightRadius: theme.radius.xl,
+      ..._corners.smoothCorners,
+      paddingTop: theme.spacing.sm,
+      paddingHorizontal: theme.spacing.lg,
+      paddingBottom: theme.spacing.xl,
+      shadowColor: sheetShadow.shadowColor,
+      shadowOffset: sheetShadow.shadowOffset,
+      shadowOpacity: sheetShadow.shadowOpacity,
+      shadowRadius: sheetShadow.shadowRadius,
+      elevation: sheetShadow.elevation
+    },
+    handle: {
+      alignSelf: 'center',
+      width: theme.components.timePicker?.handleWidth ?? 36,
+      height: theme.components.timePicker?.handleHeight ?? 4,
+      borderRadius: theme.radius.full,
+      ..._corners.smoothCorners,
+      backgroundColor: theme.colors.border.secondary,
+      marginBottom: theme.spacing.sm
+    },
+    title: {
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary,
+      marginBottom: theme.spacing.sm
+    },
+    summaryWrap: {
+      alignItems: 'center',
+      marginBottom: theme.spacing.md
+    },
+    summary: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.primary,
+      letterSpacing: theme.typography.letterSpacing.wide
+    },
+    wheelsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: PICKER_HEIGHT,
+      position: 'relative',
+      marginBottom: theme.spacing.lg
+    },
+    selectionBand: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: ITEM_HEIGHT * CENTER_OFFSET,
+      height: ITEM_HEIGHT,
+      justifyContent: 'space-between'
+    },
+    bandLine: {
+      height: _reactNative.StyleSheet.hairlineWidth * 2,
+      backgroundColor: theme.colors.primary,
+      opacity: 0.85
+    },
+    bandLineBottom: {
+      // visual rhythm only — same color as top
+    },
+    separator: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.text.primary,
+      paddingHorizontal: theme.spacing.xs
+    },
+    spacer: {
+      width: theme.spacing.md
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      paddingHorizontal: theme.spacing.lg
+    }
+  });
+};
+var _default = exports.default = TimePicker;
+//# sourceMappingURL=TimePicker.js.map