react-native-paper-dates 0.22.38 → 0.22.39

package/lib/typescript/Time/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/Time/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAe,MAAM,OAAO,CAAA;AACnC,OAAO,EAEL,kBAAkB,EAClB,kBAAkB,EAGnB,MAAM,aAAa,CAAA;AAQpB,KAAK,YAAY,GAAG,CAAC,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAA;CACzC,KAAK,GAAG,CAAA;AAET,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,cAAc,EACd,aAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,SAAS,EAAE,kBAAkB,CAAA;IAC7B,OAAO,EAAE,kBAAkB,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,GAAG,CAAA;IAC/C,QAAQ,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,qBAuFA;;AAmBD,wBAA+B"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/Time/TimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EAClB,kBAAkB,EAGnB,MAAM,aAAa,CAAA;AAOpB,KAAK,YAAY,GAAG,CAAC,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAA;CACzC,KAAK,GAAG,CAAA;AAET,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,cAAc,EACd,aAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,SAAS,EAAE,kBAAkB,CAAA;IAC7B,OAAO,EAAE,kBAAkB,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,GAAG,CAAA;IAC/C,QAAQ,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,2CAuFA;;AAmBD,wBAA+B"}

package/lib/typescript/Time/TimePickerModal.d.ts

@@ -1,5 +1,4 @@
 import { PossibleInputTypes } from './timeUtils';
-import React from 'react';
 export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours, minutes, label, uppercase: _uppercase, cancelLabel, confirmLabel, animationType, locale, keyboardIcon, clockIcon, use24HourClock, inputFontSize, defaultInputType, }: {
     locale?: undefined | string;
     label?: string;
@@ -20,7 +19,7 @@ export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours,
     use24HourClock?: boolean;
     inputFontSize?: number;
     defaultInputType?: PossibleInputTypes;
-}): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof TimePickerModal>;
+}): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TimePickerModal>;
 export default _default;
 //# sourceMappingURL=TimePickerModal.d.ts.map

package/lib/typescript/Time/TimePickerModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePickerModal.d.ts","sourceRoot":"","sources":["../../../src/Time/TimePickerModal.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAKL,kBAAkB,EAEnB,MAAM,aAAa,CAAA;AACpB,OAAO,KAAiD,MAAM,OAAO,CAAA;AAIrE,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAqB,EACrB,SAAS,EAAE,UAAU,EACrB,WAAsB,EACtB,YAAmB,EACnB,aAAsB,EACtB,MAAM,EACN,YAAiC,EACjC,SAA2B,EAC3B,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,EAAE;IACD,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,CAAA;IACpB,SAAS,EAAE,CAAC,eAAe,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAA;IACvE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,kBAAkB,CAAA;CACtC,qBA+JA;;AAwDD,wBAAoC"}
+{"version":3,"file":"TimePickerModal.d.ts","sourceRoot":"","sources":["../../../src/Time/TimePickerModal.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAKL,kBAAkB,EAEnB,MAAM,aAAa,CAAA;AAKpB,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAqB,EACrB,SAAS,EAAE,UAAU,EACrB,WAAsB,EACtB,YAAmB,EACnB,aAAsB,EACtB,MAAM,EACN,YAAiC,EACjC,SAA2B,EAC3B,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,EAAE;IACD,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,CAAA;IACpB,SAAS,EAAE,CAAC,eAAe,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAA;IACvE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,kBAAkB,CAAA;CACtC,2CAoKA;;AAwDD,wBAAoC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.22.38",
+  "version": "0.22.39",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Date/AnimatedCrossView.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useEffect, useRef } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
 import { useTheme } from 'react-native-paper'

package/src/Date/AutoSizer.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useCallback, useState } from 'react'
 import { LayoutChangeEvent, View } from 'react-native'
 import { sharedStyles } from '../shared/styles'

package/src/Date/Calendar.tsx

@@ -14,8 +14,7 @@ import { memo, useCallback, useMemo, useState } from 'react'
 import YearPicker from './YearPicker'
 import Color from 'color'
 import { useTheme } from 'react-native-paper'
