@ankhorage/zora 11.0.0 → 12.1.0

package/src/features/auth/forgotPasswordFormMeta.ts

@@ -0,0 +1,49 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const forgotPasswordFormMeta = {
+  name: 'ForgotPasswordForm',
+  category: 'pattern',
+  description: 'Collects an account identifier to start password recovery.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Forgot password form',
+    defaultProps: {
+      identifiers: ['email'],
+      identifierLabel: 'Email',
+      signInLabel: 'Sign in',
+      submitLabel: 'Send code',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'forgotPasswordForm.submit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+      ],
+    },
+    signIn: {
+      label: 'Sign in',
+      eventType: 'forgotPasswordForm.signIn',
+      payloadFields: [],
+    },
+  },
+  props: {
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    signInLabel: { type: 'string', category: 'Content', label: 'Sign-in label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/oauthProviderButtonMeta.ts

@@ -0,0 +1,62 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const oauthProviderButtonMeta = {
+  name: 'OAuthProviderButton',
+  category: 'pattern',
+  description: 'Renders a provider-branded OAuth action button.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OAuth provider button',
+    defaultProps: {
+      providerId: 'google',
+      fullWidth: true,
+      size: 'l',
+      variant: 'outline',
+      color: 'neutral',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    press: {
+      label: 'Press',
+      eventType: 'oauthProviderButton.press',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+  },
+  props: {
+    providerId: {
+      type: 'string',
+      category: 'Authentication',
+      label: 'Provider ID',
+      default: 'google',
+    },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    fullWidth: { type: 'boolean', category: 'Layout', label: 'Full width', default: true },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+      default: 'l',
+    },
+    variant: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Variant',
+      enum: ['solid', 'outline', 'ghost', 'soft'],
+      default: 'outline',
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [...ZORA_COLORS],
+      default: 'neutral',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/oauthProviderListMeta.ts

@@ -0,0 +1,67 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const oauthProviderListMeta = {
+  name: 'OAuthProviderList',
+  category: 'pattern',
+  description: 'Renders a configurable group of OAuth provider actions.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OAuth provider list',
+    defaultProps: {
+      providers: [{ id: 'google', label: 'Continue with Google' }],
+      layout: 'stack',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    providerPress: {
+      label: 'Provider press',
+      eventType: 'oauthProviderList.providerPress',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+  },
+  props: {
+    providers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Providers',
+      itemSchema: [
+        { key: 'id', schema: { type: 'string', category: 'Identity', label: 'Provider ID' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        { key: 'disabled', schema: { type: 'boolean', category: 'State', label: 'Disabled' } },
+        { key: 'loading', schema: { type: 'boolean', category: 'State', label: 'Loading' } },
+      ],
+    },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    fullWidth: { type: 'boolean', category: 'Layout', label: 'Full width' },
+    layout: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Layout',
+      enum: ['stack', 'inline'],
+      default: 'stack',
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+    },
+    variant: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Variant',
+      enum: ['solid', 'outline', 'ghost', 'soft'],
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [...ZORA_COLORS],
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/otpFormMeta.ts

@@ -0,0 +1,55 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const otpFormMeta = {
+  name: 'OtpForm',
+  category: 'pattern',
+  description: 'Collects and verifies a one-time passcode with an optional resend action.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OTP form',
+    defaultProps: {
+      length: 6,
+      otpLabel: 'Code',
+      resendLabel: 'Resend code',
+      submitLabel: 'Verify code',
+      resendDisabled: false,
+      resendLoading: false,
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'otpForm.submit',
+      payloadFields: [{ path: 'otp', type: 'string', label: 'One-time passcode' }],
+    },
+    resend: {
+      label: 'Resend',
+      eventType: 'otpForm.resend',
+      payloadFields: [],
+    },
+  },
+  props: {
+    length: { type: 'number', category: 'Validation', label: 'Code length', default: 6 },
+    otpLabel: { type: 'string', category: 'Content', label: 'Code label' },
+    resendLabel: { type: 'string', category: 'Content', label: 'Resend label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    resendDisabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Resend disabled',
+      default: false,
+    },
+    resendLoading: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Resend loading',
+      default: false,
+    },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/public.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+const AUTH_MANIFEST_ELEMENTS = [
+  'ForgotPasswordForm',
+  'OAuthProviderButton',
+  'OAuthProviderList',
+  'OtpForm',
+  'SignInForm',
+  'SignUpForm',
+] as const;
+const authMetaByName = new Map(Object.entries(ZORA_COMPONENT_META));
+
+test('auth solutions are direct manifest leaf nodes with authoring schemas', () => {
+  for (const name of AUTH_MANIFEST_ELEMENTS) {
+    const meta = authMetaByName.get(name);
+    expect(meta?.directManifestNode, name).toBe(true);
+    expect(meta?.allowedChildren, name).toEqual([]);
+    expect(Object.keys(meta?.props ?? {}).length, name).toBeGreaterThan(0);
+  }
+});
+
+test('auth solution events expose their actionable boundaries', () => {
+  expect(ZORA_COMPONENT_META.SignInForm?.events?.submit?.payloadFields).toContainEqual({
+    path: 'secret',
+    type: 'string',
+    label: 'Secret',
+  });
+  expect(ZORA_COMPONENT_META.OtpForm?.events?.resend?.eventType).toBe('otpForm.resend');
+  expect(ZORA_COMPONENT_META.OAuthProviderList?.events?.providerPress?.payloadFields).toEqual([
+    { path: 'providerId', type: 'string', label: 'Provider ID' },
+  ]);
+});

package/src/{patterns/auth/index.ts → features/auth/public.ts}

@@ -1,14 +1,3 @@
-export { ForgotPasswordForm } from './ForgotPasswordForm';
-export { OAuthProviderButton } from './OAuthProviderButton';
-export { OAuthProviderList } from './OAuthProviderList';
-export {
-  DEFAULT_OAUTH_PROVIDER_ICONS,
-  resolveOAuthProviderIcon,
-  resolveOAuthProviderLabel,
-} from './oauthProviders';
-export { OtpForm } from './OtpForm';
-export { SignInForm } from './SignInForm';
-export { SignUpForm } from './SignUpForm';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
@@ -26,4 +15,15 @@ export type {
   SignUpFormField,
   SignUpFormProps,
   SignUpFormValues,
-} from './types';
+} from '../../types/auth';
+export { ForgotPasswordForm } from './adapters/inbound/ForgotPasswordForm';
+export { OAuthProviderButton } from './adapters/inbound/OAuthProviderButton';
+export { OAuthProviderList } from './adapters/inbound/OAuthProviderList';
+export { OtpForm } from './adapters/inbound/OtpForm';
+export { SignInForm } from './adapters/inbound/SignInForm';
+export { SignUpForm } from './adapters/inbound/SignUpForm';
+export {
+  DEFAULT_OAUTH_PROVIDER_ICONS,
+  resolveOAuthProviderIcon,
+  resolveOAuthProviderLabel,
+} from './utils/oauthProviders';

package/src/features/auth/signInFormMeta.ts

@@ -0,0 +1,63 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const signInFormMeta = {
+  name: 'SignInForm',
+  category: 'pattern',
+  description: 'Collects an account identifier and secret for sign-in.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Sign-in form',
+    defaultProps: {
+      identifiers: ['email'],
+      identifierLabel: 'Email',
+      secretLabel: 'Password',
+      forgotPasswordLabel: 'Forgot password',
+      signUpLabel: 'Sign up',
+      submitLabel: 'Sign in',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'signInForm.submit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+        { path: 'secret', type: 'string', label: 'Secret' },
+      ],
+    },
+    forgotPassword: {
+      label: 'Forgot password',
+      eventType: 'signInForm.forgotPassword',
+      payloadFields: [],
+    },
+    signUp: {
+      label: 'Sign up',
+      eventType: 'signInForm.signUp',
+      payloadFields: [],
+    },
+  },
+  props: {
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    secretLabel: { type: 'string', category: 'Content', label: 'Secret label' },
+    forgotPasswordLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Forgot-password label',
+    },
+    signUpLabel: { type: 'string', category: 'Content', label: 'Sign-up label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/signUpFormMeta.ts

@@ -0,0 +1,67 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const signUpFormMeta = {
+  name: 'SignUpForm',
+  category: 'pattern',
+  description: 'Collects configurable account fields for sign-up.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Sign-up form',
+    defaultProps: {
+      signInLabel: 'Sign in',
+      submitLabel: 'Sign up',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'signUpForm.submit',
+      payloadFields: [{ path: 'values', type: 'record', label: 'Values' }],
+    },
+    signIn: {
+      label: 'Sign in',
+      eventType: 'signUpForm.signIn',
+      payloadFields: [],
+    },
+  },
+  props: {
+    fields: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Fields',
+      itemSchema: [
+        { key: 'name', schema: { type: 'string', category: 'Identity', label: 'Name' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        {
+          key: 'type',
+          schema: {
+            type: 'enum',
+            category: 'Authentication',
+            label: 'Type',
+            enum: ['email', 'number', 'otp', 'password', 'tel', 'text', 'url'],
+          },
+        },
+        {
+          key: 'placeholder',
+          schema: { type: 'string', category: 'Content', label: 'Placeholder' },
+        },
+        {
+          key: 'required',
+          schema: { type: 'boolean', category: 'Validation', label: 'Required' },
+        },
+        {
+          key: 'disabled',
+          schema: { type: 'boolean', category: 'State', label: 'Disabled' },
+        },
+      ],
+    },
+    signInLabel: { type: 'string', category: 'Content', label: 'Sign-in label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/{patterns/auth/utils.ts → features/auth/utils/authForm.ts}

@@ -1,5 +1,5 @@
-import type { FormFieldConfig, ValidationRule } from '../../types/form';
-import type { AuthIdentifierKind } from './types';
+import type { AuthIdentifierKind } from '../../../types/auth';
+import type { FormFieldConfig, ValidationRule } from '../../../types/form';
 
 export const defaultIdentifiers = ['email'] as const satisfies readonly AuthIdentifierKind[];
 

package/src/{patterns/auth → features/auth/utils}/oauthProviders.test.ts

@@ -6,7 +6,7 @@ import {
   resolveOAuthProviderLabel,
 } from './oauthProviders';
 
-describe('OAuth provider UI helpers', () => {
+describe('Auth OAuth provider helpers', () => {
   it('resolves known provider labels', () => {
     expect(resolveOAuthProviderLabel('google')).toBe('Google');
     expect(resolveOAuthProviderLabel('github')).toBe('GitHub');

package/src/{patterns/auth → features/auth/utils}/oauthProviders.ts

@@ -1,4 +1,4 @@
-import type { OAuthProviderIconSpec } from './types';
+import type { OAuthProviderIconSpec } from '../../../types/auth';
 
 export const DEFAULT_OAUTH_PROVIDER_ICONS = {
   apple: { provider: 'FontAwesome', name: 'apple' },

package/src/features/bottom-sheet/public.test.ts

@@ -25,8 +25,8 @@ describe('ZORA BottomSheet public contract', () => {
   test('installs the shared provider and removes picker ActionSheet dependencies', async () => {
     const [provider, datePicker, timePicker] = await Promise.all([
       Bun.file('src/theme/ZoraProvider.tsx').text(),
-      Bun.file('src/components/date-picker/DatePicker.tsx').text(),
-      Bun.file('src/components/time-picker/TimePicker.tsx').text(),
+      Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text(),
+      Bun.file('src/features/time-picker/adapters/inbound/TimePicker.tsx').text(),
     ]);
 
     expect(provider).toContain('<BottomSheetProvider>{children}</BottomSheetProvider>');

package/src/features/data-table/adapters/inbound/DataTable.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { ScrollView, type ViewStyle } from 'react-native';
 
 import { DropdownMenu, type MenuAction } from '../../../../components/menu';
-import { SkeletonList } from '../../../../components/skeleton';
 import { Show } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
@@ -20,6 +19,7 @@ import { IconButton } from '../../../button/public';
 import { Card } from '../../../card/public';
 import { EmptyState } from '../../../empty-state/public';
 import { Box, Stack } from '../../../layout/public';
+import { SkeletonList } from '../../../skeleton/public';
 import { Text, type TextAlign } from '../../../typography/public';
 import { resolveDataTableRowKey } from '../../utils/resolveDataTableRowKey';
 /***

package/src/{components/date-picker → features/date-picker/adapters/inbound}/DatePicker.tsx

@@ -1,12 +1,13 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
-import { useBottomSheet } from '../../features/bottom-sheet/public';
-import { Button } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { DatePickerProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DatePickerProps } from '../../../../types/date-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { Button } from '../../../button/public';
+import { Box, Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { formatLocalDate, parseLocalDate } from '../../utils/localDate';
 
 const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
 const DAY_CELL_WIDTH = 42;
@@ -27,15 +28,14 @@ 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: string | null, right: Date): boolean {
+  return left === formatLocalDate(right);
 }
 
-/*** Compare two values by local calendar day. */
-function isSameLocalDay(left: Date | null, right: Date): boolean {
-  if (!left) return false;
-  return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();
+/*** Normalize a Date to the start of its local calendar day for range comparisons. */
+function startOfLocalDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
 }
 
 /*** Report whether one local calendar day precedes another. */
@@ -65,28 +65,27 @@ function formatMonthLabel(value: Date): string {
 }
 
 /*** Format a selected date with the platform locale defaults. */
-function formatDefaultDate(value: Date): string {
-  return value.toLocaleDateString();
+function formatDefaultDate(value: string): string {
+  return parseLocalDate(value)?.toLocaleDateString() ?? value;
 }
 
 /*** 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)[] = [];
+  const populatedLength = firstDay.getDay() + dayCount;
+  const paddedLength = Math.ceil(populatedLength / 7) * 7;
 
-  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);
-
-  return days;
+  return Array.from({ length: paddedLength }, (_, index) =>
+    index < firstDay.getDay()
+      ? null
+      : new Date(month.getFullYear(), month.getMonth(), index - firstDay.getDay() + 1),
+  );
 }
 
 /*** Resolve the month initially shown by the calendar sheet. */
-function resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {
-  const base = value ?? minDate ?? new Date();
+function resolveInitialMonth(value: string | null, minDate: string | undefined): Date {
+  const base = parseLocalDate(value) ?? parseLocalDate(minDate) ?? new Date();
   return new Date(base.getFullYear(), base.getMonth(), 1);
 }
 
@@ -142,7 +141,7 @@ function DatePickerInner({
           minDate={minDate}
           onDismiss={dismiss}
           onSelect={(date) => {
-            onValueChange?.(startOfLocalDay(date));
+            onValueChange?.(formatLocalDate(date));
             dismiss();
           }}
           testID={testID}
@@ -197,6 +196,8 @@ function DatePickerSheet({
 }: DatePickerSheetProps) {
   const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
   const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+  const resolvedMaxDate = React.useMemo(() => parseLocalDate(maxDate), [maxDate]);
+  const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
 
   return (
     <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
@@ -204,15 +205,15 @@ function DatePickerSheet({
       <DatePickerMonthNavigation
         displayMonth={displayMonth}
         interactionPolicy={interactionPolicy}
-        maxDate={maxDate}
-        minDate={minDate}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
         onMonthChange={setDisplayMonth}
       />
       <DatePickerWeekdays />
       <DatePickerCalendar
         interactionPolicy={interactionPolicy}
-        maxDate={maxDate}
-        minDate={minDate}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
         monthDays={monthDays}
         onSelect={onSelect}
         testID={testID}
@@ -254,8 +255,11 @@ function DatePickerMonthNavigation({
   maxDate,
   minDate,
   onMonthChange,
-}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate'> & {
+}: {
   displayMonth: Date;
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
   onMonthChange: (month: Date) => void;
 }) {
   const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
@@ -312,9 +316,14 @@ function DatePickerCalendar({
   onSelect,
   testID,
   value,
-}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate' | 'testID' | 'value'> & {
+}: {
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
   monthDays: readonly (Date | null)[];
   onSelect: (value: Date) => void;
+  testID: string | undefined;
+  value: DatePickerProps['value'];
 }) {
   return (
     <Stack direction="row" gap="xs" wrap="wrap">