one-design-next 0.0.4-alpha.100

package/dist/calendar/index.js

@@ -0,0 +1,379 @@
+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); }
+var _excluded = ["lang", "disabledDays", "month", "onMonthChange", "minDate", "maxDate", "className", "components"],
+  _excluded2 = ["day", "modifiers", "onMouseEnter", "onMouseLeave"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useRef, useState } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { enUS, zhCN } from 'react-day-picker/locale';
+import "../date-picker/style";
+import "./style";
+var DEFAULT_HOVER_COLOR = 'rgba(33, 34, 38, 0.05)';
+import { MONTHS, getDefaultMaxDate, getDefaultMinDate, isDayAfter, isDayBefore, today } from "../_util/date";
+import Icon from "../icon";
+var Calendar = function Calendar(_ref) {
+  var _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'zhCN' : _ref$lang,
+    disabledDays = _ref.disabledDays,
+    monthProp = _ref.month,
+    onMonthChange = _ref.onMonthChange,
+    _ref$minDate = _ref.minDate,
+    minDate = _ref$minDate === void 0 ? getDefaultMinDate() : _ref$minDate,
+    _ref$maxDate = _ref.maxDate,
+    maxDate = _ref$maxDate === void 0 ? getDefaultMaxDate() : _ref$maxDate,
+    className = _ref.className,
+    components = _ref.components,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var popupRef = useRef(null);
+  var navHoverFillRef = useRef(null);
+  var navHoverFillInnerRef = useRef(null);
+  var navHoverFillTimer = useRef(0);
+  var navHoverFillVisible = useRef(false);
+  var tdHoverFillRef = useRef(null);
+  var tdHoverFillInnerRef = useRef(null);
+  var tdHoverFillTimer = useRef(0);
+  var tdHoverFillVisible = useRef(false);
+  var _useState = useState(monthProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    month = _useState2[0],
+    setMonth = _useState2[1];
+  var handleMonthChange = function handleMonthChange(date) {
+    if (monthProp === undefined) {
+      setMonth(date);
+    }
+    if (onMonthChange) {
+      onMonthChange(date);
+    }
+  };
+  var handleCaptionChange = function handleCaptionChange(date) {
+    var newDate = date;
+    if (minDate && isDayBefore(date, minDate)) {
+      newDate.setMonth(minDate.getMonth());
+    } else if (maxDate && isDayAfter(date, maxDate)) {
+      newDate.setMonth(maxDate.getMonth());
+    }
+    setMonth(newDate);
+  };
+  var handleSelectYearChange = function handleSelectYearChange(e) {
+    var newYear = parseInt(e.currentTarget.value, 10);
+    var baseDate = month || today;
+    var newDate = new Date(baseDate.getTime());
+    newDate.setFullYear(newYear);
+    handleCaptionChange(newDate);
+  };
+  var handleSelectMonthChange = function handleSelectMonthChange(e) {
+    var newMonth = parseInt(e.currentTarget.value, 10);
+    var baseDate = month || today;
+    var newDate = new Date(baseDate.getTime());
+    newDate.setMonth(newMonth);
+    handleCaptionChange(newDate);
+  };
+  var handleCaptionHoverEnter = function handleCaptionHoverEnter(e) {
+    var _popupRef$current, _popupRef$current2;
+    e.persist();
+    clearTimeout(navHoverFillTimer.current);
+    if (!navHoverFillInnerRef.current || !navHoverFillRef.current) {
+      return;
+    }
+    var offsetWidth = e.currentTarget.offsetWidth;
+    var popupTop = ((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.getBoundingClientRect().top) || 0;
+    var popupLeft = ((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.getBoundingClientRect().left) || 0;
+    var targetTop = e.currentTarget.getBoundingClientRect().top || 0;
+    var targetLeft = e.currentTarget.getBoundingClientRect().left || 0;
+    var finalLeft = targetLeft - popupLeft;
+    var finalTop = targetTop - popupTop;
+    setTimeout(function () {
+      if (!navHoverFillRef.current || !navHoverFillInnerRef.current) {
+        return;
+      }
+      navHoverFillRef.current.style.width = "".concat(offsetWidth, "px");
+      navHoverFillRef.current.style.left = "".concat(finalLeft, "px");
+      navHoverFillRef.current.style.top = "".concat(finalTop, "px");
+      navHoverFillInnerRef.current.style.background = 'var(--odn-dp-hover-fill-color)';
+    }, 0);
+    if (!navHoverFillVisible.current) {
+      navHoverFillVisible.current = true;
+      navHoverFillRef.current.style.transitionDuration = '0s';
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        x = _e$currentTarget$getB.x,
+        y = _e$currentTarget$getB.y;
+      navHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+    } else {
+      navHoverFillRef.current.style.transitionDuration = 'var(--odn-hoverfill-duration)';
+    }
+  };
+  var handleCaptionHoverLeave = function handleCaptionHoverLeave(e) {
+    e.persist();
+    clearTimeout(navHoverFillTimer.current);
+    if (!navHoverFillInnerRef.current || !navHoverFillRef.current) {
+      return;
+    }
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var _e$currentTarget$getB2 = e.currentTarget.getBoundingClientRect(),
+      x = _e$currentTarget$getB2.x,
+      y = _e$currentTarget$getB2.y;
+    navHoverFillTimer.current = window.setTimeout(function () {
+      navHoverFillVisible.current = false;
+      if (navHoverFillInnerRef.current) {
+        navHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+        navHoverFillInnerRef.current.style.background = 'transparent';
+      }
+    }, 100);
+  };
+  var resetNavHoverFill = function resetNavHoverFill() {
+    navHoverFillVisible.current = false;
+    if (navHoverFillRef.current && navHoverFillInnerRef.current) {
+      navHoverFillInnerRef.current.style.transformOrigin = '';
+      navHoverFillInnerRef.current.style.background = 'transparent';
+    }
+  };
+  var handleTdHoverEnter = function handleTdHoverEnter(e) {
+    var _popupRef$current3, _popupRef$current4;
+    e.persist();
+    clearTimeout(tdHoverFillTimer.current);
+    if (!tdHoverFillInnerRef.current || !tdHoverFillRef.current) {
+      return;
+    }
+    var target = e.currentTarget;
+    var targetTop = target.getBoundingClientRect().top || 0;
+    var targetLeft = target.getBoundingClientRect().left || 0;
+    var popupTop = ((_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.getBoundingClientRect().top) || 0;
+    var popupLeft = ((_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.getBoundingClientRect().left) || 0;
+    var finalTop = targetTop - popupTop;
+    var finalTdLeft = targetLeft - popupLeft;
+    setTimeout(function () {
+      if (!tdHoverFillRef.current || !tdHoverFillInnerRef.current) {
+        return;
+      }
+      tdHoverFillRef.current.style.left = "".concat(finalTdLeft, "px");
+      tdHoverFillRef.current.style.top = "".concat(finalTop, "px");
+      tdHoverFillInnerRef.current.style.background = 'var(--odn-dp-hover-fill-color)';
+    }, 0);
+    if (!tdHoverFillVisible.current) {
+      tdHoverFillVisible.current = true;
+      tdHoverFillRef.current.style.transitionDuration = '0s';
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _target$getBoundingCl = target.getBoundingClientRect(),
+        x = _target$getBoundingCl.x,
+        y = _target$getBoundingCl.y;
+      tdHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+    } else {
+      tdHoverFillRef.current.style.transitionDuration = 'var(--odn-hoverfill-duration)';
+    }
+  };
+  var handleTdHoverLeave = function handleTdHoverLeave(e) {
+    e.persist();
+    clearTimeout(tdHoverFillTimer.current);
+    if (!tdHoverFillInnerRef.current || !tdHoverFillRef.current) {
+      return;
+    }
+    var target = e.currentTarget;
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var _target$getBoundingCl2 = target.getBoundingClientRect(),
+      x = _target$getBoundingCl2.x,
+      y = _target$getBoundingCl2.y;
+    tdHoverFillTimer.current = window.setTimeout(function () {
+      tdHoverFillVisible.current = false;
+      if (tdHoverFillInnerRef.current) {
+        tdHoverFillInnerRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+        tdHoverFillInnerRef.current.style.background = 'rgba(33, 34, 38, 0)';
+      }
+    }, 100);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-calendar-wrapper": true,
+    className: className,
+    ref: popupRef
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-caption-nav-hover-fill": true,
+    ref: navHoverFillRef
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-caption-nav-hover-fill-inner": true,
+    ref: navHoverFillInnerRef
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-td-hover-fill": true,
+    ref: tdHoverFillRef
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-date-picker-td-hover-fill-inner": true,
+    ref: tdHoverFillInnerRef
+  })), /*#__PURE__*/React.createElement(DayPicker, _extends({
+    locale: lang === 'zhCN' ? zhCN : enUS,
+    weekStartsOn: lang === 'zhCN' ? 1 : 0,
+    month: month,
+    onMonthChange: handleMonthChange,
+    captionLayout: "dropdown",
+    "data-odn-date-picker": true,
+    "data-odn-date-picker-locale": lang,
+    disabled: [{
+      before: minDate,
+      after: maxDate
+    }, disabledDays || []],
+    startMonth: minDate,
+    endMonth: maxDate,
+    components: _objectSpread({
+      YearsDropdown: function YearsDropdown(_ref2) {
+        var value = _ref2.value,
+          _ref2$options = _ref2.options,
+          options = _ref2$options === void 0 ? [] : _ref2$options;
+        var optionsFiltered = options.filter(function (o) {
+          return !o.disabled;
+        }).map(function (o) {
+          return _objectSpread(_objectSpread({}, o), {}, {
+            label: o.value
+          });
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          "data-hover-fill-target": "year",
+          "data-odn-date-picker-caption-select": true,
+          "data-odn-date-picker-caption-select-year": true,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement("select", {
+          "data-odn-date-picker-caption-select-input": true,
+          name: "year",
+          onChange: handleSelectYearChange,
+          onClick: resetNavHoverFill,
+          "data-value": value,
+          value: value
+        }, optionsFiltered.map(function (o) {
+          return /*#__PURE__*/React.createElement("option", {
+            key: o.value,
+            value: o.value
+          }, o.label, lang === 'zhCN' ? '年' : '');
+        })), /*#__PURE__*/React.createElement("svg", {
+          "data-odn-date-picker-caption-icon": true,
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M12.3501 7.81235C12.6121 7.48497 12.379 7 11.9597 7H6.04034C5.62109 7 5.388 7.48497 5.6499 7.81235L8.60959 11.512C8.80975 11.7622 9.1903 11.7622 9.39046 11.512L12.3501 7.81235Z",
+          fillRule: "evenodd"
+        })));
+      },
+      MonthsDropdown: function MonthsDropdown(_ref3) {
+        var value = _ref3.value,
+          _ref3$options = _ref3.options,
+          options = _ref3$options === void 0 ? [] : _ref3$options;
+        var optionsFiltered = options.filter(function (o) {
+          return !o.disabled;
+        }).map(function (o) {
+          return _objectSpread(_objectSpread({}, o), {}, {
+            label: lang === 'zhCN' ? MONTHS[o.value].zhCN : MONTHS[o.value].enUS
+          });
+        });
+        return /*#__PURE__*/React.createElement("div", {
+          "data-hover-fill-target": "month",
+          "data-odn-date-picker-caption-select": true,
+          "data-odn-date-picker-caption-select-month": true,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement("select", {
+          "data-odn-date-picker-caption-select-input": true,
+          name: "month",
+          onChange: handleSelectMonthChange,
+          value: value,
+          "data-value": value,
+          onClick: resetNavHoverFill
+        }, optionsFiltered.map(function (o) {
+          return /*#__PURE__*/React.createElement("option", {
+            key: o.value,
+            value: o.value
+          }, o.label);
+        })), /*#__PURE__*/React.createElement("svg", {
+          "data-odn-date-picker-caption-icon": true,
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M12.3501 7.81235C12.6121 7.48497 12.379 7 11.9597 7H6.04034C5.62109 7 5.388 7.48497 5.6499 7.81235L8.60959 11.512C8.80975 11.7622 9.1903 11.7622 9.39046 11.512L12.3501 7.81235Z",
+          fillRule: "evenodd"
+        })));
+      },
+      Nav: function Nav(_ref4) {
+        var onPreviousClick = _ref4.onPreviousClick,
+          onNextClick = _ref4.onNextClick,
+          previousMonth = _ref4.previousMonth,
+          nextMonth = _ref4.nextMonth;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-odn-date-picker-caption-nav": true
+        }, /*#__PURE__*/React.createElement("button", {
+          "data-odn-date-picker-caption-nav-button": true,
+          "data-odn-date-picker-caption-nav-button-prev": true,
+          "data-odn-date-picker-caption-nav-button-disabled": !previousMonth,
+          "data-hover-fill-target": "prev",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            onPreviousClick === null || onPreviousClick === void 0 || onPreviousClick(e);
+          },
+          disabled: !previousMonth,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement(Icon, {
+          name: "left",
+          "data-odn-date-picker-caption-nav-icon": true
+        })), /*#__PURE__*/React.createElement("button", {
+          "data-odn-date-picker-caption-nav-button": true,
+          "data-odn-date-picker-caption-nav-button-next": true,
+          "data-odn-date-picker-caption-nav-button-disabled": !nextMonth,
+          "data-hover-fill-target": "next",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            onNextClick === null || onNextClick === void 0 || onNextClick(e);
+          },
+          disabled: !nextMonth,
+          onMouseEnter: handleCaptionHoverEnter,
+          onMouseLeave: handleCaptionHoverLeave
+        }, /*#__PURE__*/React.createElement(Icon, {
+          name: "right",
+          "data-odn-date-picker-caption-nav-icon": true
+        })));
+      },
+      DayButton: function DayButton(_ref5) {
+        var day = _ref5.day,
+          modifiers = _ref5.modifiers,
+          _onMouseEnter = _ref5.onMouseEnter,
+          _onMouseLeave = _ref5.onMouseLeave,
+          props = _objectWithoutProperties(_ref5, _excluded2);
+        var focus = modifiers.focus,
+          today = modifiers.today,
+          disabled = modifiers.disabled,
+          outside = modifiers.outside,
+          selected = modifiers.selected;
+        return /*#__PURE__*/React.createElement("button", _extends({
+          "data-odn-date-picker-day": true,
+          "data-odn-date-picker-day-disabled": disabled,
+          "data-odn-date-picker-day-today": today,
+          "data-odn-date-picker-day-selected": selected,
+          "data-odn-date-picker-day-focus": focus,
+          "data-odn-date-picker-day-outside": outside,
+          onMouseEnter: function onMouseEnter(e) {
+            _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
+            handleTdHoverEnter(e);
+          },
+          onMouseLeave: function onMouseLeave(e) {
+            _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+            handleTdHoverLeave(e);
+          }
+        }, props), day.date.getDate());
+      }
+    }, components)
+  }, otherProps)));
+};
+export default Calendar;

