wssf-kage-ui 0.1.1 → 0.1.3

package/dist/esm/Badge/index.js

@@ -0,0 +1,137 @@
+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); }
+import React from 'react';
+import "./style.less";
+
+// ============ Badge Props ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ Badge Component ============
+export var Badge = function Badge(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$overflowCount = _ref.overflowCount,
+    overflowCount = _ref$overflowCount === void 0 ? 99 : _ref$overflowCount,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    status = _ref.status,
+    text = _ref.text,
+    color = _ref.color,
+    _ref$showZero = _ref.showZero,
+    showZero = _ref$showZero === void 0 ? false : _ref$showZero,
+    offset = _ref.offset,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    children = _ref.children;
+  // 计算显示的内容
+  var getDisplayCount = function getDisplayCount() {
+    if (typeof count === 'number') {
+      if (count === 0 && !showZero) {
+        return null;
+      }
+      if (count > overflowCount) {
+        return "".concat(overflowCount, "+");
+      }
+      return count;
+    }
+    return count;
+  };
+  var displayCount = getDisplayCount();
+  var shouldShowBadge = dot || displayCount !== null;
+
+  // 状态点样式
+  if (status || !children && text) {
+    var statusClassNames = ['kage-badge-status', status && "kage-badge-status-".concat(status), className].filter(Boolean).join(' ');
+    var dotStyle = color ? {
+      backgroundColor: color
+    } : {};
+    return /*#__PURE__*/_jsxs("span", {
+      className: statusClassNames,
+      style: style,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-badge-status-dot",
+        style: dotStyle
+      }), text && /*#__PURE__*/_jsx("span", {
+        className: "kage-badge-status-text",
+        children: text
+      })]
+    });
+  }
+
+  // 如果没有子元素，直接显示数字
+  if (!children) {
+    if (!shouldShowBadge) return null;
+    var standaloneClassNames = ['kage-badge-standalone', dot && 'kage-badge-dot', className].filter(Boolean).join(' ');
+    var badgeStyle = color ? {
+      backgroundColor: color
+    } : {};
+    return /*#__PURE__*/_jsx("span", {
+      className: standaloneClassNames,
+      style: _objectSpread(_objectSpread({}, badgeStyle), style),
+      children: !dot && displayCount
+    });
+  }
+
+  // 带子元素的徽章
+  var wrapperClassNames = ['kage-badge', className].filter(Boolean).join(' ');
+  var supClassNames = ['kage-badge-count', dot && 'kage-badge-dot', !shouldShowBadge && 'kage-badge-hidden'].filter(Boolean).join(' ');
+  var supStyle = _objectSpread(_objectSpread({}, color ? {
+    backgroundColor: color
+  } : {}), offset ? {
+    right: -offset[0],
+    top: offset[1]
+  } : {});
+  return /*#__PURE__*/_jsxs("span", {
+    className: wrapperClassNames,
+    style: style,
+    children: [children, shouldShowBadge && /*#__PURE__*/_jsx("sup", {
+      className: supClassNames,
+      style: supStyle,
+      children: !dot && displayCount
+    })]
+  });
+};
+
+// ============ Badge.Ribbon Props ============
+
+// ============ Badge.Ribbon Component ============
+var BadgeRibbon = function BadgeRibbon(_ref2) {
+  var text = _ref2.text,
+    color = _ref2.color,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'end' : _ref2$placement,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style,
+    children = _ref2.children;
+  var ribbonClassNames = ['kage-badge-ribbon', "kage-badge-ribbon-".concat(placement), className].filter(Boolean).join(' ');
+  var ribbonStyle = color ? {
+    backgroundColor: color
+  } : {};
+  return /*#__PURE__*/_jsxs("div", {
+    className: "kage-badge-ribbon-wrapper",
+    style: style,
+    children: [children, /*#__PURE__*/_jsxs("div", {
+      className: ribbonClassNames,
+      style: ribbonStyle,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-badge-ribbon-text",
+        children: text
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-badge-ribbon-corner",
+        style: ribbonStyle
+      })]
+    })]
+  });
+};
+
+// 将 Ribbon 组件附加到 Badge 上
+Badge.displayName = 'Badge';
+var BadgeWithRibbon = Badge;
+BadgeWithRibbon.Ribbon = BadgeRibbon;
+export default BadgeWithRibbon;

