@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,794 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DateRangePicker = void 0;
+var _react = 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 _index2 = require("../../utils/index.js");
+var _corners = require("../../utils/corners.js");
+var _index3 = require("../PickerTrigger/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DateRangePicker — supports two usage modes:
+ *
+ *   1. Controlled-modal mode (pass `visible` + `onClose`): renders only the
+ *      modal; parent owns open/close state.
+ *   2. Trigger mode (omit `visible`): renders a built-in `PickerTrigger`
+ *      field that opens an internally-managed modal on tap. Confirm fires
+ *      `onChange?.(...)` and closes.
+ */
+
+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 cells = [];
+  for (let i = 0; i < 42; i += 1) {
+    // Calendar arithmetic, not `gridStart + i * DAY_MS` (a fixed-ms step): adding a fixed 24h
+    // across a DST transition shifts local time by an hour, which duplicates
+    // or skips a day in the grid. Invisible in IST, wrong everywhere that
+    // observes DST.
+    const d = new Date(year, month, 1 - offset + i);
+    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 = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    visible,
+    value,
+    onChange,
+    onClose,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
+    minDate,
+    maxDate,
+    disabledDates,
+    locale = 'en-IN',
+    weekStartsOn = 0,
+    title = 'Select Date Range',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    maxRange,
+    haptic,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
+    testID
+  } = props;
+  const isControlled = 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 calendar (only mounted once opened) gets a
+  // derived id to avoid two nodes sharing the same testID when both render.
+  const calendarTestID = isControlled ? testID : testID ? `${testID}-calendar` : undefined;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+
+  // Refreshed each time the picker opens: computed once at mount, an app left
+  // open overnight would keep highlighting yesterday.
+  const [today, setToday] = (0, _react.useState)(() => startOfDay(new Date()));
+  (0, _react.useEffect)(() => {
+    if (open) {
+      setToday(startOfDay(new Date()));
+    }
+  }, [open]);
+  const initialAnchor = value.start ? startOfDay(value.start) : today;
+  const [anchor, setAnchor] = (0, _react.useState)(initialAnchor);
+  const [pendingStart, setPendingStart] = (0, _react.useState)(value.start ? startOfDay(value.start) : null);
+  const [pendingEnd, setPendingEnd] = (0, _react.useState)(value.end ? startOfDay(value.end) : null);
+
+  // Animations
+  const backdrop = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheet = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).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 monthSlide = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+
+  // Sync external value -> pending state when it changes.
+  (0, _react.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. Backdrop opacity uses JS driver — see
+  // Modal.tsx for the Fabric reason. Sheet transform stays native.
+  (0, _react.useEffect)(() => {
+    let anim;
+    if (open) {
+      backdrop.setValue(0);
+      (0, _index.setNativeValue)(sheet, 0);
+      (0, _index.setNativeValue)(drag, 0);
+      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+        useNativeDriver: false
+      }), _reactNative.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
+      })]);
+      anim.start();
+    }
+    return () => anim?.stop();
+  }, [open, backdrop, sheet, drag, theme.motion]);
+  const disabledIsoSet = (0, _react.useMemo)(() => {
+    const set = new Set();
+    disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
+    return set;
+  }, [disabledDates]);
+  const minDay = (0, _react.useMemo)(() => minDate ? startOfDay(minDate) : null, [minDate]);
+  const maxDay = (0, _react.useMemo)(() => maxDate ? startOfDay(maxDate) : null, [maxDate]);
+  const isDisabled = (0, _react.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 = (0, _react.useMemo)(() => buildMonthMatrix(anchor, weekStartsOn), [anchor, weekStartsOn]);
+  const headerLabel = (0, _react.useMemo)(() => formatMonthYear(anchor, locale), [anchor, locale]);
+  const weekdays = (0, _react.useMemo)(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+  const animateMonthChange = (0, _react.useCallback)(delta => {
+    if (haptic !== false) {
+      (0, _index2.triggerHaptic)('impactLight');
+    }
+    const direction = delta > 0 ? 1 : -1;
+    const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.dateRangePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
+    _reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
+      toValue: -direction * distance,
+      duration: outDuration,
+      easing: _reactNative.Easing.out(_reactNative.Easing.quad),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(monthFade, {
+      toValue: 0,
+      duration: outDuration,
+      useNativeDriver: true
+    })]), _reactNative.Animated.timing(monthSlide, {
+      toValue: direction * distance,
+      duration: 0,
+      useNativeDriver: true
+    }), _reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
+      toValue: 0,
+      duration: inDuration,
+      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(monthFade, {
+      toValue: 1,
+      duration: inDuration,
+      useNativeDriver: true
+    })])]).start();
+    const next = addMonths(anchor, delta);
+    setAnchor(next);
+    _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
+  const goPrev = (0, _react.useCallback)(() => animateMonthChange(-1), [animateMonthChange]);
+  const goNext = (0, _react.useCallback)(() => animateMonthChange(1), [animateMonthChange]);
+  const pressDay = (0, _react.useCallback)(cell => {
+    if (isDisabled(cell.date)) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    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.
+          if (haptic !== false) {
+            (0, _index2.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, haptic]);
+  const handleCloseModal = (0, _react.useCallback)(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
+  const handleClose = (0, _react.useCallback)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(sheet, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => {
+      handleCloseModal();
+    });
+  }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+
+  // Drag the sheet down to dismiss from its handle / title row only: a pull
+  // on the calendar itself never closes it (the same as BottomSheet).
+  const {
+    handleGesture
+  } = (0, _useDragToDismiss.useDragToDismiss)({
+    drag,
+    travel: () => sheetHeight.current || 320,
+    onDismiss: handleClose
+  });
+  const handleCancel = (0, _react.useCallback)(() => {
+    if (haptic !== false) {
+      (0, _index2.triggerHaptic)('selection');
+    }
+    handleClose();
+  }, [handleClose, haptic]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    if (!pendingStart || !pendingEnd) {
+      return;
+    }
+    if (haptic !== false) {
+      (0, _index2.triggerHaptic)('notificationSuccess');
+    }
+    onChange?.({
+      start: pendingStart,
+      end: pendingEnd
+    });
+    handleClose();
+  }, [handleClose, onChange, pendingStart, pendingEnd, haptic]);
+  const sheetTranslate = sheet.interpolate({
+    inputRange: [0, 1],
+    outputRange: [320, 0]
+  });
+  const rangeHeader = (0, _react.useMemo)(() => {
+    if (pendingStart && pendingEnd) {
+      return `${formatRangePart(pendingStart, locale)} — ${formatRangePart(pendingEnd, locale)}`;
+    }
+    if (pendingStart) {
+      return `${formatRangePart(pendingStart, locale)} — …`;
+    }
+    return '—';
+  }, [pendingStart, pendingEnd, locale]);
+  const isInRangeInclusive = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.card, style, containerStyle],
+    ref: ref,
+    accessible: false,
+    testID: calendarTestID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: handleGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.grabArea,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.handle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.titleRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.title,
+            accessibilityRole: "header",
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.subtitle,
+            accessibilityLiveRegion: "polite",
+            children: rangeHeader
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: goPrev,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: "Previous month",
+        hitSlop: 8,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.navText,
+          children: '‹'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.headerLabelWrap, {
+          opacity: monthFade,
+          transform: [{
+            translateX: monthSlide
+          }]
+        }, headerLabelStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerLabel,
+          accessibilityLiveRegion: "polite",
+          children: headerLabel
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: goNext,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: "Next month",
+        hitSlop: 8,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.navText,
+          children: '›'
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.weekdayRow,
+      children: weekdays.map((wd, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.weekdayCell,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.weekdayText,
+          children: wd
+        })
+      }, `${wd}-${idx}`))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.grid, {
+        opacity: monthFade,
+        transform: [{
+          translateX: monthSlide
+        }]
+      }],
+      children: Array.from({
+        length: 6
+      }).map((_, row) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.barLeft, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, showRightBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.barRight, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
+                ..._corners.smoothCorners,
+                opacity
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.dayText, {
+                  color: textColor
+                }],
+                children: cell.date.getDate()
+              })
+            })]
+          }, cell.iso);
+        })
+      }, `r-${row}`))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: handleCancel,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.secondary
+          }],
+          children: cancelLabel
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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
+        }, footerButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: {
+          disabled: confirmDisabled
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.inverse
+          }],
+          children: confirmLabel
+        })
+      })]
+    })]
+  });
+  const triggerValueText = (0, _react.useMemo)(() => {
+    if (!value.start || !value.end) {
+      return '';
+    }
+    const range = {
+      start: value.start,
+      end: value.end
+    };
+    if (formatValue) {
+      return formatValue(range);
+    }
+    return `${range.start.toLocaleDateString()} – ${range.end.toLocaleDateString()}`;
+  }, [value.start, value.end, formatValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!isControlled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValueText,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle,
+      testID: testID
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      // Gesture handler needs its own root inside a native Modal, so the
+      // backdrop doubles as that root.
+      , {
+        collapsable: false,
+        style: [styles.backdrop, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: handleClose,
+          accessibilityLabel: "Dismiss"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [styles.sheetWrap, {
+            paddingBottom: Math.max(insets.bottom, theme.spacing.lg),
+            opacity: sheet,
+            transform: [{
+              translateY: _reactNative.Animated.add(sheetTranslate, drag)
+            }]
+          }],
+          onLayout: e => {
+            sheetHeight.current = e.nativeEvent.layout.height;
+          },
+          accessibilityViewIsModal: true,
+          accessibilityRole: "none",
+          children: calendar
+        })]
+      })
+    })]
+  });
+});
+DateRangePicker.displayName = 'DateRangePicker';
+const buildStyles = theme => {
+  const cardShadow = theme.shadows.lg;
+  return _reactNative.StyleSheet.create({
+    backdrop: {
+      ..._reactNative.StyleSheet.absoluteFill
+    },
+    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,
+      ..._corners.smoothCorners,
+      padding: theme.spacing.lg,
+      shadowColor: cardShadow.shadowColor,
+      shadowOffset: cardShadow.shadowOffset,
+      shadowOpacity: cardShadow.shadowOpacity,
+      shadowRadius: cardShadow.shadowRadius,
+      elevation: cardShadow.elevation
+    },
+    // Reaches up into the card's top padding so the grab target is taller
+    // than the 4 px pill.
+    grabArea: {
+      marginTop: -theme.spacing.lg,
+      paddingTop: theme.spacing.sm
+    },
+    handle: {
+      alignSelf: 'center',
+      width: 36,
+      height: 4,
+      borderRadius: theme.radius.full,
+      ..._corners.smoothCorners,
+      backgroundColor: theme.colors.border.secondary,
+      marginBottom: theme.spacing.sm
+    },
+    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: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      height: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      borderRadius: theme.radius.full,
+      ..._corners.smoothCorners,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary
+    },
+    navBtnPressed: {
+      backgroundColor: theme.colors.surface.pressed
+    },
+    navText: {
+      fontSize: theme.components.dateRangePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.dateRangePicker?.navTextLineHeight ?? 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',
+      // No horizontal padding so the connector bars on adjacent cells meet
+      // without a gap. Vertical breathing room comes from dayInner's height.
+      padding: 0,
+      position: 'relative'
+    },
+    // Bars sit BEHIND dayInner and bridge the start/end circles to mid-range
+    // cells. Their height mirrors dayInner (~90% of cell height) so the visual
+    // pill is one continuous shape across multiple cells.
+    barLeft: {
+      position: 'absolute',
+      left: 0,
+      right: '50%',
+      top: '5%',
+      bottom: '5%'
+    },
+    barRight: {
+      position: 'absolute',
+      left: '50%',
+      right: 0,
+      top: '5%',
+      bottom: '5%'
+    },
+    dayInner: {
+      width: '90%',
+      height: '90%',
+      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,
+      ..._corners.smoothCorners,
+      minHeight: theme.components.dateRangePicker?.footerButtonMinHeight ?? 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
+    }
+  });
+};
+var _default = exports.default = DateRangePicker;
+//# sourceMappingURL=DateRangePicker.js.map