jvetrau-ds 0.1.39 → 0.1.42

package/components/calendar-month/calendar-month.cjs

@@ -0,0 +1,366 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('./calendar-month.css');
+var classnames = require('../helpers/classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const isoDatePattern = /^(\d{4})-(\d{2})-(\d{2})$/u;
+function isValidDateParts(year, monthIndex, day) {
+  const date = new Date(
+    year,
+    monthIndex,
+    day,
+    12
+  );
+  return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day;
+}
+function parseCalendarDate(value) {
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) {
+      return null;
+    }
+    return {
+      year: value.getFullYear(),
+      monthIndex: value.getMonth(),
+      day: value.getDate()
+    };
+  }
+  const match = isoDatePattern.exec(value);
+  if (!match) {
+    return null;
+  }
+  const year = Number(match[1]);
+  const monthIndex = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  if (!isValidDateParts(
+    year,
+    monthIndex,
+    day
+  )) {
+    return null;
+  }
+  return {
+    year,
+    monthIndex,
+    day
+  };
+}
+function createLocalDate(date) {
+  return new Date(
+    date.year,
+    date.monthIndex,
+    date.day,
+    12
+  );
+}
+function createDateKey(date) {
+  return [
+    String(date.year).padStart(4, "0"),
+    String(date.monthIndex + 1).padStart(
+      2,
+      "0"
+    ),
+    String(date.day).padStart(2, "0")
+  ].join("-");
+}
+function createMonthKey(date) {
+  return [
+    String(date.year).padStart(4, "0"),
+    String(date.monthIndex + 1).padStart(
+      2,
+      "0"
+    )
+  ].join("-");
+}
+function isSameMonth(first, second) {
+  return first.year === second.year && first.monthIndex === second.monthIndex;
+}
+function getDaysInMonth(year, monthIndex) {
+  return new Date(
+    year,
+    monthIndex + 1,
+    0,
+    12
+  ).getDate();
+}
+function buildCalendarDays(month, weekStartsOn) {
+  const firstDayOfMonth = new Date(
+    month.year,
+    month.monthIndex,
+    1,
+    12
+  );
+  const leadingEmptyCellCount = (firstDayOfMonth.getDay() - weekStartsOn + 7) % 7;
+  const daysInMonth = getDaysInMonth(
+    month.year,
+    month.monthIndex
+  );
+  const cellCount = Math.ceil(
+    (leadingEmptyCellCount + daysInMonth) / 7
+  ) * 7;
+  return Array.from(
+    {
+      length: cellCount
+    },
+    (_, cellIndex) => {
+      const day = cellIndex - leadingEmptyCellCount + 1;
+      if (day < 1 || day > daysInMonth) {
+        return {
+          key: `empty-${cellIndex}`,
+          date: null
+        };
+      }
+      const date = {
+        year: month.year,
+        monthIndex: month.monthIndex,
+        day
+      };
+      return {
+        key: createDateKey(date),
+        date
+      };
+    }
+  );
+}
+function chunkCalendarDays(days) {
+  const weeks = [];
+  for (let index = 0; index < days.length; index += 7) {
+    weeks.push(days.slice(index, index + 7));
+  }
+  return weeks;
+}
+function getWeekdayDates(weekStartsOn) {
+  const sunday = new Date(
+    2024,
+    0,
+    7,
+    12
+  );
+  return Array.from(
+    {
+      length: 7
+    },
+    (_, index) => {
+      const weekday = new Date(sunday);
+      weekday.setDate(
+        sunday.getDate() + weekStartsOn + index
+      );
+      return weekday;
+    }
+  );
+}
+function createWeekdayLabels(formatters, weekStartsOn) {
+  return getWeekdayDates(
+    weekStartsOn
+  ).map((date) => ({
+    key: String(date.getDay()),
+    short: formatters.weekdayShort.format(
+      date
+    ),
+    long: formatters.weekdayLong.format(
+      date
+    )
+  }));
+}
+function createMarkedDateKeys(markedDates, month) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const value of markedDates) {
+    const date = parseCalendarDate(value);
+    if (date && isSameMonth(date, month)) {
+      keys.add(createDateKey(date));
+    }
+  }
+  return keys;
+}
+function createFormatters(locale) {
+  try {
+    return {
+      month: new Intl.DateTimeFormat(
+        locale,
+        {
+          month: "long"
+        }
+      ),
+      fullDate: new Intl.DateTimeFormat(
+        locale,
+        {
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        }
+      ),
+      weekdayShort: new Intl.DateTimeFormat(
+        locale,
+        {
+          weekday: "short"
+        }
+      ),
+      weekdayLong: new Intl.DateTimeFormat(
+        locale,
+        {
+          weekday: "long"
+        }
+      )
+    };
+  } catch {
+    return null;
+  }
+}
+const CalendarMonth = ({
+  month,
+  markedDates = [],
+  markedDateLabel = "\u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u0430\u044F \u0434\u0430\u0442\u0430",
+  locale = "ru-RU",
+  weekStartsOn = 1,
+  className = "",
+  ...props
+}) => {
+  const parsedMonth = parseCalendarDate(month);
+  const componentId = React__default.default.useId();
+  if (!parsedMonth) {
+    return null;
+  }
+  const formatters = createFormatters(locale);
+  if (!formatters) {
+    return null;
+  }
+  const normalizedMonth = {
+    year: parsedMonth.year,
+    monthIndex: parsedMonth.monthIndex,
+    day: 1
+  };
+  const monthKey = createMonthKey(normalizedMonth);
+  const monthTitleId = `${componentId}-${monthKey}-title`;
+  const monthTitle = formatters.month.format(
+    createLocalDate(normalizedMonth)
+  );
+  const weekdayLabels = createWeekdayLabels(
+    formatters,
+    weekStartsOn
+  );
+  const calendarDays = buildCalendarDays(
+    normalizedMonth,
+    weekStartsOn
+  );
+  const weeks = chunkCalendarDays(calendarDays);
+  const markedDateKeys = createMarkedDateKeys(
+    markedDates,
+    normalizedMonth
+  );
+  const classes = classnames.classnames(
+    "calendar-month",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "calendar-month__title",
+            id: monthTitleId,
+            children: monthTitle
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            className: "calendar-month__table",
+            "aria-labelledby": monthTitleId,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekdayLabels.map(
+                (weekday) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "th",
+                  {
+                    className: "calendar-month__weekday",
+                    scope: "col",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "abbr",
+                      {
+                        title: weekday.long,
+                        children: weekday.short
+                      }
+                    )
+                  },
+                  weekday.key
+                )
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeks.map(
+                (week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map((calendarDay) => {
+                  if (!calendarDay.date) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "td",
+                      {
+                        className: "calendar-month__cell calendar-month__cell--empty",
+                        "aria-hidden": "true"
+                      },
+                      calendarDay.key
+                    );
+                  }
+                  const dateKey = createDateKey(
+                    calendarDay.date
+                  );
+                  const isMarked = markedDateKeys.has(
+                    dateKey
+                  );
+                  const fullDate = formatters.fullDate.format(
+                    createLocalDate(
+                      calendarDay.date
+                    )
+                  );
+                  const accessibleLabel = isMarked ? `${fullDate}: ${markedDateLabel}` : fullDate;
+                  const dateClasses = classnames.classnames(
+                    "calendar-month__date",
+                    "",
+                    {
+                      "calendar-month__date--marked": isMarked
+                    }
+                  );
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      className: "calendar-month__cell",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "time",
+                        {
+                          className: dateClasses,
+                          dateTime: dateKey,
+                          "aria-label": accessibleLabel,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: calendarDay.date.day }),
+                            isMarked && /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: "calendar-month__marker",
+                                "aria-hidden": "true"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    },
+                    calendarDay.key
+                  );
+                }) }, `week-${weekIndex}`)
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var calendar_month_default = CalendarMonth;
+
+module.exports = calendar_month_default;
+//# sourceMappingURL=calendar-month.cjs.map
+//# sourceMappingURL=calendar-month.cjs.map

