@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,551 @@
+"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 _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _Button = _interopRequireDefault(require("../Button/Button.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); }
+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,
+  testID
+}) => {
+  const listRef = (0, _react.useRef)(null);
+  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(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;
+      scrollY.setValue(offset);
+      // Defer to next frame so FlatList has measured.
+      requestAnimationFrame(() => {
+        listRef.current?.scrollToOffset({
+          offset,
+          animated: false
+        });
+      });
+    }
+  }, [selectedIndex, scrollY]);
+  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 >= HAPTIC_DEBOUNCE_MS) {
+          (0, _hapticUtils.triggerHaptic)('selection');
+          lastHapticAtRef.current = now;
+        }
+        lastIndexRef.current = idx;
+      }
+    }
+  }), [scrollY, data.length]);
+  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, {
+      style: styles.wheelA11yLayer,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: currentValueText
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleA11yAction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = ({
+  visible,
+  value,
+  onSelect,
+  onClose,
+  format = '12h',
+  minuteStep = 1,
+  title = 'Select Time',
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  testID,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  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 visible toggle / value change / format / step.
+  (0, _react.useEffect)(() => {
+    if (!visible) 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);
+  }, [visible, value, format, minuteStep, hours, minutes]);
+
+  // Sheet animations.
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(40)).current;
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+        useNativeDriver: true
+      }), _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
+      })]).start();
+    } else {
+      opacity.setValue(0);
+      translateY.setValue(40);
+    }
+  }, [visible, opacity, translateY, 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)(() => {
+    (0, _hapticUtils.triggerHaptic)('selection');
+    onClose();
+  }, [onClose]);
+  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;
+    (0, _hapticUtils.triggerHaptic)('notificationSuccess');
+    onSelect({
+      hour: hour24,
+      minute
+    });
+    onClose();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, onClose]);
+  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), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: onClose,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [styles.backdrop, {
+        opacity
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: onClose,
+        accessibilityLabel: "Close time picker",
+        accessibilityRole: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        style: [styles.sheet, {
+          transform: [{
+            translateY
+          }]
+        }, style],
+        accessibilityViewIsModal: true,
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: title,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.handle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.title,
+          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,
+            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,
+            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,
+              testID: "time-picker-period"
+            })]
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            title: cancelLabel,
+            variant: "ghost",
+            tone: "neutral",
+            onPress: handleCancel,
+            style: styles.footerBtn,
+            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,
+            accessibilityHint: "Confirm selected time",
+            testID: "time-picker-confirm"
+          })]
+        })]
+      })]
+    })
+  });
+};
+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.absoluteFillObject,
+    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,
+      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: 36,
+      height: 4,
+      borderRadius: theme.radius.full,
+      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',
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      flex: 1
+    }
+  });
+};
+var _default = exports.default = TimePicker;
+//# sourceMappingURL=TimePicker.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.TimePicker;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.default;
+  }
+});
+var _TimePicker = _interopRequireWildcard(require("./TimePicker.js"));
+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); }
+//# sourceMappingURL=index.js.map