package/dist/esm/Badge/style.less

@@ -0,0 +1,237 @@
+// Badge 徽章组件样式
+
+@prefix: kage-badge;
+
+// 颜色变量
+@badge-color: #ff4d4f;
+@badge-text-color: #fff;
+@badge-font-size: 12px;
+@badge-dot-size: 6px;
+@badge-height: 20px;
+@badge-status-dot-size: 6px;
+
+// 状态颜色
+@badge-success: #52c41a;
+@badge-processing: #1890ff;
+@badge-default: #d9d9d9;
+@badge-error: #ff4d4f;
+@badge-warning: #faad14;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 徽章数字 ============
+.@{prefix}-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100% 0;
+  z-index: 10;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  font-weight: 400;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 0 0 1px #fff;
+  transition: all 0.3s ease;
+}
+
+// ============ 小红点 ============
+.@{prefix}-dot {
+  min-width: @badge-dot-size;
+  width: @badge-dot-size;
+  height: @badge-dot-size;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+// ============ 隐藏状态 ============
+.@{prefix}-hidden {
+  display: none;
+}
+
+// ============ 独立徽章 ============
+.@{prefix}-standalone {
+  display: inline-block;
+  min-width: @badge-height;
+  height: @badge-height;
+  padding: 0 6px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: @badge-height;
+  text-align: center;
+  border-radius: 10px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+
+  &.@{prefix}-dot {
+    min-width: @badge-dot-size;
+    width: @badge-dot-size;
+    height: @badge-dot-size;
+    padding: 0;
+    border-radius: 50%;
+  }
+}
+
+// ============ 状态点 ============
+.@{prefix}-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+.@{prefix}-status-dot {
+  position: relative;
+  display: inline-block;
+  width: @badge-status-dot-size;
+  height: @badge-status-dot-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.@{prefix}-status-text {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+// 状态点颜色
+.@{prefix}-status-success .@{prefix}-status-dot {
+  background: @badge-success;
+}
+
+.@{prefix}-status-processing .@{prefix}-status-dot {
+  background: @badge-processing;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid @badge-processing;
+    border-radius: 50%;
+    animation: badgeProcessing 1.2s infinite ease-in-out;
+  }
+}
+
+@keyframes badgeProcessing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+.@{prefix}-status-default .@{prefix}-status-dot {
+  background: @badge-default;
+}
+
+.@{prefix}-status-error .@{prefix}-status-dot {
+  background: @badge-error;
+}
+
+.@{prefix}-status-warning .@{prefix}-status-dot {
+  background: @badge-warning;
+}
+
+// ============ Badge.Ribbon 缎带 ============
+.@{prefix}-ribbon-wrapper {
+  position: relative;
+}
+
+.@{prefix}-ribbon {
+  position: absolute;
+  top: 8px;
+  height: 22px;
+  padding: 0 8px;
+  background: @badge-color;
+  color: @badge-text-color;
+  font-size: @badge-font-size;
+  line-height: 22px;
+  white-space: nowrap;
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.@{prefix}-ribbon-text {
+  color: @badge-text-color;
+}
+
+.@{prefix}-ribbon-corner {
+  position: absolute;
+  top: 100%;
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  filter: brightness(0.75);
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+}
+
+// 缎带位置
+.@{prefix}-ribbon-end {
+  right: -8px;
+  border-bottom-right-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    right: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.@{prefix}-ribbon-start {
+  left: -8px;
+  border-bottom-left-radius: 0;
+
+  .@{prefix}-ribbon-corner {
+    left: 0;
+    transform: scaleX(-1);
+    border-bottom-left-radius: 0;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-count,
+  .@{prefix}-standalone {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-dot {
+    box-shadow: 0 0 0 1px #1f1f1f;
+  }
+
+  .@{prefix}-status-text {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-status-default .@{prefix}-status-dot {
+    background: #434343;
+  }
+}
+

package/dist/esm/Calendar/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import './style.less';
+export type CalendarMode = 'month' | 'year';
+export interface CalendarProps {
+    /** 当前选中的日期 */
+    value?: Date;
+    /** 默认选中的日期 */
+    defaultValue?: Date;
+    /** 模式 */
+    mode?: CalendarMode;
+    /** 是否全屏显示 */
+    fullscreen?: boolean;
+    /** 自定义渲染日期单元格 */
+    dateCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染日期单元格内容 */
+    dateFullCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格 */
+    monthCellRender?: (date: Date) => React.ReactNode;
+    /** 自定义渲染月单元格内容 */
+    monthFullCellRender?: (date: Date) => React.ReactNode;
+    /** 不可选择的日期 */
+    disabledDate?: (date: Date) => boolean;
+    /** 日期选择回调 */
+    onSelect?: (date: Date) => void;
+    /** 面板变化回调 */
+    onPanelChange?: (date: Date, mode: CalendarMode) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;

package/dist/esm/Calendar/index.js

@@ -0,0 +1,291 @@
+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, { useState, useCallback, useMemo } from 'react';
+import "./style.less";
+
+// ============ 日期工具函数 ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var formatDate = function formatDate(date) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+};
+var isSameDay = function isSameDay(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var isSameMonth = function isSameMonth(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+};
+var getDaysInMonth = function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+};
+var getFirstDayOfMonth = function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+};
+
+// ============ Calendar Props ============
+
+// ============ Calendar Component ============
+export var Calendar = function Calendar(_ref) {
+  var controlledValue = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? new Date() : _ref$defaultValue,
+    controlledMode = _ref.mode,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
+    dateCellRender = _ref.dateCellRender,
+    dateFullCellRender = _ref.dateFullCellRender,
+    monthCellRender = _ref.monthCellRender,
+    monthFullCellRender = _ref.monthFullCellRender,
+    disabledDate = _ref.disabledDate,
+    onSelect = _ref.onSelect,
+    onPanelChange = _ref.onPanelChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState('month'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalMode = _useState4[0],
+    setInternalMode = _useState4[1];
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    viewDate = _useState6[0],
+    setViewDate = _useState6[1];
+  var value = controlledValue !== undefined ? controlledValue : internalValue;
+  var mode = controlledMode !== undefined ? controlledMode : internalMode;
+
+  // 切换模式
+  var handleModeChange = useCallback(function (newMode) {
+    if (controlledMode === undefined) {
+      setInternalMode(newMode);
+    }
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(viewDate, newMode);
+  }, [controlledMode, viewDate, onPanelChange]);
+
+  // 选择日期
+  var handleSelectDate = useCallback(function (date) {
+    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date)) return;
+    if (controlledValue === undefined) {
+      setInternalValue(date);
+    }
+    setViewDate(date);
+    onSelect === null || onSelect === void 0 || onSelect(date);
+  }, [controlledValue, disabledDate, onSelect]);
+
+  // 选择月份
+  var handleSelectMonth = useCallback(function (monthIndex) {
+    var newDate = new Date(viewDate.getFullYear(), monthIndex, 1);
+    setViewDate(newDate);
+    handleModeChange('month');
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, 'month');
+  }, [viewDate, handleModeChange, onPanelChange]);
+
+  // 切换到上一月/年
+  var handlePrev = useCallback(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 切换到下一月/年
+  var handleNext = useCallback(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate2 = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate2);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate2, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 回到今天
+  var handleToday = useCallback(function () {
+    var today = new Date();
+    setViewDate(today);
+    handleSelectDate(today);
+  }, [handleSelectDate]);
+
+  // 生成日期网格
+  var dateGrid = useMemo(function () {
+    var year = viewDate.getFullYear();
+    var month = viewDate.getMonth();
+    var daysInMonth = getDaysInMonth(year, month);
+    var firstDay = getFirstDayOfMonth(year, month);
+    var prevMonthDays = getDaysInMonth(year, month - 1);
+    var days = [];
+
+    // 上个月的天数
+    for (var i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDays - i),
+        isCurrentMonth: false
+      });
+    }
+
+    // 当前月的天数
+    for (var _i = 1; _i <= daysInMonth; _i++) {
+      days.push({
+        date: new Date(year, month, _i),
+        isCurrentMonth: true
+      });
+    }
+
+    // 下个月的天数
+    var remaining = 42 - days.length;
+    for (var _i2 = 1; _i2 <= remaining; _i2++) {
+      days.push({
+        date: new Date(year, month + 1, _i2),
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }, [viewDate]);
+
+  // 生成月份网格
+  var monthGrid = useMemo(function () {
+    var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+    return months.map(function (name, index) {
+      return {
+        name: name,
+        index: index,
+        date: new Date(viewDate.getFullYear(), index, 1)
+      };
+    });
+  }, [viewDate]);
+  var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  var today = new Date();
+  var classNames = ['kage-calendar', fullscreen ? 'kage-calendar-fullscreen' : 'kage-calendar-card', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-calendar-header",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-calendar-header-left",
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handlePrev,
+          children: "\u2039"
+        }), /*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handleNext,
+          children: "\u203A"
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "kage-calendar-header-title",
+          onClick: function onClick() {
+            return handleModeChange('year');
+          },
+          children: [viewDate.getFullYear(), "\u5E74", mode === 'month' && /*#__PURE__*/_jsxs("span", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              handleModeChange('month');
+            },
+            children: [viewDate.getMonth() + 1, "\u6708"]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "kage-calendar-header-right",
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-today-btn",
+          onClick: handleToday,
+          children: "\u4ECA\u5929"
+        }), /*#__PURE__*/_jsxs("select", {
+          className: "kage-calendar-mode-select",
+          value: mode,
+          onChange: function onChange(e) {
+            return handleModeChange(e.target.value);
+          },
+          children: [/*#__PURE__*/_jsx("option", {
+            value: "month",
+            children: "\u6708"
+          }), /*#__PURE__*/_jsx("option", {
+            value: "year",
+            children: "\u5E74"
+          })]
+        })]
+      })]
+    }), mode === 'month' ? /*#__PURE__*/_jsxs("div", {
+      className: "kage-calendar-body",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "kage-calendar-weekdays",
+        children: weekDays.map(function (day) {
+          return /*#__PURE__*/_jsx("div", {
+            className: "kage-calendar-weekday",
+            children: day
+          }, day);
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-calendar-dates",
+        children: dateGrid.map(function (_ref2, index) {
+          var date = _ref2.date,
+            isCurrentMonth = _ref2.isCurrentMonth;
+          var isSelected = isSameDay(date, value);
+          var isToday = isSameDay(date, today);
+          var isDisabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date);
+          var cellClassNames = ['kage-calendar-date', !isCurrentMonth && 'kage-calendar-date-other', isSelected && 'kage-calendar-date-selected', isToday && 'kage-calendar-date-today', isDisabled && 'kage-calendar-date-disabled'].filter(Boolean).join(' ');
+          return /*#__PURE__*/_jsx("div", {
+            className: cellClassNames,
+            onClick: function onClick() {
+              return !isDisabled && handleSelectDate(date);
+            },
+            children: dateFullCellRender ? dateFullCellRender(date) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "kage-calendar-date-value",
+                children: date.getDate()
+              }), dateCellRender && /*#__PURE__*/_jsx("div", {
+                className: "kage-calendar-date-content",
+                children: dateCellRender(date)
+              })]
+            })
+          }, index);
+        })
+      })]
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "kage-calendar-months",
+      children: monthGrid.map(function (_ref3) {
+        var name = _ref3.name,
+          index = _ref3.index,
+          date = _ref3.date;
+        var isSelected = isSameMonth(date, value);
+        var isCurrentMonth = isSameMonth(date, today);
+        var cellClassNames = ['kage-calendar-month', isSelected && 'kage-calendar-month-selected', isCurrentMonth && 'kage-calendar-month-current'].filter(Boolean).join(' ');
+        return /*#__PURE__*/_jsx("div", {
+          className: cellClassNames,
+          onClick: function onClick() {
+            return handleSelectMonth(index);
+          },
+          children: monthFullCellRender ? monthFullCellRender(date) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "kage-calendar-month-value",
+              children: name
+            }), monthCellRender && /*#__PURE__*/_jsx("div", {
+              className: "kage-calendar-month-content",
+              children: monthCellRender(date)
+            })]
+          })
+        }, index);
+      })
+    })]
+  });
+};
+export default Calendar;