@pisell/materials 1.8.7 → 1.8.9

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js

@@ -0,0 +1,197 @@
+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, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import { parseTimeRange, getDayjsLocale, getRelativeDay } from "./utils";
+import { TimeRangeBlock, DateBlock, WeekdayBlock, DurationBlock } from "./components";
+import "./PisellTimeRangeDisplay.less";
+
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export var PisellTimeRangeDisplay = function PisellTimeRangeDisplay(props) {
+  var _durationFormat$showS;
+  var startAt = props.startAt,
+    endAt = props.endAt,
+    _props$textAlign = props.textAlign,
+    textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
+    fields = props.fields,
+    _props$showDateForSam = props.showDateForSameDay,
+    showDateForSameDay = _props$showDateForSam === void 0 ? true : _props$showDateForSam,
+    timeFormat = props.timeFormat,
+    dateFormat = props.dateFormat,
+    weekdayFormat = props.weekdayFormat,
+    durationFormat = props.durationFormat,
+    containerStyle = props.containerStyle,
+    timeStyle = props.timeStyle,
+    dateStyle = props.dateStyle,
+    weekdayStyle = props.weekdayStyle,
+    durationStyle = props.durationStyle,
+    localeProp = props.locale,
+    className = props.className,
+    style = props.style,
+    onClick = props.onClick;
+  var effectiveLocale = useMemo(function () {
+    return localeProp !== null && localeProp !== void 0 ? localeProp : getDayjsLocale();
+  }, [localeProp]);
+  var _useMemo = useMemo(function () {
+      return parseTimeRange(startAt, endAt, effectiveLocale);
+    }, [startAt, endAt, effectiveLocale]),
+    start = _useMemo.start,
+    end = _useMemo.end,
+    isSameDay = _useMemo.isSameDay;
+  var durationMs = useMemo(function () {
+    return end.diff(start);
+  }, [start, end]);
+
+  // 换行顺序（右先换）：先持续时间 → 结束时间（跨天）→ 开始/结束的时间与日期 → 星期；故左到右为 星期, 日期, 时间, 持续时间
+  var _ref = fields || {},
+    _ref$showTimeRange = _ref.showTimeRange,
+    showTimeRange = _ref$showTimeRange === void 0 ? true : _ref$showTimeRange,
+    _ref$showDate = _ref.showDate,
+    showDate = _ref$showDate === void 0 ? true : _ref$showDate,
+    _ref$showWeekday = _ref.showWeekday,
+    showWeekday = _ref$showWeekday === void 0 ? true : _ref$showWeekday,
+    _ref$showDuration = _ref.showDuration,
+    showDuration = _ref$showDuration === void 0 ? true : _ref$showDuration,
+    _ref$fieldOrder = _ref.fieldOrder,
+    fieldOrder = _ref$fieldOrder === void 0 ? ['weekday', 'date', 'time', 'duration'] : _ref$fieldOrder;
+  var showSeconds = (_durationFormat$showS = durationFormat === null || durationFormat === void 0 ? void 0 : durationFormat.showSeconds) !== null && _durationFormat$showS !== void 0 ? _durationFormat$showS : false;
+
+  // 使用 datetime 展示时默认开启「今天/昨天/明天」相对日
+  var effectiveDateFormat = useMemo(function () {
+    return _objectSpread({
+      showRelativeDay: true
+    }, dateFormat);
+  }, [dateFormat]);
+
+  // 与 DateTimeDisplay 一致：日期与星期一体，若日期以相对日展示则不展示星期
+  var referenceDate = dayjs();
+  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(start, referenceDate) : null;
+  var hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+
+  // 换行后每行对齐方式与 textAlign 一致（Figma：换行后每行居中）
+  var justifyContent = textAlign === 'right' ? 'flex-end' : textAlign === 'left' ? 'flex-start' : 'center';
+  var containerInlineStyle = _objectSpread({
+    background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
+    borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
+    border: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.border,
+    boxShadow: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow,
+    padding: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.padding,
+    gap: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.gap,
+    textAlign: textAlign,
+    justifyContent: justifyContent
+  }, style);
+  var renderField = function renderField(fieldType) {
+    switch (fieldType) {
+      case 'time':
+        return showTimeRange ? /*#__PURE__*/React.createElement(TimeRangeBlock, {
+          key: "time",
+          start: start,
+          end: end,
+          isSameDay: isSameDay,
+          timeFormat: timeFormat,
+          dateFormat: effectiveDateFormat,
+          weekdayFormat: weekdayFormat,
+          referenceDate: dayjs(),
+          style: timeStyle
+        }) : null;
+      case 'date':
+        if (!showDate) return null;
+        if (!isSameDay) return null; // 跨天时时间块已含起止日期，不再单独展示
+        if (!showDateForSameDay) return null;
+        return /*#__PURE__*/React.createElement(DateBlock, {
+          key: "date",
+          date: start,
+          format: effectiveDateFormat,
+          referenceDate: dayjs(),
+          style: dateStyle
+        });
+      case 'weekday':
+        if (!showWeekday) return null;
+        if (!isSameDay) return null; // 跨天时时间块已含起止星期，不再单独展示
+        if (!showDateForSameDay) return null;
+        if (hideWeekdayWhenDateRelative) return null;
+        return /*#__PURE__*/React.createElement(WeekdayBlock, {
+          key: "weekday",
+          weekday: start,
+          format: weekdayFormat,
+          style: weekdayStyle
+        });
+      case 'duration':
+        return showDuration ? /*#__PURE__*/React.createElement(DurationBlock, {
+          key: "duration",
+          durationMs: durationMs,
+          showSeconds: showSeconds,
+          locale: effectiveLocale,
+          style: durationStyle
+        }) : null;
+      default:
+        return null;
+    }
+  };
+  var items = [];
+  fieldOrder.forEach(function (fieldType) {
+    var node = renderField(fieldType);
+    if (node != null) {
+      items.push({
+        type: fieldType,
+        node: node
+      });
+    }
+  });
+  if (items.length === 0) {
+    return null;
+  }
+
+  // 时间/日期与持续时长之间用居中圆点 · 分隔
+  var renderedWithSeparator = items.flatMap(function (_ref2, index) {
+    var type = _ref2.type,
+      node = _ref2.node;
+    var needDotBefore = type === 'duration' && index > 0;
+    var needDotAfter = type === 'duration' && index < items.length - 1;
+    var sep = /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-range-display-sep",
+      "aria-hidden": true
+    }, " \xB7 ");
+    var el = /*#__PURE__*/React.cloneElement(node, {
+      key: type
+    });
+    if (needDotBefore) return [sep, el];
+    if (needDotAfter) return [el, sep];
+    return [el];
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-range-display ".concat(className || '').trim(),
+    style: containerInlineStyle,
+    onClick: onClick
+  }, renderedWithSeparator);
+};
+export default /*#__PURE__*/React.memo(PisellTimeRangeDisplay);

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.less

