@pisell/materials 1.8.18 → 1.8.20

package/es/components/pisellTimeNavigator/PisellTimeNavigator.stories.js

@@ -0,0 +1,290 @@
+import React from 'react';
+import { PisellTimeNavigator } from "./PisellTimeNavigator";
+
+/**
+ * PisellTimeNavigator 组件 Storybook
+ * 时间导航轴：时间范围内浏览、选择、控制
+ */
+var meta = {
+  title: 'Data Entry/PisellTimeNavigator',
+  component: PisellTimeNavigator,
+  tags: ['autodocs'],
+  argTypes: {
+    cursorMode: {
+      control: 'radio',
+      options: ['axis-moves', 'cursor-moves'],
+      description: '指示器/轴移动模式'
+    },
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+      description: '横向/竖向'
+    },
+    realtime: {
+      control: 'boolean',
+      description: '是否实时跟随系统时间'
+    },
+    showNowButton: {
+      control: 'boolean',
+      description: '是否显示 Now 按钮'
+    },
+    snapToStep: {
+      control: 'boolean',
+      description: '是否吸附到刻度'
+    },
+    inertia: {
+      control: 'boolean',
+      description: '是否开启惯性滚动'
+    },
+    locale: {
+      control: 'select',
+      options: ['zh-cn', 'en', 'zh-hk'],
+      description: '语言'
+    }
+  }
+};
+export default meta;
+var verticalDecorator = function verticalDecorator(Story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 54,
+      height: 500
+    }
+  }, /*#__PURE__*/React.createElement(Story, null));
+};
+
+/**
+ * 默认：横向、轴动、显示 Now
+ */
+export var Default = {
+  args: {}
+};
+
+/** 默认 - 竖向 */
+export var DefaultVertical = {
+  args: {
+    orientation: 'vertical'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 受控 + 默认 12:00
+ */
+export var Controlled = {
+  args: {
+    value: '12:00',
+    onChange: function onChange(v) {
+      return console.log('onChange', v === null || v === void 0 ? void 0 : v.format('HH:mm'));
+    }
+  }
+};
+
+/** 受控 - 竖向 */
+export var ControlledVertical = {
+  args: {
+    orientation: 'vertical',
+    value: '12:00',
+    onChange: function onChange(v) {
+      return console.log('onChange', v === null || v === void 0 ? void 0 : v.format('HH:mm'));
+    }
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 非受控 + 默认 14:30
+ */
+export var Uncontrolled = {
+  args: {
+    defaultValue: '14:30'
+  }
+};
+
+/** 非受控 - 竖向 */
+export var UncontrolledVertical = {
+  args: {
+    orientation: 'vertical',
+    defaultValue: '14:30'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 竖向
+ */
+export var Vertical = {
+  args: {
+    orientation: 'vertical',
+    defaultValue: '12:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 指针动模式（cursor-moves）
+ */
+export var CursorMoves = {
+  args: {
+    cursorMode: 'cursor-moves',
+    defaultValue: '10:00'
+  }
+};
+
+/** 指针动模式 - 竖向 */
+export var CursorMovesVertical = {
+  args: {
+    orientation: 'vertical',
+    cursorMode: 'cursor-moves',
+    defaultValue: '10:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 营业时间高亮 10:00–22:00
+ */
+export var BusinessHours = {
+  args: {
+    businessHours: {
+      start: '10:00',
+      end: '22:00'
+    },
+    defaultValue: '14:00'
+  }
+};
+
+/** 营业时间高亮 - 竖向 */
+export var BusinessHoursVertical = {
+  args: {
+    orientation: 'vertical',
+    businessHours: {
+      start: '10:00',
+      end: '22:00'
+    },
+    defaultValue: '14:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 自定义时间范围 08:00–20:00
+ */
+export var CustomRange = {
+  args: {
+    range: {
+      start: '08:00',
+      end: '20:00'
+    },
+    defaultValue: '12:00'
+  }
+};
+
+/** 自定义时间范围 - 竖向 */
+export var CustomRangeVertical = {
+  args: {
+    orientation: 'vertical',
+    range: {
+      start: '08:00',
+      end: '20:00'
+    },
+    defaultValue: '12:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 步长 30 分钟
+ */
+export var Step30 = {
+  args: {
+    stepMinutes: 30,
+    defaultValue: '12:30'
+  }
+};
+
+/** 步长 30 分钟 - 竖向 */
+export var Step30Vertical = {
+  args: {
+    orientation: 'vertical',
+    stepMinutes: 30,
+    defaultValue: '12:30'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 惯性滚动开启
+ */
+export var Inertia = {
+  args: {
+    inertia: true,
+    defaultValue: '12:00'
+  }
+};
+
+/** 惯性滚动 - 竖向 */
+export var InertiaVertical = {
+  args: {
+    orientation: 'vertical',
+    inertia: true,
+    defaultValue: '12:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 吸附到整点（松手后自动吸附到 0/15/30/45 分刻度）
+ */
+export var SnapToStep = {
+  args: {
+    snapToStep: true,
+    defaultValue: '12:00'
+  }
+};
+
+/** 吸附到整点 - 竖向 */
+export var SnapToStepVertical = {
+  args: {
+    orientation: 'vertical',
+    snapToStep: true,
+    defaultValue: '12:00'
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 隐藏 Now 按钮
+ */
+export var NoNowButton = {
+  args: {
+    showNowButton: false
+  }
+};
+
+/** 隐藏 Now 按钮 - 竖向 */
+export var NoNowButtonVertical = {
+  args: {
+    orientation: 'vertical',
+    showNowButton: false
+  },
+  decorators: [verticalDecorator]
+};
+
+/**
+ * 实时模式（仅演示，实际会跟随系统时间）
+ */
+export var Realtime = {
+  args: {
+    realtime: true
+  }
+};
+
+/** 实时模式 - 竖向 */
+export var RealtimeVertical = {
+  args: {
+    orientation: 'vertical',
+    realtime: true
+  },
+  decorators: [verticalDecorator]
+};

package/es/components/pisellTimeNavigator/components/BackgroundLayer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface BackgroundLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    /** 过去时间淡化色 */
+    pastTimeFade?: string;
+    /** 营业时间区间 [startPx, endPx]，用于视觉高亮 */
+    businessHoursPx?: [number, number];
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 背景区间层：营业时间高亮、过去时间淡化等（当前时间渐变已拆为独立块，见 axis-wrap 内 .pisell-time-navigator-current-gradient）
+ */
+export declare function BackgroundLayer({ orientation, pastTimeFade, businessHoursPx, className, style, }: BackgroundLayerProps): JSX.Element;

package/es/components/pisellTimeNavigator/components/BackgroundLayer.js

@@ -0,0 +1,30 @@
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import classNames from 'classnames';
+/**
+ * 背景区间层：营业时间高亮、过去时间淡化等（当前时间渐变已拆为独立块，见 axis-wrap 内 .pisell-time-navigator-current-gradient）
+ */
+export function BackgroundLayer(_ref) {
+  var orientation = _ref.orientation,
+    pastTimeFade = _ref.pastTimeFade,
+    businessHoursPx = _ref.businessHoursPx,
+    className = _ref.className,
+    style = _ref.style;
+  var isHorizontal = orientation === 'horizontal';
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-time-navigator-background', "pisell-time-navigator-background--".concat(orientation), className),
+    style: style,
+    "aria-hidden": true
+  }, businessHoursPx != null && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-navigator-background-business",
+    style: _defineProperty(_defineProperty({}, isHorizontal ? 'left' : 'top', businessHoursPx[0]), isHorizontal ? 'width' : 'height', Math.max(0, businessHoursPx[1] - businessHoursPx[0]))
+  }), pastTimeFade && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-navigator-background-past",
+    style: {
+      background: pastTimeFade
+    }
+  }));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface CursorLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    value: Dayjs | null;
+    timeFormat: string;
+    locale?: string;
+    isRealtime: boolean;
+    offsetPx: number;
+    /** axis-moves 时固定于视口中央，不应用 offsetPx */
+    fixedCenter?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * 时间指示器层：竖线/横线 + 时间气泡
+ * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
+ * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+ */
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, }: CursorLayerProps): JSX.Element | null;

package/es/components/pisellTimeNavigator/components/CursorLayer.js

@@ -0,0 +1,46 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import classNames from 'classnames';
+/** 横向竖线宽度、竖向横线高度，用于以「线」为锚点定位，而非整块中心 */
+var CURSOR_LINE_WIDTH_H = 3;
+var CURSOR_LINE_HEIGHT_V = 2;
+
+/**
+ * 时间指示器层：竖线/横线 + 时间气泡
+ * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
+ * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+ */
+export function CursorLayer(_ref) {
+  var orientation = _ref.orientation,
+    value = _ref.value,
+    timeFormat = _ref.timeFormat,
+    locale = _ref.locale,
+    isRealtime = _ref.isRealtime,
+    offsetPx = _ref.offsetPx,
+    fixedCenter = _ref.fixedCenter,
+    style = _ref.style,
+    className = _ref.className;
+  if (value == null) return null;
+  var label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
+  var isHorizontal = orientation === 'horizontal';
+  /** 以竖线/横线中心为 offsetPx，故定位到 offsetPx - 线宽/2 */
+  var lineOffset = offsetPx - (isHorizontal ? CURSOR_LINE_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-time-navigator-cursor', "pisell-time-navigator-cursor--".concat(orientation), {
+      'pisell-time-navigator-cursor--realtime': isRealtime
+    }, {
+      'pisell-time-navigator-cursor--fixed': fixedCenter
+    }, className),
+    style: fixedCenter ? style : _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, isHorizontal ? 'left' : 'top', lineOffset)),
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-navigator-cursor-line"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-navigator-cursor-bubble"
+  }, label));
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface GestureLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    cellSizePx: number;
+    /** 轴在滚动内容中的起始边距（左/上），用于把「滚动内容坐标」转为「轴内偏移」（与 dot 对齐） */
+    axisStartMarginPx: number;
+    offsetToTime: (offset: number) => Dayjs | null;
+    onSelectTime: (t: Dayjs) => void;
+    isInDisabledRanges: (t: Dayjs) => boolean;
+    snapToStep: boolean;
+    stepMinutes: number;
+    snapFn: (t: Dayjs) => Dayjs;
+    scrollPosition: {
+        scrollLeft: number;
+        scrollTop: number;
+    };
+    viewportSize: {
+        w: number;
+        h: number;
+    };
+    onPointerDown?: React.PointerEventHandler;
+    onPointerMove?: React.PointerEventHandler;
+    onPointerUp?: React.PointerEventHandler;
+    onPointerLeave?: React.PointerEventHandler;
+    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;

package/es/components/pisellTimeNavigator/components/GestureLayer.js

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+/**
+ * 交互层：点击刻度跳转、键盘左右/上下 + 回车
+ */
+export function GestureLayer(_ref) {
+  var orientation = _ref.orientation,
+    cellSizePx = _ref.cellSizePx,
+    axisStartMarginPx = _ref.axisStartMarginPx,
+    offsetToTime = _ref.offsetToTime,
+    onSelectTime = _ref.onSelectTime,
+    isInDisabledRanges = _ref.isInDisabledRanges,
+    snapToStep = _ref.snapToStep,
+    stepMinutes = _ref.stepMinutes,
+    snapFn = _ref.snapFn,
+    scrollPosition = _ref.scrollPosition,
+    viewportSize = _ref.viewportSize,
+    onPointerDown = _ref.onPointerDown,
+    onPointerMove = _ref.onPointerMove,
+    onPointerUp = _ref.onPointerUp,
+    onPointerLeave = _ref.onPointerLeave,
+    children = _ref.children;
+  var isHorizontal = orientation === 'horizontal';
+  var handleClick = useCallback(function (e) {
+    var viewport = e.currentTarget.parentElement;
+    if (!viewport) return;
+    var vRect = viewport.getBoundingClientRect();
+    var scroll = isHorizontal ? viewport.scrollLeft : viewport.scrollTop;
+    var scrollContentPos = isHorizontal ? scroll + (e.clientX - vRect.left) : scroll + (e.clientY - vRect.top);
+    var offset = Math.max(0, scrollContentPos - axisStartMarginPx);
+    var t = offsetToTime(offset);
+    if (t == null) return;
+    var candidate = snapToStep ? snapFn(t) : t;
+    if (isInDisabledRanges(candidate)) return;
+    onSelectTime(candidate);
+  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn]);
+  var handleKeyDown = useCallback(function (e) {
+    var scrollContentCenter = orientation === 'horizontal' ? scrollPosition.scrollLeft + viewportSize.w / 2 : scrollPosition.scrollTop + viewportSize.h / 2;
+    var centerOffset = Math.max(0, scrollContentCenter - axisStartMarginPx);
+    var currentTime = offsetToTime(centerOffset);
+    if (currentTime == null) return;
+    if (e.key === 'Enter') {
+      var candidate = snapToStep ? snapFn(currentTime) : currentTime;
+      if (!isInDisabledRanges(candidate)) onSelectTime(candidate);
+      e.preventDefault();
+      return;
+    }
+    var step = stepMinutes * 60 * 1000;
+    var next;
+    if (orientation === 'horizontal') {
+      if (e.key === 'ArrowLeft') next = currentTime.subtract(step, 'ms');else if (e.key === 'ArrowRight') next = currentTime.add(step, 'ms');else return;
+    } else {
+      if (e.key === 'ArrowUp') next = currentTime.subtract(step, 'ms');else if (e.key === 'ArrowDown') next = currentTime.add(step, 'ms');else return;
+    }
+    e.preventDefault();
+    var snapped = snapToStep ? snapFn(next) : next;
+    if (!isInDisabledRanges(snapped)) onSelectTime(snapped);
+  }, [orientation, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, stepMinutes, scrollPosition.scrollLeft, scrollPosition.scrollTop, viewportSize.w, viewportSize.h]);
+  var handlePointerDown = useCallback(function (e) {
+    if (onPointerDown) {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      onPointerDown(e);
+    }
+  }, [onPointerDown]);
+  var handlePointerUp = useCallback(function (e) {
+    if (onPointerUp) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      onPointerUp(e);
+    }
+  }, [onPointerUp]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-time-navigator-gesture pisell-time-navigator-gesture--".concat(orientation),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onPointerDown: handlePointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerLeave: onPointerLeave,
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": "Time"
+  }, children);
+}

package/es/components/pisellTimeNavigator/components/NowButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+export interface NowButtonProps {
+    orientation: 'horizontal' | 'vertical';
+    onClick: () => void;
+    style?: CSSProperties;
+    className?: string;
+    renderCustom?: () => React.ReactNode;
+}
+/**
+ * Now 按钮：固定入口，点击跳回当前时间并进入 Realtime
+ * 横向：右侧，左箭头；竖向：底部，上箭头
+ */
+export declare function NowButton({ orientation, onClick, style, className, renderCustom, }: NowButtonProps): JSX.Element;

package/es/components/pisellTimeNavigator/components/NowButton.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { locales } from '@pisell/utils';
+import classNames from 'classnames';
+var I18N_NOW = 'pisell-time-navigator.now';
+/**
+ * Now 按钮：固定入口，点击跳回当前时间并进入 Realtime
+ * 横向：右侧，左箭头；竖向：底部，上箭头
+ */
+export function NowButton(_ref) {
+  var orientation = _ref.orientation,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    className = _ref.className,
+    renderCustom = _ref.renderCustom;
+  var raw = locales.getText(I18N_NOW);
+  var label = raw && raw !== I18N_NOW ? raw : 'Now';
+  if (renderCustom) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames('pisell-time-navigator-now', className),
+      onClick: onClick,
+      style: style,
+      "aria-label": label
+    }, renderCustom());
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames('pisell-time-navigator-now', "pisell-time-navigator-now--".concat(orientation), className),
+    onClick: onClick,
+    style: style,
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-navigator-now-icon",
+    "aria-hidden": true
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "pisell-time-navigator-now-label"
+  }, label));
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface ScaleLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    ticks: Dayjs[];
+    stepMinutes: number;
+    majorStepMinutes: number;
+    timeFormat: string;
+    locale?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * 刻度层：渲染时间刻度与标签
+ * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
+ */
+export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, }: ScaleLayerProps): JSX.Element;