package/dist/calendar/style/index.css

@@ -0,0 +1,5 @@
+@layer components {
+  [data-odn-calendar-wrapper] {
+    position: relative;
+  }
+}

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

@@ -0,0 +1,2 @@
+import '../../style';
+import "./index.scss";

package/dist/calendar/style/index.js

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

package/dist/card/header.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export type CardHeaderSize = 'mini' | 'small' | 'medium' | 'large';
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * 卡片主标题（不填则整块标题区不展示 title/subTitle 行）
+     */
+    title?: React.ReactNode;
+    /**
+     * 卡片副标题
+     */
+    subTitle?: React.ReactNode;
+    /**
+     * 头部右侧区域（如操作按钮）
+     */
+    topContent?: React.ReactNode;
+    /**
+     * 标题区下方的额外内容
+     */
+    children?: React.ReactNode;
+    /**
+     * 标题区排版尺寸
+     */
+    size?: CardHeaderSize;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default CardHeader;

package/dist/card/header.js

@@ -0,0 +1,37 @@
+var _excluded = ["className", "title", "subTitle", "topContent", "children", "size"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import * as React from 'react';
+var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    topContent = _ref.topContent,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var showTitleRow = title != null && title !== '';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    "data-odn-card-header": true,
+    "data-odn-card-header-size": size,
+    className: clsx(className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-header-block": true
+  }, showTitleRow && /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-header-top": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-title": true
+  }, title), subTitle != null && subTitle !== '' && /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-subtitle": true
+  }, subTitle)), topContent != null && topContent !== '' && /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-top-content": true
+  }, topContent)), children != null && children !== '' && /*#__PURE__*/React.createElement("div", {
+    "data-odn-card-header-children": true
+  }, children));
+});
+CardHeader.displayName = 'Card.Header';
+export default CardHeader;

