react-native-paper-dates 0.22.57 → 0.23.2

package/lib/typescript/shared/utils.d.ts

@@ -4,58 +4,9 @@ export declare const supportedOrientations: ('portrait' | 'portrait-upside-down'
 export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme;
 export declare function useLatest<T>(value: T): import("react").RefObject<T>;
 export declare function useHeaderBackgroundColor(): string;
-export declare function useHeaderColorIsLight(): boolean;
 export declare function useHeaderTextColor(): string;
 export declare function useTextColorOnPrimary(): string;
 export declare function range(start: number, end: number): number[];
-export declare function lightenBy(color: Color, ratio: number): Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}>;
-export declare function darkenBy(color: Color, ratio: number): Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}> | ArrayLike<number> | {
-    [key: string]: any;
-}>;
+export declare function lightenBy(color: InstanceType<typeof Color>, ratio: number): import("color").ColorInstance;
+export declare function darkenBy(color: InstanceType<typeof Color>, ratio: number): import("color").ColorInstance;
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/shared/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/shared/utils.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,YAAY,EAGb,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,qBAAqB,EAAE,CAChC,UAAU,GACV,sBAAsB,GACtB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,CACpB,EAMA,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAA;AAElE,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,gCAIpC;AAED,wBAAgB,wBAAwB,WAQvC;AAED,wBAAgB,qBAAqB,YAOpC;AAED,wBAAgB,kBAAkB,WAOjC;AAED,wBAAgB,qBAAqB,WAapC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,YAI/C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;GAGpD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;GAGnD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/shared/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAY,MAAM,oBAAoB,CAAA;AACzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,qBAAqB,EAAE,CAChC,UAAU,GACV,sBAAsB,GACtB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,CACpB,EAMA,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAA;AAElE,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,gCAIpC;AAED,wBAAgB,wBAAwB,WAGvC;AAED,wBAAgB,kBAAkB,WAGjC;AAED,wBAAgB,qBAAqB,WAQpC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,YAI/C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGzE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,iCAGxE"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.22.57",
+  "version": "0.23.2",
   "author": "Richard Lindhout <info@webridge.nl> (https://github.com/web-ridge)",
   "bugs": {
     "url": "https://github.com/web-ridge/react-native-paper-dates/issues"
@@ -10,41 +10,41 @@
     ]
   },
   "dependencies": {
-    "color": "^4.2.3"
+    "color": "^5.0.3"
   },
   "description": "Performant Date Picker for React Native Paper",
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/config-conventional": "^20.3.1",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@react-native-vector-icons/material-design-icons": "^12.0.0",
-    "@react-native/babel-preset": "^0.79.2",
-    "@release-it/conventional-changelog": "^10.0.1",
+    "@react-native-vector-icons/material-design-icons": "^12.4.0",
+    "@react-native/babel-preset": "~0.81.5",
+    "@release-it/conventional-changelog": "^10.0.4",
     "@testing-library/react-native": "^13.2.0",
     "@types/color": "^4.2.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.17",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "~19.0.0",
+    "@types/react-test-renderer": "~19.1.0",
     "babel-loader": "^10.0.0",