@@ -0,0 +1,49 @@
+/**
+ * Time Range Display 样式
+ * 无 layout 配置：一行放不下时按块换行，块内不换行，换行后每行居中
+ */
+.pisell-time-range-display {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0 4px;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.88);
+
+  .pisell-time-range-display-time,
+  .pisell-time-range-display-date,
+  .pisell-time-range-display-weekday,
+  .pisell-time-range-display-duration {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .pisell-time-range-display-sep {
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0 2px;
+    user-select: none;
+  }
+
+  // 各块内不换行，换行时以块为单位
+  &-time,
+  &-date,
+  &-weekday,
+  &-duration {
+    //display: inline-block;
+    //white-space: nowrap;
+  }
+
+  &-sep {
+    //display: inline-block;
+    //white-space: nowrap;
+  }
+
+  // 同天小宽度：「 - 结束时间」不拆开
+  &-time-end-wrap {
+    //white-space: nowrap;
+  }
+}

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeRangeDisplay } from './PisellTimeRangeDisplay';
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+declare const meta: Meta<typeof PisellTimeRangeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeRangeDisplay>;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export declare const Default: Story;
+/**
+ * 同一天 + 显示日期与星期
+ */
+export declare const SameDayWithDate: Story;
+/**
+ * 跨天时间区间
+ */
+export declare const CrossDay: Story;
+/**
+ * 跨年
+ */
+export declare const CrossYear: Story;
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export declare const DurationInMiddle: Story;
+/**
+ * 持续时长在前
+ */
+export declare const DurationFirst: Story;
+/**
+ * 持续时长显示秒
+ */
+export declare const DurationWithSeconds: Story;
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export declare const TimeAndDurationOnly: Story;
+/**
+ * 12 小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export declare const LocaleZhCN: Story;
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export declare const LocaleEn: Story;
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export declare const NarrowWidth: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.js

@@ -0,0 +1,209 @@
+import { PisellTimeRangeDisplay } from "./PisellTimeRangeDisplay";
+
+/**
+ * PisellTimeRangeDisplay 组件 Storybook
+ * 用于时间区间 + 持续时长的展示（同一天 / 跨天）
+ */
+var meta = {
+  title: 'General/PisellTimeRangeDisplay',
+  component: PisellTimeRangeDisplay,
+  tags: ['autodocs'],
+  argTypes: {
+    textAlign: {
+      control: 'radio',
+      options: ['left', 'center', 'right'],
+      description: '文本对齐'
+    },
+    showDateForSameDay: {
+      control: 'boolean',
+      description: '同一天时是否显示日期与星期'
+    },
+    locale: {
+      control: 'select',
+      options: ['zh-cn', 'en'],
+      description: '语言'
+    }
+  }
+};
+export default meta;
+/**
+ * 默认：同一天时间区间 + 持续时长
+ */
+export var Default = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00'
+  }
+};
+
+/**
+ * 同一天 + 显示日期与星期
+ */
+export var SameDayWithDate = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true
+  }
+};
+
+/**
+ * 跨天时间区间
+ */
+export var CrossDay = {
+  args: {
+    startAt: '2026-02-04 18:00',
+    endAt: '2026-02-05 10:00'
+  }
+};
+
+/**
+ * 跨年
+ */
+export var CrossYear = {
+  args: {
+    startAt: '2025-12-31 22:00',
+    endAt: '2026-01-01 02:00'
+  }
+};
+
+/**
+ * 持续时间在中间（默认 fieldOrder）
+ */
+export var DurationInMiddle = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    fields: {
+      fieldOrder: ['time', 'duration', 'date', 'weekday']
+    }
+  }
+};
+
+/**
+ * 持续时长在前
+ */
+export var DurationFirst = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    fields: {
+      fieldOrder: ['duration', 'time']
+    }
+  }
+};
+
+/**
+ * 持续时长显示秒
+ */
+export var DurationWithSeconds = {
+  args: {
+    startAt: '2026-02-04 09:00:00',
+    endAt: '2026-02-04 09:30:45',
+    durationFormat: {
+      showSeconds: true
+    }
+  }
+};
+
+/**
+ * 仅时间区间 + 持续时长（不显示日期星期）
+ */
+export var TimeAndDurationOnly = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    fields: {
+      showTimeRange: true,
+      showDate: false,
+      showWeekday: false,
+      showDuration: true
+    }
+  }
+};
+
+/**
+ * 12 小时制
+ */
+export var Time12Hour = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    timeFormat: {
+      use12Hour: true
+    }
+  }
+};
+
+/**
+ * 中文（日期 + 持续时长「天/时/分/秒」i18n）
+ */
+export var LocaleZhCN = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    locale: 'zh-cn',
+    dateFormat: {
+      showChineseUnit: true,
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 英文（日期 + 持续时长 d/h/m/s）
+ */
+export var LocaleEn = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    showDateForSameDay: true,
+    locale: 'en',
+    dateFormat: {
+      order: 'MDY',
+      showYear: true
+    }
+  }
+};
+
+/**
+ * 小宽度：容器较窄时按块换行
+ */
+export var NarrowWidth = {
+  args: {
+    startAt: '2026-03-21 10:15',
+    endAt: '2026-03-21 10:45',
+    showDateForSameDay: true,
+    dateFormat: {
+      order: 'MDY',
+      showYear: true
+    }
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 320,
+        border: '1px dashed #ccc',
+        padding: 8
+      }
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+
+/**
+ * 自定义容器样式
+ */
+export var CustomContainerStyle = {
+  args: {
+    startAt: '2026-02-04 09:00',
+    endAt: '2026-02-04 18:00',
+    containerStyle: {
+      background: '#f5f5f5',
+      borderRadius: 8,
+      padding: 16,
+      gap: 8
+    }
+  }
+};

package/es/components/pisellTimeRangeDisplay/components/DateBlock.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { DateFormatConfig, TextStyleConfig } from '../types';
+export interface DateBlockProps {
+    /** 日期对象 */
+    date: Dayjs;
+    /** 日期格式配置（含 showRelativeDay：今天/昨天/明天） */
+    format?: DateFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 日期展示块（复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑）
+ */
+export declare const DateBlock: React.FC<DateBlockProps>;
+export default DateBlock;

package/es/components/pisellTimeRangeDisplay/components/DateBlock.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { formatDate, getRelativeDay, getRelativeDayLabel } from "../utils";
+/**
+ * 日期展示块（复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑）
+ */
+export var DateBlock = function DateBlock(_ref) {
+  var _labels$relativeDay;
+  var date = _ref.date,
+    format = _ref.format,
+    _ref$referenceDate = _ref.referenceDate,
+    referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
+    style = _ref.style,
+    className = _ref.className;
+  var labels = format === null || format === void 0 ? void 0 : format.relativeDayLabels;
+  var relativeDay = format !== null && format !== void 0 && format.showRelativeDay ? getRelativeDay(date, referenceDate) : null;
+  var formattedDate = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, date.locale()) : formatDate(date, format);
+  if (!formattedDate) return null;
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-date ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedDate);
+};
+export default DateBlock;

