donghy 0.0.1

package/dist/esm/components/display/calendar/Calendar.js

@@ -0,0 +1,399 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useState, useCallback, useMemo } from 'react';
+import styles from "./Calendar.module.css";
+
+/**
+ * 日历模式类型
+ */
+
+/**
+ * 日历语义化 DOM 节点
+ */
+
+/**
+ * 日历组件属性
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var WEEKDAYS = ['一', '二', '三', '四', '五', '六', '日'];
+var MONTH_NAMES = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+var MODE_LABELS = {
+  month: '月',
+  year: '年'
+};
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  var day = new Date(year, month, 1).getDay();
+  return day === 0 ? 6 : day - 1;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isToday(date) {
+  return isSameDay(date, new Date());
+}
+function getWeekNumber(date) {
+  var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  var dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+function isDateInRange(date, range) {
+  var time = date.getTime();
+  var start = new Date(range[0].getFullYear(), range[0].getMonth(), range[0].getDate()).getTime();
+  var end = new Date(range[1].getFullYear(), range[1].getMonth(), range[1].getDate()).getTime();
+  return time >= start && time <= end;
+}
+function isMonthInRange(year, month, range) {
+  var start = new Date(year, month, 1);
+  var end = new Date(year, month, getDaysInMonth(year, month));
+  var rangeStart = new Date(range[0].getFullYear(), range[0].getMonth(), 1);
+  var rangeEnd = new Date(range[1].getFullYear(), range[1].getMonth(), getDaysInMonth(range[1].getFullYear(), range[1].getMonth()));
+  return start.getTime() <= rangeEnd.getTime() && end.getTime() >= rangeStart.getTime();
+}
+function getSemantic(part, defaultClass, classNamesProp, stylesProp) {
+  var classExtra = classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp[part];
+  var styleExtra = stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp[part];
+  return {
+    className: [defaultClass, classExtra].filter(Boolean).join(' '),
+    style: styleExtra || {}
+  };
+}
+function CalendarInner(_ref, ref) {
+  var controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$mode = _ref.mode,
+    modeProp = _ref$mode === void 0 ? 'month' : _ref$mode,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
+    _ref$showWeek = _ref.showWeek,
+    showWeek = _ref$showWeek === void 0 ? false : _ref$showWeek,
+    cellRender = _ref.cellRender,
+    headerRender = _ref.headerRender,
+    disabledDate = _ref.disabledDate,
+    validRange = _ref.validRange,
+    onChange = _ref.onChange,
+    onPanelChange = _ref.onPanelChange,
+    onSelect = _ref.onSelect,
+    classNamesProp = _ref.classNames,
+    stylesProp = _ref.styles,
+    className = _ref.className,
+    style = _ref.style;
+  var isControlled = controlledValue !== undefined;
+  var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : new Date()),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var selectedValue = isControlled ? controlledValue : internalValue;
+  var _useState3 = useState(selectedValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    panelDate = _useState4[0],
+    setPanelDate = _useState4[1];
+  var _useState5 = useState(modeProp),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mode = _useState6[0],
+    setMode = _useState6[1];
+  var handleSelect = useCallback(function (date) {
+    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date)) return;
+    if (validRange && !isDateInRange(date, validRange)) return;
+    if (!isControlled) {
+      setInternalValue(date);
+    }
+    onChange === null || onChange === void 0 || onChange(date);
+    onSelect === null || onSelect === void 0 || onSelect(date, {
+      source: 'date'
+    });
+  }, [disabledDate, validRange, isControlled, onChange, onSelect]);
+  var handleMonthSelect = useCallback(function (month) {
+    var newDate = new Date(panelDate.getFullYear(), month, 1);
+    if (validRange && !isMonthInRange(panelDate.getFullYear(), month, validRange)) return;
+    setPanelDate(newDate);
+    setMode('month');
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, 'month');
+    onSelect === null || onSelect === void 0 || onSelect(newDate, {
+      source: 'month'
+    });
+  }, [panelDate, validRange, onPanelChange, onSelect]);
+  var goToPrevMonth = useCallback(function () {
+    var newDate = new Date(panelDate.getFullYear(), panelDate.getMonth() - 1, 1);
+    setPanelDate(newDate);
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+  }, [panelDate, mode, onPanelChange]);
+  var goToNextMonth = useCallback(function () {
+    var newDate = new Date(panelDate.getFullYear(), panelDate.getMonth() + 1, 1);
+    setPanelDate(newDate);
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+  }, [panelDate, mode, onPanelChange]);
+  var goToPrevYear = useCallback(function () {
+    var newDate = new Date(panelDate.getFullYear() - 1, panelDate.getMonth(), 1);
+    setPanelDate(newDate);
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+  }, [panelDate, mode, onPanelChange]);
+  var goToNextYear = useCallback(function () {
+    var newDate = new Date(panelDate.getFullYear() + 1, panelDate.getMonth(), 1);
+    setPanelDate(newDate);
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+  }, [panelDate, mode, onPanelChange]);
+  var handleModeChange = useCallback(function (newMode) {
+    setMode(newMode);
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(panelDate, newMode);
+  }, [panelDate, onPanelChange]);
+  var handlePanelChange = useCallback(function (date) {
+    setPanelDate(date);
+  }, []);
+  var dateCells = useMemo(function () {
+    var year = panelDate.getFullYear();
+    var month = panelDate.getMonth();
+    var daysInMonth = getDaysInMonth(year, month);
+    var firstDay = getFirstDayOfMonth(year, month);
+    var prevMonthDays = getDaysInMonth(year, month - 1);
+    var cells = [];
+    for (var i = firstDay - 1; i >= 0; i--) {
+      var day = prevMonthDays - i;
+      var _date = new Date(year, month - 1, day);
+      cells.push({
+        date: _date,
+        day: day,
+        isOtherMonth: true,
+        isDisabled: (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(_date)) || (validRange ? !isDateInRange(_date, validRange) : false),
+        isTodayCell: isToday(_date),
+        isSelected: isSameDay(_date, selectedValue)
+      });
+    }
+    for (var _day = 1; _day <= daysInMonth; _day++) {
+      var _date2 = new Date(year, month, _day);
+      cells.push({
+        date: _date2,
+        day: _day,
+        isOtherMonth: false,
+        isDisabled: (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(_date2)) || (validRange ? !isDateInRange(_date2, validRange) : false),
+        isTodayCell: isToday(_date2),
+        isSelected: isSameDay(_date2, selectedValue)
+      });
+    }
+    var totalCells = 42;
+    var remaining = totalCells - cells.length;
+    for (var _day2 = 1; _day2 <= remaining; _day2++) {
+      var _date3 = new Date(year, month + 1, _day2);
+      cells.push({
+        date: _date3,
+        day: _day2,
+        isOtherMonth: true,
+        isDisabled: (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(_date3)) || (validRange ? !isDateInRange(_date3, validRange) : false),
+        isTodayCell: isToday(_date3),
+        isSelected: isSameDay(_date3, selectedValue)
+      });
+    }
+    return cells;
+  }, [panelDate, selectedValue, disabledDate, validRange]);
+  var weekRows = useMemo(function () {
+    var rows = [];
+    for (var i = 0; i < dateCells.length; i += 7) {
+      var rowCells = dateCells.slice(i, i + 7);
+      var firstDate = rowCells[0].date;
+      rows.push({
+        weekNum: getWeekNumber(firstDate),
+        cells: rowCells
+      });
+    }
+    return rows;
+  }, [dateCells]);
+  var rootSemantic = getSemantic('root', styles.root, classNamesProp, stylesProp);
+  var headerSemantic = getSemantic('header', styles.header, classNamesProp, stylesProp);
+  var bodySemantic = getSemantic('body', styles.body, classNamesProp, stylesProp);
+  var _contentSemantic = getSemantic('content', styles.content, classNamesProp, stylesProp);
+  var itemSemantic = getSemantic('item', styles.dateCell, classNamesProp, stylesProp);
+  var itemContentSemantic = getSemantic('itemContent', styles.itemContent, classNamesProp, stylesProp);
+  var rootClass = [rootSemantic.className, className].filter(Boolean).join(' ');
+  var renderHeader = function renderHeader() {
+    if (headerRender) {
+      return headerRender({
+        value: panelDate,
+        mode: mode,
+        onChange: handlePanelChange,
+        onModeChange: function onModeChange(m) {
+          return handleModeChange(m);
+        }
+      });
+    }
+    return /*#__PURE__*/_jsxs("div", {
+      className: headerSemantic.className,
+      style: headerSemantic.style,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.navGroup,
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: styles.navBtn,
+          onClick: goToPrevYear,
+          "aria-label": "\u4E0A\u4E00\u5E74",
+          children: "\xAB"
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: styles.navBtn,
+          onClick: goToPrevMonth,
+          "aria-label": "\u4E0A\u4E00\u6708",
+          children: "\u2039"
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.yearMonth,
+        children: [/*#__PURE__*/_jsxs("span", {
+          children: [panelDate.getFullYear(), "\u5E74"]
+        }), /*#__PURE__*/_jsx("span", {
+          children: MONTH_NAMES[panelDate.getMonth()]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.navGroup,
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: styles.navBtn,
+          onClick: goToNextMonth,
+          "aria-label": "\u4E0B\u4E00\u6708",
+          children: "\u203A"
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: styles.navBtn,
+          onClick: goToNextYear,
+          "aria-label": "\u4E0B\u4E00\u5E74",
+          children: "\xBB"
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.modeSwitch,
+        children: Object.keys(MODE_LABELS).map(function (m) {
+          return /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: styles.modeSwitchItem,
+            "data-active": mode === m || undefined,
+            onClick: function onClick() {
+              return handleModeChange(m);
+            },
+            children: MODE_LABELS[m]
+          }, m);
+        })
+      })]
+    });
+  };
+  var renderMonthView = function renderMonthView() {
+    return /*#__PURE__*/_jsxs("div", {
+      className: bodySemantic.className,
+      style: bodySemantic.style,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.weekdayRow,
+        "data-show-week": showWeek || undefined,
+        children: [showWeek && /*#__PURE__*/_jsx("div", {
+          className: styles.weekNumber,
+          children: "\u5468"
+        }), WEEKDAYS.map(function (day) {
+          return /*#__PURE__*/_jsx("div", {
+            className: styles.weekdayCell,
+            children: day
+          }, day);
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.dateGrid,
+        "data-show-week": showWeek || undefined,
+        children: showWeek ? weekRows.map(function (row) {
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.weekNumber,
+              children: row.weekNum
+            }), row.cells.map(function (cell, idx) {
+              return /*#__PURE__*/_jsx("div", {
+                className: itemSemantic.className,
+                style: itemSemantic.style,
+                "data-today": cell.isTodayCell || undefined,
+                "data-selected": cell.isSelected || undefined,
+                "data-disabled": cell.isDisabled || undefined,
+                "data-other-month": cell.isOtherMonth || undefined,
+                onClick: function onClick() {
+                  return !cell.isDisabled && handleSelect(cell.date);
+                },
+                children: /*#__PURE__*/_jsx("div", {
+                  className: itemContentSemantic.className,
+                  style: itemContentSemantic.style,
+                  children: fullscreen && cellRender ? cellRender(cell.date, {
+                    type: 'date'
+                  }) : cell.day
+                })
+              }, "".concat(cell.isOtherMonth ? 'o' : 'c', "-").concat(cell.day, "-").concat(idx));
+            })]
+          }, row.weekNum);
+        }) : dateCells.map(function (cell, idx) {
+          return /*#__PURE__*/_jsx("div", {
+            className: itemSemantic.className,
+            style: itemSemantic.style,
+            "data-today": cell.isTodayCell || undefined,
+            "data-selected": cell.isSelected || undefined,
+            "data-disabled": cell.isDisabled || undefined,
+            "data-other-month": cell.isOtherMonth || undefined,
+            onClick: function onClick() {
+              return !cell.isDisabled && handleSelect(cell.date);
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              className: itemContentSemantic.className,
+              style: itemContentSemantic.style,
+              children: fullscreen && cellRender ? cellRender(cell.date, {
+                type: 'date'
+              }) : cell.day
+            })
+          }, "".concat(cell.isOtherMonth ? 'o' : 'c', "-").concat(cell.day, "-").concat(idx));
+        })
+      })]
+    });
+  };
+  var renderYearView = function renderYearView() {
+    var year = panelDate.getFullYear();
+    return /*#__PURE__*/_jsx("div", {
+      className: bodySemantic.className,
+      style: bodySemantic.style,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.monthGrid,
+        children: MONTH_NAMES.map(function (name, month) {
+          var isSelected = selectedValue.getFullYear() === year && selectedValue.getMonth() === month;
+          var isDisabled = validRange ? !isMonthInRange(year, month, validRange) : false;
+          return /*#__PURE__*/_jsx("div", {
+            className: [styles.monthCell, itemSemantic.className].filter(Boolean).join(' '),
+            style: itemSemantic.style,
+            "data-selected": isSelected || undefined,
+            "data-disabled": isDisabled || undefined,
+            onClick: function onClick() {
+              return !isDisabled && handleMonthSelect(month);
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              className: itemContentSemantic.className,
+              style: itemContentSemantic.style,
+              children: fullscreen && cellRender ? cellRender(new Date(year, month, 1), {
+                type: 'month'
+              }) : name
+            })
+          }, month);
+        })
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: rootClass,
+    style: _objectSpread(_objectSpread({}, rootSemantic.style), style),
+    "data-fullscreen": String(fullscreen),
+    "data-mode": mode,
+    children: [renderHeader(), mode === 'month' ? renderMonthView() : renderYearView()]
+  });
+}
+var Calendar = /*#__PURE__*/forwardRef(CalendarInner);
+Calendar.displayName = 'Calendar';
+export { Calendar };
+export default Calendar;

