feat(mobile): add Calendar component and replace native date picker

New Features:
- Add standalone Calendar component for date selection
- Support min/max date constraints with automatic navigation
- Support disabled dates and highlighted date ranges
- Comprehensive accessibility with screen reader support

Enhancements:
- Integrate Calendar into DatePicker with confirmation flow
- Add triggerDisabled prop to Tooltip for better a11y around "disabled" triggers
- Add calendarStyle, highlightedDates, and seedDate props to DatePicker
- Add custom a11y labels for Calendar navigation

Dependencies:
- Remove react-native-date-picker (no longer needed)

Tests:
- Add Storybook for Calendar, including DatePicker, standalone, and custom triggers
- Add unit tests for Calendar, DatePicker, Tooltip

Documentation:
- Added mobile docs for Calendar
- Updated mobile docs for DatePicker and Tooltip
- Removed references to react-native-date-picker in mobile docs for DatePicker

Author: sverg-cb

apps/docs/docs/components/other/Calendar/_mobileExamples.mdx

@@ -0,0 +1,334 @@
+### Basic usage
+
+A basic Calendar with date selection functionality. The Calendar component is used within the DatePicker and can also be used independently.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
+}
+```
+
+### No selection
+
+A Calendar without an initially selected date.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} />;
+}
+```
+
+### Seeding the calendar
+
+The `seedDate` prop controls which month the Calendar opens to when there is no selected date value. Defaults to today when undefined.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const seedDate = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+
+  return <Calendar selectedDate={selectedDate} onPressDate={setSelectedDate} seedDate={seedDate} />;
+}
+```
+
+### Minimum and maximum dates
+
+Use `minDate` and `maxDate` to restrict the selectable date range. Navigation to dates before the `minDate` and after the `maxDate` is disabled. Make sure to provide the `disabledDateError` prop.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+  const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      minDate={lastMonth15th}
+      maxDate={nextMonth15th}
+      disabledDateError="Date is outside allowed range"
+    />
+  );
+}
+```
+
+### Future dates only
+
+Restrict selection to future dates by setting `minDate` to today.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      minDate={today}
+      disabledDateError="Past dates are not available"
+    />
+  );
+}
+```
+
+### Highlighted dates
+
+Use `highlightedDates` to visually emphasize specific dates or date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+  const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      highlightedDates={[yesterday, today, nextWeek]}
+    />
+  );
+}
+```
+
+### Disabled dates
+
+Use `disabledDates` to prevent selection of specific dates or date ranges. Make sure to provide the `disabledDateError` prop.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+
+  // Disable weekends for demonstration
+  const getNextWeekendDates = (centerDate) => {
+    const weekends = [];
+    const currentDate = new Date(centerDate);
+
+    // Find next 4 weekends
+    for (let i = 0; i < 4; i++) {
+      // Find next Saturday
+      const daysUntilSaturday = (6 - currentDate.getDay() + 7) % 7 || 7;
+      currentDate.setDate(currentDate.getDate() + daysUntilSaturday);
+
+      const saturday = new Date(currentDate);
+      const sunday = new Date(currentDate);
+      sunday.setDate(sunday.getDate() + 1);
+
+      weekends.push([saturday, sunday]);
+
+      // Move to next week
+      currentDate.setDate(currentDate.getDate() + 7);
+    }
+
+    return weekends;
+  };
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      disabledDates={getNextWeekendDates(today)}
+      disabledDateError="Weekends are not available"
+    />
+  );
+}
+```
+
+### Date ranges
+
+Highlight a date range using a tuple `[startDate, endDate]`.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+  const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      highlightedDates={[[yesterday, nextWeek]]}
+    />
+  );
+}
+```
+
+### Hidden controls
+
+Hide the navigation arrows with `hideControls`. This is typically used when `minDate` and `maxDate` are set to the first and last days of the same month.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      minDate={firstDayOfMonth}
+      maxDate={lastDayOfMonth}
+      hideControls
+    />
+  );
+}
+```
+
+### Disabled
+
+Disable the entire Calendar with the `disabled` prop.
+
+```jsx
+function Example() {
+  const selectedDate = new Date();
+
+  return <Calendar selectedDate={selectedDate} disabled />;
+}
+```
+
+### Accessibility
+
+Always provide accessibility labels for the navigation controls and error messages for disabled dates.
+
+```jsx
+function Example() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
+
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      maxDate={nextMonth}
+      disabledDateError="Date is not available for selection"
+      nextArrowAccessibilityLabel="Go to next month"
+      previousArrowAccessibilityLabel="Go to previous month"
+    />
+  );
+}
+```
+
+### Date selection with Chip trigger
+
+When you need a compact trigger instead of the full [DateInput](/components/other/DateInput/) used in [DatePicker](/components/other/DatePicker/), you can use a [Chip](/components/inputs/Chip) (or similar control) to open a Tray with a Calendar and a confirm button.
+
+```jsx
+function Example() {
+  const { locale } = useLocale();
+  const [date, setDate] = useState(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
+  const calendarRef = useRef(null);
+
+  const formatDateLabel = useCallback(
+    (date, locale) =>
+      date
+        ? date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' })
+        : 'Select date',
+    [],
+  );
+
+  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(() => {
+    calendarRef.current?.focusInitialDate();
+  }, []);
+
+  const handleConfirmCalendar = useCallback(() => {
+    if (calendarSelectedDate) {
+      setDate(calendarSelectedDate);
+      handleClosePicker();
+    }
+  }, [calendarSelectedDate, handleClosePicker]);
+
+  const formattedLabel = formatDateLabel(date, locale);
+
+  const trayFooter = useMemo(
+    () => (
+      <Box paddingTop={3} paddingX={3}>
+        <Button
+          block
+          compact
+          accessibilityHint={!calendarSelectedDate ? 'Select a date first' : undefined}
+          accessibilityLabel="Confirm date selection"
+          disabled={!calendarSelectedDate}
+          onPress={handleConfirmCalendar}
+        >
+          Confirm
+        </Button>
+      </Box>
+    ),
+    [calendarSelectedDate, handleConfirmCalendar],
+  );
+
+  return (
+    <>
+      <Box alignSelf="flex-start">
+        <Chip
+          compact
+          accessibilityLabel={formattedLabel}
+          end={<AnimatedCaret active color="fg" rotate={showPicker ? 0 : 180} size="xs" />}
+          onPress={handleOpenPicker}
+        >
+          {formattedLabel}
+        </Chip>
+      </Box>
+      {showPicker && (
+        <Tray
+          accessibilityRole="none"
+          footer={trayFooter}
+          handleBarAccessibilityLabel="Close calendar"
+          handleBarVariant="inside"
+          onCloseComplete={handleCancelPicker}
+          onOpenComplete={handleModalShow}
+        >
+          <Calendar
+            ref={calendarRef}
+            onPressDate={handleCalendarDatePress}
+            paddingBottom={2}
+            paddingX={2}
+            selectedDate={calendarSelectedDate}
+          />
+        </Tray>
+      )}
+    </>
+  );
+}
+```

apps/docs/docs/components/other/Calendar/_mobilePropsTable.mdx

@@ -0,0 +1,11 @@
+import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
+
+import mobilePropsData from ':docgen/mobile/dates/Calendar/data';
+import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
+import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
+
+<ComponentPropsTable
+  props={mobilePropsData}
+  sharedTypeAliases={sharedTypeAliases}
+  sharedParentTypes={sharedParentTypes}
+/>

apps/docs/docs/components/other/Calendar/index.mdx

@@ -1,7 +1,7 @@
 ---
 id: calendar
 title: Calendar
-platform_switcher_options: { web: true, mobile: false }
+platform_switcher_options: { web: true, mobile: true }
 hide_title: true
 ---
 
@@ -10,16 +10,26 @@ import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
 import webPropsToc from ':docgen/web/dates/Calendar/toc-props';
+import mobilePropsToc from ':docgen/mobile/dates/Calendar/toc-props';
+
 import WebPropsTable from './_webPropsTable.mdx';
+import MobilePropsTable from './_mobilePropsTable.mdx';
+import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx';
 import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx';
+
 import webMetadata from './webMetadata.json';
+import mobileMetadata from './mobileMetadata.json';
 
 <VStack gap={5}>
-  <ComponentHeader title="Calendar" webMetadata={webMetadata} />
+  <ComponentHeader title="Calendar" webMetadata={webMetadata} mobileMetadata={mobileMetadata} />
   <ComponentTabsContainer
     webPropsTable={<WebPropsTable />}
     webExamples={<WebExamples />}
+    mobilePropsTable={<MobilePropsTable />}
+    mobileExamples={<MobileExamples />}
     webExamplesToc={webExamplesToc}
+    mobileExamplesToc={mobileExamplesToc}
     webPropsToc={webPropsToc}
+    mobilePropsToc={mobilePropsToc}
   />
 </VStack>

apps/docs/docs/components/other/Calendar/mobileMetadata.json

@@ -0,0 +1,11 @@
+{
+  "import": "import { Calendar } from '@coinbase/cds-mobile/dates/Calendar'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/dates/Calendar.tsx",
+  "description": "Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.",
+  "relatedComponents": [
+    {
+      "label": "DatePicker",
+      "url": "/components/other/DatePicker/"
+    }
+  ]
+}