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

package/components/Card/Card.tsx

@@ -51,7 +51,7 @@ const Card = (
             container: [cardStyles.container, cardStyles.root, style],
             innerContainer: [cardStyles.innerContainer, touchableContainerStyle],
         };
-        // eslint-disable-next-line
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant, state, style, touchableContainerStyle]);
 
     const elevation = elevationProp === undefined ? elevationLevel ?? 0 : elevationProp;

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -1,4 +1,3 @@
-import setColor from 'color';
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -37,20 +36,15 @@ 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 { rippleContainerStyles, iconContainerStyles } = useMemo(() => {
+        return {
+            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);
@@ -62,7 +56,6 @@ const CheckboxIOS = (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"
@@ -76,7 +69,7 @@ const CheckboxIOS = (
                     allowFontScaling={false}
                     type="material-community"
                     name={icon}
-                    size={iconSize}
+                    size={iconSizeMap[size]}
                     color={checkedColor}
                 />
             </View>

package/components/Checkbox/CheckboxBase.tsx

@@ -1,6 +1,5 @@
-import setColor from 'color';
 import { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
-import { Platform, type ViewProps } from 'react-native';
+import { type ViewProps } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -51,20 +50,15 @@ const CheckboxAndroid = (
         size,
     });
 
-    const { iconSize, rippleColor, rippleContainerStyles, stateLayerStyle, iconStyle } =
-        useMemo(() => {
-            const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+    const { 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],
+            rippleContainerStyles: [styles.root, style],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, uncheckedColorProp, style, size, state]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -82,7 +76,6 @@ const CheckboxAndroid = (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"
@@ -96,13 +89,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/DateCalendar.tsx

@@ -11,7 +11,7 @@ import { useOptionalDatePickerContext } from './context';
 
 export type DateCalendarProps = DatePickerInlineProps;
 
-const DateCalendarDefault = memo((props: DateCalendarProps) => {
+const DateCalendarDefault = memo(({ headerLayout = 'default', ...props }: DateCalendarProps) => {
     const ctx = useOptionalDatePickerContext();
 
     const hasExplicitState =
@@ -22,7 +22,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
         props.onChange !== undefined;
 
     const isRange = props.mode === 'range' || ctx?.mode === 'range';
-    const effectiveHeaderLayout = props.headerLayout ?? (ctx ? 'docked' : 'inline');
+    const effectiveHeaderLayout = headerLayout ?? (ctx ? 'docked' : 'inline');
     const showOutsideDays =
         props.showOutsideDays ?? (effectiveHeaderLayout === 'docked' && !isRange);
 
@@ -50,7 +50,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
                 onChange={onChange}
                 locale={locale}
                 validRange={validRange}
-                headerLayout={props.headerLayout ?? 'docked'}
+                headerLayout={headerLayout}
                 showOutsideDays={showOutsideDays}
             />
         );
@@ -72,7 +72,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
             onChange={onChange}
             locale={locale}
             validRange={validRange}
-            headerLayout={props.headerLayout ?? 'docked'}
+            headerLayout={headerLayout}
             showOutsideDays={showOutsideDays}
         />
     );

package/components/DatePicker/DatePickerModal.tsx

@@ -10,14 +10,14 @@ import {
 } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { format } from '../../utils/date-fns';
 import { DateField } from '../DateField';
+import type { DatePickerInlineProps } from '../DatePickerInline/DatePickerInline';
 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,7 +42,13 @@ export type DatePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onC
     cancelLabel?: string;
     editIcon?: string;
     calendarIcon?: string;
-    headerLayout?: 'inline' | 'docked';
+    emptySummaryLabel?: string;
+    editingSummaryLabel?: string;
+    dateInputLabel?: string;
+    showCalendarAccessibilityLabel?: string;
+    enterDateManuallyAccessibilityLabel?: string;
+    locale?: DatePickerLocale;
+    headerLayout?: DatePickerInlineProps['headerLayout'];
     /** Override the surface default draft mode. Modal defaults to `true` (staged commit). */
     draft?: boolean;
 };
@@ -59,6 +65,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 +108,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 +154,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 +178,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 +203,7 @@ function DatePickerModalInner({
     onClose: onCloseProp,
     value: valueProp,
     onChange: onChangeProp,
+    locale,
     draft: draftProp,
     ...rest
 }: DatePickerModalProps) {
@@ -206,7 +217,7 @@ function DatePickerModalInner({
     );
 
     if (outer) {
-        return <DatePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+        return <DatePickerModalLayer base={outer} draft={draftProp} {...rest} />;
     }
 
     return (
@@ -214,8 +225,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,16 +1,17 @@
-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 { useDatePickerStoreRef, useDatePickerStoreValue } from './DatePickerContext';
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
 import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStoreRef, useDatePickerInlineStoreValue } from './store';
 import { datePickerHeaderStyles } from './utils';
 
 export type DockedHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -22,16 +23,19 @@ function DatePickerDockedHeader({
     disableWeekDays,
     style: styleProp,
 }: DockedHeaderProps) {
-    const setStore = useDatePickerStoreRef().set;
-    const { localDate, pickerType } = useDatePickerStoreValue(state => ({
+    const setStore = useDatePickerInlineStoreRef().set;
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
         pickerType: state.pickerType,
     }));
     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/DatePickerInline.tsx

@@ -25,7 +25,7 @@ const DatePickerInline = ({
     onChange,
     locale = 'en',
     mode = 'single',
-    headerLayout = 'inline',
+    headerLayout = 'default',
     HeaderComponent,
     containerStyle: containerStyleProp,
     ...rest

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -2,10 +2,10 @@ import { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useLatest } from '../../hooks';
-import { defaultValue, Provider, useDatePickerStore } from './DatePickerContext';
 import { areDatesOnSameDay, dateToUnix, getEndOfDay, getInitialIndex } from './dateUtils';
 import Month from './Month';
 import MonthPicker from './MonthPicker';
+import { defaultValue, Provider, useDatePickerInlineStore } from './store';
 import Swiper from './Swiper';
 import type {
     CalendarDate,
@@ -46,7 +46,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
         showOutsideDays,
         headerLayout,
     } = props;
-    const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
+    const [pickerType, setStore] = useDatePickerInlineStore(state => state.pickerType);
 
     const scrollMode = mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal';
     const isHorizontal = scrollMode === 'horizontal';
@@ -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,11 +1,12 @@
-import { add, format } from 'date-fns';
+import { add, setYear } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
-import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
 import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 import { datePickerHeaderStyles, dayNamesHeight } from './utils';
 
 const buttonContainerHeight = 56;
@@ -13,7 +14,7 @@ const buttonContainerMarginTop = 4;
 const buttonContainerMarginBottom = 8;
 
 export type CalendarHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -25,18 +26,21 @@ function DatePickerInlineHeader({
     disableWeekDays,
     style: styleProp,
 }: CalendarHeaderProps) {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, isYearPickerType } = useDatePickerStoreValue(state => ({
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
-        isYearPickerType: state.pickerType === 'year',
+        pickerType: state.pickerType,
     }));
     const isHorizontal = scrollMode === 'horizontal';
 
     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 } =
@@ -54,36 +58,62 @@ function DatePickerInlineHeader({
         };
     }, [styleProp]);
 
+    const handleOnMonthPress = useCallback(() => {
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'month' ? undefined : 'month',
+            }));
+    }, [isHorizontal, setStore]);
+
     const handleOnYearPress = useCallback(() => {
-        isHorizontal && setStore(prev => ({ pickerType: prev.pickerType ? undefined : 'year' }));
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'year' ? undefined : 'year',
+            }));
     }, [isHorizontal, setStore]);
 
-    const handleOnPrev = useCallback(() => {
+    const handleMonthPrev = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
     }, [setStore]);
 
-    const handleOnNext = useCallback(() => {
+    const handleMonthNext = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
     }, [setStore]);
 
+    const handleYearPrev = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() - 1),
+        }));
+    }, [setStore]);
+
+    const handleYearNext = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() + 1),
+        }));
+    }, [setStore]);
+
     return (
         <View pointerEvents={'box-none'}>
             <>
                 {isHorizontal && (
                     <View style={containerStyle}>
                         <HeaderItem
-                            onPressDropdown={handleOnYearPress}
-                            type="year"
-                            value={`${monthName} ${year}`}
-                            pickerType="year"
-                            selecting={isYearPickerType}
+                            onPrev={handleMonthPrev}
+                            onNext={handleMonthNext}
+                            onPressDropdown={handleOnMonthPress}
+                            type="month"
+                            value={monthName}
+                            pickerType={pickerType}
+                            selecting={pickerType === 'month'}
                         />
                         <HeaderItem
-                            onNext={handleOnNext}
-                            onPrev={handleOnPrev}
-                            selecting={false}
+                            onNext={handleYearNext}
+                            onPrev={handleYearPrev}
+                            onPressDropdown={handleOnYearPress}
+                            type="year"
+                            selecting={pickerType === 'year'}
                             value={year}
-                            pickerType="year"
+                            pickerType={pickerType}
                         />
                     </View>
                 )}

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/HeaderItem.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
-import { useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStoreValue } from './store';
 
 function HeaderItem({
     value,
@@ -25,7 +25,7 @@ function HeaderItem({
     onNext?: (type: 'month' | 'year' | undefined) => void;
     onPrev?: (type: 'month' | 'year' | undefined) => void;
 }) {
-    const { startDateYear, endDateYear } = useDatePickerStoreValue(state => ({
+    const { startDateYear, endDateYear } = useDatePickerInlineStoreValue(state => ({
         startDateYear: state.startDateYear,
         endDateYear: state.endDateYear,
     }));