package/components/calendar-month/calendar-month.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/calendar-month/calendar-month.tsx"],"names":["React","classnames","jsxs","jsx"],"mappings":"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","file":"calendar-month.cjs","sourcesContent":["import React from 'react';\n\nimport './calendar-month.css';\nimport { classnames } from '../helpers/classnames';\n\n/**\n * A local calendar date represented either by a Date instance\n * or by a strict YYYY-MM-DD string.\n *\n * String values with a time, timezone or another date format\n * are not supported.\n */\nexport type CalendarMonthDate = Date | string;\n\nexport interface CalendarMonthProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  /**\n   * The month to display.\n   *\n   * Accepts a Date instance or a strict YYYY-MM-DD string.\n   * Only the year and month are used; the day and time are ignored.\n   */\n  month: CalendarMonthDate;\n\n  /**\n   * Dates to mark inside the displayed month.\n   *\n   * Accepts Date instances or strict YYYY-MM-DD strings.\n   * Invalid values and dates outside the displayed month are ignored.\n   * Duplicate dates produce a single marker.\n   */\n  markedDates?: CalendarMonthDate[];\n\n  /**\n   * Accessible description appended to marked dates.\n   */\n  markedDateLabel?: string;\n\n  /**\n   * Locale used to format the month title, weekdays and full dates.\n   */\n  locale?: string;\n\n  /**\n   * First day of the calendar week:\n   * 0 for Sunday, 1 for Monday.\n   */\n  weekStartsOn?: 0 | 1;\n}\n\ntype CalendarDateParts = {\n  year: number;\n  monthIndex: number;\n  day: number;\n};\n\ntype CalendarDay = {\n  key: string;\n  date: CalendarDateParts | null;\n};\n\ntype WeekdayLabel = {\n  key: string;\n  short: string;\n  long: string;\n};\n\ntype CalendarMonthFormatters = {\n  month: Intl.DateTimeFormat;\n  fullDate: Intl.DateTimeFormat;\n  weekdayShort: Intl.DateTimeFormat;\n  weekdayLong: Intl.DateTimeFormat;\n};\n\nconst isoDatePattern =\n  /^(\\d{4})-(\\d{2})-(\\d{2})$/u;\n\nfunction isValidDateParts(\n  year: number,\n  monthIndex: number,\n  day: number,\n): boolean {\n  const date = new Date(\n    year,\n    monthIndex,\n    day,\n    12,\n  );\n\n  return (\n    date.getFullYear() === year &&\n    date.getMonth() === monthIndex &&\n    date.getDate() === day\n  );\n}\n\nfunction parseCalendarDate(\n  value: CalendarMonthDate,\n): CalendarDateParts | null {\n  if (value instanceof Date) {\n    if (Number.isNaN(value.getTime())) {\n      return null;\n    }\n\n    return {\n      year: value.getFullYear(),\n      monthIndex: value.getMonth(),\n      day: value.getDate(),\n    };\n  }\n\n  const match = isoDatePattern.exec(value);\n\n  if (!match) {\n    return null;\n  }\n\n  const year = Number(match[1]);\n  const monthIndex = Number(match[2]) - 1;\n  const day = Number(match[3]);\n\n  if (\n    !isValidDateParts(\n      year,\n      monthIndex,\n      day,\n    )\n  ) {\n    return null;\n  }\n\n  return {\n    year,\n    monthIndex,\n    day,\n  };\n}\n\nfunction createLocalDate(\n  date: CalendarDateParts,\n): Date {\n  return new Date(\n    date.year,\n    date.monthIndex,\n    date.day,\n    12,\n  );\n}\n\nfunction createDateKey(\n  date: CalendarDateParts,\n): string {\n  return [\n    String(date.year).padStart(4, '0'),\n    String(date.monthIndex + 1).padStart(\n      2,\n      '0',\n    ),\n    String(date.day).padStart(2, '0'),\n  ].join('-');\n}\n\nfunction createMonthKey(\n  date: CalendarDateParts,\n): string {\n  return [\n    String(date.year).padStart(4, '0'),\n    String(date.monthIndex + 1).padStart(\n      2,\n      '0',\n    ),\n  ].join('-');\n}\n\nfunction isSameMonth(\n  first: CalendarDateParts,\n  second: CalendarDateParts,\n): boolean {\n  return (\n    first.year === second.year &&\n    first.monthIndex === second.monthIndex\n  );\n}\n\nfunction getDaysInMonth(\n  year: number,\n  monthIndex: number,\n): number {\n  return new Date(\n    year,\n    monthIndex + 1,\n    0,\n    12,\n  ).getDate();\n}\n\nfunction buildCalendarDays(\n  month: CalendarDateParts,\n  weekStartsOn: 0 | 1,\n): CalendarDay[] {\n  const firstDayOfMonth = new Date(\n    month.year,\n    month.monthIndex,\n    1,\n    12,\n  );\n\n  const leadingEmptyCellCount =\n    (\n      firstDayOfMonth.getDay() -\n      weekStartsOn +\n      7\n    ) % 7;\n\n  const daysInMonth = getDaysInMonth(\n    month.year,\n    month.monthIndex,\n  );\n\n  const cellCount =\n    Math.ceil(\n      (\n        leadingEmptyCellCount +\n        daysInMonth\n      ) / 7,\n    ) * 7;\n\n  return Array.from(\n    {\n      length: cellCount,\n    },\n    (_, cellIndex) => {\n      const day =\n        cellIndex -\n        leadingEmptyCellCount +\n        1;\n\n      if (\n        day < 1 ||\n        day > daysInMonth\n      ) {\n        return {\n          key: `empty-${cellIndex}`,\n          date: null,\n        };\n      }\n\n      const date = {\n        year: month.year,\n        monthIndex: month.monthIndex,\n        day,\n      };\n\n      return {\n        key: createDateKey(date),\n        date,\n      };\n    },\n  );\n}\n\nfunction chunkCalendarDays(\n  days: CalendarDay[],\n): CalendarDay[][] {\n  const weeks: CalendarDay[][] = [];\n\n  for (\n    let index = 0;\n    index < days.length;\n    index += 7\n  ) {\n    weeks.push(days.slice(index, index + 7));\n  }\n\n  return weeks;\n}\n\nfunction getWeekdayDates(\n  weekStartsOn: 0 | 1,\n): Date[] {\n  const sunday = new Date(\n    2024,\n    0,\n    7,\n    12,\n  );\n\n  return Array.from(\n    {\n      length: 7,\n    },\n    (_, index) => {\n      const weekday = new Date(sunday);\n\n      weekday.setDate(\n        sunday.getDate() +\n          weekStartsOn +\n          index,\n      );\n\n      return weekday;\n    },\n  );\n}\n\nfunction createWeekdayLabels(\n  formatters: CalendarMonthFormatters,\n  weekStartsOn: 0 | 1,\n): WeekdayLabel[] {\n  return getWeekdayDates(\n    weekStartsOn,\n  ).map((date) => ({\n    key: String(date.getDay()),\n    short:\n      formatters.weekdayShort.format(\n        date,\n      ),\n    long:\n      formatters.weekdayLong.format(\n        date,\n      ),\n  }));\n}\n\nfunction createMarkedDateKeys(\n  markedDates: CalendarMonthDate[],\n  month: CalendarDateParts,\n): Set<string> {\n  const keys = new Set<string>();\n\n  for (const value of markedDates) {\n    const date = parseCalendarDate(value);\n\n    if (\n      date &&\n      isSameMonth(date, month)\n    ) {\n      keys.add(createDateKey(date));\n    }\n  }\n\n  return keys;\n}\n\nfunction createFormatters(\n  locale: string,\n): CalendarMonthFormatters | null {\n  try {\n    return {\n      month: new Intl.DateTimeFormat(\n        locale,\n        {\n          month: 'long',\n        },\n      ),\n\n      fullDate: new Intl.DateTimeFormat(\n        locale,\n        {\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        },\n      ),\n\n      weekdayShort:\n        new Intl.DateTimeFormat(\n          locale,\n          {\n            weekday: 'short',\n          },\n        ),\n\n      weekdayLong:\n        new Intl.DateTimeFormat(\n          locale,\n          {\n            weekday: 'long',\n          },\n        ),\n    };\n  } catch {\n    return null;\n  }\n}\n\nconst CalendarMonth: React.FC<\n  CalendarMonthProps\n> = ({\n  month,\n  markedDates = [],\n  markedDateLabel = 'Отмеченная дата',\n  locale = 'ru-RU',\n  weekStartsOn = 1,\n  className = '',\n  ...props\n}) => {\n  const parsedMonth =\n    parseCalendarDate(month);\n\n  const componentId = React.useId();\n\n  if (!parsedMonth) {\n    return null;\n  }\n\n  const formatters =\n    createFormatters(locale);\n\n  if (!formatters) {\n    return null;\n  }\n\n  const normalizedMonth = {\n    year: parsedMonth.year,\n    monthIndex: parsedMonth.monthIndex,\n    day: 1,\n  };\n\n  const monthKey =\n    createMonthKey(normalizedMonth);\n\n  const monthTitleId =\n    `${componentId}-${monthKey}-title`;\n\n  const monthTitle =\n    formatters.month.format(\n      createLocalDate(normalizedMonth),\n    );\n\n  const weekdayLabels =\n    createWeekdayLabels(\n      formatters,\n      weekStartsOn,\n    );\n\n  const calendarDays =\n    buildCalendarDays(\n      normalizedMonth,\n      weekStartsOn,\n    );\n\n  const weeks =\n    chunkCalendarDays(calendarDays);\n\n  const markedDateKeys =\n    createMarkedDateKeys(\n      markedDates,\n      normalizedMonth,\n    );\n\n  const classes = classnames(\n    'calendar-month',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div\n        className=\"calendar-month__title\"\n        id={monthTitleId}\n      >\n        {monthTitle}\n      </div>\n\n      <table\n        className=\"calendar-month__table\"\n        aria-labelledby={monthTitleId}\n      >\n        <thead>\n          <tr>\n            {weekdayLabels.map(\n              (weekday) => (\n                <th\n                  key={weekday.key}\n                  className=\"calendar-month__weekday\"\n                  scope=\"col\"\n                >\n                  <abbr\n                    title={weekday.long}\n                  >\n                    {weekday.short}\n                  </abbr>\n                </th>\n              ),\n            )}\n          </tr>\n        </thead>\n\n        <tbody>\n          {weeks.map(\n            (week, weekIndex) => (\n              <tr key={`week-${weekIndex}`}>\n                {week.map((calendarDay) => {\n                  if (!calendarDay.date) {\n                    return (\n                      <td\n                        key={calendarDay.key}\n                        className=\"calendar-month__cell calendar-month__cell--empty\"\n                        aria-hidden=\"true\"\n                      />\n                    );\n                  }\n\n                  const dateKey =\n                    createDateKey(\n                      calendarDay.date,\n                    );\n\n                  const isMarked =\n                    markedDateKeys.has(\n                      dateKey,\n                    );\n\n                  const fullDate =\n                    formatters.fullDate.format(\n                      createLocalDate(\n                        calendarDay.date,\n                      ),\n                    );\n\n                  const accessibleLabel =\n                    isMarked\n                      ? `${fullDate}: ${markedDateLabel}`\n                      : fullDate;\n\n                  const dateClasses =\n                    classnames(\n                      'calendar-month__date',\n                      '',\n                      {\n                        'calendar-month__date--marked':\n                          isMarked,\n                      },\n                    );\n\n                  return (\n                    <td\n                      key={calendarDay.key}\n                      className=\"calendar-month__cell\"\n                    >\n                      <time\n                        className={dateClasses}\n                        dateTime={dateKey}\n                        aria-label={\n                          accessibleLabel\n                        }\n                      >\n                        <span aria-hidden=\"true\">\n                          {\n                            calendarDay.date\n                              .day\n                          }\n                        </span>\n\n                        {isMarked && (\n                          <span\n                            className=\"calendar-month__marker\"\n                            aria-hidden=\"true\"\n                          />\n                        )}\n                      </time>\n                    </td>\n                  );\n                })}\n              </tr>\n            ),\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n\nexport default CalendarMonth;"]}