package/es/components/pisellTimeNavigator/components/ScaleLayer.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+/**
+ * 刻度层：渲染时间刻度与标签
+ * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
+ */
+export function ScaleLayer(_ref) {
+  var orientation = _ref.orientation,
+    ticks = _ref.ticks,
+    stepMinutes = _ref.stepMinutes,
+    majorStepMinutes = _ref.majorStepMinutes,
+    timeFormat = _ref.timeFormat,
+    locale = _ref.locale,
+    style = _ref.style,
+    className = _ref.className;
+  var isHorizontal = orientation === 'horizontal';
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-time-navigator-scale', "pisell-time-navigator-scale--".concat(orientation), className),
+    style: style
+  }, ticks.map(function (tick, i) {
+    var isMajor = tick.minute() % majorStepMinutes === 0;
+    /** 横向整点只展示小时，非整点用 timeFormat；竖向沿用 timeFormat */
+    var label = isHorizontal && isMajor ? locale ? tick.locale(locale).format('H') : tick.format('H') : locale ? tick.locale(locale).format(timeFormat) : tick.format(timeFormat);
+    if (isHorizontal) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i,
+        className: classNames('pisell-time-navigator-scale-cell', 'pisell-time-navigator-scale-cell--h', {
+          'pisell-time-navigator-scale-cell--major': isMajor
+        })
+      }, isMajor && /*#__PURE__*/React.createElement("span", {
+        className: "pisell-time-navigator-scale-label"
+      }, label), !isMajor && /*#__PURE__*/React.createElement("span", {
+        className: "pisell-time-navigator-scale-dot",
+        "aria-hidden": true
+      }));
+    }
+
+    /* 竖向：仅展示整点时间；整点格加 --major，顶部粗线 */
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: classNames('pisell-time-navigator-scale-cell', 'pisell-time-navigator-scale-cell--v', {
+        'pisell-time-navigator-scale-cell--major': isMajor
+      })
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-navigator-scale-divider",
+      "aria-hidden": true
+    }), isMajor && /*#__PURE__*/React.createElement("span", {
+      className: "pisell-time-navigator-scale-label"
+    }, label));
+  }));
+}

