@coinbase/cds-mobile 8.53.1 → 8.54.0

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAMjG,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,qSAmBf,YAAY,6CAsJhB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,KAAK,kBAAkB,EAA4C,MAAM,cAAc,CAAC;AAKjG,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGtE,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,yTAoBf,YAAY,6CA0JhB,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,7 +1,7 @@
 const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
@@ -10,7 +10,7 @@ import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
+export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
   let {
       name,
       active,
@@ -54,6 +54,7 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
   }), [minHeight]);
   const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
     background: backgroundValue,
@@ -83,5 +84,5 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
       style: sizingStyle
     })
   }));
-});
+}));
 IconButton.displayName = 'IconButton';

package/esm/controls/InputIconButton.js

@@ -1,7 +1,7 @@
 const _excluded = ["disableInheritFocusStyle", "testID", "variant", "accessibilityLabel", "accessibilityHint"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import { IconButton } from '../buttons/IconButton';
 import { Box } from '../layout/Box';
 import { TextInputFocusVariantContext } from './context';
@@ -14,7 +14,7 @@ export const variantTransformMap = {
   foregroundMuted: 'foregroundMuted',
   secondary: 'secondary'
 };
-export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref) {
+export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputIconButton(_ref, ref) {
   let {
       disableInheritFocusStyle = false,
       testID,
@@ -30,10 +30,11 @@ export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref)
     paddingStart: 1,
     testID: testID,
     children: /*#__PURE__*/_jsx(IconButton, _extends({
+      ref: ref,
       transparent: true,
       accessibilityHint: accessibilityHint != null ? accessibilityHint : props.name,
       accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : props.name,
       variant: disableInheritFocusStyle ? variant : transformedVariant
     }, props))
   });
-});
+}));

package/esm/dates/Calendar.js

