@coinbase/cds-mobile 8.53.1 → 8.55.0

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';

package/esm/dates/__stories__/Calendar.stories.js

@@ -0,0 +1,360 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { Accordion, AccordionItem } from '../../accordion';
+import { Button } from '../../buttons/Button';
+import { Chip } from '../../chips';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons';
+import { Box } from '../../layout';
+import { AnimatedCaret } from '../../motion/AnimatedCaret';
+import { Tray } from '../../overlays/tray/Tray';
+import { Calendar } from '../Calendar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const today = new Date(new Date().setHours(0, 0, 0, 0));
+const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2);
+
+// Generate all weekend date ranges for a wide range (10 years before and after)
+const getWeekendDates = centerDate => {
+  const weekends = [];
+
+  // Cover 10 years before and after to ensure all weekends are disabled
+  const startDate = new Date(centerDate.getFullYear() - 10, 0, 1);
+  const endDate = new Date(centerDate.getFullYear() + 10, 11, 31);
+
+  // Find the first Saturday in the range
+  const currentDate = new Date(startDate);
+  const dayOfWeek = currentDate.getDay();
+  const daysUntilSaturday = dayOfWeek === 6 ? 0 : (6 - dayOfWeek + 7) % 7;
+  currentDate.setDate(currentDate.getDate() + daysUntilSaturday);
+
+  // Iterate through weekends, jumping 7 days at a time
+  while (currentDate <= endDate) {
+    const saturday = new Date(currentDate);
+    const sunday = new Date(currentDate);
+    sunday.setDate(sunday.getDate() + 1);
+
+    // Add the weekend as a date range tuple
+    weekends.push([saturday, sunday]);
+
+    // Jump to next Saturday (7 days later)
+    currentDate.setDate(currentDate.getDate() + 7);
+  }
+  return weekends;
+};
+
+// Compute weekends once at module level
+const disabledWeekend = getWeekendDates(today);
+const DATE_ACCORDION_ITEM_KEY = 'date';
+const formatDateLabel = (date, locale) => {
+  if (!date) {
+    return 'Select date';
+  }
+  return date.toLocaleDateString(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+const CalendarTrayExample = /*#__PURE__*/memo(function CalendarTrayExample(_ref) {
+  let {
+    renderTrigger
+  } = _ref;
+  const {
+    locale
+  } = useLocale();
+  const [date, setDate] = useState(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
+  const calendarRef = useRef(null);
+  const handleOpenPicker = useCallback(() => {
+    setCalendarSelectedDate(date);
+    setShowPicker(true);
+  }, [date]);
+  const handleClosePicker = useCallback(() => {
+    setShowPicker(false);
+  }, []);
+  const handleCancelPicker = useCallback(() => {
+    setCalendarSelectedDate(null);
+    handleClosePicker();
+  }, [handleClosePicker]);
+  const handleCalendarDatePress = useCallback(selectedDate => {
+    setCalendarSelectedDate(selectedDate);
+  }, []);
+  const handleModalShow = useCallback(() => {
+    var _calendarRef$current;
+    (_calendarRef$current = calendarRef.current) == null || _calendarRef$current.focusInitialDate();
+  }, []);
+  const handleConfirmCalendar = useCallback(() => {
+    if (calendarSelectedDate) {
+      setDate(calendarSelectedDate);
+      handleClosePicker();
+    }
+  }, [calendarSelectedDate, handleClosePicker]);
+  const trayFooter = useMemo(() => /*#__PURE__*/_jsx(Box, {
+    paddingTop: 3,
+    paddingX: 3,
+    children: /*#__PURE__*/_jsx(Button, {
+      block: true,
+      compact: true,
+      accessibilityHint: !calendarSelectedDate ? 'Select a date first' : undefined,
+      accessibilityLabel: "Confirm date selection",
+      disabled: !calendarSelectedDate,
+      onPress: handleConfirmCalendar,
+      children: "Confirm"
+    })
+  }), [calendarSelectedDate, handleConfirmCalendar]);
+  const formattedLabel = formatDateLabel(date, locale);
+  const triggerProps = useMemo(() => ({
+    formattedLabel,
+    onOpen: handleOpenPicker,
+    showPicker
+  }), [formattedLabel, handleOpenPicker, showPicker]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderTrigger(triggerProps), showPicker && /*#__PURE__*/_jsx(Tray, {
+      accessibilityRole: "none",
+      footer: trayFooter,
+      handleBarAccessibilityLabel: "Close calendar",
+      handleBarVariant: "inside",
+      onCloseComplete: handleCancelPicker,
+      onOpenComplete: handleModalShow,
+      children: /*#__PURE__*/_jsx(Calendar, {
+        ref: calendarRef,
+        onPressDate: handleCalendarDatePress,
+        paddingBottom: 2,
+        paddingX: 2,
+        selectedDate: calendarSelectedDate
+      })
+    })]
+  });
+});
+const CalendarChipWithTrayExample = () => {
+  const renderTrigger = useCallback(_ref2 => {
+    let {
+      formattedLabel,
+      onOpen,
+      showPicker
+    } = _ref2;
+    return /*#__PURE__*/_jsx(Box, {
+      alignSelf: "flex-start",
+      children: /*#__PURE__*/_jsx(Chip, {
+        compact: true,
+        accessibilityLabel: formattedLabel,
+        end: /*#__PURE__*/_jsx(AnimatedCaret, {
+          active: true,
+          color: "fg",
+          rotate: showPicker ? 0 : 180,
+          size: "xs"
+        }),
+        onPress: onOpen,
+        children: formattedLabel
+      })
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(CalendarTrayExample, {
+    renderTrigger: renderTrigger
+  });
+};
+const CalendarChipWithTrayButtonExample = () => {
+  const renderTrigger = useCallback(_ref3 => {
+    let {
+      formattedLabel,
+      onOpen
+    } = _ref3;
+    return /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      accessibilityLabel: formattedLabel,
+      onPress: onOpen,
+      children: formattedLabel
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(CalendarTrayExample, {
+    renderTrigger: renderTrigger
+  });
+};
+const CalendarAccordionExample = () => {
+  const {
+    locale
+  } = useLocale();
+  const [date, setDate] = useState(null);
+  const [activeKey, setActiveKey] = useState(null);
+  const expanded = activeKey === DATE_ACCORDION_ITEM_KEY;
+  const calendarRef = useRef(null);
+  const handleDatePress = useCallback(selectedDate => {
+    setDate(selectedDate);
+    setActiveKey(null);
+  }, []);
+  useEffect(() => {
+    if (expanded) {
+      const id = requestAnimationFrame(() => {
+        var _calendarRef$current2;
+        (_calendarRef$current2 = calendarRef.current) == null || _calendarRef$current2.focusInitialDate();
+      });
+      return () => cancelAnimationFrame(id);
+    }
+  }, [expanded]);
+  return /*#__PURE__*/_jsx(Accordion, {
+    activeKey: activeKey,
+    setActiveKey: setActiveKey,
+    children: /*#__PURE__*/_jsx(AccordionItem, {
+      itemKey: DATE_ACCORDION_ITEM_KEY,
+      media: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "calendarEmpty"
+      }),
+      subtitle: formatDateLabel(date, locale),
+      title: "Date",
+      children: expanded ? /*#__PURE__*/_jsx(Calendar, {
+        ref: calendarRef,
+        onPressDate: handleDatePress,
+        selectedDate: date
+      }) : null
+    })
+  });
+};
+const CalendarScreen = () => {
+  const [basicDate, setBasicDate] = useState(today);
+  const [noSelectionDate, setNoSelectionDate] = useState(null);
+  const [seedDateDate, setSeedDateDate] = useState(null);
+  const [minMaxDate, setMinMaxDate] = useState(today);
+  const [futureDatesDate, setFutureDatesDate] = useState(null);
+  const [highlightedDate, setHighlightedDate] = useState(today);
+  const [disabledDatesDate, setDisabledDatesDate] = useState(null);
+  const [rangeDate, setRangeDate] = useState(today);
+  const [hiddenControlsDate, setHiddenControlsDate] = useState(today);
+  const highlightedRange = [yesterday, nextWeek];
+  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+  const {
+    color
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setBasicDate,
+        selectedDate: basicDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "No selection",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setNoSelectionDate,
+        selectedDate: noSelectionDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With seedDate (different month)",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setSeedDateDate,
+        seedDate: nextMonth15th,
+        selectedDate: seedDateDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With min/max dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Date is outside allowed range",
+        maxDate: nextMonth15th,
+        minDate: lastMonth15th,
+        onPressDate: setMinMaxDate,
+        selectedDate: minMaxDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Future dates only",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Past dates are not available",
+        minDate: today,
+        onPressDate: setFutureDatesDate,
+        selectedDate: futureDatesDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With highlighted dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        highlightedDates: [yesterday, today, nextWeek],
+        onPressDate: setHighlightedDate,
+        selectedDate: highlightedDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With disabled dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Weekends are not available",
+        disabledDates: disabledWeekend,
+        onPressDate: setDisabledDatesDate,
+        seedDate: today,
+        selectedDate: disabledDatesDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With date range",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        highlightedDates: [highlightedRange],
+        onPressDate: setRangeDate,
+        selectedDate: rangeDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Hidden controls",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        hideControls: true,
+        maxDate: lastDayOfMonth,
+        minDate: firstDayOfMonth,
+        onPressDate: setHiddenControlsDate,
+        selectedDate: hiddenControlsDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabled: true,
+        selectedDate: today
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Slot styling",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Date unavailable",
+        disabledDates: [twoDaysAgo],
+        highlightedDates: [tomorrow],
+        maxDate: nextMonth15th,
+        minDate: lastMonth15th,
+        onPressDate: setBasicDate,
+        selectedDate: basicDate,
+        styles: {
+          root: {
+            borderColor: color.bgLineHeavy,
+            borderRadius: 16,
+            borderWidth: 1,
+            padding: 12
+          },
+          header: {
+            backgroundColor: color.bgPositiveWash,
+            borderRadius: 16,
+            paddingBottom: 0
+          },
+          content: {
+            paddingVertical: 8
+          },
+          day: {
+            borderColor: color.bgNegative,
+            borderWidth: 1
+          },
+          navigation: {
+            borderColor: color.bgLineHeavy,
+            borderRadius: 8,
+            borderStyle: 'dashed',
+            borderWidth: 1
+          }
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With tray (Chip trigger)",
+      children: /*#__PURE__*/_jsx(CalendarChipWithTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With tray (Button trigger)",
+      children: /*#__PURE__*/_jsx(CalendarChipWithTrayButtonExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Accordion (select to collapse)",
+      children: /*#__PURE__*/_jsx(CalendarAccordionExample, {})
+    })]
+  });
+};
+export default CalendarScreen;