@himakarinv/nativex 1.0.0

package/src/components/Datepicker/Datepicker.tsx

@@ -0,0 +1,797 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { Icon, IconName } from '../Icon';
+import {
+  InputDropdown,
+  InputDropdownSize,
+  buildMonthDropdownOptions,
+  buildYearDropdownOptions,
+  type InputDropdownItem,
+} from '../InputDropdown';
+import { InputField } from '../InputField';
+import { Label } from '../Label';
+
+export const DatepickerMode = {
+  Single: 'single',
+  Range: 'range',
+} as const;
+
+export type DatepickerMode = (typeof DatepickerMode)[keyof typeof DatepickerMode];
+
+export type DatepickerDate = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+export type DatepickerDateRange = {
+  from: DatepickerDate | null;
+  to: DatepickerDate | null;
+};
+
+export type DatepickerProps = {
+  mode?: DatepickerMode;
+  label?: string;
+  required?: boolean;
+  formatHint?: string;
+  placeholder?: string;
+  date?: DatepickerDate | null;
+  fromDate?: DatepickerDate | null;
+  toDate?: DatepickerDate | null;
+  firstDayOfWeek?: number;
+  cancelLabel?: string;
+  applyLabel?: string;
+  error?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  fullWidth?: boolean;
+  onDateChange?: (date: DatepickerDate | null) => void;
+  onRangeChange?: (range: DatepickerDateRange) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+const FIELD_WIDTH = isNative ? 255 : 320;
+const FIELD_HEIGHT = isNative ? 36 : 44;
+const MENU_GAP = spacing.xs;
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+const monthOptions = buildMonthDropdownOptions();
+const yearOptions = buildYearDropdownOptions(1980, new Date().getFullYear() + 50);
+
+function pad2(value: number) {
+  return String(value).padStart(2, '0');
+}
+
+function cloneDate(date: DatepickerDate | null | undefined): DatepickerDate | null {
+  if (!date || !Number.isFinite(date.year) || !Number.isFinite(date.month) || !Number.isFinite(date.day)) {
+    return null;
+  }
+  return { year: date.year, month: date.month, day: date.day };
+}
+
+function sameDate(left: DatepickerDate | null, right: DatepickerDate | null) {
+  if (!left || !right) {
+    return false;
+  }
+  return left.year === right.year && left.month === right.month && left.day === right.day;
+}
+
+function toKey(date: DatepickerDate) {
+  return `${date.year}-${pad2(date.month)}-${pad2(date.day)}`;
+}
+
+function compareDate(left: DatepickerDate, right: DatepickerDate) {
+  const a = left.year * 10000 + left.month * 100 + left.day;
+  const b = right.year * 10000 + right.month * 100 + right.day;
+  return a - b;
+}
+
+function formatMdy(date: DatepickerDate | null) {
+  if (!date) {
+    return '';
+  }
+  return `${pad2(date.month)}/${pad2(date.day)}/${date.year}`;
+}
+
+function formatRange(from: DatepickerDate | null, to: DatepickerDate | null) {
+  const start = formatMdy(from);
+  const end = formatMdy(to);
+  if (start && end) {
+    return `${start} - ${end}`;
+  }
+  return start;
+}
+
+function addMonths(year: number, month: number, delta: number) {
+  const next = new Date(year, month - 1 + delta, 1);
+  return { year: next.getFullYear(), month: next.getMonth() + 1 };
+}
+
+function weekdayIndex(year: number, month: number, day: number) {
+  return new Date(year, month - 1, day).getDay();
+}
+
+function buildCells(year: number, month: number, firstDayOfWeek: number) {
+  const lead = (weekdayIndex(year, month, 1) - firstDayOfWeek + 7) % 7;
+  const days = new Date(year, month, 0).getDate();
+  const prev = addMonths(year, month, -1);
+  const prevDays = new Date(prev.year, prev.month, 0).getDate();
+  const next = addMonths(year, month, 1);
+  const cells: { date: DatepickerDate; outside: boolean }[] = [];
+
+  for (let i = lead; i > 0; i -= 1) {
+    cells.push({ date: { year: prev.year, month: prev.month, day: prevDays - i + 1 }, outside: true });
+  }
+  for (let day = 1; day <= days; day += 1) {
+    cells.push({ date: { year, month, day }, outside: false });
+  }
+  while (cells.length % 7 !== 0) {
+    cells.push({
+      date: { year: next.year, month: next.month, day: cells.length - lead - days + 1 },
+      outside: true,
+    });
+  }
+  return cells;
+}
+
+function webPanelShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${spacing.xs}px ${spacing.md}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+function panelMetrics(triggerWidth: number) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const available = Math.max(spacing['7xl'] * 4, window.width - pad * 2);
+  const preferred = triggerWidth > spacing.none ? triggerWidth : FIELD_WIDTH;
+  const width = Math.min(available, preferred);
+  const inner = Math.max(7, width - spacing.md * 2);
+  const cell = Math.floor(inner / 7);
+  return { width, cell };
+}
+
+function menuPosition(
+  trigger: { x: number; y: number; width: number; height: number },
+  menuHeight: number,
+  panelWidth: number,
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const left = Math.min(Math.max(pad, trigger.x), Math.max(pad, window.width - panelWidth - pad));
+  const below = trigger.y + trigger.height + MENU_GAP;
+  const above = trigger.y - menuHeight - MENU_GAP;
+  const top = below + menuHeight + pad <= window.height ? below : Math.max(pad, above);
+  return { top, left };
+}
+
+export function Datepicker({
+  mode = DatepickerMode.Single,
+  label = 'Select Date',
+  required = false,
+  formatHint = '(mm/dd/yyyy)',
+  placeholder = 'mm/dd/yyyy',
+  date,
+  fromDate,
+  toDate,
+  firstDayOfWeek = 1,
+  cancelLabel = 'Cancel',
+  applyLabel = 'Apply',
+  error = '',
+  disabled = false,
+  readOnly = false,
+  fullWidth = false,
+  onDateChange,
+  onRangeChange,
+  style,
+}: DatepickerProps) {
+  const isRange = mode === DatepickerMode.Range;
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<DatepickerDate | null>(() => cloneDate(date));
+  const [draft, setDraft] = useState<DatepickerDate | null>(() => cloneDate(date));
+  const [rangeFrom, setRangeFrom] = useState<DatepickerDate | null>(() => cloneDate(fromDate));
+  const [rangeTo, setRangeTo] = useState<DatepickerDate | null>(() => cloneDate(toDate));
+  const [snapshot, setSnapshot] = useState<DatepickerDate | null>(null);
+  const [rangeFromSnap, setRangeFromSnap] = useState<DatepickerDate | null>(null);
+  const [rangeToSnap, setRangeToSnap] = useState<DatepickerDate | null>(null);
+  const [navYear, setNavYear] = useState(() => String(date?.year ?? fromDate?.year ?? new Date().getFullYear()));
+  const [navMonth, setNavMonth] = useState(() => pad2(date?.month ?? fromDate?.month ?? new Date().getMonth() + 1));
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuHeight, setMenuHeight] = useState(0);
+  const hostRef = useRef<View>(null);
+  const controlRef = useRef<View>(null);
+
+  useEffect(() => {
+    setValue(cloneDate(date));
+    setDraft(cloneDate(date));
+  }, [date?.year, date?.month, date?.day]);
+
+  useEffect(() => {
+    setRangeFrom(cloneDate(fromDate));
+  }, [fromDate?.year, fromDate?.month, fromDate?.day]);
+
+  useEffect(() => {
+    setRangeTo(cloneDate(toDate));
+  }, [toDate?.year, toDate?.month, toDate?.day]);
+
+  const weekdayLabels = useMemo(() => {
+    const start = ((firstDayOfWeek % 7) + 7) % 7;
+    return WEEKDAYS.slice(start).concat(WEEKDAYS.slice(0, start));
+  }, [firstDayOfWeek]);
+
+  const cells = useMemo(
+    () => buildCells(Number(navYear), Number(navMonth), firstDayOfWeek),
+    [firstDayOfWeek, navMonth, navYear],
+  );
+
+  const display = isRange ? formatRange(rangeFrom, rangeTo) : formatMdy(value);
+  const fieldLocked = disabled || readOnly;
+
+  const syncNav = (next: DatepickerDate | null) => {
+    const source = next ?? {
+      year: new Date().getFullYear(),
+      month: new Date().getMonth() + 1,
+      day: 1,
+    };
+    setNavYear(String(source.year));
+    setNavMonth(pad2(source.month));
+  };
+
+  const close = () => setOpen(false);
+
+  const revealCalendar = () => {
+    if (isRange) {
+      setRangeFromSnap(cloneDate(rangeFrom));
+      setRangeToSnap(cloneDate(rangeTo));
+      syncNav(rangeFrom ?? rangeTo);
+    } else {
+      setSnapshot(cloneDate(value));
+      setDraft(cloneDate(value));
+      syncNav(value);
+    }
+    const target = controlRef.current ?? hostRef.current;
+    if (!target) {
+      setOpen(true);
+      return;
+    }
+    target.measureInWindow((x, y, width, height) => {
+      setTriggerBox({
+        x,
+        y,
+        width: width > spacing.none ? width : FIELD_WIDTH,
+        height: height > spacing.none ? height : FIELD_HEIGHT,
+      });
+      setOpen(true);
+    });
+  };
+
+  const cancel = () => {
+    if (isRange) {
+      setRangeFrom(cloneDate(rangeFromSnap));
+      setRangeTo(cloneDate(rangeToSnap));
+    } else {
+      setDraft(cloneDate(snapshot));
+    }
+    close();
+  };
+
+  const apply = () => {
+    if (isRange) {
+      onRangeChange?.({ from: rangeFrom, to: rangeTo });
+    } else {
+      setValue(cloneDate(draft));
+      onDateChange?.(cloneDate(draft));
+    }
+    close();
+  };
+
+  const toggleCalendar = () => {
+    if (fieldLocked) {
+      return;
+    }
+    if (open) {
+      cancel();
+      return;
+    }
+    revealCalendar();
+  };
+
+  const shiftMonth = (delta: number) => {
+    const next = addMonths(Number(navYear), Number(navMonth), delta);
+    setNavYear(String(next.year));
+    setNavMonth(pad2(next.month));
+  };
+
+  const selectDay = (next: DatepickerDate) => {
+    if (isRange) {
+      if (!rangeFrom || (rangeFrom && rangeTo)) {
+        setRangeFrom(next);
+        setRangeTo(null);
+        return;
+      }
+      if (compareDate(next, rangeFrom) < 0) {
+        setRangeFrom(next);
+        setRangeTo(null);
+        return;
+      }
+      setRangeTo(next);
+      return;
+    }
+    setDraft(next);
+  };
+
+  const isSelected = (cell: DatepickerDate) => {
+    if (isRange) {
+      return sameDate(cell, rangeFrom) || sameDate(cell, rangeTo);
+    }
+    return sameDate(cell, draft);
+  };
+
+  const isInside = (cell: DatepickerDate) => {
+    if (!isRange || !rangeFrom || !rangeTo) {
+      return false;
+    }
+    return compareDate(cell, rangeFrom) > 0 && compareDate(cell, rangeTo) < 0;
+  };
+
+  const metrics = panelMetrics(triggerBox.width || FIELD_WIDTH);
+  const position = menuPosition(triggerBox, menuHeight, metrics.width);
+  const inlineNav = metrics.width >= spacing['4xl'] * 2 + (spacing['7xl'] * 2 + spacing['2xl']) * 2 + spacing.md * 3;
+  const monthYearSelects = (
+    <View style={styles.monthYearRow}>
+      <InputDropdown
+        size={InputDropdownSize.XSmall}
+        suffix={false}
+        label=""
+        placeholder="Month"
+        options={monthOptions}
+        selectedValue={navMonth}
+        onSelectionChange={(item: InputDropdownItem | null) => {
+          if (item?.value) {
+            setNavMonth(item.value);
+          }
+        }}
+      />
+      <InputDropdown
+        size={InputDropdownSize.XSmall}
+        suffix={false}
+        label=""
+        placeholder="Year"
+        options={yearOptions}
+        selectedValue={navYear}
+        onSelectionChange={(item: InputDropdownItem | null) => {
+          if (item?.value) {
+            setNavYear(item.value);
+          }
+        }}
+      />
+    </View>
+  );
+  const controlBorder = error
+    ? colors.datepicker.fieldErrorBorder
+    : open
+      ? colors.datepicker.fieldFocusBorder
+      : colors.datepicker.fieldBorder;
+
+  return (
+    <View ref={hostRef} collapsable={false} style={[styles.host, fullWidth && styles.fullWidth, style]}>
+      <Label
+        text={label}
+        supportingText={formatHint}
+        required={required}
+        embedded
+        htmlFor="datepicker-field"
+        style={styles.labelRow}
+        labelStyle={styles.labelText}
+        supportingStyle={styles.hintText}
+      />
+
+      <Pressable
+        ref={controlRef}
+        collapsable={false}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled: fieldLocked, expanded: open }}
+        disabled={fieldLocked}
+        onPress={toggleCalendar}
+        style={[
+          styles.control,
+          { borderColor: controlBorder, borderWidth: open && !error ? borders.width.medium : borders.width.thin },
+          disabled && styles.controlDisabled,
+          readOnly && !disabled && styles.controlReadonly,
+        ]}>
+        <View style={styles.inputEmbed} pointerEvents="none">
+          <InputField
+            suppressLabel
+            suppressHintError
+            readOnly
+            fullWidth
+            datepickerFieldNativeLook
+            disabled={disabled}
+            value={display}
+            placeholder={placeholder}
+            accessibilityLabel={label}
+            style={styles.inputField}
+          />
+        </View>
+        <View pointerEvents="none" style={styles.calendarBtnWrap}>
+          <Button
+            label=""
+            variant={ButtonVariant.TertiaryGray}
+            size={ButtonSize.Small}
+            iconPosition={IconPosition.Only}
+            iconName={IconName.Calendar}
+            iconDecorative
+            disabled={fieldLocked}
+            accessibilityLabel="Open calendar"
+            contentStyle={styles.calendarBtn}
+          />
+        </View>
+      </Pressable>
+
+      {error ? (
+        <View style={styles.errorRow} accessibilityRole="alert">
+          <Icon name={IconName.Alert} size={spacing.lg} color={colors.datepicker.fieldErrorText} decorative />
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      ) : null}
+
+      {open ? (
+      <Modal visible transparent animationType="none" onRequestClose={cancel}>
+        <Pressable accessible={false} style={styles.backdrop} onPress={cancel}>
+          <Pressable
+            accessible={false}
+            onPress={(event) => {
+              if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                event.stopPropagation();
+              }
+            }}
+            onLayout={(event) => {
+              const nextHeight = event.nativeEvent.layout.height;
+              if (nextHeight !== menuHeight) {
+                setMenuHeight(nextHeight);
+              }
+            }}
+            style={[
+              styles.panel,
+              { top: position.top, left: position.left, width: metrics.width },
+              !isNative && webPanelShadow(),
+            ]}>
+            <View style={styles.header}>
+              {inlineNav ? (
+                <View style={styles.navInline}>
+                  <Button
+                    label=""
+                    variant={ButtonVariant.TertiaryGray}
+                    size={ButtonSize.Small}
+                    iconPosition={IconPosition.Only}
+                    iconName={IconName.ChevronLeft}
+                    iconDecorative
+                    accessibilityLabel="Previous month"
+                    onPress={() => shiftMonth(-1)}
+                    contentStyle={styles.navBtn}
+                  />
+                  <View style={styles.navSelectsInline}>{monthYearSelects}</View>
+                  <Button
+                    label=""
+                    variant={ButtonVariant.TertiaryGray}
+                    size={ButtonSize.Small}
+                    iconPosition={IconPosition.Only}
+                    iconName={IconName.ChevronRight}
+                    iconDecorative
+                    accessibilityLabel="Next month"
+                    onPress={() => shiftMonth(1)}
+                    contentStyle={styles.navBtn}
+                  />
+                </View>
+              ) : (
+                <View style={styles.navStack}>
+                  <View style={styles.navRow}>
+                    <Button
+                      label=""
+                      variant={ButtonVariant.TertiaryGray}
+                      size={ButtonSize.Small}
+                      iconPosition={IconPosition.Only}
+                      iconName={IconName.ChevronLeft}
+                      iconDecorative
+                      accessibilityLabel="Previous month"
+                      onPress={() => shiftMonth(-1)}
+                      contentStyle={styles.navBtn}
+                    />
+                    <Button
+                      label=""
+                      variant={ButtonVariant.TertiaryGray}
+                      size={ButtonSize.Small}
+                      iconPosition={IconPosition.Only}
+                      iconName={IconName.ChevronRight}
+                      iconDecorative
+                      accessibilityLabel="Next month"
+                      onPress={() => shiftMonth(1)}
+                      contentStyle={styles.navBtn}
+                    />
+                  </View>
+                  <View style={styles.navSelectsStack}>{monthYearSelects}</View>
+                </View>
+              )}
+            </View>
+
+            <View style={styles.weekdays}>
+              {weekdayLabels.map((day) => (
+                <Text key={day} style={[styles.weekday, { width: metrics.cell }]}>
+                  {day}
+                </Text>
+              ))}
+            </View>
+
+            <View style={[styles.grid, { width: metrics.cell * 7 }]}>
+              {cells.map((cell) => {
+                const selected = isSelected(cell.date);
+                const inside = isInside(cell.date);
+                const isFrom = isRange && sameDate(cell.date, rangeFrom);
+                const isTo = isRange && sameDate(cell.date, rangeTo);
+                return (
+                  <Pressable
+                    key={toKey(cell.date)}
+                    accessibilityRole="button"
+                    accessibilityLabel={formatMdy(cell.date)}
+                    accessibilityState={{ selected }}
+                    onPress={() => selectDay(cell.date)}
+                    style={[
+                      styles.day,
+                      { width: metrics.cell, height: metrics.cell },
+                      inside && styles.dayInside,
+                      selected && styles.daySelected,
+                      isFrom && !isTo && styles.dayFrom,
+                      isTo && !isFrom && styles.dayTo,
+                    ]}>
+                    <Text
+                      style={[
+                        styles.dayText,
+                        cell.outside && styles.dayOutside,
+                        inside && styles.dayInsideText,
+                        selected && styles.daySelectedText,
+                      ]}>
+                      {cell.date.day}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+
+            <View style={styles.footer}>
+              <Button
+                label={cancelLabel}
+                variant={ButtonVariant.SecondaryGray}
+                size={ButtonSize.Small}
+                onPress={cancel}
+              />
+              <Button label={applyLabel} variant={ButtonVariant.Primary} size={ButtonSize.Small} onPress={apply} />
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    width: FIELD_WIDTH,
+    maxWidth: '100%',
+    alignSelf: 'flex-start',
+    position: 'relative',
+    gap: spacing.sm + spacing.xs,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  labelRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'baseline',
+    gap: spacing.xs,
+  },
+  labelText: {
+    color: colors.datepicker.fieldText,
+    fontWeight: typography.fontWeight.semibold,
+  },
+  hintText: {
+    color: colors.datepicker.fieldLabelMuted,
+    fontWeight: typography.fontWeight.regular,
+  },
+  control: {
+    width: '100%',
+    height: FIELD_HEIGHT,
+    minHeight: FIELD_HEIGHT,
+    maxHeight: FIELD_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    gap: spacing.xs,
+    paddingVertical: spacing.none,
+    paddingHorizontal: spacing.base,
+    borderRadius: radius.md,
+    backgroundColor: colors.datepicker.fieldSurface,
+    overflow: 'hidden',
+  },
+  controlDisabled: {
+    backgroundColor: colors.datepicker.fieldDisabledSurface,
+    borderColor: colors.datepicker.fieldDisabledBorder,
+    opacity: 0.7,
+  },
+  controlReadonly: {
+    backgroundColor: colors.datepicker.fieldReadonlySurface,
+  },
+  inputEmbed: {
+    flex: 1,
+    minWidth: spacing.none,
+    height: FIELD_HEIGHT,
+    maxHeight: FIELD_HEIGHT,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  inputField: {
+    width: '100%',
+    height: FIELD_HEIGHT,
+    maxHeight: FIELD_HEIGHT,
+  },
+  calendarBtnWrap: {
+    width: spacing['4xl'],
+    height: spacing['4xl'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  calendarBtn: {
+    width: spacing['4xl'],
+    height: spacing['4xl'],
+    minHeight: spacing['4xl'],
+    padding: spacing.none,
+  },
+  monthYearRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.xs,
+  },
+  errorText: {
+    flex: 1,
+    color: colors.datepicker.fieldErrorText,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+  },
+  backdrop: {
+    flex: 1,
+  },
+  panel: {
+    position: 'absolute',
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.datepicker.fieldBorder,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  header: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.datepicker.fieldBorder,
+  },
+  navInline: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.xs,
+  },
+  navStack: {
+    gap: spacing.sm,
+  },
+  navBtn: {
+    width: spacing['4xl'],
+    height: spacing['4xl'],
+    minHeight: spacing['4xl'],
+    padding: spacing.none,
+  },
+  navSelectsInline: {
+    flex: 1,
+    minWidth: spacing.none,
+    alignItems: 'center',
+  },
+  navSelectsStack: {
+    width: '100%',
+    minWidth: spacing.none,
+    alignItems: 'center',
+  },
+  navRow: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  weekdays: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.sm,
+  },
+  weekday: {
+    textAlign: 'center',
+    color: colors.datepicker.fieldText,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.semibold,
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignSelf: 'center',
+    paddingBottom: spacing.sm,
+  },
+  day: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayInside: {
+    backgroundColor: colors.datepicker.rangeBg,
+  },
+  daySelected: {
+    backgroundColor: colors.datepicker.popupCellSelectedBg,
+    borderRadius: radius.sm,
+  },
+  dayFrom: {
+    borderTopLeftRadius: radius.sm,
+    borderBottomLeftRadius: radius.sm,
+    borderTopRightRadius: radius.none,
+    borderBottomRightRadius: radius.none,
+  },
+  dayTo: {
+    borderTopRightRadius: radius.sm,
+    borderBottomRightRadius: radius.sm,
+    borderTopLeftRadius: radius.none,
+    borderBottomLeftRadius: radius.none,
+  },
+  dayText: {
+    color: colors.datepicker.popupCellText,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+  },
+  dayOutside: {
+    color: colors.datepicker.popupCellOutsideText,
+  },
+  dayInsideText: {
+    color: colors.datepicker.rangeText,
+  },
+  daySelectedText: {
+    color: colors.datepicker.popupCellSelectedText,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderTopWidth: borders.width.thin,
+    borderTopColor: colors.datepicker.fieldBorder,
+  },
+});