@webority-technologies/mobile 0.0.1

package/lib/module/components/DatePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DatePicker, default } from "./DatePicker.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,618 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DAY_MS = 24 * 60 * 60 * 1000;
+const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const toIso = date => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+};
+const addMonths = (date, delta) => new Date(date.getFullYear(), date.getMonth() + delta, 1);
+const daysBetween = (a, b) => {
+  const diffMs = startOfDay(b).getTime() - startOfDay(a).getTime();
+  return Math.round(diffMs / DAY_MS);
+};
+const buildMonthMatrix = (anchor, weekStartsOn) => {
+  const year = anchor.getFullYear();
+  const month = anchor.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const firstWeekday = firstOfMonth.getDay();
+  const offset = (firstWeekday - weekStartsOn + 7) % 7;
+  const gridStart = new Date(year, month, 1 - offset);
+  const cells = [];
+  for (let i = 0; i < 42; i += 1) {
+    const d = new Date(gridStart.getTime() + i * DAY_MS);
+    cells.push({
+      date: d,
+      inMonth: d.getMonth() === month,
+      iso: toIso(d)
+    });
+  }
+  return cells;
+};
+const weekdayLabels = (locale, weekStartsOn) => {
+  const fmt = new Intl.DateTimeFormat(locale, {
+    weekday: 'short'
+  });
+  const labels = [];
+  for (let i = 0; i < 7; i += 1) {
+    const day = (weekStartsOn + i) % 7;
+    const ref = new Date(1970, 0, 4 + day);
+    labels.push(fmt.format(ref));
+  }
+  return labels;
+};
+const formatMonthYear = (date, locale) => new Intl.DateTimeFormat(locale, {
+  month: 'long',
+  year: 'numeric'
+}).format(date);
+const formatRangePart = (date, locale) => new Intl.DateTimeFormat(locale, {
+  weekday: 'short',
+  day: 'numeric',
+  month: 'short'
+}).format(date);
+const formatLongDate = (date, locale) => new Intl.DateTimeFormat(locale, {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+}).format(date);
+const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    visible,
+    value,
+    onChange,
+    onClose,
+    minDate,
+    maxDate,
+    disabledDates,
+    locale = 'en-IN',
+    weekStartsOn = 0,
+    title = 'Select Date Range',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    maxRange,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const today = useMemo(() => startOfDay(new Date()), []);
+  const initialAnchor = value.start ? startOfDay(value.start) : today;
+  const [anchor, setAnchor] = useState(initialAnchor);
+  const [pendingStart, setPendingStart] = useState(value.start ? startOfDay(value.start) : null);
+  const [pendingEnd, setPendingEnd] = useState(value.end ? startOfDay(value.end) : null);
+
+  // Animations
+  const backdrop = useRef(new Animated.Value(0)).current;
+  const sheet = useRef(new Animated.Value(0)).current;
+  const monthSlide = useRef(new Animated.Value(0)).current;
+  const monthFade = useRef(new Animated.Value(1)).current;
+
+  // Sync external value -> pending state when it changes.
+  useEffect(() => {
+    if (value.start) {
+      const s = startOfDay(value.start);
+      setPendingStart(s);
+      setAnchor(s);
+    } else {
+      setPendingStart(null);
+    }
+    if (value.end) {
+      setPendingEnd(startOfDay(value.end));
+    } else {
+      setPendingEnd(null);
+    }
+  }, [value.start, value.end]);
+
+  // Modal open / close animation.
+  useEffect(() => {
+    if (visible) {
+      backdrop.setValue(0);
+      sheet.setValue(0);
+      Animated.parallel([Animated.timing(backdrop, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      }), Animated.spring(sheet, {
+        toValue: 1,
+        damping: theme.motion.spring.gentle.damping,
+        stiffness: theme.motion.spring.gentle.stiffness,
+        mass: theme.motion.spring.gentle.mass,
+        useNativeDriver: true
+      })]).start();
+    }
+  }, [visible, backdrop, sheet, theme.motion]);
+  const disabledIsoSet = useMemo(() => {
+    const set = new Set();
+    disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
+    return set;
+  }, [disabledDates]);
+  const minDay = useMemo(() => minDate ? startOfDay(minDate) : null, [minDate]);
+  const maxDay = useMemo(() => maxDate ? startOfDay(maxDate) : null, [maxDate]);
+  const isDisabled = useCallback(date => {
+    if (minDay && date.getTime() < minDay.getTime()) return true;
+    if (maxDay && date.getTime() > maxDay.getTime()) return true;
+    if (disabledIsoSet.has(toIso(date))) return true;
+    return false;
+  }, [minDay, maxDay, disabledIsoSet]);
+  const cells = useMemo(() => buildMonthMatrix(anchor, weekStartsOn), [anchor, weekStartsOn]);
+  const headerLabel = useMemo(() => formatMonthYear(anchor, locale), [anchor, locale]);
+  const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+  const animateMonthChange = useCallback(delta => {
+    triggerHaptic('impactLight');
+    const direction = delta > 0 ? 1 : -1;
+    const distance = 32;
+    Animated.sequence([Animated.parallel([Animated.timing(monthSlide, {
+      toValue: -direction * distance,
+      duration: 140,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 0,
+      duration: 140,
+      useNativeDriver: true
+    })]), Animated.timing(monthSlide, {
+      toValue: direction * distance,
+      duration: 0,
+      useNativeDriver: true
+    }), Animated.parallel([Animated.timing(monthSlide, {
+      toValue: 0,
+      duration: 160,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 1,
+      duration: 160,
+      useNativeDriver: true
+    })])]).start();
+    const next = addMonths(anchor, delta);
+    setAnchor(next);
+    AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
+  }, [anchor, locale, monthFade, monthSlide]);
+  const goPrev = useCallback(() => animateMonthChange(-1), [animateMonthChange]);
+  const goNext = useCallback(() => animateMonthChange(1), [animateMonthChange]);
+  const pressDay = useCallback(cell => {
+    if (isDisabled(cell.date)) return;
+    triggerHaptic('selection');
+    const target = cell.date;
+
+    // First tap: pick start. Or, when there's already a complete range, restart.
+    if (!pendingStart || pendingStart && pendingEnd) {
+      setPendingStart(target);
+      setPendingEnd(null);
+    } else {
+      // We have a start but no end.
+      if (target.getTime() < pendingStart.getTime()) {
+        // Earlier than start — reset so this becomes the new start.
+        setPendingStart(target);
+        setPendingEnd(null);
+      } else if (isSameDay(target, pendingStart)) {
+        // Tapping start again — single-day range.
+        setPendingEnd(target);
+      } else {
+        if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
+          // Reject ranges longer than maxRange — restart from the new tap.
+          triggerHaptic('notificationWarning');
+          setPendingStart(target);
+          setPendingEnd(null);
+          return;
+        }
+        setPendingEnd(target);
+      }
+    }
+    if (!cell.inMonth) {
+      setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
+    }
+  }, [isDisabled, pendingStart, pendingEnd, maxRange]);
+  const handleClose = useCallback(() => {
+    Animated.parallel([Animated.timing(backdrop, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(sheet, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    })]).start(() => {
+      onClose();
+    });
+  }, [backdrop, onClose, sheet, theme.motion.duration.fast]);
+  const handleCancel = useCallback(() => {
+    triggerHaptic('selection');
+    handleClose();
+  }, [handleClose]);
+  const handleConfirm = useCallback(() => {
+    if (!pendingStart || !pendingEnd) return;
+    triggerHaptic('notificationSuccess');
+    onChange({
+      start: pendingStart,
+      end: pendingEnd
+    });
+    handleClose();
+  }, [handleClose, onChange, pendingStart, pendingEnd]);
+  const sheetTranslate = sheet.interpolate({
+    inputRange: [0, 1],
+    outputRange: [320, 0]
+  });
+  const rangeHeader = useMemo(() => {
+    if (pendingStart && pendingEnd) {
+      return `${formatRangePart(pendingStart, locale)} — ${formatRangePart(pendingEnd, locale)}`;
+    }
+    if (pendingStart) {
+      return `${formatRangePart(pendingStart, locale)} — …`;
+    }
+    return '—';
+  }, [pendingStart, pendingEnd, locale]);
+  const isInRangeInclusive = useCallback(d => {
+    if (!pendingStart || !pendingEnd) return false;
+    const t = startOfDay(d).getTime();
+    return t >= pendingStart.getTime() && t <= pendingEnd.getTime();
+  }, [pendingStart, pendingEnd]);
+  const confirmDisabled = !pendingStart || !pendingEnd;
+  const calendar = /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, style],
+    ref: ref,
+    accessible: false,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.titleRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        accessibilityRole: "header",
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.subtitle,
+        accessibilityLiveRegion: "polite",
+        children: rangeHeader
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: goPrev,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        accessibilityRole: "button",
+        accessibilityLabel: "Previous month",
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          children: '‹'
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.headerLabelWrap, {
+          opacity: monthFade,
+          transform: [{
+            translateX: monthSlide
+          }]
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.headerLabel,
+          accessibilityLiveRegion: "polite",
+          children: headerLabel
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: goNext,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        accessibilityRole: "button",
+        accessibilityLabel: "Next month",
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          children: '›'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.weekdayRow,
+      children: weekdays.map((wd, idx) => /*#__PURE__*/_jsx(View, {
+        style: styles.weekdayCell,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.weekdayText,
+          children: wd
+        })
+      }, `${wd}-${idx}`))
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.grid, {
+        opacity: monthFade,
+        transform: [{
+          translateX: monthSlide
+        }]
+      }],
+      children: Array.from({
+        length: 6
+      }).map((_, row) => /*#__PURE__*/_jsx(View, {
+        style: styles.gridRow,
+        children: cells.slice(row * 7, row * 7 + 7).map(cell => {
+          const disabled = isDisabled(cell.date);
+          const isStart = pendingStart ? isSameDay(cell.date, pendingStart) : false;
+          const isEnd = pendingEnd ? isSameDay(cell.date, pendingEnd) : false;
+          const inRange = isInRangeInclusive(cell.date);
+          const isMidRange = inRange && !isStart && !isEnd;
+          const todayCell = isSameDay(cell.date, today);
+          const edgeColor = theme.colors.primary;
+          const midColor = theme.colors.primaryMuted;
+          const textColor = isStart || isEnd ? theme.colors.text.inverse : !cell.inMonth ? theme.colors.text.tertiary : disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+          const opacity = disabled ? 0.3 : !cell.inMonth ? 0.4 : 1;
+
+          // For middle days connect via a full-width bar background on the cell;
+          // edges connect on one side (right for start, left for end).
+          const showLeftBar = inRange && !!pendingStart && !!pendingEnd && (isEnd || isMidRange);
+          const showRightBar = inRange && !!pendingStart && !!pendingEnd && (isStart || isMidRange);
+          const a11ySuffix = isStart ? ', start of range' : isEnd ? ', end of range' : isMidRange ? ', in selected range' : '';
+          return /*#__PURE__*/_jsxs(Pressable, {
+            disabled: disabled,
+            onPress: () => pressDay(cell),
+            accessibilityRole: "button",
+            accessibilityLabel: `${formatLongDate(cell.date, locale)}${a11ySuffix}`,
+            accessibilityState: {
+              selected: isStart || isEnd,
+              disabled,
+              busy: isMidRange
+            },
+            style: styles.dayCell,
+            children: [showLeftBar ? /*#__PURE__*/_jsx(View, {
+              style: [styles.barLeft, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, showRightBar ? /*#__PURE__*/_jsx(View, {
+              style: [styles.barRight, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, /*#__PURE__*/_jsx(View, {
+              style: [styles.dayInner, {
+                backgroundColor: isStart || isEnd ? edgeColor : isMidRange ? midColor : 'transparent',
+                borderColor: todayCell && !(isStart || isEnd) ? edgeColor : 'transparent',
+                borderWidth: todayCell && !(isStart || isEnd) ? 1.5 : 0,
+                borderRadius: isMidRange ? theme.radius.none : theme.radius.full,
+                opacity
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.dayText, {
+                  color: textColor
+                }],
+                children: cell.date.getDate()
+              })
+            })]
+          }, cell.iso);
+        })
+      }, `r-${row}`))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: handleCancel,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed],
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.secondary
+          }],
+          children: cancelLabel
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: handleConfirm,
+        disabled: confirmDisabled,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerConfirm, {
+          backgroundColor: theme.colors.primary,
+          opacity: confirmDisabled ? 0.5 : 1
+        }, pressed && {
+          backgroundColor: theme.colors.primaryHover
+        }],
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: {
+          disabled: confirmDisabled
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.inverse
+          }],
+          children: confirmLabel
+        })
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.backdrop, {
+        opacity: backdrop,
+        backgroundColor: theme.colors.background.overlay
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleClose,
+        accessibilityLabel: "Dismiss"
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.sheetWrap, {
+        opacity: sheet,
+        transform: [{
+          translateY: sheetTranslate
+        }]
+      }],
+      accessibilityViewIsModal: true,
+      accessibilityRole: "none",
+      children: calendar
+    })]
+  });
+});
+DateRangePicker.displayName = 'DateRangePicker';
+const buildStyles = theme => {
+  const cardShadow = theme.shadows.lg;
+  return StyleSheet.create({
+    backdrop: {
+      ...StyleSheet.absoluteFillObject
+    },
+    sheetWrap: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingHorizontal: theme.spacing.md,
+      paddingBottom: theme.spacing.lg
+    },
+    card: {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.xl,
+      padding: theme.spacing.lg,
+      shadowColor: cardShadow.shadowColor,
+      shadowOffset: cardShadow.shadowOffset,
+      shadowOpacity: cardShadow.shadowOpacity,
+      shadowRadius: cardShadow.shadowRadius,
+      elevation: cardShadow.elevation
+    },
+    titleRow: {
+      marginBottom: theme.spacing.sm
+    },
+    title: {
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary
+    },
+    subtitle: {
+      marginTop: theme.spacing.xxs,
+      fontSize: theme.typography.fontSize.sm,
+      color: theme.colors.text.secondary
+    },
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md
+    },
+    navBtn: {
+      width: 36,
+      height: 36,
+      borderRadius: theme.radius.full,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary
+    },
+    navBtnPressed: {
+      backgroundColor: theme.colors.surface.pressed
+    },
+    navText: {
+      fontSize: 22,
+      lineHeight: 24,
+      color: theme.colors.text.primary,
+      fontWeight: theme.typography.fontWeight.semibold
+    },
+    headerLabelWrap: {
+      flex: 1,
+      alignItems: 'center'
+    },
+    headerLabel: {
+      fontSize: theme.typography.fontSize.base,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary
+    },
+    weekdayRow: {
+      flexDirection: 'row',
+      marginBottom: theme.spacing.xs
+    },
+    weekdayCell: {
+      flex: 1,
+      alignItems: 'center',
+      paddingVertical: theme.spacing.xs
+    },
+    weekdayText: {
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.medium,
+      color: theme.colors.text.tertiary,
+      letterSpacing: theme.typography.letterSpacing.wide
+    },
+    grid: {
+      // Animated wrapper.
+    },
+    gridRow: {
+      flexDirection: 'row'
+    },
+    dayCell: {
+      flex: 1,
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 2,
+      position: 'relative'
+    },
+    barLeft: {
+      position: 'absolute',
+      left: 0,
+      right: '50%',
+      top: '15%',
+      bottom: '15%'
+    },
+    barRight: {
+      position: 'absolute',
+      left: '50%',
+      right: 0,
+      top: '15%',
+      bottom: '15%'
+    },
+    dayInner: {
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    dayText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.medium
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      marginTop: theme.spacing.lg,
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.sm,
+      borderRadius: theme.radius.md,
+      minHeight: 40,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    footerCancel: {
+      backgroundColor: 'transparent'
+    },
+    footerConfirm: {
+      // backgroundColor set inline.
+    },
+    footerBtnPressed: {
+      opacity: 0.85
+    },
+    footerBtnText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.semibold
+    }
+  });
+};
+export { DateRangePicker };
+export default DateRangePicker;
+//# sourceMappingURL=DateRangePicker.js.map

package/lib/module/components/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DateRangePicker, default } from "./DateRangePicker.js";
+//# sourceMappingURL=index.js.map