@pisell/materials 1.8.20 → 1.8.21

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -28,10 +28,6 @@
     -webkit-user-select: none;
   }
 
-  &--vertical .pisell-time-navigator-viewport-wrap {
-    min-height: 0;
-  }
-
   .pisell-time-navigator-cursor-fixed {
     position: absolute;
     left: 0;
@@ -65,6 +61,26 @@
   }
 
   &--vertical {
+    /* flex 子项内竖向轴须 min-height:0 + overflow，否则轴随内容无限增高、无法内部滚动 */
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+
+    .pisell-time-navigator-viewport-wrap {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .pisell-time-navigator-scroll-host {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
     .pisell-time-navigator-axis {
       flex-direction: column;
     }
@@ -85,7 +101,7 @@
   flex-shrink: 0;
 }
 
-/* 横向：当前时间渐变块，固定 82px 宽，在时间轴背后 */
+/* 横向：当前时间渐变块，宽度由 TS 的 CURRENT_TIME_GRADIENT_WIDTH_H_PX 决定，在时间轴背后 */
 .pisell-time-navigator-current-gradient {
   position: absolute;
   z-index: 0;
@@ -94,7 +110,8 @@
   &--horizontal {
     background: linear-gradient(to right,
     rgba(255, 255, 255, 0),
-    rgba(255, 105, 46, 0.5));
+    rgba(217, 78, 12, 0.38),
+    rgba(194, 65, 12, 0.62));
   }
 }
 
@@ -112,6 +129,15 @@
   flex-shrink: 0;
 }
 
+.pisell-time-navigator-density-layer {
+  position: absolute;
+  left: 0;
+  top: 1px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
 /* 背景层（营业时间、过去时间淡化等；当前时间渐变已拆出为独立块） */
 .pisell-time-navigator-background {
   position: absolute;
@@ -258,7 +284,8 @@
   &--horizontal {
     top: 0;
     height: 48px;
-    width: 3px; /* 与竖线同宽，left 已按竖线中心算，不再用 translateX(-50%) */
+    /** 与 CursorLayer CURSOR_ANCHOR_WIDTH_H / SVG 宽一致 */
+    width: 22px;
   }
 
   /* Figma 竖向：横线 2px 贯穿轴宽，气泡在横线上方居中，不超出 54px 轴宽 */
@@ -270,22 +297,55 @@
     transform: translateX(-50%);
   }
 
-  &--realtime .pisell-time-navigator-cursor-line,
   &--realtime .pisell-time-navigator-cursor-bubble {
     background: #ff692e;
   }
+
+  &--realtime .pisell-time-navigator-cursor-line:not(
+      .pisell-time-navigator-cursor-line--token
+    ) {
+    background: rgba(255, 105, 46, 0.55);
+  }
+
+  &--realtime .pisell-time-navigator-cursor-line--token {
+    color: rgba(255, 105, 46, 0.55);
+  }
+
+  &--draggable {
+    pointer-events: auto;
+    touch-action: none;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &--draggable.pisell-time-navigator-cursor--horizontal {
+    width: 36px;
+  }
+
+  &--draggable.pisell-time-navigator-cursor--vertical {
+    height: 40px;
+  }
 }
 
 .pisell-time-navigator-cursor-line {
   flex: 1;
   min-width: 3px;
   min-height: 2px;
-  background: #344054;
+  background: rgba(52, 64, 84, 0.55);
 }
 
-.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-line {
-  width: 3px;
+/** 横向：顶三角 + 竖长条（SVG + currentColor） */
+.pisell-time-navigator-cursor-line--token {
+  display: block;
+  width: 22px;
+  flex: 1 1 auto;
+  min-width: 22px;
   min-height: 0;
+  background: transparent !important;
+  color: rgba(52, 64, 84, 0.55);
 }
 
 .pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-line {
@@ -294,6 +354,24 @@
   min-width: 0;
 }
 
+/* 真实「此刻」：与指针气泡同尺寸/行高，锚在轴内当前时刻，橙色底（与渐变/实时色一致） */
+.pisell-time-navigator-current-time-bubble {
+  position: absolute;
+  z-index: 1;
+  bottom: 2px;
+  left: 0;
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: 2px;
+  background: #ff692e;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .pisell-time-navigator-cursor-bubble {
   position: absolute;
   left: 50%;
@@ -304,13 +382,14 @@
   color: #fff;
   font-size: 12px;
   font-weight: 500;
-  line-height: 18px;
+  line-height: 12px;
   white-space: nowrap;
 }
 
-/* 横向：指针下方时间气泡的上边框对齐时间轴垂直中心 */
+/* 横向：时间气泡贴近轴带底边（48px 高区域底部） */
 .pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-bubble {
-  top: 50%;
+  top: auto;
+  bottom: 2px;
   margin-top: 0;
   padding: 2px 6px;
 }
@@ -324,7 +403,7 @@
   padding: 0 6px;
   border-radius: 4px;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 12px;
 }
 
 /* 交互层 */
@@ -335,6 +414,8 @@
 
   &--horizontal {
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   &--vertical {

package/lib/components/pisellTimeNavigator/components/CursorLayer.d.ts

@@ -11,10 +11,15 @@ export interface CursorLayerProps {
     fixedCenter?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    /** cursor-moves：允许拖指针改时间 */
+    dragInteractive?: boolean;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
 }
 /**
- * 时间指示器层：竖线/横线 + 时间气泡
- * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
- * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+ * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
+ * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
  */
-export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, }: CursorLayerProps): JSX.Element | null;
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): JSX.Element | null;

