Support localization and DateRangePicker

[cheton]

• Localization
  https://mui.com/x/react-date-pickers/date-picker/

  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DateCalendar locale="en-US" />
    <DateCalendar locale="de-DE" />
  </LocalizationProvider>

• Range selection

  <DateRangeCalendar defaultValue={[startDate, endDate]} />

import { isSameDay, isWithinInterval } from 'date-fns';
import React, { useState, useCallback } from 'react';
import { Box } from '../../box';
import DateCalendar from '../DateCalendar';

const DateRangeCalendar = ({
  value, // Controlled value
  defaultValue = [null, null], // Uncontrolled initial value
  onChange, // Callback for value change
  ...rest
}) => {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const [hoveredDate, setHoveredDate] = useState(null);

  const isControlled = value !== undefined;
  const [startDate, endDate] = isControlled ? value : internalValue;

  const handleDateChange = useCallback(
    (date) => {
      let newValue;
      if (!startDate || (startDate && endDate)) {
        // Reset selection or start a new range
        newValue = [date, null];
      } else {
        // Set the end date
        if (date >= startDate) {
          newValue = [startDate, date];
        } else {
          newValue = [date, startDate];
        }
      }

      if (!isControlled) {
        setInternalValue(newValue);
      }
      onChange?.(newValue);
    },
    [startDate, endDate, onChange, isControlled]
  );

  const isDateInRange = useCallback(
    (date) => {
      if (startDate && endDate) {
        return isWithinInterval(date, { start: startDate, end: endDate });
      }
      if (startDate && hoveredDate) {
        const start = startDate < hoveredDate ? startDate : hoveredDate;
        const end = startDate > hoveredDate ? startDate : hoveredDate;
        return isWithinInterval(date, { start, end });
      }
      return false;
    },
    [startDate, endDate, hoveredDate]
  );

  const renderDay = useCallback(
    (day) => {
      const isSelectedStart = startDate && isSameDay(day, startDate);
      const isSelectedEnd = endDate && isSameDay(day, endDate);
      const isInRange = isDateInRange(day);

      const style = {
        backgroundColor: isSelectedStart || isSelectedEnd ? 'blue' : isInRange ? 'lightblue' : 'transparent',
        color: isSelectedStart || isSelectedEnd ? 'white' : 'black',
        borderRadius: isSelectedStart ? '50%' : isSelectedEnd ? '50%' : '0%',
      };

      return (
        <div style={style}>
          {day.getDate()}
        </div>
      );
    },
    [startDate, endDate, isDateInRange]
  );

  return (
    <Box display="flex" gap="16px" {...rest}>
      <DateCalendar
        value={startDate}
        onChange={handleDateChange}
        onDayHover={setHoveredDate}
        //renderDay={renderDay}
      />
      <DateCalendar
        value={endDate}
        onChange={handleDateChange}
        onDayHover={setHoveredDate}
        //renderDay={renderDay}
      />
    </Box>
  );
};

export default DateRangeCalendar;

[cheton]

LocaleProvider
https://www.chakra-ui.com/docs/components/locale-provider