package/components/calendar-month/calendar-month.css

@@ -0,0 +1,237 @@
+.calendar-month {
+  /* color */
+  --calendar-month-color: inherit;
+  --calendar-month-note-color: var(--color-text-note);
+  --calendar-month-marker-color: var(--color-primary);
+
+  color: var(--calendar-month-color);
+
+  /* typography */
+  --calendar-month-title-font-family:
+    var(--font-h4-family);
+  --calendar-month-title-font-size:
+    var(--font-h4);
+  --calendar-month-title-font-weight:
+    var(--font-h4-weight);
+  --calendar-month-title-line-height:
+    var(--font-h4-line);
+  --calendar-month-title-letter-spacing:
+    var(--font-h4-letter-spacing);
+
+  --calendar-month-weekday-font-family:
+    var(--font-note-family);
+  --calendar-month-weekday-font-size:
+    var(--font-note);
+  --calendar-month-weekday-font-weight:
+    var(--font-note-weight);
+  --calendar-month-weekday-line-height:
+    var(--font-note-line);
+  --calendar-month-weekday-letter-spacing:
+    var(--font-note-letter-spacing);
+
+  --calendar-month-date-font-family:
+    var(--font-body-family);
+  --calendar-month-date-font-size:
+    var(--font-body);
+  --calendar-month-date-font-weight:
+    var(--font-body-weight);
+  --calendar-month-date-line-height:
+    var(--font-body-line);
+  --calendar-month-date-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+  --calendar-month-gap:
+    var(--margin-item);
+
+  --calendar-month-cell-size:
+    2.5rem;
+
+  --calendar-month-marker-size:
+    0.375rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-month-gap);
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--calendar-month-title-font-family);
+  font-size:
+    var(--calendar-month-title-font-size);
+  font-weight:
+    var(--calendar-month-title-font-weight);
+  line-height:
+    var(--calendar-month-title-line-height);
+  letter-spacing:
+    var(--calendar-month-title-letter-spacing);
+
+  /* size */
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__table {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__weekday {
+  /* color */
+  color: var(--calendar-month-note-color);
+
+  /* typography */
+  font-family:
+    var(--calendar-month-weekday-font-family);
+  font-size:
+    var(--calendar-month-weekday-font-size);
+  font-weight:
+    var(--calendar-month-weekday-font-weight);
+  line-height:
+    var(--calendar-month-weekday-line-height);
+  letter-spacing:
+    var(--calendar-month-weekday-letter-spacing);
+  text-align: center;
+
+  /* size */
+  padding-block-end:
+    var(--margin-text);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__weekday abbr {
+  text-decoration: none;
+}
+
+.calendar-month__cell {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: calc(100% / 7);
+  height: var(--calendar-month-cell-size);
+  padding: 0;
+  vertical-align: middle;
+  text-align: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__cell--empty {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__date {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--calendar-month-date-font-family);
+  font-size:
+    var(--calendar-month-date-font-size);
+  font-weight:
+    var(--calendar-month-date-font-weight);
+  line-height:
+    var(--calendar-month-date-line-height);
+  letter-spacing:
+    var(--calendar-month-date-letter-spacing);
+
+  /* size */
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  width: 100%;
+  height: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__date--marked {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.calendar-month__marker {
+  /* color */
+  background: var(--calendar-month-marker-color);
+
+  /* typography */
+
+  /* size */
+  width: var(--calendar-month-marker-size);
+  height: var(--calendar-month-marker-size);
+
+  /* border */
+  border-radius: 999px;
+
+  /* depth */
+
+  /* motion */
+}

package/components/calendar-month/calendar-month.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import './calendar-month.css';
+/**
+ * A local calendar date represented either by a Date instance
+ * or by a strict YYYY-MM-DD string.
+ *
+ * String values with a time, timezone or another date format
+ * are not supported.
+ */
+export type CalendarMonthDate = Date | string;
+export interface CalendarMonthProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The month to display.
+     *
+     * Accepts a Date instance or a strict YYYY-MM-DD string.
+     * Only the year and month are used; the day and time are ignored.
+     */
+    month: CalendarMonthDate;
+    /**
+     * Dates to mark inside the displayed month.
+     *
+     * Accepts Date instances or strict YYYY-MM-DD strings.
+     * Invalid values and dates outside the displayed month are ignored.
+     * Duplicate dates produce a single marker.
+     */
+    markedDates?: CalendarMonthDate[];
+    /**
+     * Accessible description appended to marked dates.
+     */
+    markedDateLabel?: string;
+    /**
+     * Locale used to format the month title, weekdays and full dates.
+     */
+    locale?: string;
+    /**
+     * First day of the calendar week:
+     * 0 for Sunday, 1 for Monday.
+     */
+    weekStartsOn?: 0 | 1;
+}
+declare const CalendarMonth: React.FC<CalendarMonthProps>;
+export default CalendarMonth;