@@ -0,0 +1,346 @@
+const _excluded = ["background", "borderRadius", "children"],
+  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "todayAccessibilityHint", "highlightedDateAccessibilityHint", "style", "styles"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { generateCalendarMonth } from '@coinbase/cds-common/dates/generateCalendarMonth';
+import { getMidnightDate } from '@coinbase/cds-common/dates/getMidnightDate';
+import { getTimesFromDatesAndRanges } from '@coinbase/cds-common/dates/getTimesFromDatesAndRanges';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useA11y } from '../hooks/useA11y';
+import { useScreenReaderStatus } from '../hooks/useScreenReaderStatus';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Tooltip } from '../overlays/tooltip/Tooltip';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CALENDAR_DAY_DIMENSION = 40;
+
+// These could be dynamically generated, but our Calendar and DatePicker aren't localized so there's no point
+const DAYS_OF_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%'
+  }
+});
+const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      background = 'transparent',
+      borderRadius = 1000,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    background: background,
+    borderRadius: borderRadius,
+    contentStyle: styles.pressable,
+    height: CALENDAR_DAY_DIMENSION,
+    width: CALENDAR_DAY_DIMENSION
+  }, props, {
+    children: children
+  }));
+}));
+CalendarPressable.displayName = 'CalendarPressable';
+const getDayAccessibilityLabel = function (date, locale) {
+  if (locale === void 0) {
+    locale = 'en-US';
+  }
+  return date.toLocaleDateString(locale, {
+    weekday: 'long',
+    day: 'numeric'
+  }) + " " + date.toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric'
+  });
+};
+const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    date,
+    active,
+    disabled,
+    highlighted,
+    isToday,
+    isCurrentMonth,
+    onPress,
+    disabledError,
+    todayAccessibilityHint,
+    highlightedDateAccessibilityHint,
+    style
+  } = _ref2;
+  const {
+    locale
+  } = useLocale();
+  const handlePress = useCallback(() => onPress == null ? void 0 : onPress(date), [date, onPress]);
+  const accessibilityLabel = useMemo(() => getDayAccessibilityLabel(date, locale), [date, locale]);
+  const accessibilityState = useMemo(() => ({
+    disabled: !!disabled,
+    selected: !!active
+  }), [disabled, active]);
+
+  // Period between phrases gives screen readers a clear pause (e.g. "Today. Date unavailable").
+  const accessibilityHint = useMemo(() => {
+    const hints = [isToday ? todayAccessibilityHint : undefined, highlighted ? highlightedDateAccessibilityHint : undefined, disabled ? disabledError : undefined].filter(Boolean).join('. ');
+    return hints || undefined;
+  }, [disabled, highlighted, isToday, todayAccessibilityHint, highlightedDateAccessibilityHint, disabledError]);
+  const isScreenReaderEnabled = useScreenReaderStatus();
+
+  // Expose disabled to the tooltip's accessibilityState so screen readers on both platforms
+  // announce the day button as disabled. We only set disabled when a screen reader is active:
+  // on some platforms a11y disabled is equivalent to the top-level disabled prop, so always
+  // setting it would block tooltip interactivity for users not using SRs.
+  const tooltipAccessibilityState = useMemo(() => ({
+    disabled: isScreenReaderEnabled
+  }), [isScreenReaderEnabled]);
+  if (!isCurrentMonth) {
+    return /*#__PURE__*/_jsx(Box, {
+      "aria-hidden": true,
+      height: CALENDAR_DAY_DIMENSION,
+      width: CALENDAR_DAY_DIMENSION
+    });
+  }
+  const dayButton = /*#__PURE__*/_jsx(CalendarPressable, {
+    ref: ref,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    accessibilityState: accessibilityState,
+    background: active && !disabled ? 'bgPrimary' : undefined,
+    borderColor: isToday ? 'bgPrimary' : undefined,
+    bordered: isToday,
+    disabled: disabled,
+    feedback: disabled ? 'none' : 'light',
+    onPress: handlePress,
+    style: style,
+    children: /*#__PURE__*/_jsx(Text, {
+      accessible: false,
+      align: "center",
+      color: active && !disabled ? 'fgInverse' : highlighted ? 'fgPrimary' : undefined,
+      font: "body",
+      children: date.getDate()
+    })
+  });
+  if (disabled) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: tooltipAccessibilityState,
+      content: disabledError,
+      children: dayButton
+    });
+  }
+  return dayButton;
+}));
+CalendarDay.displayName = 'CalendarDay';
+export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      selectedDate,
+      seedDate,
+      onPressDate,
+      disabled,
+      hideControls,
+      disabledDates,
+      highlightedDates,
+      minDate,
+      maxDate,
+      disabledDateError = 'Date unavailable',
+      nextArrowAccessibilityLabel = 'Go to next month',
+      previousArrowAccessibilityLabel = 'Go to previous month',
+      todayAccessibilityHint = 'Today',
+      highlightedDateAccessibilityHint = 'Highlighted',
+      style,
+      styles
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  const {
+    setA11yFocus,
+    announceForA11y
+  } = useA11y();
+  const today = useMemo(() => getMidnightDate(new Date()), []);
+  const todayTime = useMemo(() => today.getTime(), [today]);
+
+  // Determine default calendar seed date: use whichever comes first between maxDate and today
+  const defaultSeedDate = useMemo(() => {
+    if (selectedDate) {
+      return selectedDate;
+    }
+    if (seedDate) {
+      return seedDate;
+    }
+    if (maxDate) {
+      const maxDateTime = getMidnightDate(maxDate).getTime();
+      const todayTime = today.getTime();
+      return maxDateTime < todayTime ? maxDate : today;
+    }
+    return today;
+  }, [selectedDate, seedDate, maxDate, today]);
+  const [calendarSeedDate, setCalendarSeedDate] = useState(defaultSeedDate);
+  const initialFocusRef = useRef(null);
+  const calendarMonth = useMemo(() => generateCalendarMonth(calendarSeedDate), [calendarSeedDate]);
+  const selectedTime = useMemo(() => selectedDate ? getMidnightDate(selectedDate).getTime() : null, [selectedDate]);
+  const disabledTimes = useMemo(() => new Set(getTimesFromDatesAndRanges(disabledDates || [])), [disabledDates]);
+  const focusTargetTime = useMemo(() => selectedTime || (seedDate ? getMidnightDate(seedDate).getTime() : null) || todayTime, [selectedTime, seedDate, todayTime]);
+  useImperativeHandle(ref, () => ({
+    focusInitialDate: () => {
+      if (disabled || !initialFocusRef.current) {
+        return;
+      }
+      setA11yFocus(initialFocusRef);
+    }
+  }), [disabled, setA11yFocus]);
+  const minTime = useMemo(() => minDate && getMidnightDate(minDate).getTime(), [minDate]);
+  const maxTime = useMemo(() => maxDate && getMidnightDate(maxDate).getTime(), [maxDate]);
+  const highlightedTimes = useMemo(() => new Set(getTimesFromDatesAndRanges(highlightedDates || [])), [highlightedDates]);
+  const handleGoNextMonth = useCallback(() => {
+    setCalendarSeedDate(s => {
+      const next = new Date(s.getFullYear(), s.getMonth() + 1, 1);
+      announceForA11y(next.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric'
+      }));
+      return next;
+    });
+  }, [setCalendarSeedDate, announceForA11y]);
+  const handleGoPreviousMonth = useCallback(() => {
+    setCalendarSeedDate(s => {
+      const prev = new Date(s.getFullYear(), s.getMonth() - 1, 1);
+      announceForA11y(prev.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric'
+      }));
+      return prev;
+    });
+  }, [setCalendarSeedDate, announceForA11y]);
+  const disableGoNextMonth = useMemo(() => {
+    if (disabled) {
+      return true;
+    }
+    const firstDateOfNextMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth() + 1, 1);
+    return maxTime ? maxTime < firstDateOfNextMonth.getTime() : false;
+  }, [maxTime, calendarSeedDate, disabled]);
+  const disableGoPreviousMonth = useMemo(() => {
+    if (disabled) {
+      return true;
+    }
+    const lastDateOfPreviousMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth(), 0);
+    return minTime ? minTime > lastDateOfPreviousMonth.getTime() : false;
+  }, [minTime, calendarSeedDate, disabled]);
+
+  // Split calendar month into weeks
+  const calendarWeeks = useMemo(() => {
+    const weeks = [];
+    for (let i = 0; i < calendarMonth.length; i += DAYS_OF_WEEK.length) {
+      const weekDates = calendarMonth.slice(i, i + DAYS_OF_WEEK.length);
+      weeks.push(["week-" + calendarMonth[i].getTime(), weekDates]);
+    }
+    return weeks;
+  }, [calendarMonth]);
+  const monthYearLabel = useMemo(() => calendarSeedDate.toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric'
+  }), [calendarSeedDate]);
+  const previousArrowAccessibilityState = useMemo(() => ({
+    disabled: !!disableGoPreviousMonth
+  }), [disableGoPreviousMonth]);
+  const nextArrowAccessibilityState = useMemo(() => ({
+    disabled: !!disableGoNextMonth
+  }), [disableGoNextMonth]);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    opacity: disabled ? accessibleOpacityDisabled : undefined,
+    style: [style, styles == null ? void 0 : styles.root]
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingBottom: 2,
+      paddingStart: 1.5,
+      style: styles == null ? void 0 : styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        accessibilityRole: "header",
+        font: "headline",
+        style: styles == null ? void 0 : styles.title,
+        children: monthYearLabel
+      }), !hideControls && /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        style: styles == null ? void 0 : styles.navigation,
+        children: [/*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: previousArrowAccessibilityLabel,
+          accessibilityRole: "button",
+          accessibilityState: previousArrowAccessibilityState,
+          disabled: disableGoPreviousMonth,
+          feedback: "light",
+          onPress: disableGoPreviousMonth ? undefined : handleGoPreviousMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "backArrow",
+            size: "s"
+          })
+        }), /*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: nextArrowAccessibilityLabel,
+          accessibilityRole: "button",
+          accessibilityState: nextArrowAccessibilityState,
+          disabled: disableGoNextMonth,
+          feedback: "light",
+          onPress: disableGoNextMonth ? undefined : handleGoNextMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "forwardArrow",
+            size: "s"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      style: styles == null ? void 0 : styles.content,
+      children: [/*#__PURE__*/_jsx(HStack, {
+        "aria-hidden": true,
+        gap: 1,
+        justifyContent: "space-between",
+        paddingBottom: 1,
+        children: DAYS_OF_WEEK.map(day => /*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          height: CALENDAR_DAY_DIMENSION,
+          justifyContent: "center",
+          width: CALENDAR_DAY_DIMENSION,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            userSelect: "none",
+            children: day.charAt(0)
+          })
+        }, day))
+      }), calendarWeeks.map(_ref4 => {
+        let [weekId, week] = _ref4;
+        return /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          justifyContent: "space-between",
+          children: week.map(date => {
+            const time = date.getTime();
+            return /*#__PURE__*/_jsx(CalendarDay, {
+              ref: time === focusTargetTime ? initialFocusRef : undefined,
+              active: time === selectedTime,
+              date: date,
+              disabled: disabled || minTime !== undefined && minTime !== null && time < minTime || maxTime !== undefined && maxTime !== null && time > maxTime || disabledTimes.has(time),
+              disabledError: disabledDateError,
+              highlighted: highlightedTimes.has(time),
+              highlightedDateAccessibilityHint: highlightedDateAccessibilityHint,
+              isCurrentMonth: date.getMonth() === calendarSeedDate.getMonth(),
+              isToday: time === todayTime,
+              onPress: onPressDate,
+              style: styles == null ? void 0 : styles.day,
+              todayAccessibilityHint: todayAccessibilityHint
+            }, time);
+          })
+        }, weekId);
+      })]
+    })]
+  }));
+}));
+Calendar.displayName = 'Calendar';

