Pass interval prop to CalendarDay style config

[gleuch]

This PR passes interval into CalendarDay style config to allow for more useful styling with start and end date selected buttons.

Reason

While CSS psuedo-selectors can do many things, it is not possible to theme the selected day styling to handle both cases when only a start date is selected and when a range is selected using pure CSS.

Theme Example

Simple theming example using newly passed interval prop to apply rounded start/end caps when selecting a range:

import { extendTheme } from '@chakra-ui/react';
import { CalendarDefaultTheme } from '@uselessdev/datepicker';

const theme = extendTheme(CalendarDefaultTheme, {
  CalendarDay: {
    variants: {
      selected: ({ interval }) => ({
        // Allow left and right sided border radius for only start date selection
        borderStartRadius: '12px',
        borderEndRadius: '12px',

        // Allow left and right sided border radius on start & end date selection
        ...(Array.isArray(interval) && interval.length > 1 ? {
          borderEndRadius: '0',
          '& ~ &': {
            borderStartRadius: '0',
            borderEndRadius: '12px',
          },
        } : {}),
      },
    },
  },
})

[netlify]

✅ Deploy Preview for uselessdev-datepicker ready!

Name	Link
🔨 Latest commit	004a763
🔍 Latest deploy log	https://app.netlify.com/sites/uselessdev-datepicker/deploys/636e7e431d9dc400088ac8b4
😎 Deploy Preview	https://deploy-preview-68--uselessdev-datepicker.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[uselessdev]

@all-contributors please add @gleuch for code

[allcontributors]

@uselessdev

I've put up a pull request to add @gleuch! 🎉