package/dist/esm/components/display/calendar/Calendar.module.css

@@ -0,0 +1,284 @@
+.root {
+  font-family: var(--nv-font-family, -apple-system, BlinkMacSystemFont, sans-serif);
+  font-size: 14px;
+  line-height: var(--nv-line-height-md, 22px);
+  color: rgba(0, 0, 0, 0.88);
+  border: 1px solid var(--nv-border-color, #d9d9d9);
+  border-radius: var(--nv-radius-middle, 8px);
+  background: #fff;
+}
+
+.root[data-fullscreen='true'] {
+  padding: 16px;
+}
+
+.root[data-fullscreen='false'] {
+  padding: 8px;
+  font-size: 12px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 12px;
+}
+
+.root[data-fullscreen='false'] .header {
+  padding-bottom: 8px;
+}
+
+.navGroup {
+  display: flex;
+  gap: 4px;
+}
+
+.navBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--nv-radius-small, 4px);
+  background: transparent;
+  color: rgba(0, 0, 0, 0.65);
+  cursor: pointer;
+  font-size: 14px;
+  transition: background var(--nv-motion-fast, 0.15s) var(--nv-motion-ease-out, ease-out);
+  user-select: none;
+}
+
+.navBtn:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.yearMonth {
+  display: flex;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  user-select: none;
+}
+
+.root[data-fullscreen='false'] .yearMonth {
+  font-size: 12px;
+  gap: 4px;
+}
+
+.modeSwitch {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border-radius: var(--nv-radius-small, 4px);
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.modeSwitchItem {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  border: none;
+  border-radius: var(--nv-radius-small, 4px);
+  background: transparent;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all var(--nv-motion-fast, 0.15s) var(--nv-motion-ease-out, ease-out);
+  user-select: none;
+}
+
+.modeSwitchItem[data-active='true'] {
+  background: #fff;
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+}
+
+.weekdayRow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekdayRow[data-show-week='true'] {
+  grid-template-columns: auto repeat(7, 1fr);
+}
+
+.weekdayCell {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.weekNumber {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  padding: 4px 0;
+  user-select: none;
+  min-width: 28px;
+}
+
+.dateGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.dateGrid[data-show-week='true'] {
+  grid-template-columns: auto repeat(7, 1fr);
+}
+
+.dateCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--nv-radius-small, 4px);
+  transition: background var(--nv-motion-fast, 0.15s) var(--nv-motion-ease-out, ease-out);
+  color: rgba(0, 0, 0, 0.88);
+  user-select: none;
+}
+
+.root[data-fullscreen='true'] .dateCell {
+  height: 80px;
+  font-size: 14px;
+}
+
+.root[data-fullscreen='false'] .dateCell {
+  height: 32px;
+  font-size: 12px;
+}
+
+.dateCell:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.dateCell[data-today='true'] {
+  color: var(--nv-color-primary, #6C5CE7);
+  font-weight: 500;
+}
+
+.dateCell[data-today='true']::after {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--nv-color-primary, #6C5CE7);
+}
+
+.root[data-fullscreen='false'] .dateCell[data-today='true']::after {
+  bottom: 2px;
+  width: 4px;
+  height: 4px;
+}
+
+.dateCell[data-selected='true'] {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+  font-weight: 500;
+}
+
+.dateCell[data-selected='true']::after {
+  display: none;
+}
+
+.dateCell[data-selected='true']:hover {
+  background: var(--nv-color-primary, #6C5CE7);
+  opacity: 0.85;
+}
+
+.dateCell[data-disabled='true'] {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+
+.dateCell[data-disabled='true']:hover {
+  background: transparent;
+}
+
+.dateCell[data-other-month='true'] {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.dateCell[data-other-month='true']:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.dateCell[data-selected='true'][data-other-month='true'] {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+  opacity: 0.65;
+}
+
+.dateCell[data-disabled='true'][data-other-month='true'] {
+  color: rgba(0, 0, 0, 0.15);
+}
+
+.itemContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.monthGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.monthCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 0;
+  border-radius: var(--nv-radius-small, 4px);
+  cursor: pointer;
+  transition: background var(--nv-motion-fast, 0.15s) var(--nv-motion-ease-out, ease-out);
+  color: rgba(0, 0, 0, 0.88);
+  user-select: none;
+}
+
+.root[data-fullscreen='false'] .monthCell {
+  padding: 8px 0;
+}
+
+.monthCell:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.monthCell[data-selected='true'] {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+  font-weight: 500;
+}
+
+.monthCell[data-selected='true']:hover {
+  background: var(--nv-color-primary, #6C5CE7);
+  opacity: 0.85;
+}
+
+.monthCell[data-disabled='true'] {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+
+.monthCell[data-disabled='true']:hover {
+  background: transparent;
+}

package/dist/esm/components/display/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";