react-native-paper-dates 0.11.11 → 0.11.12

package/lib/module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","overlay","useTheme","Color","useLatest","value","ref","useRef","current","useHeaderBackgroundColor","theme","dark","mode","colors","surface","primary","useHeaderColorIsLight","background","isLight","useHeaderTextColor","useTextColorOnPrimary","isDark","isV3","onSurface","onPrimary","range","start","end","Array","fill","map","_","i","lightenBy","color","ratio","lightness","darkenBy"],"sources":["utils.ts"],"sourcesContent":["import * as React from 'react'\nimport {\n  DefaultTheme,\n  MD3DarkTheme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\nimport Color from 'color'\n\nexport type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme\n\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value)\n  ref.current = value\n  return ref\n}\n\nexport function useHeaderBackgroundColor() {\n  const theme = useTheme()\n  return theme.dark && theme.mode === 'adaptive'\n    ? overlay(4, theme.colors.surface)\n    : theme.colors.primary\n}\n\nexport function useHeaderColorIsLight() {\n  const theme = useTheme()\n  const background =\n    theme.dark && theme.mode === 'adaptive'\n      ? theme.colors.surface\n      : theme.colors.primary\n  return Color(background).isLight()\n}\n\nexport function useHeaderTextColor() {\n  const isLight = useHeaderColorIsLight()\n  return !isLight ? '#fff' : '#000'\n}\n\nexport function useTextColorOnPrimary() {\n  const theme = useTheme()\n  const isDark = !Color(theme.colors.primary).isLight()\n\n  if (theme.isV3) {\n    if (isDark && theme.dark) {\n      return theme.colors.onSurface\n    } else {\n      return theme.colors.onPrimary\n    }\n  }\n\n  return isDark ? '#fff' : '#000'\n}\n\nexport function range(start: number, end: number) {\n  return Array(end - start + 1)\n    .fill(null)\n    .map((_, i) => start + i)\n}\n\nexport function lightenBy(color: Color, ratio: number) {\n  const lightness = color.lightness()\n  return color.lightness(lightness + (100 - lightness) * ratio)\n}\n\nexport function darkenBy(color: Color, ratio: number) {\n  const lightness = color.lightness()\n  return color.lightness(lightness - lightness * ratio)\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAGEC,OAHF,EAIEC,QAJF,QAKO,oBALP;AAMA,OAAOC,KAAP,MAAkB,OAAlB;AAIA,OAAO,SAASC,SAAT,CAAsBC,KAAtB,EAAgC;EACrC,MAAMC,GAAG,GAAGN,KAAK,CAACO,MAAN,CAAaF,KAAb,CAAZ;EACAC,GAAG,CAACE,OAAJ,GAAcH,KAAd;EACA,OAAOC,GAAP;AACD;AAED,OAAO,SAASG,wBAAT,GAAoC;EACzC,MAAMC,KAAK,GAAGR,QAAQ,EAAtB;EACA,OAAOQ,KAAK,CAACC,IAAN,IAAcD,KAAK,CAACE,IAAN,KAAe,UAA7B,GACHX,OAAO,CAAC,CAAD,EAAIS,KAAK,CAACG,MAAN,CAAaC,OAAjB,CADJ,GAEHJ,KAAK,CAACG,MAAN,CAAaE,OAFjB;AAGD;AAED,OAAO,SAASC,qBAAT,GAAiC;EACtC,MAAMN,KAAK,GAAGR,QAAQ,EAAtB;EACA,MAAMe,UAAU,GACdP,KAAK,CAACC,IAAN,IAAcD,KAAK,CAACE,IAAN,KAAe,UAA7B,GACIF,KAAK,CAACG,MAAN,CAAaC,OADjB,GAEIJ,KAAK,CAACG,MAAN,CAAaE,OAHnB;EAIA,OAAOZ,KAAK,CAACc,UAAD,CAAL,CAAkBC,OAAlB,EAAP;AACD;AAED,OAAO,SAASC,kBAAT,GAA8B;EACnC,MAAMD,OAAO,GAAGF,qBAAqB,EAArC;EACA,OAAO,CAACE,OAAD,GAAW,MAAX,GAAoB,MAA3B;AACD;AAED,OAAO,SAASE,qBAAT,GAAiC;EACtC,MAAMV,KAAK,GAAGR,QAAQ,EAAtB;EACA,MAAMmB,MAAM,GAAG,CAAClB,KAAK,CAACO,KAAK,CAACG,MAAN,CAAaE,OAAd,CAAL,CAA4BG,OAA5B,EAAhB;;EAEA,IAAIR,KAAK,CAACY,IAAV,EAAgB;IACd,IAAID,MAAM,IAAIX,KAAK,CAACC,IAApB,EAA0B;MACxB,OAAOD,KAAK,CAACG,MAAN,CAAaU,SAApB;IACD,CAFD,MAEO;MACL,OAAOb,KAAK,CAACG,MAAN,CAAaW,SAApB;IACD;EACF;;EAED,OAAOH,MAAM,GAAG,MAAH,GAAY,MAAzB;AACD;AAED,OAAO,SAASI,KAAT,CAAeC,KAAf,EAA8BC,GAA9B,EAA2C;EAChD,OAAOC,KAAK,CAACD,GAAG,GAAGD,KAAN,GAAc,CAAf,CAAL,CACJG,IADI,CACC,IADD,EAEJC,GAFI,CAEA,CAACC,CAAD,EAAIC,CAAJ,KAAUN,KAAK,GAAGM,CAFlB,CAAP;AAGD;AAED,OAAO,SAASC,SAAT,CAAmBC,KAAnB,EAAiCC,KAAjC,EAAgD;EACrD,MAAMC,SAAS,GAAGF,KAAK,CAACE,SAAN,EAAlB;EACA,OAAOF,KAAK,CAACE,SAAN,CAAgBA,SAAS,GAAG,CAAC,MAAMA,SAAP,IAAoBD,KAAhD,CAAP;AACD;AAED,OAAO,SAASE,QAAT,CAAkBH,KAAlB,EAAgCC,KAAhC,EAA+C;EACpD,MAAMC,SAAS,GAAGF,KAAK,CAACE,SAAN,EAAlB;EACA,OAAOF,KAAK,CAACE,SAAN,CAAgBA,SAAS,GAAGA,SAAS,GAAGD,KAAxC,CAAP;AACD"}
+{"version":3,"names":["React","overlay","useTheme","Color","useLatest","value","ref","useRef","current","useHeaderBackgroundColor","theme","isV3","colors","surface","dark","mode","primary","useHeaderColorIsLight","background","isLight","useHeaderTextColor","onSurfaceVariant","useTextColorOnPrimary","isDark","onSurface","onPrimary","range","start","end","Array","fill","map","_","i","lightenBy","color","ratio","lightness","darkenBy"],"sources":["utils.ts"],"sourcesContent":["import * as React from 'react'\nimport {\n  DefaultTheme,\n  MD3DarkTheme,\n  overlay,\n  useTheme,\n} from 'react-native-paper'\nimport Color from 'color'\n\nexport type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme\n\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value)\n  ref.current = value\n  return ref\n}\n\nexport function useHeaderBackgroundColor() {\n  const theme = useTheme()\n  if (theme.isV3) {\n    return theme.colors.surface\n  }\n  return theme.dark && theme.mode === 'adaptive'\n    ? overlay(4, theme.colors.surface)\n    : theme.colors.primary\n}\n\nexport function useHeaderColorIsLight() {\n  const theme = useTheme()\n  const background =\n    theme.dark && theme.mode === 'adaptive'\n      ? theme.colors.surface\n      : theme.colors.primary\n  return Color(background).isLight()\n}\n\nexport function useHeaderTextColor() {\n  const theme = useTheme()\n  const isLight = useHeaderColorIsLight()\n  if (theme.isV3) {\n    return theme.colors.onSurfaceVariant\n  }\n  return !isLight ? '#fff' : '#000'\n}\n\nexport function useTextColorOnPrimary() {\n  const theme = useTheme()\n  const isDark = !Color(theme.colors.primary).isLight()\n\n  if (theme.isV3) {\n    if (isDark && theme.dark) {\n      return theme.colors.onSurface\n    } else {\n      return theme.colors.onPrimary\n    }\n  }\n\n  return isDark ? '#fff' : '#000'\n}\n\nexport function range(start: number, end: number) {\n  return Array(end - start + 1)\n    .fill(null)\n    .map((_, i) => start + i)\n}\n\nexport function lightenBy(color: Color, ratio: number) {\n  const lightness = color.lightness()\n  return color.lightness(lightness + (100 - lightness) * ratio)\n}\n\nexport function darkenBy(color: Color, ratio: number) {\n  const lightness = color.lightness()\n  return color.lightness(lightness - lightness * ratio)\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAGEC,OAHF,EAIEC,QAJF,QAKO,oBALP;AAMA,OAAOC,KAAP,MAAkB,OAAlB;AAIA,OAAO,SAASC,SAAT,CAAsBC,KAAtB,EAAgC;EACrC,MAAMC,GAAG,GAAGN,KAAK,CAACO,MAAN,CAAaF,KAAb,CAAZ;EACAC,GAAG,CAACE,OAAJ,GAAcH,KAAd;EACA,OAAOC,GAAP;AACD;AAED,OAAO,SAASG,wBAAT,GAAoC;EACzC,MAAMC,KAAK,GAAGR,QAAQ,EAAtB;;EACA,IAAIQ,KAAK,CAACC,IAAV,EAAgB;IACd,OAAOD,KAAK,CAACE,MAAN,CAAaC,OAApB;EACD;;EACD,OAAOH,KAAK,CAACI,IAAN,IAAcJ,KAAK,CAACK,IAAN,KAAe,UAA7B,GACHd,OAAO,CAAC,CAAD,EAAIS,KAAK,CAACE,MAAN,CAAaC,OAAjB,CADJ,GAEHH,KAAK,CAACE,MAAN,CAAaI,OAFjB;AAGD;AAED,OAAO,SAASC,qBAAT,GAAiC;EACtC,MAAMP,KAAK,GAAGR,QAAQ,EAAtB;EACA,MAAMgB,UAAU,GACdR,KAAK,CAACI,IAAN,IAAcJ,KAAK,CAACK,IAAN,KAAe,UAA7B,GACIL,KAAK,CAACE,MAAN,CAAaC,OADjB,GAEIH,KAAK,CAACE,MAAN,CAAaI,OAHnB;EAIA,OAAOb,KAAK,CAACe,UAAD,CAAL,CAAkBC,OAAlB,EAAP;AACD;AAED,OAAO,SAASC,kBAAT,GAA8B;EACnC,MAAMV,KAAK,GAAGR,QAAQ,EAAtB;EACA,MAAMiB,OAAO,GAAGF,qBAAqB,EAArC;;EACA,IAAIP,KAAK,CAACC,IAAV,EAAgB;IACd,OAAOD,KAAK,CAACE,MAAN,CAAaS,gBAApB;EACD;;EACD,OAAO,CAACF,OAAD,GAAW,MAAX,GAAoB,MAA3B;AACD;AAED,OAAO,SAASG,qBAAT,GAAiC;EACtC,MAAMZ,KAAK,GAAGR,QAAQ,EAAtB;EACA,MAAMqB,MAAM,GAAG,CAACpB,KAAK,CAACO,KAAK,CAACE,MAAN,CAAaI,OAAd,CAAL,CAA4BG,OAA5B,EAAhB;;EAEA,IAAIT,KAAK,CAACC,IAAV,EAAgB;IACd,IAAIY,MAAM,IAAIb,KAAK,CAACI,IAApB,EAA0B;MACxB,OAAOJ,KAAK,CAACE,MAAN,CAAaY,SAApB;IACD,CAFD,MAEO;MACL,OAAOd,KAAK,CAACE,MAAN,CAAaa,SAApB;IACD;EACF;;EAED,OAAOF,MAAM,GAAG,MAAH,GAAY,MAAzB;AACD;AAED,OAAO,SAASG,KAAT,CAAeC,KAAf,EAA8BC,GAA9B,EAA2C;EAChD,OAAOC,KAAK,CAACD,GAAG,GAAGD,KAAN,GAAc,CAAf,CAAL,CACJG,IADI,CACC,IADD,EAEJC,GAFI,CAEA,CAACC,CAAD,EAAIC,CAAJ,KAAUN,KAAK,GAAGM,CAFlB,CAAP;AAGD;AAED,OAAO,SAASC,SAAT,CAAmBC,KAAnB,EAAiCC,KAAjC,EAAgD;EACrD,MAAMC,SAAS,GAAGF,KAAK,CAACE,SAAN,EAAlB;EACA,OAAOF,KAAK,CAACE,SAAN,CAAgBA,SAAS,GAAG,CAAC,MAAMA,SAAP,IAAoBD,KAAhD,CAAP;AACD;AAED,OAAO,SAASE,QAAT,CAAkBH,KAAlB,EAAgCC,KAAhC,EAA+C;EACpD,MAAMC,SAAS,GAAGF,KAAK,CAACE,SAAN,EAAlB;EACA,OAAOF,KAAK,CAACE,SAAN,CAAgBA,SAAS,GAAGA,SAAS,GAAGD,KAAxC,CAAP;AACD"}

package/lib/typescript/utils.d.ts

@@ -5,7 +5,7 @@ export type PaperTheme = typeof MD3DarkTheme | typeof DefaultTheme;
 export declare function useLatest<T>(value: T): React.MutableRefObject<T>;
 export declare function useHeaderBackgroundColor(): string;
 export declare function useHeaderColorIsLight(): boolean;
-export declare function useHeaderTextColor(): "#fff" | "#000";
+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 | any | ArrayLike<number> | {

package/package.json

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

package/src/Date/Calendar.tsx

@@ -100,6 +100,9 @@ function Calendar(
   const theme = useTheme()
 
   const selectColor = useMemo<string>(() => {
+    if (theme.isV3) {
+      return theme.colors.primaryContainer
+    }
     if (theme.dark) {
       return darkenBy(Color(theme.colors.primary), 0.1).hex()
     }

package/src/Date/CalendarHeader.tsx

@@ -53,7 +53,6 @@ function CalendarHeader({
               onPress={onPrev}
             />
           </View>
-
           <View
             style={[
               styles.buttonWrapper,

package/src/Date/DatePickerModalContent.tsx

@@ -11,7 +11,6 @@ import Calendar, {
 } from './Calendar'
 
 import AnimatedCrossView from './AnimatedCrossView'
-
 import DatePickerModalHeader from './DatePickerModalHeader'
 import DatePickerModalContentHeader, {
   HeaderPickProps,
@@ -86,7 +85,6 @@ export function DatePickerModalContent(
     startYear,
     endYear,
   } = props
-
   const anyProps = props as any
 
   // use local state to add only onConfirm state changes
@@ -164,11 +162,10 @@ export function DatePickerModalContent(
           endLabel={props.endLabel}
           uppercase={props.uppercase ?? true}
           locale={locale}
-          editIcon={props.editIcon}
+          editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
         />
       </DatePickerModalHeaderBackground>
-
       <AnimatedCrossView
         collapsed={collapsed}
         calendar={

package/src/Date/DatePickerModalContentHeader.tsx

@@ -58,23 +58,26 @@ export default function DatePickerModalContentHeader(
     mode,
     moreLabel,
     uppercase,
-    editIcon = 'pencil',
-    calendarIcon = 'calendar',
+    editIcon,
+    calendarIcon,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
+  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
   const allowEditing = mode !== 'multiple'
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyLarge
+    ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
   return (
-    <View style={[styles.header]}>
+    <View style={styles.header}>
       <View>
-        <Text style={[styles.label, { color, ...textFont }]}>
+        <Text
+          style={[styles.label, { color: supportingTextColor, ...textFont }]}
+        >
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>
@@ -96,13 +99,21 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {allowEditing ? (
         <IconButton
-          icon={collapsed ? editIcon : calendarIcon}
+          icon={
+            collapsed
+              ? editIcon ?? theme.isV3
+                ? 'pencil-outline'
+                : 'pencil'
+              : calendarIcon ?? theme.isV3
+              ? 'calendar-blank'
+              : 'calendar'
+          }
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          iconColor={color}
+          iconColor={theme.isV3 ? theme.colors.onSurface : color}
           onPress={onToggle}
         />
       ) : null}
@@ -116,8 +127,13 @@ export function HeaderContentSingle({
   color,
   locale,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = state.date ? color : lighterColor
+  const dateColor = state.date
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -140,9 +156,14 @@ export function HeaderContentMulti({
   color,
   locale,
 }: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
+  const theme = useTheme()
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = dateCount ? color : lighterColor
+  const dateColor = dateCount
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -174,6 +195,7 @@ export function HeaderContentRange({
   endLabel = 'End',
   color,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: 'short',
@@ -182,8 +204,16 @@ export function HeaderContentRange({
   }, [locale])
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColor = state.startDate ? color : lighterColor
-  const endColor = state.endDate ? color : lighterColor
+  const startColor = state.startDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
+  const endColor = state.endDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   return (
     <>
@@ -226,7 +256,6 @@ const styles = StyleSheet.create({
     marginTop: -3,
     marginLeft: 3,
   },
-
   headerSeparator: {
     color: 'rgba(255,255,255,1)',
     fontSize: 25,

package/src/Date/DatePickerModalHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Animated, StyleSheet } from 'react-native'
-import { Appbar, Button } from 'react-native-paper'
+import { Appbar, Button, useTheme } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
 import { getTranslation } from '../translations/utils'
@@ -20,6 +20,7 @@ export interface DatePickerModalHeaderProps {
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
+  const theme = useTheme()
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
@@ -29,6 +30,7 @@ export default function DatePickerModalHeader(
     <Animated.View
       style={[
         styles.animated,
+        // eslint-disable-next-line react-native/no-inline-styles
         {
           paddingTop: disableSafeTop ? 0 : insets.top,
           paddingLeft: insets.left,
@@ -47,7 +49,7 @@ export default function DatePickerModalHeader(
         <Appbar.Content title={''} />
         <Button
           color={color}
-          textColor={color}
+          textColor={theme.isV3 ? theme.colors.primary : color}
           onPress={props.onSave}
           disabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? true}
@@ -90,6 +92,5 @@ const styles = StyleSheet.create({
   appbarHeader: {
     elevation: 0,
     backgroundColor: 'transparent',
-    // alignItems:'center'
   },
 })

package/src/Date/Day.tsx

@@ -47,17 +47,27 @@ function Day(props: {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  const borderColor =
-    selected || (inRange && theme.dark)
-      ? textColorOnPrimary
-      : theme.dark
-      ? '#fff'
-      : '#000'
+  const borderColor = theme.isV3
+    ? theme.colors.primary
+    : selected || (inRange && theme.dark)
+    ? textColorOnPrimary
+    : theme.dark
+    ? '#fff'
+    : '#000'
+
   const textColor =
-    selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
+    theme.isV3 && selected
+      ? theme.colors.onPrimary
+      : theme.isV3 && inRange && theme.dark
+      ? theme.colors.onPrimaryContainer
+      : selected || (inRange && theme.dark)
+      ? textColorOnPrimary
+      : theme.isV3
+      ? theme.colors.onSurface
+      : undefined
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -68,7 +78,6 @@ function Day(props: {
         rightCrop={rightCrop}
         selectColor={selectColor}
       />
-
       <TouchableRipple
         testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
         disabled={disabled}
@@ -89,7 +98,12 @@ function Day(props: {
         >
           <Text
             style={[
-              textColor ? { color: textColor } : undefined,
+              textColor
+                ? {
+                    color:
+                      theme.isV3 && isToday ? theme.colors.primary : textColor,
+                  }
+                : undefined,
               { ...textFont },
             ]}
             selectable={false}

package/src/Date/DayName.tsx

@@ -6,12 +6,18 @@ function DayName({ label }: { label: string }) {
   const theme = useTheme()
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
     <View style={styles.dayName}>
-      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
+      <Text
+        style={[
+          styles.dayNameLabel,
+          { ...textFont, color: theme.colors.onSurface },
+        ]}
+        selectable={false}
+      >
         {label}
       </Text>
     </View>

package/src/Date/Month.tsx

@@ -251,7 +251,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   ])
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.titleSmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -288,7 +288,15 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, { ...textFont }]}
+              style={[
+                styles.monthLabel,
+                {
+                  ...textFont,
+                  color: theme.isV3
+                    ? theme.colors.onSurfaceVariant
+                    : theme.colors.onSurface,
+                },
+              ]}
               selectable={false}
             >
               {monthName} {year}
@@ -296,13 +304,20 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             <View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
-                icon={selectingYear ? 'chevron-up' : 'chevron-down'}
+                icon={
+                  selectingYear
+                    ? theme.isV3
+                      ? 'menu-up'
+                      : 'chevron-up'
+                    : theme.isV3
+                    ? 'menu-down'
+                    : 'chevron-down'
+                }
               />
             </View>
           </View>
         </TouchableRipple>
       </View>
-
       {grid.map(({ weekIndex, generatedDays }) => (
         <View style={styles.week} key={weekIndex}>
           {generatedDays
@@ -350,9 +365,7 @@ const styles = StyleSheet.create({
     marginBottom: weekMargin,
     height: daySize,
   },
-
   month: {},
-
   monthHeader: {
     height: montHeaderHeight,
     justifyContent: 'center',

package/src/Date/YearPicker.tsx

@@ -96,7 +96,14 @@ function YearPure({
           <Text
             style={[
               styles.yearLabel,
-              selected ? styles.selectedYear : null,
+              selected
+                ? // eslint-disable-next-line react-native/no-inline-styles
+                  { color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
+                : {
+                    color: theme.isV3
+                      ? theme.colors.onSurfaceVariant
+                      : undefined,
+                  },
               { ...textFont },
             ]}
             selectable={false}
@@ -127,7 +134,6 @@ const styles = StyleSheet.create({
     height: ITEM_HEIGHT,
     justifyContent: 'center',
   },
-  selectedYear: { color: '#fff' },
   yearButton: {
     borderRadius: 46 / 2,
     overflow: 'hidden',

package/src/Time/timeUtils.ts

@@ -265,7 +265,10 @@ export function toHourOutputFormat(
   if (is24Hour) {
     return newHours
   }
-  if ((!is24Hour && previousHours === 0) || newHours === 0) {
+  if (previousHours === 0 && newHours !== 0) {
+    return newHours - 12 < 0 ? newHours : newHours - 12
+  }
+  if (previousHours >= 12 && newHours < 12) {
     return newHours + 12
   }
   return newHours

package/src/utils.ts

@@ -17,6 +17,9 @@ export function useLatest<T>(value: T) {
 
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
+  if (theme.isV3) {
+    return theme.colors.surface
+  }
   return theme.dark && theme.mode === 'adaptive'
     ? overlay(4, theme.colors.surface)
     : theme.colors.primary
@@ -32,7 +35,11 @@ export function useHeaderColorIsLight() {
 }
 
 export function useHeaderTextColor() {
+  const theme = useTheme()
   const isLight = useHeaderColorIsLight()
+  if (theme.isV3) {
+    return theme.colors.onSurfaceVariant
+  }
   return !isLight ? '#fff' : '#000'
 }