@ankhorage/zora 5.0.0 → 6.0.0

package/dist/theme/ZoraProvider.d.ts

@@ -7,6 +7,6 @@ export interface ZoraProviderProps {
     themeConfig?: ThemeConfig;
     initialMode?: ZoraThemeMode;
 }
-/** Installs the ZORA theme runtime and underlying Surface theme provider. */
+/** Installs the ZORA theme runtime, Surface theme, and shared bottom-sheet controller. */
 export declare function ZoraProvider({ children, theme, themeConfig, initialMode, }: ZoraProviderProps): React.JSX.Element;
 //# sourceMappingURL=ZoraProvider.d.ts.map

package/dist/theme/ZoraProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAW,EACX,WAAqB,GACtB,EAAE,iBAAiB,qBAcnB"}
+{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,0FAA0F;AAC1F,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAW,EACX,WAAqB,GACtB,EAAE,iBAAiB,qBAcnB"}

package/dist/theme/ZoraProvider.js

@@ -1,15 +1,16 @@
 import { ThemeProvider } from '@ankhorage/surface';
+import { BottomSheetProvider } from '@ankhorage/surface/bottom-sheet';
 import React from 'react';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
-/** Installs the ZORA theme runtime and underlying Surface theme provider. */
+/** Installs the ZORA theme runtime, Surface theme, and shared bottom-sheet controller. */
 export function ZoraProvider({ children, theme = zoraDefaultTheme, themeConfig, initialMode = 'light', }) {
     const resolvedConfig = React.useMemo(() => themeConfig ?? createZoraThemeConfig(theme), [theme, themeConfig]);
     const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);
     return (<ZoraThemeRuntimeContext.Provider value={runtimeValue}>
       <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>
-        {children}
+        <BottomSheetProvider>{children}</BottomSheetProvider>
       </ThemeProvider>
     </ZoraThemeRuntimeContext.Provider>);
 }

package/dist/theme/ZoraProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,6EAA6E;AAC7E,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,EACX,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,WAAW,IAAI,qBAAqB,CAAC,KAAK,CAAC,EACjD,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACrE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/contracts';\nimport { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  themeConfig?: ThemeConfig;\n  initialMode?: ZoraThemeMode;\n}\n\n/** Installs the ZORA theme runtime and underlying Surface theme provider. */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  themeConfig,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const resolvedConfig = React.useMemo(\n    () => themeConfig ?? createZoraThemeConfig(theme),\n    [theme, themeConfig],\n  );\n  const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,0FAA0F;AAC1F,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,EACX,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,WAAW,IAAI,qBAAqB,CAAC,KAAK,CAAC,EACjD,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACrE;QAAA,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CACtD;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/contracts';\nimport { ThemeProvider } from '@ankhorage/surface';\nimport { BottomSheetProvider } from '@ankhorage/surface/bottom-sheet';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  themeConfig?: ThemeConfig;\n  initialMode?: ZoraThemeMode;\n}\n\n/** Installs the ZORA theme runtime, Surface theme, and shared bottom-sheet controller. */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  themeConfig,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const resolvedConfig = React.useMemo(\n    () => themeConfig ?? createZoraThemeConfig(theme),\n    [theme, themeConfig],\n  );\n  const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>\n        <BottomSheetProvider>{children}</BottomSheetProvider>\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}

package/dist/theme/useZoraTheme.d.ts

