@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -1,732 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TimePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Button=_interopRequireDefault(require("../Button/Button.js")),_PickerTrigger=require("../PickerTrigger/PickerTrigger.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(r=t?a:i){if(r.has(e))return r.get(e);r.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?r(s,t,n):s[t]=e[t]);return s})(e,t)}const ITEM_HEIGHT=40,VISIBLE_ITEMS=5,PICKER_HEIGHT=200,CENTER_OFFSET=Math.floor(2.5),HAPTIC_DEBOUNCE_MS=35,range=(e,t,i=1)=>{const a=[];for(let r=e;r<=t;r+=i)a.push(r);return a},pad2=e=>e.toString().padStart(2,"0"),to24h=(e,t,i)=>"24h"===i?e:"AM"===t?12===e?0:e:12===e?12:e+12,from24h=(e,t)=>"24h"===t?{displayHour:e,period:"AM"}:0===e?{displayHour:12,period:"AM"}:12===e?{displayHour:12,period:"PM"}:e>12?{displayHour:e-12,period:"PM"}:{displayHour:e,period:"AM"},clampMinuteToStep=(e,t)=>{const i=Math.round(e/t)*t;return Math.min(59,Math.max(0,i))},Wheel=({kind:e,label:t,data:i,selectedIndex:a,onIndexChange:r,formatItem:n,theme:s,haptic:o,testID:c})=>{const l=(0,_react.useRef)(null),u=(0,_react.useRef)((0,_index.createAnimatedValue)(40*a)).current,d=(0,_react.useRef)(a),m=(0,_react.useRef)(0);(0,_react.useEffect)(()=>{if(d.current!==a){d.current=a;const e=40*a;(0,_index.setNativeValue)(u,e),requestAnimationFrame(()=>{l.current?.scrollToOffset({offset:e,animated:!1})})}},[a,u]);const p=s.components.timePicker?.hapticDebounceMs??35,h=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:u}}}],{useNativeDriver:!0,listener:e=>{const t=e.nativeEvent.contentOffset.y,a=Math.round(t/40);if(a!==d.current&&a>=0&&a<i.length){const e=Date.now();if(e-m.current>=p){const t=(0,_hapticUtils.resolveHaptic)(o,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),m.current=e}d.current=a}}}),[u,i.length,o,p]),_=(0,_react.useCallback)(e=>{const t=e.nativeEvent.contentOffset.y,n=Math.max(0,Math.min(i.length-1,Math.round(t/40)));n!==a&&r(n)},[i.length,r,a]),g=(0,_react.useCallback)(e=>{const t=e.nativeEvent.actionName;if("increment"===t){const e=Math.min(i.length-1,a+1);e!==a&&r(e)}else if("decrement"===t){const e=Math.max(0,a-1);e!==a&&r(e)}},[i.length,r,a]),f=(0,_react.useCallback)(({item:e,index:t})=>{const i=_reactNative.Animated.subtract(_reactNative.Animated.divide(u,40),t),r=i.interpolate({inputRange:[-2,-1,0,1,2],outputRange:[.3,.6,1,.6,.3],extrapolate:"clamp"}),o=i.interpolate({inputRange:[-2,-1,0,1,2],outputRange:[.85,.95,1.05,.95,.85],extrapolate:"clamp"}),c=t===a;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.wheelItem,{opacity:r,transform:[{scale:o}]}],accessible:!1,importantForAccessibility:"no",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{fontSize:s.typography.fontSize.xl,color:c?s.colors.text.primary:s.colors.text.secondary,fontWeight:c?s.typography.fontWeight.semibold:s.typography.fontWeight.medium,letterSpacing:s.typography.letterSpacing.normal}],children:n(e)})})},[u,a,s,n]),y=(0,_react.useCallback)((t,i)=>`${e}-${String(t)}-${i}`,[e]),x=(0,_react.useCallback)((e,t)=>({length:40,offset:40*t,index:t}),[]),v=n(i[a]??"");return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.wheelColumn,testID:c,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:styles.wheelA11yLayer,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:t,accessibilityValue:{text:v},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:g}),(0,_jsxRuntime.jsx)(_reactNative.Animated.FlatList,{ref:l,data:i,keyExtractor:y,renderItem:f,getItemLayout:x,showsVerticalScrollIndicator:!1,snapToInterval:40,snapToAlignment:"start",decelerationRate:"fast",bounces:!1,scrollEventThrottle:16,onScroll:h,onMomentumScrollEnd:_,contentContainerStyle:{paddingVertical:40*CENTER_OFFSET},initialScrollIndex:a,style:styles.wheelList,importantForAccessibility:"no-hide-descendants"})]})},TimePicker=e=>{const{visible:t,value:i,onChange:a,onClose:r,format:n="12h",minuteStep:s=1,title:o="Select Time",confirmLabel:c="Confirm",cancelLabel:l="Cancel",testID:u,style:d,containerStyle:m,headerLabelStyle:p,footerButtonStyle:h,label:_,placeholder:g,helperText:f,error:y,required:x,disabled:v,size:b,variant:j,clearable:R,onClear:N,formatValue:S,triggerStyle:w,haptic:C}=e,k=void 0!==e.visible,[T,M]=(0,_react.useState)(!1),I=k?t:T,A=k?u:u?`${u}-modal`:void 0,D=(0,_index.useTheme)(),P=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),E=(0,_react.useMemo)(()=>buildStyles(D),[D]),H=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,V=(0,_react.useRef)((0,_index.createAnimatedValue)(40)).current,B=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,O=(0,_react.useRef)(0),W=(0,_react.useCallback)(()=>{k?r?.():M(!1)},[k,r]),L=(0,_react.useCallback)(()=>{_reactNative.Animated.parallel([_reactNative.Animated.timing(H,{toValue:0,duration:D.motion.duration.fast,easing:_reactNative.Easing.bezier(...D.motion.easing.accelerate),useNativeDriver:!1}),_reactNative.Animated.timing(V,{toValue:40,duration:D.motion.duration.fast,easing:_reactNative.Easing.bezier(...D.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>W())},[W,H,V,D.motion.duration.fast,D.motion.easing.accelerate]),{handleGesture:q}=(0,_useDragToDismiss.useDragToDismiss)({drag:B,travel:()=>O.current||320,onDismiss:L}),F=(0,_react.useMemo)(()=>"24h"===n?range(0,23):range(1,12),[n]),$=(0,_react.useMemo)(()=>range(0,59,s),[s]),z=(0,_react.useMemo)(()=>["AM","PM"],[]),G=(0,_react.useMemo)(()=>{const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,s),{displayHour:r,period:o}=from24h(e,n);return{displayHour:r,minute:a,period:o,hour24:e}},[i,n,s]),[U,K]=(0,_react.useState)(()=>{const e=F.indexOf(G.displayHour);return e>=0?e:0}),[Y,J]=(0,_react.useState)(()=>{const e=$.indexOf(G.minute);return e>=0?e:0}),[Q,X]=(0,_react.useState)(()=>"PM"===G.period?1:0);(0,_react.useEffect)(()=>{if(!I)return;const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,s),{displayHour:r,period:o}=from24h(e,n),c=F.indexOf(r);K(c>=0?c:0);const l=$.indexOf(a);J(l>=0?l:0),X("PM"===o?1:0)},[I,i,n,s,F,$]),(0,_react.useEffect)(()=>{let e;return I?(e=_reactNative.Animated.parallel([_reactNative.Animated.timing(H,{toValue:1,duration:D.motion.duration.normal,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:!1}),_reactNative.Animated.spring(V,{toValue:0,damping:D.motion.spring.snappy.damping,stiffness:D.motion.spring.snappy.stiffness,mass:D.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()):(H.setValue(0),(0,_index.setNativeValue)(V,40),(0,_index.setNativeValue)(B,0)),()=>e?.stop()},[I,H,V,B,D.motion]);const Z=(0,_react.useCallback)(e=>{"ios"!==_reactNative.Platform.OS&&"android"!==_reactNative.Platform.OS||_reactNative.AccessibilityInfo.announceForAccessibility(e)},[]),ee=(0,_react.useCallback)(e=>{K(e),Z(`Hour ${F[e]}`)},[F,Z]),te=(0,_react.useCallback)(e=>{J(e),Z(`${$[e]} minutes`)},[$,Z]),ie=(0,_react.useCallback)(e=>{X(e),Z(z[e]??"")},[z,Z]),ae=(0,_react.useCallback)(()=>{!1!==C&&(0,_hapticUtils.triggerHaptic)("selection"),L()},[L,C]),re=(0,_react.useCallback)(()=>{const e=F[U]??0,t=z[Q]??"AM",i=to24h(e,t,n),r=$[Y]??0;!1!==C&&(0,_hapticUtils.triggerHaptic)("notificationSuccess"),a?.({hour:i,minute:r}),L()},[F,U,z,Q,$,Y,n,a,L,C]),ne=(0,_react.useMemo)(()=>{const e=F[U]??0,t=$[Y]??0;if("24h"===n)return`${pad2(e)}:${pad2(t)}`;const i=z[Q]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[F,U,$,Y,z,Q,n]),se=(0,_react.useCallback)(e=>pad2(Number(e)),[]),oe=(0,_react.useCallback)(e=>pad2(Number(e)),[]),ce=(0,_react.useCallback)(e=>String(e),[]),le=(0,_react.useCallback)(e=>{if("24h"===n)return`${pad2(e.hour)}:${pad2(e.minute)}`;const{displayHour:t,period:i}=from24h(e.hour,"12h");return`${t}:${pad2(e.minute)} ${i}`},[n]),ue=!k&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(S??le)(i):void 0,de=(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:I,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:L,testID:A,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,style:E.backdrop,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:L,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[E.sheet,{paddingBottom:Math.max(P.bottom,D.spacing.lg),transform:[{translateY:_reactNative.Animated.add(V,B)}]},d,m],onLayout:e=>{O.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:o,children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:q,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:E.handle}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[E.title,p],accessibilityRole:"header",children:o})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:E.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${ne}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:E.summary,children:ne})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:E.wheelsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{pointerEvents:"none",style:E.selectionBand,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:E.bandLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.bandLine,E.bandLineBottom]})]}),(0,_jsxRuntime.jsx)(Wheel,{kind:"hour",label:"Hour",data:F,selectedIndex:U,onIndexChange:ee,formatItem:se,theme:D,haptic:C,testID:"time-picker-hour"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:E.separator,children:":"}),(0,_jsxRuntime.jsx)(Wheel,{kind:"minute",label:"Minute",data:$,selectedIndex:Y,onIndexChange:te,formatItem:oe,theme:D,haptic:C,testID:"time-picker-minute"}),"12h"===n?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:E.spacer}),(0,_jsxRuntime.jsx)(Wheel,{kind:"period",label:"Period",data:z,selectedIndex:Q,onIndexChange:ie,formatItem:ce,theme:D,haptic:C,testID:"time-picker-period"})]}):null]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:E.footer,children:[(0,_jsxRuntime.jsx)(_Button.default,{title:l,haptic:!1,variant:"ghost",tone:"neutral",onPress:ae,style:[E.footerBtn,h],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),(0,_jsxRuntime.jsx)(_Button.default,{title:c,variant:"solid",tone:"primary",haptic:!1,onPress:re,style:[E.footerBtn,h],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})});return k?de:(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_PickerTrigger.PickerTrigger,{label:_,placeholder:g,helperText:f,error:y,required:x,disabled:v,size:b,variant:j,clearable:R,onClear:N,value:ue,onPress:()=>M(!0),triggerStyle:w,testID:u}),de]})};exports.TimePicker=TimePicker;const styles=_reactNative.StyleSheet.create({wheelColumn:{width:64,height:200,overflow:"hidden"},wheelList:{flexGrow:0,height:200},wheelItem:{height:40,alignItems:"center",justifyContent:"center"},wheelA11yLayer:{..._reactNative.StyleSheet.absoluteFill,zIndex:2}}),buildStyles=e=>{const t=e.shadows.xl;return _reactNative.StyleSheet.create({backdrop:{flex:1,backgroundColor:e.colors.background.overlay,justifyContent:"flex-end"},sheet:{backgroundColor:e.colors.background.elevated,borderTopLeftRadius:e.radius.xl,borderTopRightRadius:e.radius.xl,..._corners.smoothCorners,paddingTop:e.spacing.sm,paddingHorizontal:e.spacing.lg,paddingBottom:e.spacing.xl,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},handle:{alignSelf:"center",width:e.components.timePicker?.handleWidth??36,height:e.components.timePicker?.handleHeight??4,borderRadius:e.radius.full,..._corners.smoothCorners,backgroundColor:e.colors.border.secondary,marginBottom:e.spacing.sm},title:{textAlign:"center",fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.primary,marginBottom:e.spacing.sm},summaryWrap:{alignItems:"center",marginBottom:e.spacing.md},summary:{fontSize:e.typography.fontSize["2xl"],fontWeight:e.typography.fontWeight.bold,color:e.colors.primary,letterSpacing:e.typography.letterSpacing.wide},wheelsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",height:200,position:"relative",marginBottom:e.spacing.lg},selectionBand:{position:"absolute",left:0,right:0,top:40*CENTER_OFFSET,height:40,justifyContent:"space-between"},bandLine:{height:2*_reactNative.StyleSheet.hairlineWidth,backgroundColor:e.colors.primary,opacity:.85},bandLineBottom:{},separator:{fontSize:e.typography.fontSize["2xl"],fontWeight:e.typography.fontWeight.bold,color:e.colors.text.primary,paddingHorizontal:e.spacing.xs},spacer:{width:e.spacing.md},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:e.spacing.sm},footerBtn:{paddingHorizontal:e.spacing.lg}})};var _default=exports.default=TimePicker;