-    "caniuse-lite": "^1.0.30001716",
-    "commitlint": "^19.8.0",
+    "caniuse-lite": "^1.0.30001765",
+    "commitlint": "^20.3.1",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-testing-library": "^7.1.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-testing-library": "^7.15.4",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "pod-install": "^0.3.9",
-    "prettier": "^3.5.3",
-    "react": "~19.0.0",
-    "react-native": "^0.79.2",
-    "react-native-builder-bob": "^0.40.0",
-    "react-native-paper": "^5.14.0",
-    "react-native-safe-area-context": "^5.4.0",
-    "react-test-renderer": "~19.0.0",
+    "pod-install": "^1.0.9",
+    "prettier": "^3.8.0",
+    "react": "19.1.0",
+    "react-native": "~0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-paper": "^5.14.5",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-test-renderer": "19.1.0",
     "release-it": "^19.0.1",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.3"
   },
   "eslintConfig": {
     "root": true,

package/src/Date/Calendar.tsx

@@ -10,11 +10,10 @@ import {
 } from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
-import { memo, useCallback, useMemo, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import YearPicker from './YearPicker'
-import Color from 'color'
 import { useTheme } from 'react-native-paper'
-import { darkenBy, lightenBy, useLatest } from '../shared/utils'
+import { useLatest } from '../shared/utils'
 import { sharedStyles } from '../shared/styles'
 import { defaultStartYear, defaultEndYear } from './dateUtils'
 
@@ -162,15 +161,7 @@ function Calendar(
     [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef]
   )
 
-  const selectColor = useMemo<string>(() => {
-    if (theme.isV3) {
-      return theme.colors.primaryContainer
-    }
-    if (theme.dark) {
-      return darkenBy(Color(theme.colors.primary), 0.1).hex()
-    }
-    return lightenBy(Color(theme.colors.primary), 0.9).hex()
-  }, [theme])
+  const selectColor = theme.colors.primaryContainer
 
   return (
     <View style={sharedStyles.root}>

package/src/Date/DatePickerModal.tsx

@@ -26,16 +26,13 @@ interface DatePickerModalProps {
 }
 
 export interface DatePickerModalSingleProps
-  extends DatePickerModalContentSingleProps,
-    DatePickerModalProps {}
+  extends DatePickerModalContentSingleProps, DatePickerModalProps {}
 
 export interface DatePickerModalMultiProps
-  extends DatePickerModalContentMultiProps,
-    DatePickerModalProps {}
+  extends DatePickerModalContentMultiProps, DatePickerModalProps {}
 
 export interface DatePickerModalRangeProps
-  extends DatePickerModalContentRangeProps,
-    DatePickerModalProps {}
+  extends DatePickerModalContentRangeProps, DatePickerModalProps {}
 
 export function DatePickerModal(
   props:

package/src/Date/DatePickerModalContent.tsx

@@ -15,7 +15,6 @@ import DatePickerModalContentHeader, {
 } from './DatePickerModalContentHeader'
 import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
-import { useTheme } from 'react-native-paper'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
 import { memo, useCallback, useEffect, useState } from 'react'
 
@@ -41,9 +40,7 @@ interface DatePickerModalContentBaseProps {
 }
 
 export interface DatePickerModalContentRangeProps
-  extends HeaderPickProps,
-    BaseCalendarProps,
-    DatePickerModalContentBaseProps {
+  extends HeaderPickProps, BaseCalendarProps, DatePickerModalContentBaseProps {
   mode: 'range'
   startDate: CalendarDate
   endDate: CalendarDate
@@ -52,9 +49,7 @@ export interface DatePickerModalContentRangeProps
 }
 
 export interface DatePickerModalContentSingleProps
-  extends HeaderPickProps,
-    BaseCalendarProps,
-    DatePickerModalContentBaseProps {
+  extends HeaderPickProps, BaseCalendarProps, DatePickerModalContentBaseProps {
   mode: 'single'
   date?: CalendarDate
   onChange?: SingleChange
@@ -63,9 +58,7 @@ export interface DatePickerModalContentSingleProps
 }
 
 export interface DatePickerModalContentMultiProps
-  extends HeaderPickProps,
-    BaseCalendarProps,
-    DatePickerModalContentBaseProps {
+  extends HeaderPickProps, BaseCalendarProps, DatePickerModalContentBaseProps {
   mode: 'multiple'
   dates?: CalendarDates
   onChange?: MultiChange
@@ -94,9 +87,8 @@ export function DatePickerModalContent(
     statusBarOnTopOfBackdrop,
     startWeekOnMonday,
   } = props
-  const theme = useTheme()
   const anyProps = props as any
-  const defaultUppercase = !theme.isV3
+  const defaultUppercase = false
 
   // use local state to add only onConfirm state changes
   const [state, setState] = useState<LocalState>({

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, View } from 'react-native'
-import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
+import { IconButton, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../shared/utils'
@@ -70,14 +70,10 @@ export default function DatePickerModalContentHeader(
   const label = getLabel(props.locale, props.mode, props.label)
   const color = useHeaderTextColor()
   const isEditingEnabled = allowEditing && mode !== 'multiple'
-  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-  const textFont = theme?.isV3
-    ? theme.fonts.labelMedium
-    : (theme as any as MD2Theme).fonts.medium
-  const collapsedIcon = theme.isV3 ? 'pencil-outline' : 'pencil'
-  const expandedIcon = theme.isV3 ? 'calendar-blank' : 'calendar'
-  const finalCollapsedIcon = editIcon ?? collapsedIcon
-  const finalExpandedIcon = calendarIcon ?? expandedIcon
+  const supportingTextColor = theme.colors.onSurfaceVariant
+  const textFont = theme.fonts.labelMedium
+  const finalCollapsedIcon = editIcon ?? 'pencil-outline'
+  const finalExpandedIcon = calendarIcon ?? 'calendar-blank'
 
   return (
     <View style={styles.header}>
@@ -113,7 +109,7 @@ export default function DatePickerModalContentHeader(
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          iconColor={theme.isV3 ? theme.colors.onSurface : color}
+          iconColor={theme.colors.onSurface}
           onPress={onToggle}
         />
       ) : null}
@@ -130,11 +126,7 @@ export function HeaderContentSingle({
   const theme = useTheme()
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = state.date
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
+  const dateColor = state.date ? theme.colors.onSurface : lighterColor
 
   const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -164,11 +156,7 @@ export function HeaderContentMulti({
 
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = dateCount
-    ? theme.isV3
-      ? theme.colors.onSurface
-      : color
-    : lighterColor
+  const dateColor = dateCount ? theme.colors.onSurface : lighterColor
 
   const formatter = useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -208,8 +196,8 @@ export function HeaderContentRange({
   const theme = useTheme()
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColorFilled = theme.isV3 ? theme.colors.onSurface : color
-  const endColorFilled = theme.isV3 ? theme.colors.onSurface : color
+  const startColorFilled = theme.colors.onSurface
+  const endColorFilled = theme.colors.onSurface
   const startColor = state.startDate ? startColorFilled : lighterColor
   const endColor = state.endDate ? endColorFilled : lighterColor
 

package/src/Date/DatePickerModalHeader.tsx

@@ -44,7 +44,7 @@ export default function DatePickerModalHeader(
             testID="react-native-paper-dates-close"
           />
           <Button
-            textColor={theme.isV3 ? theme.colors.primary : color}
+            textColor={theme.colors.primary}
             onPress={props.onSave}
             disabled={props.saveLabelDisabled ?? false}
             uppercase={props.uppercase ?? true}

package/src/Date/Day.tsx

@@ -1,4 +1,4 @@
-import { MD2Theme, Text, TouchableRipple } from 'react-native-paper'
+import { Text, TouchableRipple } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
@@ -41,54 +41,33 @@ function Day(props: {
     selectColor,
     isToday,
     disabled,
-    textColorOnPrimary,
     theme,
   } = props
-  const borderColorFallback = theme.dark ? '#fff' : '#000'
-  const selectedOrInRangeDarkMode = selected || (inRange && theme.dark)
-  const v2BorderColor = selectedOrInRangeDarkMode
-    ? textColorOnPrimary
-    : borderColorFallback
-  const borderColor = theme.isV3 ? theme.colors.primary : v2BorderColor
+  const borderColor = theme.colors.primary
 
   const onPress = useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  // TODO: check if this can be simplified
-  // converted with Chat-GPT for now from enormous conditional to if-else
+  // Determine text colors for M3
   let baseTextColor
   let finalTextColor
 
-  if (theme.isV3) {
-    // Theme V3 specific logic for base text color
-    if (selected) {
-      baseTextColor = theme.colors.onPrimary
-    } else if (inRange && theme.dark) {
-      baseTextColor = theme.colors.onPrimaryContainer
-    } else {
-      baseTextColor = theme.colors.onSurface
-    }
+  if (selected) {
+    baseTextColor = theme.colors.onPrimary
+  } else if (inRange && theme.dark) {
+    baseTextColor = theme.colors.onPrimaryContainer
+  } else {
+    baseTextColor = theme.colors.onSurface
+  }
 
-    // Theme V3 specific logic for final text color
-    if (isToday) {
-      finalTextColor = selected ? baseTextColor : theme.colors.primary
-    } else {
-      finalTextColor = baseTextColor
-    }
+  if (isToday) {
+    finalTextColor = selected ? baseTextColor : theme.colors.primary
   } else {
-    // Logic for themes other than V3
-    if (selected || (inRange && theme.dark)) {
-      baseTextColor = textColorOnPrimary
-    }
-    // Since there's no additional logic provided for non-V3 themes in the step 2,
-    // the final text color for non-V3 themes will simply be the base text color.
     finalTextColor = baseTextColor
   }
 
-  let textFont = theme?.isV3
-    ? theme.fonts.bodySmall
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodySmall
 
   return (
     <View style={[styles.root, disabled && styles.disabled]}>

package/src/Date/DayName.tsx

@@ -1,13 +1,11 @@
 import { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, useTheme } from 'react-native-paper'
+import { Text, useTheme } from 'react-native-paper'
 
 function DayName({ label }: { label: string }) {
   const theme = useTheme()
 
-  let textFont = theme?.isV3
-    ? theme.fonts.bodySmall
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodySmall
 
   return (
     <View style={styles.dayName}>

package/src/Date/Month.tsx

@@ -1,11 +1,5 @@
 import { StyleSheet, View } from 'react-native'
-import {
-  Icon,
-  MD2Theme,
-  Text,
-  TouchableRipple,
-  useTheme,
-} from 'react-native-paper'
+import { Icon, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
 import {
@@ -263,17 +257,11 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     endYear,
   ])
 
-  let textFont = theme?.isV3
-    ? theme.fonts.titleSmall
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.titleSmall
 
-  const iconColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : theme.colors.onSurface
+  const iconColor = theme.colors.onSurfaceVariant
 
-  const iconSourceV3 = selectingYear ? 'menu-up' : 'menu-down'
-  const iconSourceV2 = selectingYear ? 'chevron-up' : 'chevron-down'
-  const iconSource = theme.isV3 ? iconSourceV3 : iconSourceV2
+  const iconSource = selectingYear ? 'menu-up' : 'menu-down'
 
   return (
     <View
@@ -324,9 +312,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                 styles.monthLabel,
                 {
                   ...textFont,
-                  color: theme.isV3
-                    ? theme.colors.onSurfaceVariant
-                    : theme.colors.onSurface,
+                  color: theme.colors.onSurfaceVariant,
                 },
               ]}
               selectable={false}

package/src/Date/YearPicker.tsx

@@ -1,5 +1,5 @@
 import { FlatList, ScrollView, StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../shared/utils'
 import { memo, useEffect, useRef } from 'react'
 import { sharedStyles } from '../shared/styles'
@@ -81,9 +81,7 @@ function YearPure({
 }) {
   const theme = useTheme()
 
-  let textFont = theme?.isV3
-    ? theme.fonts.bodyLarge
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.bodyLarge
 
   return (
     <View style={styles.year}>
@@ -104,13 +102,8 @@ function YearPure({
             style={[
               styles.yearLabel,
               selected
-                ? // eslint-disable-next-line react-native/no-inline-styles
-                  { color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
-                : {
-                    color: theme.isV3
-                      ? theme.colors.onSurfaceVariant
-                      : theme.colors.onSurface,
-                  },
+                ? { color: theme.colors.onPrimary }
+                : { color: theme.colors.onSurfaceVariant },
               { ...textFont },
             ]}
             selectable={false}

package/src/Time/AmPmSwitcher.tsx

@@ -1,7 +1,6 @@
 import { StyleSheet, View } from 'react-native'
-import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
-import { useContext, useMemo } from 'react'
-import Color from 'color'
+import { Text, TouchableRipple, useTheme } from 'react-native-paper'
+import { useContext } from 'react'
 import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
 import { sharedStyles } from '../shared/styles'
@@ -19,18 +18,7 @@ export default function AmPmSwitcher({
 
   const { setMode, mode } = useContext(DisplayModeContext)
 
-  const backgroundColor = useMemo<string>(() => {
-    if (theme.isV3) {
-      return theme.colors.outline
-    }
-    return Color(
-      theme.dark
-        ? Color(theme.colors.surface).lighten(1.2).hex()
-        : theme.colors.surface
-    )
-      .darken(0.1)
-      .hex()
-  }, [theme])
+  const backgroundColor = theme.colors.outline
 
   const isAM = mode === 'AM'
 
@@ -89,9 +77,7 @@ function SwitchButton({
 
   const { backgroundColor, color } = useSwitchColors(selected)
 
-  let textFont = theme?.isV3
-    ? theme.fonts.titleMedium
-    : (theme as any as MD2Theme).fonts.medium
+  const textFont = theme.fonts.titleMedium
 
   return (
     <TouchableRipple

package/src/Time/AnalogClock.tsx

@@ -1,4 +1,3 @@
-import Color from 'color'
 import {
   GestureResponderEvent,
   PanResponder,
@@ -133,10 +132,6 @@ function AnalogClock({
   const pointerNumber = focused === clockTypes.hours ? hours : minutes
   const degreesPerNumber = focused === clockTypes.hours ? 30 : 6
 
-  const v3Color = theme.colors.surfaceVariant
-  const v2Color = theme.dark
-    ? Color(theme.colors.surface).lighten(1.4).hex()
-    : Color(theme.colors.surface).darken(0.1).hex()
   return (
     <View
       ref={clockRef}
@@ -144,7 +139,7 @@ function AnalogClock({
       style={[
         styles.clock,
         {
-          backgroundColor: theme.isV3 ? v3Color : v2Color,
+          backgroundColor: theme.colors.surfaceVariant,
         },
       ]}
       // @ts-ignore -> https://github.com/necolas/react-native-web/issues/506

package/src/Time/TimeInput.tsx

@@ -5,7 +5,7 @@ import {
   TextInputProps,
   View,
 } from 'react-native'
-import { MD2Theme, TouchableRipple, useTheme } from 'react-native-paper'
+import { TouchableRipple, useTheme } from 'react-native-paper'
 
 import Color from 'color'
 import {
@@ -17,8 +17,10 @@ import {
 import { forwardRef, useEffect, useState } from 'react'
 import { sharedStyles } from '../shared/styles'
 
-interface TimeInputProps
-  extends Omit<Omit<Omit<TextInputProps, 'value'>, 'onFocus'>, 'onPress'> {
+interface TimeInputProps extends Omit<
+  Omit<Omit<TextInputProps, 'value'>, 'onFocus'>,
+  'onPress'
+> {
   value: number
   clockType: PossibleClockTypes
   onPress?: (type: PossibleClockTypes) => any
@@ -77,11 +79,10 @@ function TimeInput(
         {
           backgroundColor,
           borderRadius: theme.roundness * 2,
-          borderColor:
-            theme.isV3 && highlighted
-              ? theme.colors.onPrimaryContainer
-              : undefined,
-          borderWidth: theme.isV3 && highlighted ? 2 : 0,
+          borderColor: highlighted
+            ? theme.colors.onPrimaryContainer
+            : undefined,
+          borderWidth: highlighted ? 2 : 0,
           height: inputType === inputTypes.keyboard ? 72 : 80,
         },
       ]}
@@ -94,9 +95,7 @@ function TimeInput(
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
-            fontFamily: theme?.isV3
-              ? theme.fonts.titleMedium.fontFamily
-              : (theme as any as MD2Theme).fonts.medium.fontFamily,
+            fontFamily: theme.fonts.titleMedium.fontFamily,
             fontSize: inputFontSize,
             lineHeight:
               Platform.OS === 'android'

package/src/Time/TimeInputs.tsx

@@ -4,7 +4,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native'
-import { MD2Theme, Text, useTheme } from 'react-native-paper'
+import { Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
@@ -129,9 +129,7 @@ function TimeInputs({
           style={[
             styles.dot,
             {
-              backgroundColor: theme?.isV3
-                ? theme.colors.onSurface
-                : (theme as any as MD2Theme).colors.text,
+              backgroundColor: theme.colors.onSurface,
             },
           ]}
         />
@@ -140,9 +138,7 @@ function TimeInputs({
           style={[
             styles.dot,
             {
-              backgroundColor: theme?.isV3
-                ? theme.colors.onSurface
-                : (theme as any as MD2Theme).colors.text,
+              backgroundColor: theme.colors.onSurface,
             },
           ]}
         />