package/esm/dates/DateInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "disabledDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
@@ -16,6 +16,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       onErrorDate,
       required,
       separator = '/',
+      disabledDates,
       minDate,
       maxDate,
       requiredError,
@@ -53,6 +54,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     onErrorDate,
     intlDateFormat,
     required,
+    disabledDates,
     minDate,
     maxDate,
     requiredError,

package/esm/dates/DatePicker.js

@@ -1,15 +1,24 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "dateInputStyle", "compact", "variant", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+const _excluded = ["date", "styles", "highlightedDates", "highlightedDateAccessibilityHint", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "disabledDates", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityHint", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "dateInputStyle", "compact", "variant", "confirmText", "confirmButtonAccessibilityHint", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
-import NativeDatePicker from 'react-native-date-picker';
+import { Button } from '../buttons/Button';
 import { InputIconButton } from '../controls/InputIconButton';
 import { Box, VStack } from '../layout';
+import { Tray } from '../overlays/tray/Tray';
+import { StickyFooter } from '../sticky-footer/StickyFooter';
+import { Calendar } from './Calendar';
 import { DateInput } from './DateInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       date,
+      styles,
+      highlightedDates,
+      highlightedDateAccessibilityHint,
+      nextArrowAccessibilityLabel,
+      previousArrowAccessibilityLabel,
+      disabledDates,
       onChangeDate,
       error,
       onErrorDate,
@@ -22,12 +31,17 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       invalidDateError = 'Please enter a valid date',
       disabledDateError = 'Date unavailable',
       label,
+      accessibilityHint = 'Enter date or select from calendar using the calendar button.',
       accessibilityLabel,
       accessibilityLabelledBy,
       calendarIconButtonAccessibilityLabel,
+      openCalendarAccessibilityLabel = 'Open calendar',
+      closeCalendarAccessibilityLabel = 'Close calendar without selecting a date',
       dateInputStyle,
       compact,
       variant,
+      confirmText = 'Confirm',
+      confirmButtonAccessibilityHint,
       helperText,
       width = '100%',
       onOpen,
@@ -37,61 +51,78 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       onChange
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const [showNativePicker, setShowNativePicker] = useState(false);
+  const [showPicker, setShowPicker] = useState(false);
+  const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
   const dateInputRef = useRef(null);
-  const today = useMemo(() => new Date(), []);
-
+  const calendarButtonRef = useRef(null);
+  const calendarRef = useRef(null);
+  const closedByConfirmRef = useRef(false);
   /**
    * Be careful to preserve the correct event orders
-   *   1. Selecting a date with the native picker:                onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose
-   *   2. Closing the native picker without selecting a date:     onOpen -> onCancel -> onClose
+   *   1. Selecting a date with the picker:                onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose
+   *   2. Closing the picker without selecting a date:     onOpen -> onCancel -> onClose
    *   3. Typing a date in a blank DateInput:                     onChange -> onChange -> ... -> onChangeDate -> onErrorDate
    *   4. Typing a date in a DateInput that already had a date:   onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate
    */
 
-  const handleOpenNativePicker = useCallback(() => {
+  const handleOpenPicker = useCallback(() => {
     onOpen == null || onOpen();
-    setShowNativePicker(true);
-  }, [onOpen]);
-  const handleCloseNativePicker = useCallback(() => {
-    onClose == null || onClose();
-    setShowNativePicker(false);
-  }, [onClose]);
-  const handleConfirmNativePicker = useCallback(date => {
-    var _dateInputRef$current;
+    setCalendarSelectedDate(date); // Initialize with current date
+    setShowPicker(true);
+  }, [onOpen, date]);
+  const handleConfirmPicker = useCallback(selectedDate => {
+    closedByConfirmRef.current = true;
     onConfirm == null || onConfirm();
-    onChangeDate(date);
-    if (error && error.type !== 'custom') onErrorDate(null);
-    handleCloseNativePicker();
-    (_dateInputRef$current = dateInputRef.current) == null || _dateInputRef$current.focus();
-  }, [onChangeDate, onConfirm, error, onErrorDate, handleCloseNativePicker]);
-  const handleCancelNativePicker = useCallback(() => {
-    onCancel == null || onCancel();
-    handleCloseNativePicker();
-  }, [onCancel, handleCloseNativePicker]);
+    onChangeDate(selectedDate);
+    if (error && error.type !== 'custom') {
+      onErrorDate(null);
+    }
+  }, [onChangeDate, onConfirm, error, onErrorDate]);
+  const handleTrayCloseComplete = useCallback(() => {
+    if (!closedByConfirmRef.current) {
+      onCancel == null || onCancel();
+      setCalendarSelectedDate(null);
+    }
+    onClose == null || onClose();
+    setShowPicker(false);
+    closedByConfirmRef.current = false;
+  }, [onCancel, onClose]);
+  const handleCalendarDatePress = useCallback(selectedDate => {
+    // Update local state, user must press confirm button
+    setCalendarSelectedDate(selectedDate);
+  }, []);
+  const handleModalShow = useCallback(() => {
+    var _calendarRef$current;
+    (_calendarRef$current = calendarRef.current) == null || _calendarRef$current.focusInitialDate();
+  }, []);
   const dateInputCalendarButton = useMemo(() => /*#__PURE__*/_jsx(VStack, {
+    accessible: true,
     paddingEnd: 0.5,
     children: /*#__PURE__*/_jsx(InputIconButton, {
+      ref: calendarButtonRef,
       disableInheritFocusStyle: true,
       transparent: true,
-      accessibilityLabel: calendarIconButtonAccessibilityLabel != null ? calendarIconButtonAccessibilityLabel : showNativePicker ? 'Close calendar' : 'Open calendar',
+      accessibilityLabel: calendarIconButtonAccessibilityLabel != null ? calendarIconButtonAccessibilityLabel : openCalendarAccessibilityLabel,
+      disabled: disabled,
       name: "calendarEmpty",
-      onPress: handleOpenNativePicker,
+      onPress: handleOpenPicker,
       variant: "secondary"
     })
-  }), [handleOpenNativePicker, showNativePicker, calendarIconButtonAccessibilityLabel]);
+  }), [handleOpenPicker, openCalendarAccessibilityLabel, calendarIconButtonAccessibilityLabel, disabled]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     width: width,
     children: [/*#__PURE__*/_jsx(DateInput, _extends({
       ref: dateInputRef
     }, props, {
+      accessibilityHint: accessibilityHint,
       accessibilityLabel: accessibilityLabel,
       accessibilityLabelledBy: accessibilityLabelledBy,
       compact: compact,
       date: date,
       disabled: disabled,
       disabledDateError: disabledDateError,
+      disabledDates: disabledDates,
       end: dateInputCalendarButton,
       error: error,
       helperText: helperText,
@@ -104,17 +135,63 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       onErrorDate: onErrorDate,
       required: required,
       requiredError: requiredError,
-      style: dateInputStyle,
+      style: [dateInputStyle, styles == null ? void 0 : styles.dateInput],
       variant: variant
-    })), showNativePicker && /*#__PURE__*/_jsx(NativeDatePicker, {
-      modal: true,
-      date: date || seedDate || today,
-      maximumDate: maxDate,
-      minimumDate: minDate,
-      mode: "date",
-      onCancel: handleCancelNativePicker,
-      onConfirm: handleConfirmNativePicker,
-      open: showNativePicker
+    })), showPicker && /*#__PURE__*/_jsx(Tray, {
+      accessibilityRole: "none",
+      footer: _ref2 => {
+        let {
+          handleClose
+        } = _ref2;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingTop: 3,
+          paddingX: 3,
+          role: "none",
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            compact: true,
+            accessibilityHint: confirmButtonAccessibilityHint,
+            disabled: disabled || !calendarSelectedDate,
+            onPress: () => {
+              if (calendarSelectedDate) {
+                handleConfirmPicker(calendarSelectedDate);
+                handleClose();
+              }
+            },
+            children: confirmText
+          })
+        });
+      },
+      handleBarAccessibilityLabel: closeCalendarAccessibilityLabel,
+      handleBarVariant: "inside",
+      onCloseComplete: handleTrayCloseComplete,
+      onOpenComplete: handleModalShow,
+      children: /*#__PURE__*/_jsx(Calendar, {
+        ref: calendarRef,
+        disabled: disabled,
+        disabledDateError: disabledDateError,
+        disabledDates: disabledDates,
+        highlightedDateAccessibilityHint: highlightedDateAccessibilityHint,
+        highlightedDates: highlightedDates,
+        maxDate: maxDate,
+        minDate: minDate,
+        nextArrowAccessibilityLabel: nextArrowAccessibilityLabel,
+        onPressDate: handleCalendarDatePress,
+        paddingBottom: 2,
+        paddingX: 3,
+        previousArrowAccessibilityLabel: previousArrowAccessibilityLabel,
+        seedDate: seedDate,
+        selectedDate: calendarSelectedDate,
+        styles: {
+          root: styles == null ? void 0 : styles.calendar,
+          header: styles == null ? void 0 : styles.calendarHeader,
+          title: styles == null ? void 0 : styles.calendarTitle,
+          navigation: styles == null ? void 0 : styles.calendarNavigation,
+          content: styles == null ? void 0 : styles.calendarContent,
+          day: styles == null ? void 0 : styles.calendarDay
+        }
+      })
     })]
   });
-}));
+}));
+DatePicker.displayName = 'DatePicker';