package/dist/card/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CardHeader from './header';
+import './style';
+export type CardElevation = 0 | 1 | 2 | 3 | 4;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 投影层级，数值越大阴影越强
+     */
+    elevation?: CardElevation;
+    /**
+     * 是否呈现可交互态（指针手型 + 悬停/按下时投影变化）
+     */
+    interactive?: boolean;
+}
+export type { CardHeaderProps, CardHeaderSize } from './header';
+/**
+ * 卡片用于承载一组相关联内容；布局通常由业务内容决定。
+ */
+declare const CardRoot: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+type CardComponent = typeof CardRoot & {
+    Header: typeof CardHeader;
+};
+declare const Card: CardComponent;
+export default Card;

package/dist/card/index.js

@@ -0,0 +1,31 @@
+var _excluded = ["className", "elevation", "interactive", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import * as React from 'react';
+import CardHeader from "./header";
+import "./style";
+/**
+ * 卡片用于承载一组相关联内容；布局通常由业务内容决定。
+ */
+var CardRoot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? false : _ref$interactive,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    "data-odn-card": true,
+    "data-odn-card-elevation": elevation,
+    "data-odn-card-interactive": interactive,
+    className: clsx(className)
+  }, props), children);
+});
+CardRoot.displayName = 'Card';
+var Card = CardRoot;
+Card.Header = CardHeader;
+export default Card;

