react-native-molecules 0.5.0-beta.20 → 0.5.0-beta.21

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -37,20 +37,16 @@ const CheckboxIOS = (
         state: state as States,
         size,
     });
+    const checkedColor = colorProp;
 
-    const { checkedColor, iconSize, rippleColor, rippleContainerStyles, iconContainerStyles } =
-        useMemo(() => {
-            const _checkedColor = colorProp;
-
-            return {
-                checkedColor: _checkedColor,
-                iconSize: iconSizeMap[size],
-                rippleColor: setColor(_checkedColor).fade(0.32).rgb().string(),
-                rippleContainerStyles: [styles.root, style],
-                iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [checked, colorProp, indeterminate, style, state, size]);
+    const { rippleColor, rippleContainerStyles, iconContainerStyles } = useMemo(() => {
+        return {
+            rippleColor: setColor(checkedColor).fade(0.32).rgb().string(),
+            rippleContainerStyles: [styles.root, style],
+            iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, indeterminate, style, state, size, checkedColor]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -76,7 +72,7 @@ const CheckboxIOS = (
                     allowFontScaling={false}
                     type="material-community"
                     name={icon}
-                    size={iconSize}
+                    size={iconSizeMap[size]}
                     color={checkedColor}
                 />
             </View>

package/components/Checkbox/CheckboxBase.tsx

@@ -51,20 +51,18 @@ const CheckboxAndroid = (
         size,
     });
 
-    const { iconSize, rippleColor, rippleContainerStyles, stateLayerStyle, iconStyle } =
-        useMemo(() => {
-            const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+    const { rippleColor, rippleContainerStyles, iconStyle } = useMemo(() => {
+        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
 
-            return {
-                iconStyle: [styles.icon, _color],
-                iconSize: iconSizeMap[size],
-                // TODO - fix this on web
-                rippleColor:
-                    Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
-                rippleContainerStyles: [styles.root, style],
-                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
-            };
-        }, [checked, colorProp, uncheckedColorProp, size, style, stateLayerProps?.style]);
+        return {
+            iconStyle: [styles.icon, _color],
+            // TODO - fix this on web
+            rippleColor:
+                Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
+            rippleContainerStyles: [styles.root, style],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, uncheckedColorProp, style, size, state]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -96,13 +94,13 @@ const CheckboxAndroid = (
                     allowFontScaling={false}
                     type="material-community"
                     name={icon}
-                    size={iconSize}
+                    size={iconSizeMap[size]}
                     style={iconStyle}
                 />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
-                    style={stateLayerStyle}
+                    style={[styles.stateLayer, stateLayerProps?.style]}
                 />
             </>
         </TouchableRipple>

package/components/DateField/DateField.tsx

@@ -14,6 +14,7 @@ export type DateFieldProps = Omit<
 > & {
     inputMode?: DateFieldInputMode;
     dateFormat?: string;
+    mask?: string;
 };
 
 const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
@@ -93,13 +94,13 @@ function DateField({
 
     return (
         <TextInputWithMask
+            placeholder={dateFormat}
+            keyboardType="number-pad"
+            mask={dateFormat}
             {...rest}
             ref={ref}
             disabled={disabled}
             value={formattedValue}
-            placeholder={dateFormat}
-            keyboardType="number-pad"
-            mask={dateFormat}
             onChangeText={onChangeText}
             onBlur={onInnerBlur}
             onFocus={onInnerFocus}

package/components/DatePicker/DatePickerModal.tsx

@@ -10,14 +10,13 @@ import {
 } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { format } from '../../utils/date-fns';
 import { DateField } from '../DateField';
 import { IconButton } from '../IconButton';
 import { Modal, type ModalProps } from '../Modal';
 import { Portal } from '../Portal';
 import { Text } from '../Text';
 import { TextInput } from '../TextInput';
-import type { DatePickerContextType, DatePickerValue } from './context';
+import type { DatePickerContextType, DatePickerLocale, DatePickerValue } from './context';
 import {
     DatePickerContext,
     useDatePickerContext,
@@ -42,6 +41,12 @@ export type DatePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onC
     cancelLabel?: string;
     editIcon?: string;
     calendarIcon?: string;
+    emptySummaryLabel?: string;
+    editingSummaryLabel?: string;
+    dateInputLabel?: string;
+    showCalendarAccessibilityLabel?: string;
+    enterDateManuallyAccessibilityLabel?: string;
+    locale?: DatePickerLocale;
     headerLayout?: 'inline' | 'docked';
     /** Override the surface default draft mode. Modal defaults to `true` (staged commit). */
     draft?: boolean;
@@ -59,6 +64,11 @@ function DatePickerModalBody({
     cancelLabel = 'Cancel',
     editIcon = 'pencil',
     calendarIcon = 'calendar',
+    emptySummaryLabel = 'Select date',
+    editingSummaryLabel = 'Enter dates',
+    dateInputLabel = 'Date',
+    showCalendarAccessibilityLabel = 'Show calendar',
+    enterDateManuallyAccessibilityLabel = 'Enter date manually',
     headerLayout,
     ...rest
 }: BodyProps) {
@@ -97,15 +107,19 @@ function DatePickerModalBody({
             : ctx.draftValue;
 
     const summaryLabel = useMemo(() => {
-        if (editing) return 'Enter dates';
-        if (!draft) return 'Select date';
-        return format(draft, 'EEE, MMM d');
-    }, [draft, editing]);
+        if (editing) return editingSummaryLabel;
+        if (!draft) return emptySummaryLabel;
+        return new Intl.DateTimeFormat(ctx.locale, {
+            weekday: 'short',
+            month: 'short',
+            day: 'numeric',
+        }).format(draft);
+    }, [ctx.locale, draft, editing, editingSummaryLabel, emptySummaryLabel]);
 
     const body = editing ? (
         <View style={datePickerModalStyles.inputContainer}>
             <DateField autoFocus>
-                <TextInput.Label>Date</TextInput.Label>
+                <TextInput.Label>{dateInputLabel}</TextInput.Label>
             </DateField>
         </View>
     ) : (
@@ -139,7 +153,9 @@ function DatePickerModalBody({
                                 <IconButton
                                     name={editing ? calendarIcon : editIcon}
                                     accessibilityLabel={
-                                        editing ? 'Show calendar' : 'Enter date manually'
+                                        editing
+                                            ? showCalendarAccessibilityLabel
+                                            : enterDateManuallyAccessibilityLabel
                                     }
                                     onPress={() => setEditing(prev => !prev)}
                                     style={datePickerModalStyles.modeToggle}
@@ -161,31 +177,24 @@ function DatePickerModalBody({
 function DatePickerModalLayer({
     base,
     draft: draftProp,
-    bodyProps,
-}: {
+    ...rest
+}: BodyProps & {
     base: DatePickerContextType;
     draft: boolean | undefined;
-    bodyProps: BodyProps;
 }) {
     const effectiveDraft = draftProp ?? base.providerDraft ?? true;
     const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
     if (!base.open) return null;
     return (
         <DatePickerContext value={ctx}>
-            <DatePickerModalBody {...bodyProps} />
+            <DatePickerModalBody {...rest} />
         </DatePickerContext>
     );
 }
 
-function DatePickerModalAdapter({
-    draft,
-    bodyProps,
-}: {
-    draft: boolean | undefined;
-    bodyProps: BodyProps;
-}) {
+function DatePickerModalAdapter({ draft, ...rest }: BodyProps & { draft: boolean | undefined }) {
     const base = useDatePickerContext();
-    return <DatePickerModalLayer base={base} draft={draft} bodyProps={bodyProps} />;
+    return <DatePickerModalLayer base={base} draft={draft} {...rest} />;
 }
 
 function DatePickerModalInner({
@@ -193,6 +202,7 @@ function DatePickerModalInner({
     onClose: onCloseProp,
     value: valueProp,
     onChange: onChangeProp,
+    locale,
     draft: draftProp,
     ...rest
 }: DatePickerModalProps) {
@@ -206,7 +216,7 @@ function DatePickerModalInner({
     );
 
     if (outer) {
-        return <DatePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+        return <DatePickerModalLayer base={outer} draft={draftProp} {...rest} />;
     }
 
     return (
@@ -214,8 +224,9 @@ function DatePickerModalInner({
             value={valueProp}
             onChange={onChangeProp}
             open={isOpenProp}
+            locale={locale}
             onOpenChange={onOpenChange}>
-            <DatePickerModalAdapter draft={draftProp} bodyProps={rest} />
+            <DatePickerModalAdapter draft={draftProp} {...rest} />
         </DatePickerProvider>
     );
 }

package/components/DatePicker/DatePickerProvider.tsx

@@ -4,7 +4,13 @@ import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { getRegisteredComponentWithFallback } from '../../core';
 import { useControlledValue } from '../../hooks';
 import type { ValidRangeType } from '../DatePickerInline';
-import type { DatePickerContextType, DatePickerMode, DatePickerValue, RangeValue } from './context';
+import type {
+    DatePickerContextType,
+    DatePickerLocale,
+    DatePickerMode,
+    DatePickerValue,
+    RangeValue,
+} from './context';
 import { DatePickerContext, withDraftLayer } from './context';
 
 const DATE_FORMAT_BY_MODE: Record<DatePickerMode, string> = {
@@ -30,7 +36,7 @@ export type DatePickerProviderProps = {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 
-    locale?: string;
+    locale?: DatePickerLocale;
     validRange?: ValidRangeType;
     is24Hour?: boolean;
     dateFormat?: string;

package/components/DatePicker/context.tsx

@@ -5,6 +5,7 @@ import type { ValidRangeType } from '../DatePickerInline';
 import { registerPortalContext } from '../Portal';
 
 export type DatePickerMode = 'date' | 'time' | 'datetime' | 'range';
+export type DatePickerLocale = Intl.LocalesArgument;
 
 export type DateValue = Date | null;
 export type RangeValue = { start: Date | null; end: Date | null };
@@ -35,7 +36,7 @@ export type DatePickerContextType = {
     open: boolean;
     setOpen: (open: boolean) => void;
     triggerRef: RefObject<any>;
-    locale?: string;
+    locale?: DatePickerLocale;
     validRange?: ValidRangeType;
     is24Hour: boolean;
     dateFormat: string;

package/components/DatePicker/index.tsx

@@ -16,6 +16,7 @@ export const DatePicker = {
 
 export type {
     DatePickerContextType,
+    DatePickerLocale,
     DatePickerMode,
     DatePickerValue,
     DateValue,

package/components/DatePickerInline/DatePickerDockedHeader.tsx

@@ -1,8 +1,9 @@
-import { add, format, setYear } from 'date-fns';
+import { add, setYear } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import { useDatePickerStoreRef, useDatePickerStoreValue } from './DatePickerContext';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
@@ -10,7 +11,7 @@ import HeaderItem from './HeaderItem';
 import { datePickerHeaderStyles } from './utils';
 
 export type DockedHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -30,8 +31,11 @@ function DatePickerDockedHeader({
     const isHorizontal = scrollMode === 'horizontal';
 
     const { monthName, year } = useMemo(
-        () => ({ monthName: format(localDate, 'LLL'), year: localDate.getFullYear() }),
-        [localDate],
+        () => ({
+            monthName: new Intl.DateTimeFormat(locale, { month: 'short' }).format(localDate),
+            year: localDate.getFullYear(),
+        }),
+        [localDate, locale],
     );
 
     const handleMonthDropdown = useCallback(() => {

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -173,7 +173,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
             {isHorizontal && pickerType === 'year' && (
                 <YearPicker layout={headerLayout === 'docked' ? 'list' : 'grid'} />
             )}
-            {isHorizontal && pickerType === 'month' && <MonthPicker />}
+            {isHorizontal && pickerType === 'month' && <MonthPicker locale={locale} />}
         </View>
     );
 }

package/components/DatePickerInline/DatePickerInlineHeader.tsx

@@ -1,7 +1,8 @@
-import { add, format } from 'date-fns';
+import { add } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
@@ -13,7 +14,7 @@ const buttonContainerMarginTop = 4;
 const buttonContainerMarginBottom = 8;
 
 export type CalendarHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -35,8 +36,11 @@ function DatePickerInlineHeader({
     const { monthName, year } = useMemo(() => {
         const y = localDate.getFullYear();
 
-        return { monthName: format(localDate, 'LLLL'), year: y };
-    }, [localDate]);
+        return {
+            monthName: new Intl.DateTimeFormat(locale, { month: 'long' }).format(localDate),
+            year: y,
+        };
+    }, [localDate, locale]);
 
     const { containerStyle } = useMemo(() => {
         // const { datePickerHeader, buttonContainer, buttonWrapper, spacer, ...rest } =

package/components/DatePickerInline/DayNames.tsx

@@ -1,23 +1,26 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { addDays, format, startOfWeek } from '../../utils/date-fns';
+import { addDays, startOfWeek } from '../../utils/date-fns';
+import type { DatePickerLocale } from '../DatePicker/context';
 import { type DisableWeekDaysType, showWeekDay } from './dateUtils';
 import DayName from './DayName';
 import { dateDayNameStyles } from './utils';
 
-const shortDayNames = (() => {
-    const firstDOW = startOfWeek(new Date());
-    return Array.from(Array(7)).map((_, i) => format(addDays(firstDOW, i), 'EEEEE'));
-})();
-
 function DayNames({
     disableWeekDays,
-}: // locale,
-{
+    locale,
+}: {
     disableWeekDays?: DisableWeekDaysType;
-    locale?: string;
+    locale?: DatePickerLocale;
 }) {
+    const shortDayNames = useMemo(() => {
+        const firstDOW = startOfWeek(new Date());
+        return Array.from(Array(7)).map((_, i) =>
+            new Intl.DateTimeFormat(locale, { weekday: 'narrow' }).format(addDays(firstDOW, i)),
+        );
+    }, [locale]);
+
     return (
         <View style={dateDayNameStyles.container} pointerEvents={'none'}>
             {shortDayNames

package/components/DatePickerInline/Month.tsx

@@ -1,7 +1,6 @@
 import { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { format } from '../../utils/date-fns';
 import { Text } from '../Text';
 import { getCalendarHeaderHeight } from './DatePickerInlineHeader';
 import {
@@ -43,6 +42,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         disableWeekDays,
         validRange,
         showOutsideDays,
+        locale,
         // customMonthStyles,
     } = props;
     const isHorizontal = scrollMode === 'horizontal';
@@ -54,9 +54,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         const md = addMonths(new Date(), realIndex);
         const y = md.getFullYear();
         const m = md.getMonth();
+        const name = new Intl.DateTimeFormat(locale, { month: 'long' }).format(md);
 
-        return { monthName: format(md, 'LLLL'), month: m, year: y };
-    }, [index]);
+        return { monthName: name, month: m, year: y };
+    }, [index, locale]);
 
     const grid = useMemo(
         () =>

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,10 +1,11 @@
-import { format, setMonth } from 'date-fns';
+import { setMonth } from 'date-fns';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { FlatList, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
 import { range } from '../../utils/dateTimePicker';
+import type { DatePickerLocale } from '../DatePicker/context';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { HorizontalDivider } from '../HorizontalDivider';
 import { Icon } from '../Icon';
@@ -12,7 +13,7 @@ import { ListItem } from '../ListItem/';
 import { Text } from '../Text';
 import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
 
-export default function MonthPicker() {
+export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
     const [_, setStore] = useDatePickerStore(state => state);
     const { localDate, selectingMonth } = useDatePickerStoreValue(state => ({
         localDate: state.localDate,
@@ -40,10 +41,11 @@ export default function MonthPicker() {
                     selected={localDate.getMonth() === item}
                     onPressMonth={handleOnChange}
                     monthStyles={datePickerMonthPickerStyles.root}
+                    locale={locale}
                 />
             );
         },
-        [localDate, handleOnChange],
+        [localDate, handleOnChange, locale],
     );
 
     if (!selectingMonth) {
@@ -76,11 +78,13 @@ function MonthPure({
     selected,
     onPressMonth,
     monthStyles,
+    locale,
 }: {
     month: number;
     selected: boolean;
     onPressMonth: (newMonth: number) => any;
     monthStyles: ViewStyle;
+    locale?: DatePickerLocale;
 }) {
     const state = resolveStateVariant({
         selected,
@@ -100,6 +104,12 @@ function MonthPure({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selected, monthStyles, state]);
 
+    const monthLabel = useMemo(
+        () =>
+            new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
+        [locale, month],
+    );
+
     const handleMonthPress = useCallback(() => {
         onPressMonth(month);
     }, [onPressMonth, month]);
@@ -123,7 +133,7 @@ function MonthPure({
             }>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
-                    {format(new Date(2000, month, 1), 'MMMM')}
+                    {monthLabel}
                 </Text>
             </View>
         </ListItem>

package/components/DatePickerInline/types.ts

@@ -1,11 +1,12 @@
 import type { MemoExoticComponent } from 'react';
 import type { ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { CalendarHeaderProps } from './DatePickerInlineHeader';
 import type { DisableWeekDaysType } from './dateUtils';
 
 export interface BaseMonthProps {
-    locale: undefined | string;
+    locale: DatePickerLocale | undefined;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     mode: ModeType;
@@ -47,7 +48,7 @@ export type ValidRangeType = {
 };
 
 export type BaseDatePickerProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     disableWeekDays?: DisableWeekDaysType;
     validRange?: ValidRangeType;
     startYear?: number;

package/components/TimeField/TimeField.tsx

@@ -60,11 +60,11 @@ function TimeField({ ref, disabled: disabledProp, onBlur, onFocus, ...rest }: Ti
 
     return (
         <TextInput
+            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
             {...rest}
             ref={ref}
             disabled={disabled}
             value={formatted}
-            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
             onChangeText={onChangeText}
             onBlur={onInnerBlur}
             onFocus={onInnerFocus}

package/components/TimePicker/TimePickerModal.tsx

@@ -5,7 +5,11 @@ import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { getRegisteredComponentWithFallback } from '../../core';
 import { useControlledValue } from '../../hooks';
 import { DatePickerActions, DatePickerProvider } from '../DatePicker';
-import type { DatePickerContextType, DatePickerValue } from '../DatePicker/context';
+import type {
+    DatePickerContextType,
+    DatePickerLocale,
+    DatePickerValue,
+} from '../DatePicker/context';
 import {
     DatePickerContext,
     useDatePickerContext,
@@ -32,6 +36,7 @@ export type TimePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onC
     onClose?: () => void;
     value?: DatePickerValue;
     onChange?: (value: DatePickerValue) => void;
+    locale?: DatePickerLocale;
     is24Hour?: boolean;
     inputType?: PossibleInputTypes;
     defaultInputType?: PossibleInputTypes;
@@ -119,31 +124,24 @@ function TimePickerModalBody({
 function TimePickerModalLayer({
     base,
     draft: draftProp,
-    bodyProps,
-}: {
+    ...rest
+}: BodyProps & {
     base: DatePickerContextType;
     draft: boolean | undefined;
-    bodyProps: BodyProps;
 }) {
     const effectiveDraft = draftProp ?? base.providerDraft ?? true;
     const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
     if (!base.open) return null;
     return (
         <DatePickerContext value={ctx}>
-            <TimePickerModalBody {...bodyProps} />
+            <TimePickerModalBody {...rest} />
         </DatePickerContext>
     );
 }
 
-function TimePickerModalAdapter({
-    draft,
-    bodyProps,
-}: {
-    draft: boolean | undefined;
-    bodyProps: BodyProps;
-}) {
+function TimePickerModalAdapter({ draft, ...rest }: BodyProps & { draft: boolean | undefined }) {
     const base = useDatePickerContext();
-    return <TimePickerModalLayer base={base} draft={draft} bodyProps={bodyProps} />;
+    return <TimePickerModalLayer base={base} draft={draft} {...rest} />;
 }
 
 const TimePickerModalDefault = memo(
@@ -152,6 +150,7 @@ const TimePickerModalDefault = memo(
         onClose: onCloseProp,
         value: valueProp,
         onChange: onChangeProp,
+        locale,
         is24Hour,
         draft: draftProp,
         ...rest
@@ -159,7 +158,7 @@ const TimePickerModalDefault = memo(
         const outer = useOptionalDatePickerContext();
 
         if (outer) {
-            return <TimePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+            return <TimePickerModalLayer base={outer} draft={draftProp} {...rest} />;
         }
 
         return (
@@ -168,11 +167,12 @@ const TimePickerModalDefault = memo(
                 value={valueProp}
                 onChange={onChangeProp}
                 open={isOpenProp}
+                locale={locale}
                 onOpenChange={next => {
                     if (!next) onCloseProp?.();
                 }}
                 is24Hour={is24Hour}>
-                <TimePickerModalAdapter draft={draftProp} bodyProps={rest} />
+                <TimePickerModalAdapter draft={draftProp} {...rest} />
             </DatePickerProvider>
         );
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.20",
+    "version": "0.5.0-beta.21",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",