package/lib/components/pisellTimeNavigator/components/CursorLayer.js

@@ -34,7 +34,7 @@ __export(CursorLayer_exports, {
 module.exports = __toCommonJS(CursorLayer_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var CURSOR_LINE_WIDTH_H = 3;
+var CURSOR_ANCHOR_WIDTH_H = 22;
 var CURSOR_LINE_HEIGHT_V = 2;
 function CursorLayer({
   orientation,
@@ -45,12 +45,28 @@ function CursorLayer({
   offsetPx,
   fixedCenter,
   style,
-  className
+  className,
+  dragInteractive,
+  onDragPointerDown,
+  onDragPointerMove,
+  onDragPointerUp,
+  onDragPointerCancel
 }) {
   if (value == null) return null;
   const label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
   const isHorizontal = orientation === "horizontal";
-  const lineOffset = offsetPx - (isHorizontal ? CURSOR_LINE_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  const lineOffset = offsetPx - (isHorizontal ? CURSOR_ANCHOR_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  const positionStyle = fixedCenter ? style ?? {} : dragInteractive && isHorizontal ? {
+    ...style,
+    left: offsetPx,
+    transform: "translateX(-50%)",
+    width: 36
+  } : dragInteractive && !isHorizontal ? {
+    ...style,
+    top: offsetPx,
+    transform: "translateX(-50%) translateY(-50%)",
+    height: 40
+  } : { ...style, [isHorizontal ? "left" : "top"]: lineOffset };
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -59,12 +75,33 @@ function CursorLayer({
         `pisell-time-navigator-cursor--${orientation}`,
         { "pisell-time-navigator-cursor--realtime": isRealtime },
         { "pisell-time-navigator-cursor--fixed": fixedCenter },
+        { "pisell-time-navigator-cursor--draggable": dragInteractive },
         className
       ),
-      style: fixedCenter ? style : { ...style, [isHorizontal ? "left" : "top"]: lineOffset },
-      "aria-hidden": true
+      style: positionStyle,
+      "aria-hidden": true,
+      onPointerDown: dragInteractive ? onDragPointerDown : void 0,
+      onPointerMove: dragInteractive ? onDragPointerMove : void 0,
+      onPointerUp: dragInteractive ? onDragPointerUp : void 0,
+      onPointerCancel: dragInteractive ? onDragPointerCancel : void 0
     },
-    /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-cursor-line" }),
+    isHorizontal ? /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        className: "pisell-time-navigator-cursor-line pisell-time-navigator-cursor-line--token",
+        viewBox: "0 0 22 100",
+        preserveAspectRatio: "none",
+        focusable: "false",
+        "aria-hidden": true
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M 11 0 L 18 11 L 18 100 L 4 100 L 4 11 Z"
+        }
+      )
+    ) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-cursor-line" }),
     /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-cursor-bubble" }, label)
   );
 }

package/lib/components/pisellTimeNavigator/components/GestureLayer.d.ts

@@ -23,9 +23,11 @@ export interface GestureLayerProps {
     onPointerMove?: React.PointerEventHandler;
     onPointerUp?: React.PointerEventHandler;
     onPointerLeave?: React.PointerEventHandler;
+    /** 轴上任意指针按下（含惯性拖轴） */
+    onUserInteraction?: () => void;
     children: React.ReactNode;
 }
 /**
  * 交互层：点击刻度跳转、键盘左右/上下 + 回车
  */
-export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, children, }: GestureLayerProps): JSX.Element;
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): JSX.Element;