package/dist/card/style/index.css

@@ -0,0 +1,141 @@
+html {
+  --odn-card-shadow-0: none;
+  --odn-card-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --odn-card-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);
+  --odn-card-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.1);
+  --odn-card-shadow-4: 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.12);
+  --odn-card-shadow-interactive-hover-from-0: var(--odn-card-shadow-2);
+  --odn-card-shadow-interactive-active-from-0: var(--odn-card-shadow-1);
+  --odn-card-shadow-interactive-hover-from-1: var(--odn-card-shadow-3);
+  --odn-card-shadow-interactive-active-from-1: var(--odn-card-shadow-1);
+  --odn-card-shadow-interactive-hover-from-2: var(--odn-card-shadow-3);
+  --odn-card-shadow-interactive-active-from-2: var(--odn-card-shadow-1);
+  --odn-card-shadow-interactive-hover-from-3: var(--odn-card-shadow-3);
+  --odn-card-shadow-interactive-active-from-3: var(--odn-card-shadow-1);
+  --odn-card-shadow-interactive-hover-from-4: var(--odn-card-shadow-3);
+  --odn-card-shadow-interactive-active-from-4: var(--odn-card-shadow-1);
+  --odn-card-radius: 6px;
+  --odn-card-bg: #fff;
+  --odn-card-transition:
+    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@layer components {
+  [data-odn-card] {
+    background-color: var(--odn-card-bg);
+    border-radius: var(--odn-card-radius);
+    overflow: hidden;
+  }
+  [data-odn-card][data-odn-card-elevation="0"] {
+    box-shadow: var(--odn-card-shadow-0);
+  }
+  [data-odn-card][data-odn-card-elevation="1"] {
+    box-shadow: var(--odn-card-shadow-1);
+  }
+  [data-odn-card][data-odn-card-elevation="2"] {
+    box-shadow: var(--odn-card-shadow-2);
+  }
+  [data-odn-card][data-odn-card-elevation="3"] {
+    box-shadow: var(--odn-card-shadow-3);
+  }
+  [data-odn-card][data-odn-card-elevation="4"] {
+    box-shadow: var(--odn-card-shadow-4);
+  }
+  [data-odn-card][data-odn-card-interactive=true] {
+    cursor: pointer;
+    transition: var(--odn-card-transition);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="0"]:hover {
+    box-shadow: var(--odn-card-shadow-interactive-hover-from-0);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="0"]:active {
+    box-shadow: var(--odn-card-shadow-interactive-active-from-0);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="1"]:hover {
+    box-shadow: var(--odn-card-shadow-interactive-hover-from-1);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="1"]:active {
+    box-shadow: var(--odn-card-shadow-interactive-active-from-1);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="2"]:hover {
+    box-shadow: var(--odn-card-shadow-interactive-hover-from-2);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="2"]:active {
+    box-shadow: var(--odn-card-shadow-interactive-active-from-2);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="3"]:hover {
+    box-shadow: var(--odn-card-shadow-interactive-hover-from-3);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="3"]:active {
+    box-shadow: var(--odn-card-shadow-interactive-active-from-3);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="4"]:hover {
+    box-shadow: var(--odn-card-shadow-interactive-hover-from-4);
+  }
+  [data-odn-card][data-odn-card-interactive=true][data-odn-card-elevation="4"]:active {
+    box-shadow: var(--odn-card-shadow-interactive-active-from-4);
+  }
+  [data-odn-card-header] {
+    padding: 16px 16px 16px 24px;
+  }
+  [data-odn-card-header-block] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  [data-odn-card-header-top] {
+    flex: 1;
+  }
+  [data-odn-card-title] {
+    color: var(--odn-color-black-12);
+    font-weight: 600;
+    font-size: var(--odn-card-title-font-size);
+    word-wrap: break-word;
+  }
+  [data-odn-card-subtitle] {
+    color: var(--odn-color-black-11);
+  }
+  [data-odn-card-top-content] {
+    flex-shrink: 0;
+  }
+  [data-odn-card-header][data-odn-card-header-size=large] {
+    --odn-card-title-font-size: 18px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=large] [data-odn-card-subtitle] {
+    margin-top: 8px;
+    font-size: 16px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=large] [data-odn-card-header-children] {
+    margin-top: 20px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=medium] {
+    --odn-card-title-font-size: 16px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=medium] [data-odn-card-subtitle] {
+    margin-top: 4px;
+    font-size: 14px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=medium] [data-odn-card-header-children] {
+    margin-top: 16px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=small] {
+    --odn-card-title-font-size: 14px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=small] [data-odn-card-subtitle] {
+    margin-top: 2px;
+    font-size: 13px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=small] [data-odn-card-header-children] {
+    margin-top: 12px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=mini] {
+    --odn-card-title-font-size: 13px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=mini] [data-odn-card-subtitle] {
+    margin-top: 2px;
+    font-size: 12px;
+  }
+  [data-odn-card-header][data-odn-card-header-size=mini] [data-odn-card-header-children] {
+    margin-top: 12px;
+  }
+}

package/dist/card/style/index.d.ts

@@ -0,0 +1 @@
+import './index.scss';

package/dist/card/style/index.js

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