@tiny-design/react 1.0.4

package/es/calendar/calendar.js

@@ -0,0 +1,199 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { useLocale } from "../_utils/use-locale.js";
+import { getMonthDaysArray, getNextMonthDate, getNextYearDate, getPrevMonthDate, getPrevYearDate, isSameDate, isToday } from "../date-picker/utils.js";
+import React, { useContext, useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calendar/calendar.tsx
+const MONTH_NAMES_EN = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const Calendar = React.forwardRef((props, ref) => {
+	const { defaultValue, fullscreen = true, disabledDate, dateCellRender, monthCellRender, headerRender, defaultMode = "month", prefixCls: customisedCls, className, style, onChange, onSelect, onPanelChange, value: _value, mode: _mode, ...otherProps } = props;
+	const prefixCls = getPrefixCls("calendar", useContext(ConfigContext).prefixCls, customisedCls);
+	const locale = useLocale();
+	const [selectedDate, setSelectedDate] = useState("value" in props ? props.value : defaultValue ?? /* @__PURE__ */ new Date());
+	const [panelDate, setPanelDate] = useState(selectedDate);
+	const [mode, setMode] = useState("mode" in props ? props.mode : defaultMode);
+	useEffect(() => {
+		if ("value" in props && props.value) {
+			setSelectedDate(props.value);
+			setPanelDate(props.value);
+		}
+	}, [props.value]);
+	useEffect(() => {
+		if ("mode" in props) setMode(props.mode);
+	}, [props.mode]);
+	const weeks = locale?.DatePicker?.weeks ?? [
+		"Su",
+		"Mo",
+		"Tu",
+		"We",
+		"Th",
+		"Fr",
+		"Sa"
+	];
+	const months = locale?.DatePicker?.months ?? [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	];
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_fullscreen`]: fullscreen,
+		[`${prefixCls}_card`]: !fullscreen
+	});
+	const handleDateSelect = (date) => {
+		if (disabledDate?.(date)) return;
+		if (!("value" in props)) setSelectedDate(date);
+		setPanelDate(date);
+		onSelect?.(date);
+		onChange?.(date);
+	};
+	const handlePanelChange = (newDate, newMode) => {
+		setPanelDate(newDate);
+		onPanelChange?.(newDate, newMode ?? mode);
+	};
+	const handleModeChange = (newMode) => {
+		if (!("mode" in props)) setMode(newMode);
+		onPanelChange?.(panelDate, newMode);
+	};
+	const handleMonthSelect = (month) => {
+		handleDateSelect(new Date(panelDate.getFullYear(), month, 1));
+		handleModeChange("month");
+	};
+	const goPrev = () => {
+		handlePanelChange(mode === "month" ? getPrevMonthDate(panelDate) : getPrevYearDate(panelDate));
+	};
+	const goNext = () => {
+		handlePanelChange(mode === "month" ? getNextMonthDate(panelDate) : getNextYearDate(panelDate));
+	};
+	const renderHeader = () => {
+		if (headerRender) return headerRender({
+			value: panelDate,
+			mode,
+			onChange: (date) => handlePanelChange(date),
+			onModeChange: handleModeChange
+		});
+		const year = panelDate.getFullYear();
+		const month = panelDate.getMonth();
+		const monthName = locale?.locale === "zh_CN" ? `${months[month]}` : MONTH_NAMES_EN[month];
+		return /* @__PURE__ */ jsxs("div", {
+			className: `${prefixCls}__header`,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${prefixCls}__nav-btn`,
+					onClick: goPrev,
+					"aria-label": "Previous",
+					children: "‹"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: `${prefixCls}__title`,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `${prefixCls}__title-btn`,
+						onClick: () => handleModeChange(mode === "month" ? "year" : "month"),
+						children: mode === "month" ? `${monthName} ${year}` : year
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${prefixCls}__nav-btn`,
+					onClick: goNext,
+					"aria-label": "Next",
+					children: "›"
+				})
+			]
+		});
+	};
+	const renderMonthPanel = () => {
+		const panelDays = getMonthDaysArray(panelDate);
+		return /* @__PURE__ */ jsxs("table", {
+			className: `${prefixCls}__table`,
+			role: "grid",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weeks.map((week, i) => /* @__PURE__ */ jsx("th", {
+				className: `${prefixCls}__cell-header`,
+				scope: "col",
+				children: week
+			}, i)) }) }), /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: panelDays.length / 7 }, (_, row) => /* @__PURE__ */ jsx("tr", { children: panelDays.slice(row * 7, row * 7 + 7).map((dayCell, col) => {
+				const isDisabled = disabledDate?.(dayCell.date) ?? false;
+				return /* @__PURE__ */ jsx("td", {
+					className: classNames(`${prefixCls}__cell`, {
+						[`${prefixCls}__cell_in-view`]: dayCell.isThisMonth,
+						[`${prefixCls}__cell_today`]: isToday(dayCell.date),
+						[`${prefixCls}__cell_selected`]: isSameDate(selectedDate, dayCell.date),
+						[`${prefixCls}__cell_disabled`]: isDisabled
+					}),
+					onClick: () => handleDateSelect(dayCell.date),
+					role: "gridcell",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: `${prefixCls}__cell-inner`,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `${prefixCls}__cell-date`,
+							children: dayCell.label
+						}), dateCellRender && dayCell.isThisMonth && /* @__PURE__ */ jsx("div", {
+							className: `${prefixCls}__cell-content`,
+							children: dateCellRender(dayCell.date)
+						})]
+					})
+				}, col);
+			}) }, row)) })]
+		});
+	};
+	const renderYearPanel = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__months`,
+			children: months.map((monthLabel, i) => {
+				const monthDate = new Date(panelDate.getFullYear(), i, 1);
+				const isCurrentMonth = panelDate.getMonth() === i;
+				return /* @__PURE__ */ jsx("div", {
+					className: classNames(`${prefixCls}__month-cell`, { [`${prefixCls}__month-cell_selected`]: isCurrentMonth }),
+					onClick: () => handleMonthSelect(i),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: `${prefixCls}__month-inner`,
+						children: [/* @__PURE__ */ jsx("span", { children: monthLabel }), monthCellRender && /* @__PURE__ */ jsx("div", {
+							className: `${prefixCls}__month-content`,
+							children: monthCellRender(monthDate)
+						})]
+					})
+				}, i);
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style,
+		children: [renderHeader(), /* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__body`,
+			children: mode === "month" ? renderMonthPanel() : renderYearPanel()
+		})]
+	});
+});
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar as default };
+
+//# sourceMappingURL=calendar.js.map

package/es/calendar/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport {\n  getMonthDaysArray,\n  isSameDate,\n  isToday,\n  getPrevMonthDate,\n  getNextMonthDate,\n  getPrevYearDate,\n  getNextYearDate,\n} from '../date-picker/utils';\nimport { CalendarProps, CalendarMode } from './types';\n\nconst MONTH_NAMES_EN = [\n  'January', 'February', 'March', 'April', 'May', 'June',\n  'July', 'August', 'September', 'October', 'November', 'December',\n];\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((props, ref) => {\n  const {\n    defaultValue,\n    fullscreen = true,\n    disabledDate,\n    dateCellRender,\n    monthCellRender,\n    headerRender,\n    defaultMode = 'month',\n    prefixCls: customisedCls,\n    className,\n    style,\n    onChange,\n    onSelect,\n    onPanelChange,\n    value: _value,\n    mode: _mode,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('calendar', configContext.prefixCls, customisedCls);\n  const locale = useLocale();\n\n  const [selectedDate, setSelectedDate] = useState<Date>(\n    'value' in props ? (props.value as Date) : (defaultValue ?? new Date())\n  );\n  const [panelDate, setPanelDate] = useState<Date>(selectedDate);\n  const [mode, setMode] = useState<CalendarMode>(\n    'mode' in props ? (props.mode as CalendarMode) : defaultMode\n  );\n\n  useEffect(() => {\n    if ('value' in props && props.value) {\n      setSelectedDate(props.value);\n      setPanelDate(props.value);\n    }\n  }, [props.value]);\n\n  useEffect(() => {\n    if ('mode' in props) {\n      setMode(props.mode as CalendarMode);\n    }\n  }, [props.mode]);\n\n  const weeks = locale?.DatePicker?.weeks ?? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n  const months = locale?.DatePicker?.months ?? [\n    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',\n  ];\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_fullscreen`]: fullscreen,\n    [`${prefixCls}_card`]: !fullscreen,\n  });\n\n  const handleDateSelect = (date: Date) => {\n    if (disabledDate?.(date)) return;\n    if (!('value' in props)) {\n      setSelectedDate(date);\n    }\n    setPanelDate(date);\n    onSelect?.(date);\n    onChange?.(date);\n  };\n\n  const handlePanelChange = (newDate: Date, newMode?: CalendarMode) => {\n    setPanelDate(newDate);\n    const m = newMode ?? mode;\n    onPanelChange?.(newDate, m);\n  };\n\n  const handleModeChange = (newMode: CalendarMode) => {\n    if (!('mode' in props)) {\n      setMode(newMode);\n    }\n    onPanelChange?.(panelDate, newMode);\n  };\n\n  const handleMonthSelect = (month: number) => {\n    const newDate = new Date(panelDate.getFullYear(), month, 1);\n    handleDateSelect(newDate);\n    handleModeChange('month');\n  };\n\n  const goPrev = () => {\n    const newDate = mode === 'month' ? getPrevMonthDate(panelDate) : getPrevYearDate(panelDate);\n    handlePanelChange(newDate);\n  };\n\n  const goNext = () => {\n    const newDate = mode === 'month' ? getNextMonthDate(panelDate) : getNextYearDate(panelDate);\n    handlePanelChange(newDate);\n  };\n\n  const renderHeader = () => {\n    if (headerRender) {\n      return headerRender({\n        value: panelDate,\n        mode,\n        onChange: (date) => handlePanelChange(date),\n        onModeChange: handleModeChange,\n      });\n    }\n\n    const year = panelDate.getFullYear();\n    const month = panelDate.getMonth();\n    const monthName = locale?.locale === 'zh_CN'\n      ? `${months[month]}`\n      : MONTH_NAMES_EN[month];\n\n    return (\n      <div className={`${prefixCls}__header`}>\n        <button type=\"button\" className={`${prefixCls}__nav-btn`} onClick={goPrev} aria-label=\"Previous\">\n          ‹\n        </button>\n        <span className={`${prefixCls}__title`}>\n          <button\n            type=\"button\"\n            className={`${prefixCls}__title-btn`}\n            onClick={() => handleModeChange(mode === 'month' ? 'year' : 'month')}\n          >\n            {mode === 'month' ? `${monthName} ${year}` : year}\n          </button>\n        </span>\n        <button type=\"button\" className={`${prefixCls}__nav-btn`} onClick={goNext} aria-label=\"Next\">\n          ›\n        </button>\n      </div>\n    );\n  };\n\n  const renderMonthPanel = () => {\n    const panelDays = getMonthDaysArray(panelDate);\n\n    return (\n      <table className={`${prefixCls}__table`} role=\"grid\">\n        <thead>\n          <tr>\n            {weeks.map((week, i) => (\n              <th key={i} className={`${prefixCls}__cell-header`} scope=\"col\">\n                {week}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {Array.from({ length: panelDays.length / 7 }, (_, row) => (\n            <tr key={row}>\n              {panelDays.slice(row * 7, row * 7 + 7).map((dayCell, col) => {\n                const isDisabled = disabledDate?.(dayCell.date) ?? false;\n                const cellCls = classNames(`${prefixCls}__cell`, {\n                  [`${prefixCls}__cell_in-view`]: dayCell.isThisMonth,\n                  [`${prefixCls}__cell_today`]: isToday(dayCell.date),\n                  [`${prefixCls}__cell_selected`]: isSameDate(selectedDate, dayCell.date),\n                  [`${prefixCls}__cell_disabled`]: isDisabled,\n                });\n                return (\n                  <td\n                    key={col}\n                    className={cellCls}\n                    onClick={() => handleDateSelect(dayCell.date)}\n                    role=\"gridcell\"\n                  >\n                    <div className={`${prefixCls}__cell-inner`}>\n                      <span className={`${prefixCls}__cell-date`}>{dayCell.label}</span>\n                      {dateCellRender && dayCell.isThisMonth && (\n                        <div className={`${prefixCls}__cell-content`}>\n                          {dateCellRender(dayCell.date)}\n                        </div>\n                      )}\n                    </div>\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  };\n\n  const renderYearPanel = () => {\n    return (\n      <div className={`${prefixCls}__months`}>\n        {months.map((monthLabel, i) => {\n          const monthDate = new Date(panelDate.getFullYear(), i, 1);\n          const isCurrentMonth = panelDate.getMonth() === i;\n          const cellCls = classNames(`${prefixCls}__month-cell`, {\n            [`${prefixCls}__month-cell_selected`]: isCurrentMonth,\n          });\n          return (\n            <div\n              key={i}\n              className={cellCls}\n              onClick={() => handleMonthSelect(i)}\n            >\n              <div className={`${prefixCls}__month-inner`}>\n                <span>{monthLabel}</span>\n                {monthCellRender && (\n                  <div className={`${prefixCls}__month-content`}>\n                    {monthCellRender(monthDate)}\n                  </div>\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {renderHeader()}\n      <div className={`${prefixCls}__body`}>\n        {mode === 'month' ? renderMonthPanel() : renderYearPanel()}\n      </div>\n    </div>\n  );\n});\n\nCalendar.displayName = 'Calendar';\nexport default Calendar;\n"],"mappings":"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"}

package/es/calendar/index.d.ts

@@ -0,0 +1 @@
+import { Calendar } from "./calendar.js";

package/es/calendar/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import Calendar from "./calendar.js";
+//#region src/calendar/index.tsx
+var calendar_default = Calendar;
+//#endregion
+export { calendar_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/calendar/index.tsx"],"sourcesContent":["import Calendar from './calendar';\n\nexport default Calendar;\n"],"mappings":";;AAEA,IAAA,mBAAe"}

package/es/calendar/style/_index.scss

@@ -0,0 +1,190 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-calendar {
+  background: var(--ty-calendar-bg, #fff);
+  border: 1px solid var(--ty-calendar-border, #{$gray-200});
+  border-radius: $border-radius;
+
+  &_fullscreen {
+    width: 100%;
+  }
+
+  &_card {
+    width: 300px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ty-calendar-border, #{$gray-200});
+  }
+
+  &__nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: $border-radius;
+    font-size: 18px;
+    color: var(--ty-color-text, #{$gray-700});
+
+    &:hover {
+      background: var(--ty-calendar-hover, #{$gray-100});
+    }
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: $font-size-base;
+  }
+
+  &__title-btn {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-weight: inherit;
+    font-size: inherit;
+    padding: 4px 8px;
+    border-radius: $border-radius;
+    color: var(--ty-color-text, #{$gray-800});
+
+    &:hover {
+      background: var(--ty-calendar-hover, #{$gray-100});
+    }
+  }
+
+  &__body {
+    padding: 8px;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  &__cell-header {
+    padding: 8px 0;
+    text-align: center;
+    font-weight: 500;
+    font-size: $font-size-sm;
+    color: var(--ty-color-text-secondary, #{$gray-600});
+  }
+
+  &__cell {
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &_disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+    &:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
+      background: var(--ty-calendar-hover, #{$gray-100});
+    }
+
+    &_selected:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
+      background: var(--ty-color-primary-active);
+    }
+
+    &_in-view {
+      color: var(--ty-color-text, #{$gray-900});
+    }
+
+    &:not(&_in-view) {
+      color: var(--ty-color-text-secondary, #{$gray-400});
+    }
+
+    &_today .#{$prefix}-calendar__cell-date {
+      color: var(--ty-color-primary, #{$primary-color});
+      font-weight: 600;
+    }
+
+    &_selected .#{$prefix}-calendar__cell-inner {
+      background: var(--ty-color-primary, #{$primary-color});
+      color: #fff;
+      border-radius: $border-radius;
+    }
+
+    &_selected .#{$prefix}-calendar__cell-date {
+      color: inherit;
+    }
+  }
+
+  &__cell-inner {
+    padding: 4px;
+    border-radius: $border-radius;
+    min-height: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &_fullscreen &__cell-inner {
+    min-height: 60px;
+    padding: 4px 8px;
+    align-items: stretch;
+  }
+
+  &__cell-date {
+    display: inline-block;
+    line-height: 24px;
+    min-width: 24px;
+    text-align: center;
+    font-size: $font-size-sm;
+  }
+
+  &__cell-content {
+    font-size: 12px;
+    margin-top: 2px;
+  }
+
+  // Month panel (year mode)
+  &__months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 8px;
+  }
+
+  &__month-cell {
+    text-align: center;
+    padding: 16px 8px;
+    cursor: pointer;
+    border-radius: $border-radius;
+    transition: all 0.2s;
+
+    &:hover {
+      background: var(--ty-calendar-hover, #{$gray-100});
+    }
+
+    &_selected {
+      background: var(--ty-color-primary, #{$primary-color});
+      color: #fff;
+
+      &:hover {
+        background: var(--ty-color-primary, #{$primary-color});
+        opacity: 0.9;
+      }
+    }
+  }
+
+  &__month-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__month-content {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+}

package/es/calendar/style/index.css

@@ -0,0 +1,156 @@
+.ty-calendar {
+  background: var(--ty-calendar-bg, #fff);
+  border: 1px solid var(--ty-calendar-border, #e9ecef);
+  border-radius: 2px;
+}
+.ty-calendar_fullscreen {
+  width: 100%;
+}
+.ty-calendar_card {
+  width: 300px;
+}
+.ty-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ty-calendar-border, #e9ecef);
+}
+.ty-calendar__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 2px;
+  font-size: 18px;
+  color: var(--ty-color-text, #525f7f);
+}
+.ty-calendar__nav-btn:hover {
+  background: var(--ty-calendar-hover, #f6f9fc);
+}
+.ty-calendar__title {
+  font-weight: 500;
+  font-size: 1rem;
+}
+.ty-calendar__title-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-weight: inherit;
+  font-size: inherit;
+  padding: 4px 8px;
+  border-radius: 2px;
+  color: var(--ty-color-text, #32325d);
+}
+.ty-calendar__title-btn:hover {
+  background: var(--ty-calendar-hover, #f6f9fc);
+}
+.ty-calendar__body {
+  padding: 8px;
+}
+.ty-calendar__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.ty-calendar__cell-header {
+  padding: 8px 0;
+  text-align: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--ty-color-text-secondary, #8898aa);
+}
+.ty-calendar__cell {
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.ty-calendar__cell_disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+.ty-calendar__cell:not(.ty-calendar__cell_disabled):hover .ty-calendar__cell-inner {
+  background: var(--ty-calendar-hover, #f6f9fc);
+}
+.ty-calendar__cell_selected:not(.ty-calendar__cell_disabled):hover .ty-calendar__cell-inner {
+  background: var(--ty-color-primary-active);
+}
+.ty-calendar__cell_in-view {
+  color: var(--ty-color-text, #212529);
+}
+.ty-calendar__cell:not(.ty-calendar__cell_in-view) {
+  color: var(--ty-color-text-secondary, #ced4da);
+}
+.ty-calendar__cell_today .ty-calendar__cell-date {
+  color: var(--ty-color-primary, #6e41bf);
+  font-weight: 600;
+}
+.ty-calendar__cell_selected .ty-calendar__cell-inner {
+  background: var(--ty-color-primary, #6e41bf);
+  color: #fff;
+  border-radius: 2px;
+}
+.ty-calendar__cell_selected .ty-calendar__cell-date {
+  color: inherit;
+}
+.ty-calendar__cell-inner {
+  padding: 4px;
+  border-radius: 2px;
+  min-height: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ty-calendar_fullscreen .ty-calendar__cell-inner {
+  min-height: 60px;
+  padding: 4px 8px;
+  align-items: stretch;
+}
+.ty-calendar__cell-date {
+  display: inline-block;
+  line-height: 24px;
+  min-width: 24px;
+  text-align: center;
+  font-size: 0.875rem;
+}
+.ty-calendar__cell-content {
+  font-size: 12px;
+  margin-top: 2px;
+}
+.ty-calendar__months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px;
+}
+.ty-calendar__month-cell {
+  text-align: center;
+  padding: 16px 8px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.ty-calendar__month-cell:hover {
+  background: var(--ty-calendar-hover, #f6f9fc);
+}
+.ty-calendar__month-cell_selected {
+  background: var(--ty-color-primary, #6e41bf);
+  color: #fff;
+}
+.ty-calendar__month-cell_selected:hover {
+  background: var(--ty-color-primary, #6e41bf);
+  opacity: 0.9;
+}
+.ty-calendar__month-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ty-calendar__month-content {
+  font-size: 12px;
+  margin-top: 4px;
+}

package/es/calendar/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/calendar/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/calendar/types.d.ts

@@ -0,0 +1,27 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/calendar/types.d.ts
+type CalendarMode = 'month' | 'year';
+interface CalendarProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onChange' | 'onSelect' | 'defaultValue'> {
+  defaultValue?: Date;
+  value?: Date;
+  mode?: CalendarMode;
+  defaultMode?: CalendarMode;
+  fullscreen?: boolean;
+  disabledDate?: (currentDate: Date) => boolean;
+  onChange?: (date: Date) => void;
+  onSelect?: (date: Date) => void;
+  onPanelChange?: (date: Date, mode: CalendarMode) => void;
+  dateCellRender?: (date: Date) => React.ReactNode;
+  monthCellRender?: (date: Date) => React.ReactNode;
+  headerRender?: (config: {
+    value: Date;
+    mode: CalendarMode;
+    onChange: (date: Date) => void;
+    onModeChange: (mode: CalendarMode) => void;
+  }) => React.ReactNode;
+}
+//#endregion
+export { CalendarProps };
+//# sourceMappingURL=types.d.ts.map

package/es/card/card-content.d.ts

@@ -0,0 +1,11 @@
+import { CardContentProps } from "./types.js";
+import React from "react";
+
+//#region src/card/card-content.d.ts
+declare const CardContent: {
+  (props: CardContentProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { CardContent };
+//# sourceMappingURL=card-content.d.ts.map

package/es/card/card-content.js

@@ -0,0 +1,16 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/card-content.tsx
+const CardContent = (props) => {
+	const { prefixCls, children, ...otherProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		className: `${prefixCls}__body`,
+		children
+	});
+};
+CardContent.displayName = "CardContent";
+//#endregion
+export { CardContent as default };
+
+//# sourceMappingURL=card-content.js.map

package/es/card/card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.js","names":[],"sources":["../../src/card/card-content.tsx"],"sourcesContent":["import React from 'react';\nimport { CardContentProps } from './types';\n\nconst CardContent = (props: CardContentProps): React.ReactElement => {\n  const { prefixCls, children, ...otherProps } = props;\n  return (\n    <div {...otherProps} className={`${prefixCls}__body`}>\n      {children}\n    </div>\n  );\n};\n\nCardContent.displayName = 'CardContent';\n\nexport default CardContent;\n"],"mappings":";;;AAGA,MAAM,eAAe,UAAgD;CACnE,MAAM,EAAE,WAAW,UAAU,GAAG,eAAe;AAC/C,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,WAAW,GAAG,UAAU;EAC1C;EACG,CAAA;;AAIV,YAAY,cAAc"}

package/es/card/card.d.ts

@@ -0,0 +1,8 @@
+import { CardProps } from "./types.js";
+import React from "react";
+
+//#region src/card/card.d.ts
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Card };
+//# sourceMappingURL=card.d.ts.map