@@ -1,7 +1,7 @@
 export declare function useZoraTheme(): {
     theme: import("@ankhorage/surface").SurfaceTheme;
     mode: "light" | "dark";
-    setThemeConfig: (config: Partial<import("@ankhorage/surface").ThemeConfig>) => void;
+    setThemeConfig: (config: Partial<import("@ankhorage/contracts").ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;
     _hasProvider?: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -32,14 +32,17 @@
     "@react-native-vector-icons/ionicons": "^13.1.3",
     "react": "19.2.3",
     "react-native": "0.86.x",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
-    "react-native-web": "~0.21.0"
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.10.1"
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^3.4.4"
+    "@ankhorage/surface": "^4.1.0"
   },
   "files": [
     "dist",
@@ -57,6 +60,13 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./bottom-sheet": {
+      "react-native": "./src/features/bottom-sheet/public.ts",
+      "browser": "./src/features/bottom-sheet/public.ts",
+      "types": "./dist/features/bottom-sheet/public.d.ts",
+      "import": "./dist/features/bottom-sheet/public.js",
+      "default": "./dist/features/bottom-sheet/public.js"
+    },
     "./metadata": {
       "react-native": "./src/metadata/index.ts",
       "browser": "./src/metadata/index.ts",
@@ -111,9 +121,12 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.3",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
     "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.10.1",
     "typescript": "~6.0.3"
   },
   "packageManager": "bun@1.4.2"

package/src/components/date-picker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
+import { useBottomSheet } from '../../features/bottom-sheet/public';
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ActionSheet } from '../action-sheet';
 import { Button } from '../button';
 import { Text } from '../text';
 import type { DatePickerProps } from './types';
@@ -11,6 +11,7 @@ import type { DatePickerProps } from './types';
 const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
 const DAY_CELL_WIDTH = 42;
 
+/*** Render the field label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
     <Stack gap="xs">
@@ -26,75 +27,70 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
+/*** Normalize a date to the start of its local calendar day. */
 function startOfLocalDay(value: Date): Date {
   return new Date(value.getFullYear(), value.getMonth(), value.getDate());
 }
 
+/*** Compare two values by local calendar day. */
 function isSameLocalDay(left: Date | null, right: Date): boolean {
-  if (!left) {
-    return false;
-  }
-
+  if (!left) return false;
   return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();
 }
 
+/*** Report whether one local calendar day precedes another. */
 function isBeforeLocalDay(left: Date, right: Date): boolean {
   return startOfLocalDay(left).getTime() < startOfLocalDay(right).getTime();
 }
 
+/*** Report whether one local calendar day follows another. */
 function isAfterLocalDay(left: Date, right: Date): boolean {
   return startOfLocalDay(left).getTime() > startOfLocalDay(right).getTime();
 }
 
+/*** Resolve whether a date falls outside the configured picker range. */
 function isDateDisabled(
   value: Date,
   minDate: Date | undefined,
   maxDate: Date | undefined,
 ): boolean {
-  if (minDate && isBeforeLocalDay(value, minDate)) {
-    return true;
-  }
-
-  if (maxDate && isAfterLocalDay(value, maxDate)) {
-    return true;
-  }
-
+  if (minDate && isBeforeLocalDay(value, minDate)) return true;
+  if (maxDate && isAfterLocalDay(value, maxDate)) return true;
   return false;
 }
 
+/*** Format the current calendar month for the picker heading. */
 function formatMonthLabel(value: Date): string {
   return value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
 }
 
+/*** Format a selected date with the platform locale defaults. */
 function formatDefaultDate(value: Date): string {
   return value.toLocaleDateString();
 }
 
+/*** Build the padded calendar grid for one month. */
 function createMonthDays(month: Date): (Date | null)[] {
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const dayCount = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
   const days: (Date | null)[] = [];
 
-  for (let offset = 0; offset < firstDay.getDay(); offset += 1) {
-    days.push(null);
-  }
-
+  for (let offset = 0; offset < firstDay.getDay(); offset += 1) days.push(null);
   for (let day = 1; day <= dayCount; day += 1) {
     days.push(new Date(month.getFullYear(), month.getMonth(), day));
   }
-
-  while (days.length % 7 !== 0) {
-    days.push(null);
-  }
+  while (days.length % 7 !== 0) days.push(null);
 
   return days;
 }
 
+/*** Resolve the month initially shown by the calendar sheet. */
 function resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {
   const base = value ?? minDate ?? new Date();
   return new Date(base.getFullYear(), base.getMonth(), 1);
 }
 
+/*** Report whether the configured range intersects a candidate month. */
 function canNavigateToMonth(
   month: Date,
   minDate: Date | undefined,
@@ -103,14 +99,8 @@ function canNavigateToMonth(
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);
 
-  if (maxDate && isAfterLocalDay(firstDay, maxDate)) {
-    return false;
-  }
-
-  if (minDate && isBeforeLocalDay(lastDay, minDate)) {
-    return false;
-  }
-
+  if (maxDate && isAfterLocalDay(firstDay, maxDate)) return false;
+  if (minDate && isBeforeLocalDay(lastDay, minDate)) return false;
   return true;
 }
 
