@acusti/date-picker 0.0.1

package/README.md

@@ -0,0 +1,9 @@
+# @acusti/date-picker
+
+[![latest version](https://img.shields.io/npm/v/@acusti/css-value-input?style=for-the-badge)](https://www.npmjs.com/package/@acusti/css-value-input)
+[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/css-value-input?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fcss-value-input)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/css-value-input?style=for-the-badge)](https://bundlephobia.com/package/@acusti/css-value-input)
+[![downloads per month](https://img.shields.io/npm/dm/@acusti/css-value-input?style=for-the-badge)](https://www.npmjs.com/package/@acusti/css-value-input)
+
+A group of React components and utils for rendering a date picker with
+support for ranges via a two-up month calendar view.

package/dist/MonthCalendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type Props = {
+    className?: string;
+    month: number;
+    onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    title?: string;
+};
+export default function MonthCalendar({ className, month, onChange, title }: Props): JSX.Element;

package/dist/MonthCalendar.js

@@ -0,0 +1,57 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+import { getMonthNameFromMonth, getYearFromMonth } from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
+const { Fragment, useCallback } = React;
+const DAYS = Array(7).fill(null);
+export default function MonthCalendar({ className, month, onChange, title }) {
+    const year = getYearFromMonth(month);
+    title = title || `${getMonthNameFromMonth(month)} ${year}`;
+    const monthWithinYear = month % 12;
+    const firstDate = new Date(year, monthWithinYear, 1);
+    const nextMonth = month + 1;
+    const lastDate = new Date(getYearFromMonth(nextMonth), nextMonth % 12, 1);
+    lastDate.setDate(lastDate.getDate() - 1);
+    const totalDays = lastDate.getDate();
+    const firstDay = firstDate.getDay();
+    const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
+    const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+    const handleClickDay = useCallback((event) => {
+        if (onChange)
+            onChange(event);
+    }, [onChange]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, null, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-item` },
+                React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-title` },
+                    React.createElement("h3", { className: `${ROOT_CLASS_NAME}-month-title-text` }, title)),
+                React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-week` },
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Su")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Mo")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Tu")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "We")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Th")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Fr")),
+                    React.createElement("div", { className: "week-day-item" },
+                        React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
+                React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.ceil(daySpaces / 7))
+                    .fill(null)
+                    .map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((_, dayIndex) => {
+                    dayIndex += weekIndex * 7;
+                    const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
+                    return (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-day-item`, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay },
+                        React.createElement("span", { className: "month-day-item-text" }, dayNumber < 1 ||
+                            dayNumber > totalDays
+                            ? ''
+                            : dayNumber)));
+                })))))))));
+}
+//# sourceMappingURL=MonthCalendar.js.map

package/dist/MonthCalendar.js.flow