package/es/components/pisellTimeNavigator/components/index.d.ts

@@ -0,0 +1,5 @@
+export { BackgroundLayer } from './BackgroundLayer';
+export { CursorLayer } from './CursorLayer';
+export { GestureLayer } from './GestureLayer';
+export { NowButton } from './NowButton';
+export { ScaleLayer } from './ScaleLayer';

package/es/components/pisellTimeNavigator/components/index.js

@@ -0,0 +1,5 @@
+export { BackgroundLayer } from "./BackgroundLayer";
+export { CursorLayer } from "./CursorLayer";
+export { GestureLayer } from "./GestureLayer";
+export { NowButton } from "./NowButton";
+export { ScaleLayer } from "./ScaleLayer";

package/es/components/pisellTimeNavigator/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useTimeAxis } from './useTimeAxis';
+export type { UseTimeAxisOptions, TimeAxisState } from './useTimeAxis';
+export { useRealtime } from './useRealtime';
+export { useDragInertia } from './useDragInertia';
+export type { UseDragInertiaOptions } from './useDragInertia';

package/es/components/pisellTimeNavigator/hooks/index.js

@@ -0,0 +1,3 @@
+export { useTimeAxis } from "./useTimeAxis";
+export { useRealtime } from "./useRealtime";
+export { useDragInertia } from "./useDragInertia";