@@ -131,35 +121,35 @@ function DatePickerInner({
   testID,
   interactionPolicy,
 }: DatePickerProps) {
+  const { dismiss, present } = useBottomSheet();
   const passive = interactionPolicy === 'passive';
-  const [visible, setVisible] = React.useState(false);
-  const [fallbackMonth] = React.useState(() => resolveInitialMonth(null, undefined));
-  const initialMonth = value || minDate ? resolveInitialMonth(value, minDate) : fallbackMonth;
-  const initialMonthKey = initialMonth.getTime();
-  const [displayMonthState, setDisplayMonthState] = React.useState(() => ({
-    sourceMonthKey: initialMonthKey,
-    month: initialMonth,
-  }));
-  const displayMonth =
-    displayMonthState.sourceMonthKey === initialMonthKey ? displayMonthState.month : initialMonth;
-  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
-  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
-  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
   const displayValue = value
     ? formatDate
       ? formatDate(value)
       : formatDefaultDate(value)
     : placeholder;
 
-  function setDisplayMonth(month: Date) {
-    setDisplayMonthState({ sourceMonthKey: initialMonthKey, month });
-  }
-
+  /*** Present the calendar content through the shared BottomSheet controller. */
   function openPicker() {
     if (passive) return;
-
-    setDisplayMonthState({ sourceMonthKey: initialMonthKey, month: initialMonth });
-    setVisible(true);
+    present({
+      content: (
+        <DatePickerSheet
+          description={description}
+          interactionPolicy={interactionPolicy}
+          label={label}
+          maxDate={maxDate}
+          minDate={minDate}
+          onDismiss={dismiss}
+          onSelect={(date) => {
+            onValueChange?.(startOfLocalDay(date));
+            dismiss();
+          }}
+          testID={testID}
+          value={value}
+        />
+      ),
+    });
   }
 
   return (
@@ -181,95 +171,173 @@ function DatePickerInner({
       >
         {displayValue}
       </Button>
-      <ActionSheet
-        description={description}
+    </Field>
+  );
+}
+
+interface DatePickerSheetProps extends Pick<
+  DatePickerProps,
+  'description' | 'interactionPolicy' | 'label' | 'maxDate' | 'minDate' | 'testID' | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: Date) => void;
+}
+
+/*** Render the calendar-specific content inside the shared BottomSheet host. */
+function DatePickerSheet({
+  description,
+  interactionPolicy,
+  label,
+  maxDate,
+  minDate,
+  onDismiss,
+  onSelect,
+  testID,
+  value,
+}: DatePickerSheetProps) {
+  const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
+  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
+      <PickerSheetHeader description={description} title={label ?? 'Choose date'} />
+      <DatePickerMonthNavigation
+        displayMonth={displayMonth}
         interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
+        maxDate={maxDate}
+        minDate={minDate}
+        onMonthChange={setDisplayMonth}
+      />
+      <DatePickerWeekdays />
+      <DatePickerCalendar
+        interactionPolicy={interactionPolicy}
+        maxDate={maxDate}
+        minDate={minDate}
+        monthDays={monthDays}
+        onSelect={onSelect}
+        testID={testID}
+        value={value}
+      />
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+/*** Render the shared title block used by the calendar sheet. */
+function PickerSheetHeader({
+  description,
+  title,
+}: {
+  description: React.ReactNode | undefined;
+  title: React.ReactNode;
+}) {
+  return (
+    <Stack gap="xxs">
+      <Text align="center" variant="label" weight="semiBold">
+        {title}
+      </Text>
+      {description ? (
+        <Text align="center" emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+/*** Render previous/next month controls for the calendar sheet. */
+function DatePickerMonthNavigation({
+  displayMonth,
+  interactionPolicy,
+  maxDate,
+  minDate,
+  onMonthChange,
+}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate'> & {
+  displayMonth: Date;
+  onMonthChange: (month: Date) => void;
+}) {
+  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
+  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
 
-          setVisible(false);
-        }}
-        testID={testID ? `${testID}-sheet` : undefined}
-        title={label ?? 'Choose date'}
-        visible={visible}
+  return (
+    <Stack align="center" direction="row" justify="space-between">
+      <Button
+        disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(previousMonth)}
+        size="s"
+        variant="ghost"
       >
-        <Stack gap="m">
-          <Stack align="center" direction="row" justify="space-between">
-            <Button
-              disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
-              interactionPolicy={interactionPolicy}
-              onPress={() => {
-                if (passive) return;
+        Previous
+      </Button>
+      <Text align="center" variant="label" weight="semiBold">
+        {formatMonthLabel(displayMonth)}
+      </Text>
+      <Button
+        disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(nextMonth)}
+        size="s"
+        variant="ghost"
+      >
+        Next
+      </Button>
+    </Stack>
+  );
+}
 
-                setDisplayMonth(previousMonth);
-              }}
-              size="s"
-              variant="ghost"
-            >
-              Previous
-            </Button>
-            <Text align="center" variant="label" weight="semiBold">
-              {formatMonthLabel(displayMonth)}
-            </Text>
+/*** Render weekday headings for the calendar grid. */
+function DatePickerWeekdays() {
+  return (
+    <Stack direction="row" justify="space-between">
+      {WEEKDAY_LABELS.map((weekday) => (
+        <Box key={weekday} width={DAY_CELL_WIDTH}>
+          <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
+            {weekday}
+          </Text>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+/*** Render selectable day cells for the current calendar month. */
+function DatePickerCalendar({
+  interactionPolicy,
+  maxDate,
+  minDate,
+  monthDays,
+  onSelect,
+  testID,
+  value,
+}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate' | 'testID' | 'value'> & {
+  monthDays: readonly (Date | null)[];
+  onSelect: (value: Date) => void;
+}) {
+  return (
+    <Stack direction="row" gap="xs" wrap="wrap">
+      {monthDays.map((day, index) => {
+        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
+        const selected = isSameLocalDay(value, day);
+        return (
+          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>
             <Button
-              disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+              color={selected ? 'primary' : 'neutral'}
+              disabled={isDateDisabled(day, minDate, maxDate)}
               interactionPolicy={interactionPolicy}
-              onPress={() => {
-                if (passive) return;
-
-                setDisplayMonth(nextMonth);
-              }}
+              onPress={() => onSelect(day)}
               size="s"
-              variant="ghost"
+              testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
+              variant={selected ? 'solid' : 'ghost'}
             >
-              Next
+              {day.getDate()}
             </Button>
-          </Stack>
-
-          <Stack direction="row" justify="space-between">
-            {WEEKDAY_LABELS.map((weekday) => (
-              <Box key={weekday} style={{ width: DAY_CELL_WIDTH }}>
-                <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
-                  {weekday}
-                </Text>
-              </Box>
-            ))}
-          </Stack>
-
-          <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
-            {monthDays.map((day, index) => {
-              if (!day) {
-                return <Box key={`empty-${index}`} style={{ width: DAY_CELL_WIDTH }} />;
-              }
-
-              const selected = isSameLocalDay(value, day);
-              const dayDisabled = isDateDisabled(day, minDate, maxDate);
-
-              return (
-                <Box key={day.toISOString()} style={{ width: DAY_CELL_WIDTH }}>
-                  <Button
-                    color={selected ? 'primary' : 'neutral'}
-                    disabled={dayDisabled}
-                    interactionPolicy={interactionPolicy}
-                    onPress={() => {
-                      if (passive) return;
-
-                      onValueChange?.(startOfLocalDay(day));
-                      setVisible(false);
-                    }}
-                    size="s"
-                    testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
-                    variant={selected ? 'solid' : 'ghost'}
-                  >
-                    {day.getDate()}
-                  </Button>
-                </Box>
-              );
-            })}
-          </Stack>
-        </Stack>
-      </ActionSheet>
-    </Field>
+          </Box>
+        );
+      })}
+    </Stack>
   );
 }
 

package/src/components/date-picker/meta.ts

@@ -5,6 +5,6 @@ export const datePickerMeta = {
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing ActionSheet-backed date picker; not represented as a manifest node in v1.',
+  note: 'Code-facing BottomSheet-backed date picker; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;