@@ -0,0 +1,15 @@
+/**
+ * Flowtype definitions for MonthCalendar
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+
+import * as React from "react";
+export type Props = {|
+  className?: string,
+  month: number,
+  onChange?: (event: SyntheticEvent<HTMLElement>) => void,
+  title?: string,
+|};
+declare export default function MonthCalendar(x: Props): React$Node;

package/dist/MonthCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MonthCalendar } from './MonthCalendar.js';
+export * from './utils.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as MonthCalendar } from './MonthCalendar.js';
+export * from './utils.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.flow

@@ -0,0 +1,9 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+
+declare export { default as MonthCalendar } from "./MonthCalendar.js";
+declare export * from "./utils.js";

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,cAAc,YAAY,CAAC"}

package/dist/styles/month-calendar.d.ts

@@ -0,0 +1,2 @@
+export declare const ROOT_CLASS_NAME = "uktmonthcalendar";
+export declare const STYLES: string;

package/dist/styles/month-calendar.js

@@ -0,0 +1,152 @@
+import { SYSTEM_UI_FONT } from '@acusti/styling';
+export const ROOT_CLASS_NAME = 'uktmonthcalendar';
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+    font-family: ${SYSTEM_UI_FONT};
+}
+
+.${ROOT_CLASS_NAME}-month-item {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    max-width: 325px;
+}
+
+.${ROOT_CLASS_NAME}-month-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding-bottom: 25px;
+}
+
+h3.${ROOT_CLASS_NAME}-month-title-text {
+    font-size: 18px;
+    line-height: 23px;
+    font-weight: 600;
+    color: #000;
+    margin: 0px;
+    text-align: center;
+}
+
+.${ROOT_CLASS_NAME}-month-week {
+    flex: 0 0 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    padding-bottom: 12px;
+}
+
+.${ROOT_CLASS_NAME}-month-week .week-day-item {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.${ROOT_CLASS_NAME}-month-week span.week-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #9a9a9a;
+}
+
+.${ROOT_CLASS_NAME}-month-days {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.${ROOT_CLASS_NAME}-month-row {
+    flex: 1 1 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    margin-bottom: 1px;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 46px;
+    width: 46px;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.selected {
+    background-color: #f8f8f8;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.start-date {
+    background-color: #f8f8f8;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.start-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME}-month-day-item.start-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.end-date {
+    background-color: #f8f8f8;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.end-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME}-month-day-item.end-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item:hover:after {
+    opacity: 1;
+    visibility: visible;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    border-radius: 50%;
+    border: 1px solid #000;
+    width: 43px;
+    height: 43px;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #000;
+    position: relative;
+    z-index: 1;
+}
+`;
+//# sourceMappingURL=month-calendar.js.map

package/dist/styles/month-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;mBAIC,cAAc;;;GAG9B,eAAe;;;;;;;;GAQf,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;GAUf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;;;;;;CASjB,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const getMonthFromDate: (date: Date) => number;
+export declare const getYearFromMonth: (month: number) => number;
+export declare const getMonthNameFromMonth: (month: number) => string;
+export declare const getMonthAbbreviationFromMonth: (month: number) => string;

package/dist/utils.js

@@ -0,0 +1,28 @@
+// The following utils work on a “month” as a unique numerical value
+// representing the number of months since the unix epoch (jan 1970)
+const START_YEAR = 1970;
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+const getYearFromDate = (date) => date.getFullYear() - START_YEAR;
+export const getMonthFromDate = (date) => date.getMonth() + (getYearFromDate(date) * 12); // prettier-ignore
+export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
+export const getMonthNameFromMonth = (month) => MONTH_NAMES[month % 12];
+export const getMonthAbbreviationFromMonth = (month) => {
+    const monthName = getMonthNameFromMonth(month);
+    if (monthName === 'September')
+        return 'Sept';
+    return monthName.substring(0, 3);
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.flow

@@ -0,0 +1,11 @@
+/**
+ * Flowtype definitions for utils
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+
+declare export var getMonthFromDate: (date: Date) => number;
+declare export var getYearFromMonth: (month: number) => number;
+declare export var getMonthNameFromMonth: (month: number) => string;
+declare export var getMonthAbbreviationFromMonth: (month: number) => string;

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;AAEhF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@acusti/date-picker",
+    "version": "0.0.1",
+    "description": "React component that renders a date picker with the option to choose a range",
+    "keywords": [
+        "react",
+        "react-component",
+        "datepicker",
+        "date-picker",
+        "daterangepicker",
+        "date-range-picker",
+        "date",
+        "picker",
+        "form",
+        "input",
+        "ssr",
+        "typescript",
+        "ts",
+        "flow"
+    ],
+    "type": "module",
+    "sideEffects": false,
+    "exports": "./dist/index.js",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/acusti/uikit.git",
+        "directory": "packages/date-picker"
+    },
+    "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)",
+    "license": "Unlicense",
+    "bugs": {
+        "url": "https://github.com/acusti/uikit/issues"
+    },
+    "homepage": "https://github.com/acusti/uikit/tree/main/packages/date-picker#readme",
+    "devDependencies": {
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/react": "^18.0.25",
+        "jsdom": "^22.1.0",
+        "react": "^18",
+        "react-dom": "^18",
+        "typescript": "^5.1.6"
+    },
+    "dependencies": {
+        "@acusti/styling": "^0.6.0",
+        "clsx": "^2"
+    },
+    "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+    }
+}

package/src/MonthCalendar.tsx

@@ -0,0 +1,103 @@
+import { Style } from '@acusti/styling';
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { getMonthNameFromMonth, getYearFromMonth } from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
+
+export type Props = {
+    className?: string;
+    month: number; // a unique numerical value representing the number of months since jan 1970
+    onChange?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    title?: string;
+};
+
+const { Fragment, useCallback } = React;
+
+const DAYS = Array(7).fill(null);
+
+export default function MonthCalendar({ className, month, onChange, title }: Props) {
+    const year = getYearFromMonth(month);
+    title = title || `${getMonthNameFromMonth(month)} ${year}`;
+    const monthWithinYear = month % 12;
+    const firstDate = new Date(year, monthWithinYear, 1);
+    const nextMonth = month + 1;
+    const lastDate = new Date(getYearFromMonth(nextMonth), nextMonth % 12, 1);
+    lastDate.setDate(lastDate.getDate() - 1);
+    const totalDays = lastDate.getDate();
+    const firstDay = firstDate.getDay();
+    const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
+    const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+
+    const handleClickDay = useCallback(
+        (event: React.SyntheticEvent<HTMLElement>) => {
+            if (onChange) onChange(event);
+        },
+        [onChange],
+    );
+
+    return (
+        <Fragment>
+            <Style>{STYLES}</Style>
+            <div className={clsx(ROOT_CLASS_NAME, className)}>
+                <div className={`${ROOT_CLASS_NAME}-month-item`}>
+                    <div className={`${ROOT_CLASS_NAME}-month-title`}>
+                        <h3 className={`${ROOT_CLASS_NAME}-month-title-text`}>{title}</h3>
+                    </div>
+                    <div className={`${ROOT_CLASS_NAME}-month-week`}>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Su</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Mo</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Tu</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">We</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Th</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Fr</span>
+                        </div>
+                        <div className="week-day-item">
+                            <span className="week-day-item-text">Sa</span>
+                        </div>
+                    </div>
+                    <div className={`${ROOT_CLASS_NAME}-month-days`}>
+                        {Array(Math.ceil(daySpaces / 7))
+                            .fill(null)
+                            .map((_, weekIndex) => (
+                                <div
+                                    className={`${ROOT_CLASS_NAME}-month-row`}
+                                    key={`MonthRow-${weekIndex}`}
+                                >
+                                    {DAYS.map((_, dayIndex) => {
+                                        dayIndex += weekIndex * 7;
+                                        const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
+                                        return (
+                                            <div
+                                                className={`${ROOT_CLASS_NAME}-month-day-item`}
+                                                key={`MonthDayItem-${dayNumber}`}
+                                                onClick={handleClickDay}
+                                            >
+                                                <span className="month-day-item-text">
+                                                    {dayNumber < 1 ||
+                                                    dayNumber > totalDays
+                                                        ? ''
+                                                        : dayNumber}
+                                                </span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as MonthCalendar } from './MonthCalendar.js';
+export * from './utils.js';

package/src/styles/month-calendar.ts

@@ -0,0 +1,153 @@
+import { SYSTEM_UI_FONT } from '@acusti/styling';
+
+export const ROOT_CLASS_NAME = 'uktmonthcalendar';
+
+export const STYLES = `
+.${ROOT_CLASS_NAME} {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: space-between;
+    font-family: ${SYSTEM_UI_FONT};
+}
+
+.${ROOT_CLASS_NAME}-month-item {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    max-width: 325px;
+}
+
+.${ROOT_CLASS_NAME}-month-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    padding-bottom: 25px;
+}
+
+h3.${ROOT_CLASS_NAME}-month-title-text {
+    font-size: 18px;
+    line-height: 23px;
+    font-weight: 600;
+    color: #000;
+    margin: 0px;
+    text-align: center;
+}
+
+.${ROOT_CLASS_NAME}-month-week {
+    flex: 0 0 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    padding-bottom: 12px;
+}
+
+.${ROOT_CLASS_NAME}-month-week .week-day-item {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.${ROOT_CLASS_NAME}-month-week span.week-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #9a9a9a;
+}
+
+.${ROOT_CLASS_NAME}-month-days {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.${ROOT_CLASS_NAME}-month-row {
+    flex: 1 1 auto;
+    display: grid;
+    grid-column-gap: 0px;
+    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
+    grid-auto-flow: dense;
+    margin-bottom: 1px;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 46px;
+    width: 46px;
+    cursor: pointer;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.selected {
+    background-color: #f8f8f8;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.start-date {
+    background-color: #f8f8f8;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.start-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME}-month-day-item.start-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.end-date {
+    background-color: #f8f8f8;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item.end-date:after {
+    background-color: #000;
+    opacity: 1;
+    visibility: visible;
+}
+.${ROOT_CLASS_NAME}-month-day-item.end-date span.month-day-item-text {
+    color: #fff;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item:hover:after {
+    opacity: 1;
+    visibility: visible;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    border-radius: 50%;
+    border: 1px solid #000;
+    width: 43px;
+    height: 43px;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
+    text-align: center;
+    font-size: 13px;
+    line-height: 21px;
+    margin: 0px;
+    color: #000;
+    position: relative;
+    z-index: 1;
+}
+`;

package/src/utils.ts

@@ -0,0 +1,32 @@
+// The following utils work on a “month” as a unique numerical value
+// representing the number of months since the unix epoch (jan 1970)
+const START_YEAR = 1970;
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+
+const getYearFromDate = (date: Date) => date.getFullYear() - START_YEAR;
+
+export const getMonthFromDate = (date: Date) =>
+    date.getMonth() + (getYearFromDate(date) * 12); // prettier-ignore
+
+export const getYearFromMonth = (month: number) => Math.floor(month / 12) + START_YEAR;
+
+export const getMonthNameFromMonth = (month: number) => MONTH_NAMES[month % 12];
+
+export const getMonthAbbreviationFromMonth = (month: number) => {
+    const monthName = getMonthNameFromMonth(month);
+    if (monthName === 'September') return 'Sept';
+    return monthName.substring(0, 3);
+};