@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/TimePicker/TimePicker.js

@@ -1,726 +1 @@
-"use strict";
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Animated, Easing, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useDragToDismiss } from "../../hooks/useDragToDismiss.js";
-import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import Button from "../Button/Button.js";
-import { PickerTrigger } from "../PickerTrigger/PickerTrigger.js";
-
-/**
- * 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.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 = useRef(null);
-  const scrollY = useRef(createAnimatedValue(selectedIndex * ITEM_HEIGHT)).current;
-  const lastIndexRef = useRef(selectedIndex);
-  const lastHapticAtRef = useRef(0);
-
-  // Keep list aligned when selectedIndex changes externally (e.g. value prop, format flip).
-  useEffect(() => {
-    if (lastIndexRef.current !== selectedIndex) {
-      lastIndexRef.current = selectedIndex;
-      const offset = selectedIndex * ITEM_HEIGHT;
-      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 = useMemo(() => 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 = resolveHaptic(haptic, 'selection');
-          if (h) {
-            triggerHaptic(h);
-          }
-          lastHapticAtRef.current = now;
-        }
-        lastIndexRef.current = idx;
-      }
-    }
-  }), [scrollY, data.length, haptic, hapticDebounceMs]);
-  const onMomentumScrollEnd = 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 = 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 = useCallback(({
-    item,
-    index
-  }) => {
-    const distance = Animated.subtract(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__*/_jsx(Animated.View, {
-      style: [styles.wheelItem, {
-        opacity,
-        transform: [{
-          scale
-        }]
-      }],
-      accessible: false,
-      importantForAccessibility: "no",
-      children: /*#__PURE__*/_jsx(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 = useCallback((item, index) => `${kind}-${String(item)}-${index}`, [kind]);
-  const getItemLayout = useCallback((_data, index) => ({
-    length: ITEM_HEIGHT,
-    offset: ITEM_HEIGHT * index,
-    index
-  }), []);
-  const currentValueText = formatItem(data[selectedIndex] ?? '');
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.wheelColumn,
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      style: styles.wheelA11yLayer,
-      accessible: true,
-      accessibilityRole: "adjustable",
-      accessibilityLabel: label,
-      accessibilityValue: {
-        text: currentValueText
-      },
-      accessibilityActions: [{
-        name: 'increment'
-      }, {
-        name: 'decrement'
-      }],
-      onAccessibilityAction: handleA11yAction
-    }), /*#__PURE__*/_jsx(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] = 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 = useTheme();
-  const insets = useSafeAreaInsets();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const opacity = useRef(createAnimatedValue(0)).current;
-  const translateY = useRef(createAnimatedValue(40)).current;
-  // Live drag offset for drag-to-dismiss; the sheet's measured height is how far it travels.
-  const drag = useRef(createAnimatedValue(0)).current;
-  const sheetHeight = useRef(0);
-  const finalizeClose = 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 = useCallback(() => {
-    Animated.parallel([Animated.timing(opacity, {
-      toValue: 0,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate),
-      useNativeDriver: false
-    }), Animated.timing(translateY, {
-      toValue: 40,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate),
-      useNativeDriver: true
-    })]).start(() => finalizeClose());
-  }, [finalizeClose, opacity, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
-  const {
-    handleGesture
-  } = useDragToDismiss({
-    drag,
-    travel: () => sheetHeight.current || 320,
-    onDismiss: handleCloseModal
-  });
-  const hours = useMemo(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
-  const minutes = useMemo(() => range(0, 59, minuteStep), [minuteStep]);
-  const periods = useMemo(() => ['AM', 'PM'], []);
-  const initial = 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] = useState(() => {
-    const idx = hours.indexOf(initial.displayHour);
-    return idx >= 0 ? idx : 0;
-  });
-  const [minuteIndex, setMinuteIndex] = useState(() => {
-    const idx = minutes.indexOf(initial.minute);
-    return idx >= 0 ? idx : 0;
-  });
-  const [periodIndex, setPeriodIndex] = 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.
-  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.
-
-  useEffect(() => {
-    let anim;
-    if (open) {
-      anim = Animated.parallel([
-      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: theme.motion.duration.normal,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: false
-      }), 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);
-      setNativeValue(translateY, 40);
-      setNativeValue(drag, 0);
-    }
-    return () => anim?.stop();
-  }, [open, opacity, translateY, drag, theme.motion]);
-  const announce = useCallback(msg => {
-    if (Platform.OS === 'ios' || Platform.OS === 'android') {
-      AccessibilityInfo.announceForAccessibility(msg);
-    }
-  }, []);
-  const handleHourIndex = useCallback(idx => {
-    setHourIndex(idx);
-    announce(`Hour ${hours[idx]}`);
-  }, [hours, announce]);
-  const handleMinuteIndex = useCallback(idx => {
-    setMinuteIndex(idx);
-    announce(`${minutes[idx]} minutes`);
-  }, [minutes, announce]);
-  const handlePeriodIndex = useCallback(idx => {
-    setPeriodIndex(idx);
-    announce(periods[idx] ?? '');
-  }, [periods, announce]);
-  const handleCancel = useCallback(() => {
-    if (haptic !== false) {
-      triggerHaptic('selection');
-    }
-    handleCloseModal();
-  }, [handleCloseModal, haptic]);
-  const handleConfirm = 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) {
-      triggerHaptic('notificationSuccess');
-    }
-    onChange?.({
-      hour: hour24,
-      minute
-    });
-    handleCloseModal();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, haptic]);
-  const summary = 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 = useCallback(item => pad2(Number(item)), []);
-  const formatMinuteItem = useCallback(item => pad2(Number(item)), []);
-  const formatPeriodItem = useCallback(item => String(item), []);
-  const defaultFormatValue = 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__*/_jsx(Modal, {
-    visible: open,
-    transparent: true,
-    statusBarTranslucent: true,
-    navigationBarTranslucent: true,
-    animationType: "none",
-    onRequestClose: handleCloseModal,
-    testID: modalTestID,
-    children: /*#__PURE__*/_jsxs(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__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleCloseModal,
-        accessibilityLabel: "Close time picker",
-        accessibilityRole: "button"
-      }), /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.sheet, {
-          paddingBottom: Math.max(insets.bottom, theme.spacing.lg),
-          transform: [{
-            translateY: Animated.add(translateY, drag)
-          }]
-        }, style, containerStyle],
-        onLayout: e => {
-          sheetHeight.current = e.nativeEvent.layout.height;
-        },
-        accessibilityViewIsModal: true,
-        accessible: true,
-        accessibilityRole: "none",
-        accessibilityLabel: title,
-        children: [/*#__PURE__*/_jsx(GestureDetector, {
-          gesture: handleGesture,
-          children: /*#__PURE__*/_jsxs(View, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.handle
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.title, headerLabelStyle],
-              accessibilityRole: "header",
-              children: title
-            })]
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.summaryWrap,
-          accessibilityLiveRegion: "polite",
-          accessibilityLabel: `Selected ${summary}`,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.summary,
-            children: summary
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.wheelsRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            pointerEvents: "none",
-            style: styles.selectionBand,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.bandLine
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.bandLine, styles.bandLineBottom]
-            })]
-          }), /*#__PURE__*/_jsx(Wheel, {
-            kind: "hour",
-            label: "Hour",
-            data: hours,
-            selectedIndex: hourIndex,
-            onIndexChange: handleHourIndex,
-            formatItem: formatHourItem,
-            theme: theme,
-            haptic: haptic,
-            testID: "time-picker-hour"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.separator,
-            children: ":"
-          }), /*#__PURE__*/_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__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.spacer
-            }), /*#__PURE__*/_jsx(Wheel, {
-              kind: "period",
-              label: "Period",
-              data: periods,
-              selectedIndex: periodIndex,
-              onIndexChange: handlePeriodIndex,
-              formatItem: formatPeriodItem,
-              theme: theme,
-              haptic: haptic,
-              testID: "time-picker-period"
-            })]
-          }) : null]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.footer,
-          children: [/*#__PURE__*/_jsx(Button, {
-            title: cancelLabel,
-            haptic: false,
-            variant: "ghost",
-            tone: "neutral",
-            onPress: handleCancel,
-            style: [styles.footerBtn, footerButtonStyle],
-            accessibilityHint: "Dismiss without changes",
-            testID: "time-picker-cancel"
-          }), /*#__PURE__*/_jsx(Button, {
-            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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(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]
-  });
-};
-const styles = 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: {
-    ...StyleSheet.absoluteFill,
-    zIndex: 2
-  }
-});
-const buildStyles = theme => {
-  const sheetShadow = theme.shadows.xl;
-  return 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,
-      ...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,
-      ...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: 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
-    }
-  });
-};
-export { TimePicker };
-export default TimePicker;
-//# sourceMappingURL=TimePicker.js.map
+import e,{useCallback as t,useEffect as i,useMemo as n,useRef as o,useState as r}from"react";import{AccessibilityInfo as a,Animated as s,Easing as l,Modal as c,Platform as d,Pressable as m,StyleSheet as u,Text as p,View as h}from"react-native";import{GestureDetector as g,GestureHandlerRootView as y}from"react-native-gesture-handler";import{useSafeAreaInsets as f}from"react-native-safe-area-context";import{useDragToDismiss as b}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue as x,setNativeValue as v,useTheme as w}from"../../theme/index.js";import{smoothCorners as I}from"../../utils/corners.js";import{resolveHaptic as S,triggerHaptic as M}from"../../utils/hapticUtils.js";import C from"../Button/Button.js";import{PickerTrigger as D}from"../PickerTrigger/PickerTrigger.js";import{ToastHost as k}from"../Toast/ToastProvider.js";import{jsx as L,jsxs as H,Fragment as R}from"react/jsx-runtime";const A=40,B=Math.floor(2.5),range=(e,t,i=1)=>{const n=[];for(let o=e;o<=t;o+=i)n.push(o);return n},pad2=e=>e.toString().padStart(2,"0"),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:r,data:a,selectedIndex:l,onIndexChange:c,formatItem:d,theme:m,haptic:u,testID:g})=>{const y=o(null),f=o(x(l*A)).current,b=o(l),w=o(0);i(()=>{if(b.current!==l){b.current=l;const e=l*A;v(f,e),requestAnimationFrame(()=>{y.current?.scrollToOffset({offset:e,animated:!1})})}},[l,f]);const I=m.components.timePicker?.hapticDebounceMs??35,C=n(()=>s.event([{nativeEvent:{contentOffset:{y:f}}}],{useNativeDriver:!0,listener:e=>{const t=e.nativeEvent.contentOffset.y,i=Math.round(t/A);if(i!==b.current&&i>=0&&i<a.length){const e=Date.now();if(e-w.current>=I){const t=S(u,"selection");t&&M(t),w.current=e}b.current=i}}}),[f,a.length,u,I]),D=t(e=>{const t=e.nativeEvent.contentOffset.y,i=Math.max(0,Math.min(a.length-1,Math.round(t/A)));i!==l&&c(i)},[a.length,c,l]),k=t(e=>{const t=e.nativeEvent.actionName;if("increment"===t){const e=Math.min(a.length-1,l+1);e!==l&&c(e)}else if("decrement"===t){const e=Math.max(0,l-1);e!==l&&c(e)}},[a.length,c,l]),R=t(({item:e,index:t})=>{const i=s.subtract(s.divide(f,A),t),n=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"}),r=t===l;return L(s.View,{style:[T.wheelItem,{opacity:n,transform:[{scale:o}]}],accessible:!1,importantForAccessibility:"no",children:L(p,{style:[{fontSize:m.typography.fontSize.xl,color:r?m.colors.text.primary:m.colors.text.secondary,fontWeight:r?m.typography.fontWeight.semibold:m.typography.fontWeight.medium,letterSpacing:m.typography.letterSpacing.normal}],children:d(e)})})},[f,l,m,d]),$=t((t,i)=>`${e}-${String(t)}-${i}`,[e]),j=t((e,t)=>({length:A,offset:A*t,index:t}),[]),z=d(a[l]??"");return H(h,{style:T.wheelColumn,testID:g,children:[L(h,{pointerEvents:"none",style:T.wheelA11yLayer,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:r,accessibilityValue:{text:z},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:k}),L(s.FlatList,{ref:y,data:a,keyExtractor:$,renderItem:R,getItemLayout:j,showsVerticalScrollIndicator:!1,snapToInterval:A,snapToAlignment:"start",decelerationRate:"fast",bounces:!1,scrollEventThrottle:16,onScroll:C,onMomentumScrollEnd:D,contentContainerStyle:{paddingVertical:A*B},initialScrollIndex:l,style:T.wheelList,importantForAccessibility:"no-hide-descendants"})]})},TimePicker=e=>{const{visible:I,value:S,onChange:A,onClose:B,format:T="12h",minuteStep:$=1,title:j="Select Time",confirmLabel:z="Confirm",cancelLabel:P="Cancel",testID:F,style:N,containerStyle:O,headerLabelStyle:W,footerButtonStyle:V,label:E,placeholder:q,helperText:G,error:U,required:Y,disabled:J,size:K,variant:Q,clearable:X,onClear:Z,formatValue:_,triggerStyle:ee,haptic:te}=e,ie=void 0!==e.visible,[ne,oe]=r(!1),re=ie?I:ne,ae=ie?F:F?`${F}-modal`:void 0,se=w(),le=f(),ce=n(()=>buildStyles(se),[se]),de=o(x(0)).current,me=o(x(40)).current,ue=o(x(0)).current,pe=o(0),he=t(()=>{ie?B?.():oe(!1)},[ie,B]),ge=t(()=>{s.parallel([s.timing(de,{toValue:0,duration:se.motion.duration.fast,easing:l.bezier(...se.motion.easing.accelerate),useNativeDriver:!1}),s.timing(me,{toValue:40,duration:se.motion.duration.fast,easing:l.bezier(...se.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>he())},[he,de,me,se.motion.duration.fast,se.motion.easing.accelerate]),{handleGesture:ye}=b({drag:ue,travel:()=>pe.current||320,onDismiss:ge}),fe=n(()=>"24h"===T?range(0,23):range(1,12),[T]),be=n(()=>range(0,59,$),[$]),xe=n(()=>["AM","PM"],[]),ve=n(()=>{const e=S&&Number.isFinite(S.hour)?S.hour:(new Date).getHours(),t=S&&Number.isFinite(S.minute)?S.minute:(new Date).getMinutes(),i=clampMinuteToStep(t,$),{displayHour:n,period:o}=from24h(e,T);return{displayHour:n,minute:i,period:o,hour24:e}},[S,T,$]),[we,Ie]=r(()=>{const e=fe.indexOf(ve.displayHour);return e>=0?e:0}),[Se,Me]=r(()=>{const e=be.indexOf(ve.minute);return e>=0?e:0}),[Ce,De]=r(()=>"PM"===ve.period?1:0);i(()=>{if(!re)return;const e=S&&Number.isFinite(S.hour)?S.hour:(new Date).getHours(),t=S&&Number.isFinite(S.minute)?S.minute:(new Date).getMinutes(),i=clampMinuteToStep(t,$),{displayHour:n,period:o}=from24h(e,T),r=fe.indexOf(n);Ie(r>=0?r:0);const a=be.indexOf(i);Me(a>=0?a:0),De("PM"===o?1:0)},[re,S,T,$,fe,be]),i(()=>{let e;return re?(e=s.parallel([s.timing(de,{toValue:1,duration:se.motion.duration.normal,easing:l.out(l.cubic),useNativeDriver:!1}),s.spring(me,{toValue:0,damping:se.motion.spring.snappy.damping,stiffness:se.motion.spring.snappy.stiffness,mass:se.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()):(de.setValue(0),v(me,40),v(ue,0)),()=>e?.stop()},[re,de,me,ue,se.motion]);const ke=t(e=>{"ios"!==d.OS&&"android"!==d.OS||a.announceForAccessibility(e)},[]),Le=t(e=>{Ie(e),ke(`Hour ${fe[e]}`)},[fe,ke]),He=t(e=>{Me(e),ke(`${be[e]} minutes`)},[be,ke]),Re=t(e=>{De(e),ke(xe[e]??"")},[xe,ke]),Ae=t(()=>{!1!==te&&M("selection"),ge()},[ge,te]),Be=t(()=>{const e=((e,t,i)=>"24h"===i?e:"AM"===t?12===e?0:e:12===e?12:e+12)(fe[we]??0,xe[Ce]??"AM",T),t=be[Se]??0;!1!==te&&M("notificationSuccess"),A?.({hour:e,minute:t}),ge()},[fe,we,xe,Ce,be,Se,T,A,ge,te]),Te=n(()=>{const e=fe[we]??0,t=be[Se]??0;if("24h"===T)return`${pad2(e)}:${pad2(t)}`;const i=xe[Ce]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[fe,we,be,Se,xe,Ce,T]),$e=t(e=>pad2(Number(e)),[]),je=t(e=>pad2(Number(e)),[]),ze=t(e=>String(e),[]),Pe=t(e=>{if("24h"===T)return`${pad2(e.hour)}:${pad2(e.minute)}`;const{displayHour:t,period:i}=from24h(e.hour,"12h");return`${t}:${pad2(e.minute)} ${i}`},[T]),Fe=!ie&&S&&Number.isFinite(S.hour)&&Number.isFinite(S.minute)?(_??Pe)(S):void 0,Ne=L(c,{visible:re,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:ge,testID:ae,children:H(y,{collapsable:!1,style:ce.backdrop,children:[L(m,{style:u.absoluteFill,onPress:ge,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),H(s.View,{style:[ce.sheet,{paddingBottom:Math.max(le.bottom,se.spacing.lg),transform:[{translateY:s.add(me,ue)}]},N,O],onLayout:e=>{pe.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:j,children:[L(g,{gesture:ye,children:H(h,{children:[L(h,{style:ce.handle}),L(p,{style:[ce.title,W],accessibilityRole:"header",children:j})]})}),L(h,{style:ce.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${Te}`,children:L(p,{style:ce.summary,children:Te})}),H(h,{style:ce.wheelsRow,children:[H(h,{pointerEvents:"none",style:ce.selectionBand,children:[L(h,{style:ce.bandLine}),L(h,{style:[ce.bandLine,ce.bandLineBottom]})]}),L(Wheel,{kind:"hour",label:"Hour",data:fe,selectedIndex:we,onIndexChange:Le,formatItem:$e,theme:se,haptic:te,testID:"time-picker-hour"}),L(p,{style:ce.separator,children:":"}),L(Wheel,{kind:"minute",label:"Minute",data:be,selectedIndex:Se,onIndexChange:He,formatItem:je,theme:se,haptic:te,testID:"time-picker-minute"}),"12h"===T?H(R,{children:[L(h,{style:ce.spacer}),L(Wheel,{kind:"period",label:"Period",data:xe,selectedIndex:Ce,onIndexChange:Re,formatItem:ze,theme:se,haptic:te,testID:"time-picker-period"})]}):null]}),H(h,{style:ce.footer,children:[L(C,{title:P,haptic:!1,variant:"ghost",tone:"neutral",onPress:Ae,style:[ce.footerBtn,V],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),L(C,{title:z,variant:"solid",tone:"primary",haptic:!1,onPress:Be,style:[ce.footerBtn,V],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]}),L(k,{})]})});return ie?Ne:H(R,{children:[L(D,{label:E,placeholder:q,helperText:G,error:U,required:Y,disabled:J,size:K,variant:Q,clearable:X,onClear:Z,value:Fe,onPress:()=>oe(!0),triggerStyle:ee,testID:F}),Ne]})},T=u.create({wheelColumn:{width:64,height:200,overflow:"hidden"},wheelList:{flexGrow:0,height:200},wheelItem:{height:A,alignItems:"center",justifyContent:"center"},wheelA11yLayer:{...u.absoluteFill,zIndex:2}}),buildStyles=e=>{const t=e.shadows.xl;return u.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,...I,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,...I,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:A*B,height:A,justifyContent:"space-between"},bandLine:{height:2*u.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}})};export{TimePicker};export default TimePicker;