Continue: DateTimePicker base structure completed.

example/src/index.tsx

@@ -2,15 +2,19 @@ import Navigation from "./navigation";
 import {
     useFonts
 } from "expo-font";
+import moment from "moment";
 import {
     setupNCoreUIKit
 } from "ncore-ui-kit-mobile";
+import "moment/locale/tr";
 
 const NCoreUIKitBase = setupNCoreUIKit({
     initialSelectedGapPropagation: "spacious",
     initialSelectedTheme: "light"
 });
 
+moment.locale("tr");
+
 const App = () => {
     return <Navigation/>;
 };

example/src/pages/home/index.tsx

@@ -28,7 +28,8 @@ import {
     Dialog,
     Switch,
     Text,
-    MarkdownViewer
+    MarkdownViewer,
+    DateTimePicker
 } from "ncore-ui-kit-mobile";
 import {
     useNavigation
@@ -41,6 +42,7 @@ import {
     ChevronRight as ChevronRightIcon,
     HomeIcon
 } from "lucide-react-native";
+import moment from "moment";
 
 const X = [
     {
@@ -364,6 +366,14 @@ const Home = () => {
             </Fragment>;
         }}
     >
+        <DateTimePicker
+            variant="single"
+            initialDateRange={{
+                start: moment().subtract(2, "days").startOf("day").toDate(),
+                end: moment().add(6, "days").endOf("day").toDate()
+            }}
+            initialDate={new Date()}
+        />
         <MarkdownViewer
             content={`
 # Merhaba Furkan!.

src/components/bottomSheet/index.tsx

@@ -177,25 +177,15 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     }, [isWorkAsFullScreen]);
 
     useEffect(() => {
-        if(isMeasured && contentHeight.current !== -1) {
-            if(isCanFullScreenOnSwipe && !isWorkAsFullScreen) {
-                maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : topSafeArea);
-            } else if(isAutoHeight || !snapPoint) {
-                maxHeight.current = contentHeight.current;
-            }
-        }
-    }, [isMeasured]);
+        if (!isMeasured || contentHeight.current === -1) return;
 
-    useEffect(() => {
-        if(isActive && isMeasured) {
-            if(!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
-                maxHeight.current = snapPoint;
-            } else if(isWorkAsFullScreen) {
-                maxHeight.current = containerHeightRef.current - (isWrapSafeAreaContext ? topSafeArea : 0);
-            } else {
-                maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0);
-            }
+        if (isCanFullScreenOnSwipe && !isWorkAsFullScreen) {
+            maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : topSafeArea);
+        } else if (isAutoHeight || !snapPoint) {
+            maxHeight.current = contentHeight.current;
+        }
 
+        if (isActive) {
             openAnimation();
         }
     }, [
@@ -292,6 +282,10 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     const openAnimation = () => {
         resetState();
 
+        if (isAutoHeight || !snapPoint) {
+            animatedHeight.setValue(contentHeight.current);
+        }
+
         if(onOpen) onOpen();
 
         Animated.timing(animatedTranslateY, {
@@ -342,17 +336,18 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     };
 
     const onLayout = (event: LayoutChangeEvent) => {
-        if (isMeasured) return;
-
         const {
             height
         } = event.nativeEvent.layout;
 
-        animatedHeight.setValue(height);
+        if (height === contentHeight.current) return;
 
         contentHeight.current = height;
 
-        setIsMeasured(true);
+        if(!isMeasured) {
+            animatedHeight.setValue(height);
+            setIsMeasured(true);
+        }
     };
 
     const resetState = () => {
@@ -364,7 +359,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
 
         const pivot = isWorkAsFullScreen
             ? containerHeightRef.current
-            : (snapPoint ?? contentHeight.current);
+            : (isAutoHeight ? 0 : (snapPoint ?? contentHeight.current));
 
         initialHeight.current = pivot;
         initialTranslateY.current = 0;

src/components/dateSelector/index.tsx

@@ -1,12 +1,268 @@
 import {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useState,
+    type Ref
+} from "react";
+import {
+    TouchableOpacity,
     View
 } from "react-native";
+import type {
+    CalendarDay,
+    IDateSelectorRef
+} from "./type";
+import type IDateSelectorProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    dateSelect
+} from "./util";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import moment from "moment";
+import Text from "../text";
+
+const DateSelector = ({
+    isShowTodayIndicator = true,
+    localeBasedFirstDayOfWeek,
+    dayOfWeekLength = "long",
+    viewDate: viewDateProp,
+    dateRange,
+    dateRule,
+    variant,
+    date
+}: IDateSelectorProps, ref: Ref<IDateSelectorRef>) => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const selectDate = dateSelect({
+        dateRange,
+        dateRule,
+        variant,
+        date
+    });
+
+    const [
+        viewDate,
+        setViewDate
+    ] = useState(viewDateProp ? viewDateProp : selectDate);
+
+    const [
+        monthDays,
+        setMonthDays
+    ] = useState<Array<CalendarDay>>([]);
+
+    const {
+        todayIndicator: todayIndicatorDynamicStyle,
+        dayOfWeek: dayOfWeekDynamicStyle,
+        day: dayDynamicStyle
+    } = useStyles({
+        radiuses,
+        borders,
+        colors,
+        spaces
+    });
+
+    useEffect(() => {
+        const allDays = getDaysOfViewMonth({
+            tDate: viewDate
+        });
+
+        setMonthDays(allDays);
+    }, [viewDate]);
+
+    useEffect(() => {
+        if(viewDateProp) {
+            setViewDate(viewDateProp);
+        }
+    }, [viewDateProp]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            changeCurrentMonth: (date: Date) => {
+                const allDays = getDaysOfViewMonth({
+                    tDate: date
+                });
+
+                setMonthDays(allDays);
+            }
+        }),
+        []
+    );
+
+    const getDaysOfViewMonth = ({
+        tDate
+    }: {
+        tDate: Date
+    }): Array<CalendarDay> => {
+        const targetDate = moment(new Date(tDate));
+
+        const startOfCalendar = targetDate.clone().startOf("month").startOf("week");
+        const endOfCalendar = targetDate.clone().endOf("month").endOf("week");
+
+        const totalDays = endOfCalendar.diff(startOfCalendar, "days") + 1;
+
+        const allDays = Array.from({
+            length: totalDays
+        }).map((_, index) => {
+            const currentDay = startOfCalendar.clone().add(index, "days");
+
+            let isSelected = false;
+
+            if(variant === "single" && date) {
+                if(moment(currentDay).isSame(date, "day")) isSelected = true;
+            } else if(variant === "range" && dateRange && dateRange.start) {
+                if(moment(currentDay).isBetween(dateRange.start, dateRange.end, "day", "[]")) isSelected = true;
+            }
+
+            return {
+                isCurrentMonth: currentDay.isSame(targetDate, "month"),
+                isToday: currentDay.isSame(moment(), "day"),
+                dayOfWeek: currentDay.weekday(),
+                dayNumber: currentDay.date(),
+                date: currentDay,
+                isSelected
+            };
+        });
+
+        const weeks: CalendarDay[][] = [];
+
+        allDays.forEach((day, index) => {
+            const weekIndex = Math.floor(index / 7);
+            if (!weeks[weekIndex]) {
+                weeks[weekIndex] = [];
+            }
+            weeks[weekIndex].push(day);
+        });
+
+        return allDays;
+    };
+
+    const renderDay = ({
+        weekIndex,
+        nextItem,
+        prevItem,
+        dayIndex,
+        dayItem
+    }: {
+        nextItem?: CalendarDay;
+        prevItem?: CalendarDay;
+        dayItem: CalendarDay;
+        weekIndex: number;
+        dayIndex: number;
+    }) => {
+        const isNextItemSelected = nextItem && nextItem.isSelected && dayItem.isSelected;
+        const isPrevItemSelected = prevItem && prevItem.isSelected && dayItem.isSelected;
+
+        const selectionStyle = [
+            isNextItemSelected ? {
+                borderBottomRightRadius: 0,
+                borderTopRightRadius: 0
+            } : null,
+            isPrevItemSelected ? {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0
+            } : null,
+            isNextItemSelected && isPrevItemSelected ? {
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0
+            } : null
+        ];
+
+        return <TouchableOpacity
+            key={`day-${weekIndex}-${dayIndex}`}
+            style={[
+                stylesheet.day,
+                dayDynamicStyle,
+                dayItem.isSelected ? {
+                    backgroundColor: colors.content.container.primary,
+                    borderColor: colors.content.container.primary
+                } : null,
+                isNextItemSelected && isPrevItemSelected ? {
+                    backgroundColor: colors.content.container.emphasized,
+                    borderColor: colors.content.container.emphasized
+                } : null,
+                ...selectionStyle
+            ]}
+        >
+            <Text
+                color={isPrevItemSelected && isNextItemSelected ? "emphasized" : dayItem.isSelected ? "onPrimary" : dayItem.isCurrentMonth ? "mid" : "disabled"}
+                variant="labelLargeSize"
+            >
+                {dayItem.dayNumber}
+            </Text>
+            {isShowTodayIndicator && dayItem.isToday ? <View
+                style={[
+                    stylesheet.todayIndicator,
+                    selectionStyle,
+                    todayIndicatorDynamicStyle
+                ]}
+            /> : null}
+        </TouchableOpacity>;
+    };
 
-const DateSelector = () => {
+    let weekDays = moment.weekdays(localeBasedFirstDayOfWeek ? true : false);
 
+    if(dayOfWeekLength === "short") {
+        weekDays = moment.weekdaysShort(localeBasedFirstDayOfWeek ? true : false);
+    } else if(dayOfWeekLength === "very-short") {
+        weekDays = moment.weekdaysMin(localeBasedFirstDayOfWeek ? true : false);
+    }
 
-    return <View>
+    return <View
+        style={[
+            stylesheet.container
+        ]}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            {weekDays.map((weekItem, weekIndex) => {
+                const days = monthDays.map((day, dayI) => ({
+                    ...day,
+                    originalIndex: dayI
+                })).filter((dayItem) => dayItem.dayOfWeek === weekIndex);
 
+                return <View
+                    key={`day-column-${weekIndex}`}
+                    style={[
+                        stylesheet.columnContainer
+                    ]}
+                >
+                    <Text
+                        variant="labelMediumSize"
+                        color="low"
+                        style={{
+                            ...dayOfWeekDynamicStyle
+                        }}
+                    >
+                        {weekItem}
+                    </Text>
+                    {days.map((dayItem, dayIndex) => {
+                        return renderDay({
+                            nextItem: monthDays[dayItem.originalIndex + 1] ?? undefined,
+                            prevItem: monthDays[dayItem.originalIndex - 1] ?? undefined,
+                            weekIndex,
+                            dayIndex,
+                            dayItem
+                        });
+                    })}
+                </View>;
+            })}
+        </View>
     </View>;
 };
-export default DateSelector;
+export default forwardRef(DateSelector);

src/components/dateSelector/stylesheet.ts

@@ -1,19 +1,80 @@
 import {
-    StyleSheet
+    StyleSheet,
+    type TextStyle,
+    type ViewStyle
 } from "react-native";
 import type {
     DateSelectorDynamicStyle
 } from "./type";
+import type {
+    Mutable
+} from "../../types";
 
 const stylesheet = StyleSheet.create({
     container: {
-
+        flex: 1
+    },
+    contentContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 1,
+        flex: 1
+    },
+    columnContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        flexShrink: 1,
+        flex: 1
+    },
+    day: {
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    todayIndicator: {
+        position: "absolute",
+        zIndex: 999
     }
 });
 
 export const useStyles = ({
-
+    radiuses,
+    borders,
+    spaces,
+    colors
 }: DateSelectorDynamicStyle) => {
+    const styles = {
+        dayOfWeek: {
+            marginBottom: spaces.spacingMd
+        } as Mutable<TextStyle>,
+        day: {
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderColor: "transparent",
+            borderWidth: borders.line,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        todayIndicator: {
+            borderColor: colors.content.container.emphasized,
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderWidth: borders.line,
+            bottom: spaces.spacingXs,
+            right: spaces.spacingXs,
+            left: spaces.spacingXs,
+            top: spaces.spacingXs
+        } as Mutable<ViewStyle>
+    };
 
+    return styles;
 };
 export default stylesheet;

src/components/dateSelector/type.ts

@@ -1,5 +1,51 @@
+import type moment from "moment";
+import type {
+    DateTimePickerDateRange,
+    DateTimePickerVariant
+} from "../dateTimePicker/type";
+import type {
+    RRule
+} from "rrule";
+
+export interface IDateSelectorRef {
+    changeCurrentMonth: (date: Date) => void;
+};
+
 export type DateSelectorDynamicStyle = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    borders: NCoreUIKit.ActivePalette["borders"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
 };
+
+export interface CalendarDay {
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    date: moment.Moment;
+    dayNumber: number;
+    dayOfWeek: number;
+    isToday: boolean;
+};
+
+export type DateSelectInitialGeneratorType = {
+    dateRange?: DateTimePickerDateRange;
+    variant: DateTimePickerVariant;
+    dateRule?: RRule;
+    date?: Date;
+};
+
+export type DayOfWeekLengthType = "short" | "very-short" | "long";
+
+interface IDateSelectorProps {
+    dayOfWeekLength?: DayOfWeekLengthType;
+    localeBasedFirstDayOfWeek?: boolean;
+    dateRange?: DateTimePickerDateRange;
+    isShowTodayIndicator?: boolean;
+    variant: DateTimePickerVariant;
+    dateRule?: RRule;
+    viewDate?: Date;
+    date?: Date;
+};
+export type {
+    IDateSelectorProps as default
+};

src/components/dateSelector/util.ts

@@ -0,0 +1,26 @@
+import type {
+    DateSelectInitialGeneratorType
+} from "./type";
+
+export const dateSelect = ({
+    dateRange,
+    dateRule,
+    variant,
+    date
+}: DateSelectInitialGeneratorType): Date => {
+    if(variant === "single" && date) {
+        return date;
+    }
+
+    if(variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
+        if(dateRange.start) return dateRange.start;
+        if(dateRange.end) return dateRange.end;
+    }
+
+    if(dateRule) {
+        const rrule = dateRule.all();
+        if(rrule[0]) return new Date(rrule[0]);
+    }
+
+    return new Date();
+};

src/components/dateTimePicker/index.tsx

@@ -64,13 +64,16 @@ const DateTimePickerTypeIcon: Record<Exclude<DateTimePickerType, "default">, NCo
 const DateTimePicker = ({
     renderLoadingIcon : LoadingIconComponentProp,
     rightIcon: RightIconComponentProp,
+    localeBasedFirstDayOfWeek = true,
     hintTextIcon: HintTextIconProp,
     spreadBehaviour = "baseline",
     customDateTimeSheetLocalize,
+    isShowTodayIndicator = true,
     titleFormat = "DD MMM YYYY",
     isShowDateTimeTools = true,
     isShowHintTextIcon = false,
     isWorkWithRealtime = true,
+    dayOfWeekLength = "short",
     customDateTimeSheetTheme,
     isMultipleSelect = false,
     pickerType = "date-time",
@@ -847,15 +850,17 @@ const DateTimePicker = ({
         {renderHintText()}
 
         <DateTimeSheet
+            localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
             LoadingIconComponentProp={LoadingIconComponentProp}
             dateTimePickerKey={dateTimePickerKey.current}
             customLocalize={customDateTimeSheetLocalize}
             selectMultipleObject={selectMultipleObject}
+            isShowTodayIndicator={isShowTodayIndicator}
             isWorkWithRealtime={isWorkWithRealtime}
             customTheme={customDateTimeSheetTheme}
-            bottomSheetProps={dateTimeSheetProps}
             isMultipleSelect={isMultipleSelect}
             isShowTools={isShowDateTimeTools}
+            dayOfWeekLength={dayOfWeekLength}
             isWorkWithRRule={isWorkWithRRule}
             selectDateRule={selectDateRule}
             bottomSheetRef={bottomSheetRef}
@@ -864,6 +869,10 @@ const DateTimePicker = ({
             setDateRange={setDateRange}
             setIsActive={setIsActive}
             setDateRule={setDateRule}
+            bottomSheetProps={{
+                isAutoHeight: true,
+                ...dateTimeSheetProps
+            }}
             pickerType={pickerType}
             maxChoice={maxChoice}
             minChoice={minChoice}

src/components/dateTimePicker/type.ts

@@ -8,6 +8,9 @@ import type IBottomSheetProps from "../bottomSheet/type";
 import type {
     RRule
 } from "rrule";
+import type {
+    DayOfWeekLengthType
+} from "../dateSelector/type";
 
 export type IDateTimePickerRef = {
     setDateRange: (dateRange: DateTimePickerDateRange) => void;
@@ -141,8 +144,11 @@ interface IDateTimePickerProps {
     >;
     dateRangeTitle?: (dateRange: DateTimePickerDateRange | undefined) => string;
     initialDateRange?: DateTimePickerDateRange;
+    dayOfWeekLength?: DayOfWeekLengthType;
     pickerType?: DateTimePickerPickerType;
+    localeBasedFirstDayOfWeek?: boolean;
     variant?: DateTimePickerVariant;
+    isShowTodayIndicator?: boolean;
     titleFormat?: ValidTitleFormat;
     isShowDateTimeTools?: boolean;
     isWorkWithRealtime?: boolean;

src/components/dateTimeSheet/index.tsx

@@ -1,5 +1,4 @@
 import {
-    TouchableOpacity,
     View
 } from "react-native";
 import type IDateTimeSheetProps from "./type";
@@ -10,9 +9,7 @@ import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../core/hooks";
-import {
-    CheckIcon
-} from "lucide-react-native";
+import DateSelector from "../dateSelector";
 import BottomSheet from "../bottomSheet";
 import CheckBox from "../checkBox";
 import Loading from "../loading";
@@ -20,6 +17,9 @@ import Button from "../button";
 import Text from "../text";
 
 const DateTimeSheet = ({
+    localeBasedFirstDayOfWeek = true,
+    isShowTodayIndicator = true,
+    dayOfWeekLength = "short",
     LoadingIconComponentProp,
     selectMultipleObject,
     isWorkWithRealtime,
@@ -53,8 +53,6 @@ const DateTimeSheet = ({
     ok
 }: IDateTimeSheetProps) => {
     const {
-        radiuses,
-        colors,
         spaces
     } = NCoreUIKitTheme.useContext(customTheme);
 
@@ -63,20 +61,16 @@ const DateTimeSheet = ({
     } = NCoreUIKitLocalize.useContext(customLocalize);
 
     const {
-        checkIconContainer: checkIconContainerDynamicStyle,
         loadingContainer: loadingContainerDynamicStyle,
         contentContainer: contentContainerDynamicStyle,
         headerContainer: headerContainerDynamicStyle,
         bottomContainer: bottomContainerDynamicStyle,
         toolsContainer: toolsContainerDynamicStyle,
-        itemContainer: itemContainerDynamicStyle,
         cancelButton: cancelButtonDynamicStyle,
         headerTitle: headerTitleDynamicStyle,
         okButton: okButtonDynamicStyle
     } = useStyles({
-        radiuses,
-        spaces,
-        colors
+        spaces
     });
 
     const renderBottomSheetContent = () => {
@@ -99,7 +93,15 @@ const DateTimeSheet = ({
                 contentContainerDynamicStyle
             ]}
         >
-
+            <DateSelector
+                localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
+                isShowTodayIndicator={isShowTodayIndicator}
+                dayOfWeekLength={dayOfWeekLength}
+                dateRange={dateRange}
+                dateRule={dateRule}
+                variant={variant}
+                date={date}
+            />
         </View>;
     };
 
@@ -150,14 +152,14 @@ const DateTimeSheet = ({
                 headerContainerDynamicStyle
             ]}
         >
-            <Text
+            {title ? <Text
                 variant="titleMediumSize"
                 style={[
                     headerTitleDynamicStyle
                 ]}
             >
                 {title}
-            </Text>
+            </Text> : null}
             {renderTools()}
         </View>;
     };

src/components/dateTimeSheet/stylesheet.ts

@@ -23,17 +23,9 @@ const stylesheet = StyleSheet.create({
         alignItems: "center",
         flex: 1
     },
-    itemContainer: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
     itemContentContainer: {
         flex: 1
     },
-    checkIconContainer: {
-        justifyContent: "center",
-        alignItems: "center"
-    },
     toolsContainer: {
         justifyContent: "space-between",
         flexDirection: "row",
@@ -47,9 +39,7 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
-    radiuses,
-    spaces,
-    colors
+    spaces
 }: DateTimeSheetDynamicStyleType) => {
     const styles = {
         contentContainer: {
@@ -71,16 +61,6 @@ export const useStyles = ({
         okButton: {
             marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        itemContainer: {
-            backgroundColor: colors.content.container.mid,
-            paddingHorizontal: spaces.spacingMd,
-            paddingVertical: spaces.spacingSm,
-            borderRadius: radiuses.form
-        } as Mutable<ViewStyle>,
-        checkIconContainer: {
-            height: 24 + spaces.spacingSm,
-            width: 24 + spaces.spacingSm
-        } as Mutable<ViewStyle>,
         loadingContainer: {
             padding: spaces.spacingMd
         } as Mutable<ViewStyle>,

src/components/dateTimeSheet/type.ts

@@ -14,15 +14,16 @@ import type {
     RRule
 } from "rrule";
 import type {
-    DateTimePickerDateRange,
     DateTimePickerPickerType,
+    DateTimePickerDateRange,
     DateTimePickerVariant
 } from "../dateTimePicker/type";
+import type {
+    DayOfWeekLengthType
+} from "../dateSelector/type";
 
 export type DateTimeSheetDynamicStyleType = {
-    radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
-    colors: NCoreUIKit.ActivePalette["colors"];
 };
 
 interface IDateTimeSheetProps {
@@ -47,8 +48,11 @@ interface IDateTimeSheetProps {
         start?: Date;
         end?: Date;
     } | undefined>>;
+    dayOfWeekLength?: DayOfWeekLengthType;
     pickerType: DateTimePickerPickerType;
+    localeBasedFirstDayOfWeek?: boolean;
     selectObject: (date?: Date) => void;
+    isShowTodayIndicator?: boolean;
     variant: DateTimePickerVariant;
     isWorkWithRealtime: boolean;
     isMultipleSelect?: boolean;
@@ -59,7 +63,6 @@ interface IDateTimeSheetProps {
         "key" |
         "customKey" |
         "ref" |
-        "isAutoHeight" |
         "isActive" |
         "renderBottom" |
         "renderHeader" |

src/components/index.ts

@@ -102,6 +102,14 @@ export type {
     IDateTimePickerRef
 } from "./dateTimePicker/type";
 
+export {
+    default as DateSelector
+} from "./dateSelector";
+
+export type {
+    IDateSelectorRef
+} from "./dateSelector/type";
+
 export {
     default as MarkdownViewer
 } from "./markdownViewer";

src/index.tsx

@@ -16,8 +16,10 @@ export {
 export {
     NotificationIndicator,
     MarkdownViewer,
+    DateTimePicker,
     PageContainer,
     TextAreaInput,
+    DateSelector,
     BottomSheet,
     SelectSheet,
     RadioButton,
@@ -36,10 +38,12 @@ export {
 } from "./components";
 
 export type {
+    IDateTimePickerRef,
     EnterMarkdownTypes,
     ITextAreaInputRef,
     CodeMarkdownTypes,
     TextMarkdownTypes,
+    IDateSelectorRef,
     IBottomSheetRef,
     BlockquoteTypes,
     MarkdownObject,