-import { useLatest, lightenBy, darkenBy } from '../shared/utils'
-import React from 'react'
+import { darkenBy, lightenBy, useLatest } from '../shared/utils'
 import { sharedStyles } from '../shared/styles'
 
 export type ModeType = 'single' | 'range' | 'multiple'

package/src/Date/CalendarEdit.tsx

@@ -1,8 +1,8 @@
 import {
-  View,
+  Keyboard,
   StyleSheet,
   TextInput as TextInputNative,
-  Keyboard,
+  View,
 } from 'react-native'
 
 import type { ModeType, ValidRangeType } from './Calendar'
@@ -10,7 +10,6 @@ import type { LocalState } from './DatePickerModalContent'
 
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
 import { memo, useCallback, useEffect, useRef } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 function CalendarEdit({

package/src/Date/CalendarHeader.tsx

@@ -4,7 +4,7 @@ import DayNames, { dayNamesHeight } from './DayNames'
 import type { DisableWeekDaysType } from './dateUtils'
 import { getTranslation } from '../translations/utils'
 import { sharedStyles } from '../shared/styles'
-import React, { memo } from 'react'
+import { memo } from 'react'
 
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4

package/src/Date/DatePickerInput.tsx

@@ -5,7 +5,6 @@ import type { DatePickerInputProps } from './DatePickerInput.shared'
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal'
 import { Platform, StyleProp, ViewStyle } from 'react-native'
 import { forwardRef, useCallback, useState } from 'react'
-import React from 'react'
 
 function DatePickerInput(
   {

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -1,9 +1,9 @@
 import TextInputWithMask from '../TextInputMask'
 import { HelperText, useTheme } from 'react-native-paper'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import useDateInput from './inputUtils'
 import type { DatePickerInputProps } from './DatePickerInput.shared'
-import React, { forwardRef, ReactNode } from 'react'
+import { forwardRef, ReactNode } from 'react'
 
 function DatePickerInputWithoutModal(
   {

package/src/Date/DatePickerModal.tsx

@@ -1,10 +1,10 @@
 import {
   Modal,
+  Platform,
   StyleSheet,
   TouchableWithoutFeedback,
   useWindowDimensions,
   View,
-  Platform,
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
 import DatePickerModalContent, {
@@ -12,7 +12,7 @@ import DatePickerModalContent, {
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { sharedStyles } from '../shared/styles'
 import { supportedOrientations } from '../shared/utils'
 

package/src/Date/DatePickerModalContent.tsx

@@ -17,7 +17,7 @@ import CalendarEdit from './CalendarEdit'
 import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'
 import { useTheme } from 'react-native-paper'
 import DatePickerModalStatusBar from './DatePickerModalStatusBar'
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 
 export type LocalState = {
   startDate: CalendarDate

package/src/Date/DatePickerModalContentHeader.tsx

@@ -1,11 +1,11 @@
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { IconButton, MD2Theme, Text, useTheme } from 'react-native-paper'
 import type { ModeType } from './Calendar'
 import type { LocalState } from './DatePickerModalContent'
 import { useHeaderTextColor } from '../shared/utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { sharedStyles } from '../shared/styles'
 
 export interface HeaderPickProps {

package/src/Date/DatePickerModalHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Animated, StyleSheet } from 'react-native'
 import { Appbar, Button, useTheme } from 'react-native-paper'
 import { useHeaderTextColor } from '../shared/utils'

package/src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Animated, StyleSheet } from 'react-native'
 import { useHeaderBackgroundColor } from '../shared/utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'

package/src/Date/DatePickerModalStatusBar.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useHeaderBackgroundColor } from '../shared/utils'
 import Color from 'color'

package/src/Date/Day.tsx

@@ -5,7 +5,6 @@ import { daySize } from './dateUtils'
 
 import type { PaperTheme } from '../shared/utils'
 import { memo, useCallback } from 'react'
-import React from 'react'
 
 function EmptyDayPure() {
   return <View style={styles.empty} />

package/src/Date/DayName.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { MD2Theme, Text, useTheme } from 'react-native-paper'
 

package/src/Date/DayNames.tsx

@@ -2,7 +2,7 @@ import { StyleSheet, View } from 'react-native'
 import DayName from './DayName'
 import { useTheme } from 'react-native-paper'
 import { DisableWeekDaysType, showWeekDay } from './dateUtils'
-import React, { memo, useMemo } from 'react'
+import { memo, useMemo } from 'react'
 
 export const dayNamesHeight = 44
 

package/src/Date/DayRange.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, View } from 'react-native'
 import { daySize } from './dateUtils'
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { sharedStyles } from '../shared/styles'
 
 function DayRange({

package/src/Date/Month.tsx

@@ -1,28 +1,28 @@
 import { StyleSheet, View } from 'react-native'
 import {
+  Icon,
+  MD2Theme,
   Text,
-  useTheme,
   TouchableRipple,
-  MD2Theme,
-  Icon,
+  useTheme,
 } from 'react-native-paper'
 import Day, { EmptyDay } from './Day'
 
 import {
   addMonths,
   areDatesOnSameDay,
+  beginOffset,
   daySize,
   DisableWeekDaysType,
+  estimatedMonthHeight,
   getDaysInMonth,
   getFirstDayOfMonth,
-  getRealIndex,
   getGridCount,
-  isDateBetween,
+  getRealIndex,
   gridCounts,
+  isDateBetween,
   showWeekDay,
   startAtIndex,
-  beginOffset,
-  estimatedMonthHeight,
   useRangeChecker,
 } from './dateUtils'
 import { getCalendarHeaderHeight } from './CalendarHeader'
@@ -35,7 +35,6 @@ import type {
 import { dayNamesHeight } from './DayNames'
 import { useTextColorOnPrimary } from '../shared/utils'
 import { memo, useMemo } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 interface BaseMonthProps {

package/src/Date/Swiper.native.tsx

@@ -17,7 +17,6 @@ import { SwiperProps, useYearChange } from './SwiperUtils'
 import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'
 import AutoSizer from './AutoSizer'
 import { memo, useCallback, useRef, useState } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 function getVisibleArray(

package/src/Date/Swiper.tsx

@@ -9,14 +9,14 @@ import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils'
 import { useLatest } from '../shared/utils'
 import { RenderProps, SwiperProps, useYearChange } from './SwiperUtils'
 import AutoSizer from './AutoSizer'
-import React, {
+import {
   memo,
+  UIEvent,
   useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
-  UIEvent,
 } from 'react'
 import { sharedStyles } from '../shared/styles'
 

package/src/Date/SwiperUtils.ts

@@ -1,4 +1,4 @@
-import { useEffect, type MutableRefObject } from 'react'
+import { type MutableRefObject, useEffect } from 'react'
 import { useLatest } from '../shared/utils'
 import {
   addMonths,

package/src/Date/YearPicker.tsx

@@ -1,8 +1,7 @@
-import { FlatList, StyleSheet, View, ScrollView } from 'react-native'
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../shared/utils'
 import { memo, useEffect, useRef } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 const ITEM_HEIGHT = 62

package/src/TextInputMask.tsx

@@ -1,5 +1,10 @@
-import React, { ComponentProps, ReactNode, useEffect, useState } from 'react'
-import { forwardRef } from 'react'
+import {
+  ComponentProps,
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react'
 import { TextInput } from 'react-native-paper'
 
 const splitCharacters = ['-', '/', '.', '年', ' ']

package/src/Time/AmPmSwitcher.tsx

@@ -1,10 +1,9 @@
-import { View, StyleSheet } from 'react-native'
+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 { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 export default function AmPmSwitcher({

package/src/Time/AnalogClock.tsx

@@ -23,7 +23,6 @@ import AnimatedClockSwitcher from './AnimatedClockSwitcher'
 import AnalogClockMinutes from './AnalogClockMinutes'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
 import { memo, useCallback, useContext, useRef } from 'react'
-import React from 'react'
 
 function returnTrue() {
   return true

package/src/Time/AnalogClockHours.tsx

@@ -1,8 +1,8 @@
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../shared/utils'
-import React, { memo } from 'react'
+import { memo } from 'react'
 
 function AnalogClockHours({
   is24Hour,

package/src/Time/AnalogClockMinutes.tsx

@@ -1,8 +1,8 @@
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../shared/utils'
-import React, { memo } from 'react'
+import { memo } from 'react'
 
 function AnalogClockMinutes({ minutes }: { minutes: number }) {
   const range = getMinuteNumbers(circleSize, 12)

package/src/Time/AnimatedClockSwitcher.tsx

@@ -1,6 +1,6 @@
 import { Animated, StyleSheet, View } from 'react-native'
 import { clockTypes, PossibleClockTypes } from './timeUtils'
-import React, { ReactElement, useEffect, useRef } from 'react'
+import { ReactElement, useEffect, useRef } from 'react'
 import AnalogClockHours from './AnalogClockHours'
 import AnalogClockMinutes from './AnalogClockMinutes'
 

package/src/Time/TimeInput.tsx

@@ -1,11 +1,11 @@
 import {
-  View,
+  Platform,
+  StyleSheet,
   TextInput,
   TextInputProps,
-  StyleSheet,
-  Platform,
+  View,
 } from 'react-native'
-import { useTheme, TouchableRipple, MD2Theme } from 'react-native-paper'
+import { MD2Theme, TouchableRipple, useTheme } from 'react-native-paper'
 
 import Color from 'color'
 import {
@@ -15,7 +15,6 @@ import {
   useInputColors,
 } from './timeUtils'
 import { forwardRef, useEffect, useState } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 interface TimeInputProps
@@ -91,6 +90,7 @@ function TimeInput(
         ref={ref}
         textAlign="center"
         style={[
+          styles.input,
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
@@ -104,6 +104,7 @@ function TimeInput(
                 : undefined,
             paddingTop: Platform.OS === 'android' ? 10 : undefined,
             paddingBottom: Platform.OS === 'android' ? 0 : undefined,
+            textAlign: 'center',
           },
         ]}
         maxFontSizeMultiplier={1.5}
@@ -146,6 +147,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 96,
   },
+  input: {
+    width: 96,
+  },
 })
 
 export default forwardRef(TimeInput)

package/src/Time/TimeInputs.tsx

@@ -1,8 +1,8 @@
 import {
-  View,
   StyleSheet,
-  useWindowDimensions,
   TextInput as TextInputNative,
+  useWindowDimensions,
+  View,
 } from 'react-native'
 import { MD2Theme, Text, useTheme } from 'react-native-paper'
 
@@ -19,7 +19,6 @@ import { useLatest } from '../shared/utils'
 import Color from 'color'
 import { getTranslation } from '../translations/utils'
 import { memo, useCallback, useRef } from 'react'
-import React from 'react'
 import { sharedStyles } from '../shared/styles'
 
 function TimeInputs({

package/src/Time/TimePicker.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet, useWindowDimensions } from 'react-native'
-import React, { memo } from 'react'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+
 import {
+  circleSize,
   inputTypes,
   PossibleClockTypes,
   PossibleInputTypes,
@@ -9,10 +10,9 @@ import {
 } from './timeUtils'
 
 import AnalogClock from './AnalogClock'
-import { circleSize } from './timeUtils'
 import TimeInputs from './TimeInputs'
 import { DisplayModeContext } from '../contexts/DisplayModeContext'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
 type onChangeFunc = ({
   hours,

package/src/Time/TimePickerModal.tsx

@@ -1,12 +1,12 @@
 import {
+  Animated,
+  Keyboard,
+  KeyboardAvoidingView,
   Modal,
   StyleSheet,
-  View,
   Text,
-  Animated,
   TouchableWithoutFeedback,
-  KeyboardAvoidingView,
-  Keyboard,
+  View,
 } from 'react-native'
 
 import {
@@ -26,7 +26,7 @@ import {
   PossibleInputTypes,
   reverseInputTypes,
 } from './timeUtils'
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import { sharedStyles } from '../shared/styles'
 import { supportedOrientations } from '../shared/utils'
 
@@ -192,6 +192,11 @@ export function TimePickerModal({
               </View>
               <View style={styles.bottom}>
                 <IconButton
+                  iconColor={
+                    theme?.isV3
+                      ? theme.colors.onSurfaceVariant
+                      : (theme as any as MD2Theme).colors.text
+                  }
                   icon={getTimeInputTypeIcon(inputType, {
                     keyboard: keyboardIcon,
                     picker: clockIcon,