package/es/components/pisellTimeRangeDisplay/components/DurationBlock.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { TextStyleConfig } from '../types';
+export interface DurationBlockProps {
+    /** 持续时间（毫秒） */
+    durationMs: number;
+    /** 是否显示秒 */
+    showSeconds?: boolean;
+    /** 语言代码，zh 时使用「天/时/分/秒」 */
+    locale?: string;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 持续时长展示块（d h m s 或 天/时/分/秒，按 locale i18n）
+ */
+export declare const DurationBlock: React.FC<DurationBlockProps>;
+export default DurationBlock;

package/es/components/pisellTimeRangeDisplay/components/DurationBlock.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { formatDuration } from "../utils";
+/**
+ * 持续时长展示块（d h m s 或 天/时/分/秒，按 locale i18n）
+ */
+export var DurationBlock = function DurationBlock(_ref) {
+  var durationMs = _ref.durationMs,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
+    locale = _ref.locale,
+    style = _ref.style,
+    className = _ref.className;
+  var formatted = formatDuration(durationMs, showSeconds, locale);
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-range-display-duration ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formatted);
+};
+export default DurationBlock;

package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, TextStyleConfig } from '../types';
+export interface TimeRangeBlockProps {
+    /** 开始时间 */
+    start: Dayjs;
+    /** 结束时间 */
+    end: Dayjs;
+    /** 是否同一天 */
+    isSameDay: boolean;
+    /** 时间格式配置 */
+    timeFormat?: TimeFormatConfig;
+    /** 日期格式配置（跨天时用于起止日期，含 showRelativeDay） */
+    dateFormat?: DateFormatConfig;
+    /** 星期格式配置（跨天时用于「Sat, 22 Jan」） */
+    weekdayFormat?: WeekdayFormatConfig;
+    /** 参考日期，用于相对日判定，默认 dayjs() */
+    referenceDate?: Dayjs;
+    /** 文本样式 */
+    style?: TextStyleConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 时间区间展示块
+ * - 同一天：HH:mm-HH:mm
+ * - 跨天：起止完整日期时间；若某端为相对日（今天/昨天/明天）则只显示「时间 相对日」，不显示星期+日期
+ */
+export declare const TimeRangeBlock: React.FC<TimeRangeBlockProps>;
+export default TimeRangeBlock;