package/lib/components/pisellTimeNavigator/components/GestureLayer.js

@@ -49,11 +49,13 @@ function GestureLayer({
   onPointerMove,
   onPointerUp,
   onPointerLeave,
+  onUserInteraction,
   children
 }) {
   const isHorizontal = orientation === "horizontal";
   const handleClick = (0, import_react.useCallback)(
     (e) => {
+      onUserInteraction == null ? void 0 : onUserInteraction();
       const viewport = e.currentTarget.parentElement;
       if (!viewport) return;
       const vRect = viewport.getBoundingClientRect();
@@ -73,7 +75,8 @@ function GestureLayer({
       onSelectTime,
       isInDisabledRanges,
       snapToStep,
-      snapFn
+      snapFn,
+      onUserInteraction
     ]
   );
   const handleKeyDown = (0, import_react.useCallback)(
@@ -84,7 +87,10 @@ function GestureLayer({
       if (currentTime == null) return;
       if (e.key === "Enter") {
         const candidate = snapToStep ? snapFn(currentTime) : currentTime;
-        if (!isInDisabledRanges(candidate)) onSelectTime(candidate);
+        if (!isInDisabledRanges(candidate)) {
+          onUserInteraction == null ? void 0 : onUserInteraction();
+          onSelectTime(candidate);
+        }
         e.preventDefault();
         return;
       }
@@ -101,7 +107,10 @@ function GestureLayer({
       }
       e.preventDefault();
       const snapped = snapToStep ? snapFn(next) : next;
-      if (!isInDisabledRanges(snapped)) onSelectTime(snapped);
+      if (!isInDisabledRanges(snapped)) {
+        onUserInteraction == null ? void 0 : onUserInteraction();
+        onSelectTime(snapped);
+      }
     },
     [
       orientation,
@@ -115,17 +124,19 @@ function GestureLayer({
       scrollPosition.scrollLeft,
       scrollPosition.scrollTop,
       viewportSize.w,
-      viewportSize.h
+      viewportSize.h,
+      onUserInteraction
     ]
   );
   const handlePointerDown = (0, import_react.useCallback)(
     (e) => {
+      onUserInteraction == null ? void 0 : onUserInteraction();
       if (onPointerDown) {
         e.currentTarget.setPointerCapture(e.pointerId);
         onPointerDown(e);
       }
     },
-    [onPointerDown]
+    [onPointerDown, onUserInteraction]
   );
   const handlePointerUp = (0, import_react.useCallback)(
     (e) => {

package/lib/components/pisellTimeNavigator/components/ScaleLayer.d.ts

@@ -9,9 +9,14 @@ export interface ScaleLayerProps {
     locale?: string;
     style?: React.CSSProperties;
     className?: string;
+    /**
+     * 横向每格宽度（px），须与 useTimeAxis 的 cellSizePx 一致；
+     * 不传时样式表默认 82（axis-moves）；cursor-moves 压缩比例时必传
+     */
+    horizontalCellSizePx?: number;
 }
 /**
  * 刻度层：渲染时间刻度与标签
  * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
  */
-export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, }: ScaleLayerProps): JSX.Element;
+export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx, }: ScaleLayerProps): JSX.Element;

package/lib/components/pisellTimeNavigator/components/ScaleLayer.js

@@ -42,7 +42,8 @@ function ScaleLayer({
   timeFormat,
   locale,
   style,
-  className
+  className,
+  horizontalCellSizePx
 }) {
   const isHorizontal = orientation === "horizontal";
   return /* @__PURE__ */ import_react.default.createElement(
@@ -59,6 +60,8 @@ function ScaleLayer({
       const isMajor = tick.minute() % majorStepMinutes === 0;
       const label = isHorizontal && isMajor ? locale ? tick.locale(locale).format("H") : tick.format("H") : locale ? tick.locale(locale).format(timeFormat) : tick.format(timeFormat);
       if (isHorizontal) {
+        const cw = horizontalCellSizePx != null && horizontalCellSizePx > 0 ? horizontalCellSizePx : void 0;
+        const compactPad = cw != null ? cw < 36 ? 2 : cw < 52 ? 6 : 10 : void 0;
         return /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
@@ -67,9 +70,27 @@ function ScaleLayer({
               "pisell-time-navigator-scale-cell",
               "pisell-time-navigator-scale-cell--h",
               { "pisell-time-navigator-scale-cell--major": isMajor }
-            )
+            ),
+            style: cw != null ? {
+              width: cw,
+              minWidth: cw,
+              maxWidth: cw,
+              flex: "0 0 auto",
+              boxSizing: "border-box",
+              ...compactPad != null ? { padding: compactPad } : {}
+            } : void 0
           },
-          isMajor && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-scale-label" }, label),
+          isMajor && /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: "pisell-time-navigator-scale-label",
+              style: cw != null && cw < 48 ? {
+                fontSize: Math.max(10, Math.round(cw * 0.32)),
+                lineHeight: 1.15
+              } : void 0
+            },
+            label
+          ),
           !isMajor && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-scale-dot", "aria-hidden": true })
         );
       }

package/lib/components/pisellTimeNavigator/types.d.ts

@@ -142,4 +142,19 @@ export interface PisellTimeNavigatorProps {
      * 自定义 Now 按钮内容（覆盖默认文案与图标时使用）
      */
     renderNowButton?: () => ReactNode;
+    /**
+     * 横向轴上与刻度槽位数一致的密度序列（任意正数，内部按最大值归一化折线高度）
+     */
+    densitySeries?: number[];
+    /**
+     * 未传 `densitySeries` 时按 `referenceDate` 拉取；日历日变更会重新请求，过期响应丢弃
+     */
+    loadDensity?: (params: {
+        referenceDate: Dayjs;
+        stepMinutes: number;
+    }) => Promise<number[]>;
+    /**
+     * 用户开始操作时间轴（拖轴、点刻度、键盘、拖指针等）时回调；用于上层关闭「跟随当前」等。
+     */
+    onUserInteraction?: () => void;
 }

package/lib/components/pisellTimeNavigator/utils/index.d.ts

@@ -24,3 +24,7 @@ export declare function isInDisabledRanges(t: Dayjs, disabledRanges: TimeRangeOp
  * 在 [rangeStart, rangeEnd] 内按 stepMinutes 生成刻度时间列表（Dayjs）
  */
 export declare function getTicks(rangeStart: Dayjs, rangeEnd: Dayjs, stepMinutes: number): Dayjs[];
+/**
+ * 横向时间轴「格」数量，与 useTimeAxis 中 totalLengthPx 算法一致（含尾格）
+ */
+export declare function getHorizontalAxisSlotCount(range: TimeRangeOption | undefined, referenceDate: Dayjs, stepMinutes: number): number;

package/lib/components/pisellTimeNavigator/utils/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellTimeNavigator/utils/index.ts
 var utils_exports = {};
 __export(utils_exports, {
+  getHorizontalAxisSlotCount: () => getHorizontalAxisSlotCount,
   getRangeBounds: () => getRangeBounds,
   getTicks: () => getTicks,
   isInDisabledRanges: () => isInDisabledRanges,
@@ -88,8 +89,16 @@ function getTicks(rangeStart, rangeEnd, stepMinutes) {
   }
   return out;
 }
+function getHorizontalAxisSlotCount(range, referenceDate, stepMinutes) {
+  const [rangeStart, rangeEnd] = getRangeBounds(range, referenceDate);
+  const ticks = getTicks(rangeStart, rangeEnd, stepMinutes);
+  const lastTick = ticks.length > 0 ? ticks[ticks.length - 1] : null;
+  const needTailCell = lastTick != null && rangeEnd.isAfter(lastTick);
+  return ticks.length + (needTailCell ? 1 : 0);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getHorizontalAxisSlotCount,
   getRangeBounds,
   getTicks,
   isInDisabledRanges,

package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+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 declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;

package/lib/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/lib/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/lib/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/lib/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;