@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/ClockDial.mjs

@@ -0,0 +1,108 @@
+import { pointerToPolar, stepCircular, toPosition } from "./geometry.mjs";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerPanel/TimePanel/TimeClock/ClockDial.tsx
+const STEP_KEYS = {
+	ArrowDown: -1,
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: 1
+};
+function ClockDial({ ariaPrefix, enabledValues, label, numbers, onDone, onPick, pickAt, prefixCls, selected, selectedAngle, selectedInner, selectedOffTick }) {
+	const cls = `${prefixCls}-time-clock`;
+	const [dragging, setDragging] = React$1.useState(false);
+	const lastPickedRef = React$1.useRef(null);
+	const applyPointer = (event) => {
+		const { angle, distance } = pointerToPolar(event.currentTarget, event.clientX, event.clientY);
+		const value = pickAt(angle, distance);
+		if (value === void 0 || value === lastPickedRef.current) return;
+		lastPickedRef.current = value;
+		onPick(value);
+	};
+	const radius = selectedInner ? 58 : 88;
+	const knob = toPosition(selectedAngle, radius);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": label,
+		className: clsx(`${cls}-dial`, dragging && `${cls}-dial-dragging`),
+		role: "group",
+		style: {
+			height: 224,
+			width: 224
+		},
+		tabIndex: 0,
+		onPointerCancel: () => setDragging(false),
+		onKeyDown: (event) => {
+			const direction = STEP_KEYS[event.key];
+			if (direction) {
+				const next = stepCircular(selected, enabledValues, direction);
+				if (next !== void 0) onPick(next);
+			} else if (event.key === "Enter") onDone();
+			else return;
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		onPointerDown: (event) => {
+			if (event.button !== 0) return;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			lastPickedRef.current = selected;
+			setDragging(true);
+			applyPointer(event);
+		},
+		onPointerMove: (event) => {
+			if (dragging) applyPointer(event);
+		},
+		onPointerUp: (event) => {
+			if (!dragging) return;
+			applyPointer(event);
+			setDragging(false);
+			onDone();
+		},
+		children: [selected !== null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `${cls}-hand`,
+				style: {
+					height: radius,
+					top: 112 - radius,
+					transform: `rotate(${selectedAngle}deg)`
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `${cls}-center`
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				style: {
+					left: knob.x,
+					top: knob.y
+				},
+				className: clsx(`${cls}-knob`, selectedInner && `${cls}-knob-inner`, selectedOffTick && `${cls}-knob-off-tick`)
+			})
+		] }), numbers.map((number) => {
+			const position = toPosition(number.angle, number.inner ? 58 : 88);
+			return /* @__PURE__ */ jsx("button", {
+				"aria-label": `${ariaPrefix} ${number.value}`,
+				"aria-pressed": number.value === selected,
+				disabled: number.disabled,
+				style: {
+					left: position.x,
+					top: position.y
+				},
+				tabIndex: -1,
+				type: "button",
+				className: clsx(`${cls}-number`, number.inner && `${cls}-number-inner`, number.value === selected && `${cls}-number-selected`),
+				onClick: () => {
+					onPick(number.value);
+					onDone();
+				},
+				children: number.label
+			}, `${number.inner ? "inner" : "outer"}-${number.value}`);
+		})]
+	});
+}
+//#endregion
+export { ClockDial as default };
+
+//# sourceMappingURL=ClockDial.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/ClockDial.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClockDial.mjs","names":["React"],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimeClock/ClockDial.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport {\n  DIAL_SIZE,\n  type DialNumber,\n  INNER_RADIUS,\n  OUTER_RADIUS,\n  pointerToPolar,\n  stepCircular,\n  toPosition,\n} from './geometry';\n\nexport interface ClockDialProps {\n  ariaPrefix: string;\n  enabledValues: number[];\n  label: string;\n  numbers: DialNumber[];\n  onDone: () => void;\n  onPick: (value: number) => void;\n  pickAt: (angle: number, distance: number) => number | undefined;\n  prefixCls: string;\n  selected: number | null;\n  selectedAngle: number;\n  selectedInner: boolean;\n  selectedOffTick: boolean;\n}\n\nconst STEP_KEYS: Record<string, 1 | -1> = {\n  ArrowDown: -1,\n  ArrowLeft: -1,\n  ArrowRight: 1,\n  ArrowUp: 1,\n};\n\nexport default function ClockDial({\n  ariaPrefix,\n  enabledValues,\n  label,\n  numbers,\n  onDone,\n  onPick,\n  pickAt,\n  prefixCls,\n  selected,\n  selectedAngle,\n  selectedInner,\n  selectedOffTick,\n}: ClockDialProps) {\n  const cls = `${prefixCls}-time-clock`;\n  const [dragging, setDragging] = React.useState(false);\n  const lastPickedRef = React.useRef<number | null>(null);\n\n  const applyPointer = (event: React.PointerEvent<HTMLDivElement>) => {\n    const { angle, distance } = pointerToPolar(event.currentTarget, event.clientX, event.clientY);\n    const value = pickAt(angle, distance);\n    if (value === undefined || value === lastPickedRef.current) return;\n    lastPickedRef.current = value;\n    onPick(value);\n  };\n\n  const radius = selectedInner ? INNER_RADIUS : OUTER_RADIUS;\n  const knob = toPosition(selectedAngle, radius);\n\n  return (\n    <div\n      aria-label={label}\n      className={clsx(`${cls}-dial`, dragging && `${cls}-dial-dragging`)}\n      role=\"group\"\n      style={{ height: DIAL_SIZE, width: DIAL_SIZE }}\n      tabIndex={0}\n      onPointerCancel={() => setDragging(false)}\n      onKeyDown={(event) => {\n        const direction = STEP_KEYS[event.key];\n        if (direction) {\n          const next = stepCircular(selected, enabledValues, direction);\n          if (next !== undefined) onPick(next);\n        } else if (event.key === 'Enter') {\n          onDone();\n        } else {\n          return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n      }}\n      onPointerDown={(event) => {\n        if (event.button !== 0) return;\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n        lastPickedRef.current = selected;\n        setDragging(true);\n        applyPointer(event);\n      }}\n      onPointerMove={(event) => {\n        if (dragging) applyPointer(event);\n      }}\n      onPointerUp={(event) => {\n        if (!dragging) return;\n        applyPointer(event);\n        setDragging(false);\n        onDone();\n      }}\n    >\n      {selected !== null && (\n        <>\n          <span\n            aria-hidden\n            className={`${cls}-hand`}\n            style={{\n              height: radius,\n              top: DIAL_SIZE / 2 - radius,\n              transform: `rotate(${selectedAngle}deg)`,\n            }}\n          />\n          <span aria-hidden className={`${cls}-center`} />\n          <span\n            aria-hidden\n            style={{ left: knob.x, top: knob.y }}\n            className={clsx(\n              `${cls}-knob`,\n              selectedInner && `${cls}-knob-inner`,\n              selectedOffTick && `${cls}-knob-off-tick`,\n            )}\n          />\n        </>\n      )}\n      {numbers.map((number) => {\n        const position = toPosition(number.angle, number.inner ? INNER_RADIUS : OUTER_RADIUS);\n        return (\n          <button\n            aria-label={`${ariaPrefix} ${number.value}`}\n            aria-pressed={number.value === selected}\n            disabled={number.disabled}\n            key={`${number.inner ? 'inner' : 'outer'}-${number.value}`}\n            style={{ left: position.x, top: position.y }}\n            tabIndex={-1}\n            type=\"button\"\n            className={clsx(\n              `${cls}-number`,\n              number.inner && `${cls}-number-inner`,\n              number.value === selected && `${cls}-number-selected`,\n            )}\n            onClick={() => {\n              onPick(number.value);\n              onDone();\n            }}\n          >\n            {number.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA4BA,MAAM,YAAoC;CACxC,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX;AAEA,SAAwB,UAAU,EAChC,YACA,eACA,OACA,SACA,QACA,QACA,QACA,WACA,UACA,eACA,eACA,mBACiB;CACjB,MAAM,MAAM,GAAG,UAAU;CACzB,MAAM,CAAC,UAAU,eAAeA,QAAM,SAAS,KAAK;CACpD,MAAM,gBAAgBA,QAAM,OAAsB,IAAI;CAEtD,MAAM,gBAAgB,UAA8C;EAClE,MAAM,EAAE,OAAO,aAAa,eAAe,MAAM,eAAe,MAAM,SAAS,MAAM,OAAO;EAC5F,MAAM,QAAQ,OAAO,OAAO,QAAQ;EACpC,IAAI,UAAU,KAAA,KAAa,UAAU,cAAc,SAAS;EAC5D,cAAc,UAAU;EACxB,OAAO,KAAK;CACd;CAEA,MAAM,SAAS,gBAAA,KAAA;CACf,MAAM,OAAO,WAAW,eAAe,MAAM;CAE7C,OACE,qBAAC,OAAD;EACE,cAAY;EACZ,WAAW,KAAK,GAAG,IAAI,QAAQ,YAAY,GAAG,IAAI,eAAe;EACjE,MAAK;EACL,OAAO;GAAE,QAAA;GAAmB,OAAA;EAAiB;EAC7C,UAAU;EACV,uBAAuB,YAAY,KAAK;EACxC,YAAY,UAAU;GACpB,MAAM,YAAY,UAAU,MAAM;GAClC,IAAI,WAAW;IACb,MAAM,OAAO,aAAa,UAAU,eAAe,SAAS;IAC5D,IAAI,SAAS,KAAA,GAAW,OAAO,IAAI;GACrC,OAAO,IAAI,MAAM,QAAQ,SACvB,OAAO;QAEP;GAEF,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;EACA,gBAAgB,UAAU;GACxB,IAAI,MAAM,WAAW,GAAG;GACxB,MAAM,cAAc,oBAAoB,MAAM,SAAS;GACvD,cAAc,UAAU;GACxB,YAAY,IAAI;GAChB,aAAa,KAAK;EACpB;EACA,gBAAgB,UAAU;GACxB,IAAI,UAAU,aAAa,KAAK;EAClC;EACA,cAAc,UAAU;GACtB,IAAI,CAAC,UAAU;GACf,aAAa,KAAK;GAClB,YAAY,KAAK;GACjB,OAAO;EACT;EAnCF,UAAA,CAqCG,aAAa,QACZ,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,QAAD;IACE,eAAA;IACA,WAAW,GAAG,IAAI;IAClB,OAAO;KACL,QAAQ;KACR,KAAA,MAAqB;KACrB,WAAW,UAAU,cAAc;IACrC;GACD,CAAA;GACD,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,GAAG,IAAI;GAAW,CAAA;GAC/C,oBAAC,QAAD;IACE,eAAA;IACA,OAAO;KAAE,MAAM,KAAK;KAAG,KAAK,KAAK;IAAE;IACnC,WAAW,KACT,GAAG,IAAI,QACP,iBAAiB,GAAG,IAAI,cACxB,mBAAmB,GAAG,IAAI,eAC5B;GACD,CAAA;EACD,EAAA,CAAA,GAEH,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,WAAW,OAAO,OAAO,OAAO,QAAA,KAAA,EAAmC;GACpF,OACE,oBAAC,UAAD;IACE,cAAY,GAAG,WAAW,GAAG,OAAO;IACpC,gBAAc,OAAO,UAAU;IAC/B,UAAU,OAAO;IAEjB,OAAO;KAAE,MAAM,SAAS;KAAG,KAAK,SAAS;IAAE;IAC3C,UAAU;IACV,MAAK;IACL,WAAW,KACT,GAAG,IAAI,UACP,OAAO,SAAS,GAAG,IAAI,gBACvB,OAAO,UAAU,YAAY,GAAG,IAAI,iBACtC;IACA,eAAe;KACb,OAAO,OAAO,KAAK;KACnB,OAAO;IACT;IAEC,UAAA,OAAO;GACF,GAfD,GAAG,OAAO,QAAQ,UAAU,QAAQ,GAAG,OAAO,OAe7C;EAEZ,CAAC,CACE;;AAET"}

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/geometry.mjs

@@ -0,0 +1,44 @@
+const CENTER = 112;
+const pad = (value) => String(value).padStart(2, "0");
+const toPosition = (angle, radius) => {
+	const rad = angle * Math.PI / 180;
+	return {
+		x: CENTER + radius * Math.sin(rad),
+		y: CENTER - radius * Math.cos(rad)
+	};
+};
+const pointerToPolar = (element, clientX, clientY) => {
+	const rect = element.getBoundingClientRect();
+	const scale = rect.width / 224 || 1;
+	const dx = (clientX - (rect.left + rect.width / 2)) / scale;
+	const dy = (clientY - (rect.top + rect.height / 2)) / scale;
+	return {
+		angle: (Math.atan2(dx, -dy) * 180 / Math.PI + 360) % 360,
+		distance: Math.hypot(dx, dy)
+	};
+};
+const isInnerRing = (distance) => distance < 73;
+const nearestOnCircle = (target, candidates, period) => {
+	let best;
+	let bestDistance = Infinity;
+	for (const candidate of candidates) {
+		const raw = Math.abs(candidate - target) % period;
+		const distance = Math.min(raw, period - raw);
+		if (distance < bestDistance) {
+			best = candidate;
+			bestDistance = distance;
+		}
+	}
+	return best;
+};
+const stepCircular = (current, candidates, direction) => {
+	if (candidates.length === 0) return void 0;
+	const sorted = [...candidates].sort((a, b) => a - b);
+	if (current === null) return direction === 1 ? sorted[0] : sorted.at(-1);
+	if (direction === 1) return sorted.find((value) => value > current) ?? sorted[0];
+	return [...sorted].reverse().find((value) => value < current) ?? sorted.at(-1);
+};
+//#endregion
+export { isInnerRing, nearestOnCircle, pad, pointerToPolar, stepCircular, toPosition };
+
+//# sourceMappingURL=geometry.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/geometry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.mjs","names":[],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimeClock/geometry.ts"],"sourcesContent":["export const DIAL_SIZE = 224;\nexport const OUTER_RADIUS = 88;\nexport const INNER_RADIUS = 58;\n\nconst CENTER = DIAL_SIZE / 2;\n\nexport interface DialNumber {\n  angle: number;\n  disabled: boolean;\n  inner: boolean;\n  label: string;\n  value: number;\n}\n\nexport const pad = (value: number) => String(value).padStart(2, '0');\n\nexport const toPosition = (angle: number, radius: number) => {\n  const rad = (angle * Math.PI) / 180;\n  return { x: CENTER + radius * Math.sin(rad), y: CENTER - radius * Math.cos(rad) };\n};\n\nexport const pointerToPolar = (element: HTMLElement, clientX: number, clientY: number) => {\n  const rect = element.getBoundingClientRect();\n  const scale = rect.width / DIAL_SIZE || 1;\n  const dx = (clientX - (rect.left + rect.width / 2)) / scale;\n  const dy = (clientY - (rect.top + rect.height / 2)) / scale;\n  const angle = ((Math.atan2(dx, -dy) * 180) / Math.PI + 360) % 360;\n  return { angle, distance: Math.hypot(dx, dy) };\n};\n\nexport const isInnerRing = (distance: number) => distance < (OUTER_RADIUS + INNER_RADIUS) / 2;\n\nexport const nearestOnCircle = (target: number, candidates: number[], period: number) => {\n  let best: number | undefined;\n  let bestDistance = Infinity;\n  for (const candidate of candidates) {\n    const raw = Math.abs(candidate - target) % period;\n    const distance = Math.min(raw, period - raw);\n    if (distance < bestDistance) {\n      best = candidate;\n      bestDistance = distance;\n    }\n  }\n  return best;\n};\n\nexport const stepCircular = (current: number | null, candidates: number[], direction: 1 | -1) => {\n  if (candidates.length === 0) return undefined;\n  const sorted = [...candidates].sort((a, b) => a - b);\n  if (current === null) return direction === 1 ? sorted[0] : sorted.at(-1);\n  if (direction === 1) return sorted.find((value) => value > current) ?? sorted[0];\n  return [...sorted].reverse().find((value) => value < current) ?? sorted.at(-1);\n};\n"],"mappings":"AAIA,MAAM,SAAA;AAUN,MAAa,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAEnE,MAAa,cAAc,OAAe,WAAmB;CAC3D,MAAM,MAAO,QAAQ,KAAK,KAAM;CAChC,OAAO;EAAE,GAAG,SAAS,SAAS,KAAK,IAAI,GAAG;EAAG,GAAG,SAAS,SAAS,KAAK,IAAI,GAAG;CAAE;AAClF;AAEA,MAAa,kBAAkB,SAAsB,SAAiB,YAAoB;CACxF,MAAM,OAAO,QAAQ,sBAAsB;CAC3C,MAAM,QAAQ,KAAK,QAAA,OAAqB;CACxC,MAAM,MAAM,WAAW,KAAK,OAAO,KAAK,QAAQ,MAAM;CACtD,MAAM,MAAM,WAAW,KAAK,MAAM,KAAK,SAAS,MAAM;CAEtD,OAAO;EAAE,QADO,KAAK,MAAM,IAAI,CAAC,EAAE,IAAI,MAAO,KAAK,KAAK,OAAO;EAC9C,UAAU,KAAK,MAAM,IAAI,EAAE;CAAE;AAC/C;AAEA,MAAa,eAAe,aAAqB,WAAW;AAE5D,MAAa,mBAAmB,QAAgB,YAAsB,WAAmB;CACvF,IAAI;CACJ,IAAI,eAAe;CACnB,KAAK,MAAM,aAAa,YAAY;EAClC,MAAM,MAAM,KAAK,IAAI,YAAY,MAAM,IAAI;EAC3C,MAAM,WAAW,KAAK,IAAI,KAAK,SAAS,GAAG;EAC3C,IAAI,WAAW,cAAc;GAC3B,OAAO;GACP,eAAe;EACjB;CACF;CACA,OAAO;AACT;AAEA,MAAa,gBAAgB,SAAwB,YAAsB,cAAsB;CAC/F,IAAI,WAAW,WAAW,GAAG,OAAO,KAAA;CACpC,MAAM,SAAS,CAAC,GAAG,UAAU,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CACnD,IAAI,YAAY,MAAM,OAAO,cAAc,IAAI,OAAO,KAAK,OAAO,GAAG,EAAE;CACvE,IAAI,cAAc,GAAG,OAAO,OAAO,MAAM,UAAU,QAAQ,OAAO,KAAK,OAAO;CAC9E,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,UAAU,QAAQ,OAAO,KAAK,OAAO,GAAG,EAAE;AAC/E"}

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/index.mjs

@@ -0,0 +1,157 @@
+import { usePanelContext } from "../../context.mjs";
+import useTimeState from "../TimePanelBody/useTimeState.mjs";
+import { isInnerRing, nearestOnCircle, pad, stepCircular } from "./geometry.mjs";
+import ClockDial from "./ClockDial.mjs";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/DatePicker/core/PickerPanel/TimePanel/TimeClock/index.tsx
+const enabledValues = (units) => units.filter((unit) => !unit.disabled).map((unit) => unit.value);
+const isEnabled = (units, value) => units.some((unit) => unit.value === value && !unit.disabled);
+function TimeClock(props) {
+	const { showHour, showMinute, showSecond, use12Hours } = props;
+	const { prefixCls, locale } = usePanelContext();
+	const state = useTimeState(props);
+	const [view, setView] = React$1.useState(showHour ? "hour" : "minute");
+	const cls = `${prefixCls}-time-clock`;
+	const hour = state.hour ?? null;
+	const minute = state.minute ?? null;
+	const second = state.second ?? null;
+	const pm = hour !== null && hour >= 12;
+	const hourNumbers = [];
+	for (let index = 0; index < 12; index++) {
+		const outer = index === 0 ? 12 : index;
+		const angle = index * 30;
+		if (use12Hours) {
+			const value = index + (pm ? 12 : 0);
+			hourNumbers.push({
+				angle,
+				disabled: !isEnabled(state.hourUnits, value),
+				inner: false,
+				label: String(outer),
+				value
+			});
+			continue;
+		}
+		const inner = index === 0 ? 0 : index + 12;
+		hourNumbers.push({
+			angle,
+			disabled: !isEnabled(state.hourUnits, outer),
+			inner: false,
+			label: String(outer),
+			value: outer
+		}, {
+			angle,
+			disabled: !isEnabled(state.hourUnits, inner),
+			inner: true,
+			label: pad(inner),
+			value: inner
+		});
+	}
+	const minuteNumbers = Array.from({ length: 12 }, (_, index) => ({
+		angle: index * 30,
+		disabled: !isEnabled(state.minuteUnits, index * 5),
+		inner: false,
+		label: pad(index * 5),
+		value: index * 5
+	}));
+	const hourValues = enabledValues(state.hourUnits);
+	const minuteValues = enabledValues(state.minuteUnits);
+	const secondValues = enabledValues(state.secondUnits);
+	const pickHourAt = (angle, distance) => {
+		const index = Math.round(angle / 30) % 12;
+		const value = use12Hours ? index + (pm ? 12 : 0) : isInnerRing(distance) ? index === 0 ? 0 : index + 12 : index === 0 ? 12 : index;
+		return isEnabled(state.hourUnits, value) ? value : void 0;
+	};
+	const pickMinuteAt = (angle) => nearestOnCircle(Math.round(angle / 6) % 60, minuteValues, 60);
+	const stepSecond = (direction) => {
+		const next = stepCircular(second, secondValues, direction);
+		if (next !== void 0) state.onSecondChange(next);
+	};
+	const hourView = view === "hour";
+	const displayHour = hour === null ? "--" : pad(use12Hours ? hour % 12 || 12 : hour);
+	const segment = (target, label, text) => /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		"aria-pressed": view === target,
+		className: clsx(`${cls}-segment`, view === target && `${cls}-segment-active`),
+		type: "button",
+		onClick: () => setView(target),
+		children: text
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: `${prefixCls}-header`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${cls}-header`,
+			children: [
+				showHour && segment("hour", locale.hours ?? "Hours", displayHour),
+				showHour && showMinute && /* @__PURE__ */ jsx("span", {
+					className: `${cls}-colon`,
+					children: ":"
+				}),
+				showMinute && segment("minute", locale.minutes ?? "Minutes", minute === null ? "--" : pad(minute)),
+				showSecond && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: `${cls}-colon`,
+					children: ":"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: `${cls}-stepper`,
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": locale.nextSecond ?? "Next second",
+							tabIndex: -1,
+							type: "button",
+							onClick: () => stepSecond(1),
+							children: /* @__PURE__ */ jsx(ChevronUp, { size: 12 })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-label": locale.seconds ?? "Seconds",
+							className: `${cls}-stepper-value`,
+							onWheel: (event) => stepSecond(event.deltaY > 0 ? -1 : 1),
+							children: second === null ? "--" : pad(second)
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": locale.previousSecond ?? "Previous second",
+							tabIndex: -1,
+							type: "button",
+							onClick: () => stepSecond(-1),
+							children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+						})
+					]
+				})] }),
+				use12Hours && /* @__PURE__ */ jsx("div", {
+					className: `${cls}-meridiem`,
+					children: state.meridiemUnits.map((unit) => /* @__PURE__ */ jsx("button", {
+						"aria-pressed": state.meridiem === unit.value,
+						disabled: unit.disabled,
+						type: "button",
+						className: clsx(`${cls}-segment`, state.meridiem === unit.value && `${cls}-segment-active`),
+						onClick: () => state.onMeridiemChange(unit.value),
+						children: unit.label
+					}, unit.value))
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: `${cls}-body`,
+		children: /* @__PURE__ */ jsx(ClockDial, {
+			ariaPrefix: hourView ? locale.hour ?? "Hour" : locale.minute ?? "Minute",
+			enabledValues: hourView ? hourValues : minuteValues,
+			label: hourView ? locale.hours ?? "Hours" : locale.minutes ?? "Minutes",
+			numbers: hourView ? hourNumbers : minuteNumbers,
+			prefixCls,
+			selected: hourView ? hour : minute,
+			selectedAngle: hourView ? (hour ?? 0) % 12 * 30 : (minute ?? 0) * 6,
+			selectedInner: hourView && !use12Hours && hour !== null && (hour === 0 || hour > 12),
+			selectedOffTick: !hourView && minute !== null && minute % 5 !== 0,
+			pickAt: (angle, distance) => hourView ? pickHourAt(angle, distance) : pickMinuteAt(angle),
+			onPick: (value) => hourView ? state.onHourChange(value) : state.onMinuteChange(value),
+			onDone: () => {
+				if (hourView && showMinute) setView("minute");
+			}
+		}, view)
+	})] });
+}
+//#endregion
+export { TimeClock as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimeClock/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["React"],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimeClock/index.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport * as React from 'react';\n\nimport type { SharedTimeProps } from '../../../interface';\nimport { usePanelContext } from '../../context';\nimport type { Unit } from '../TimePanelBody/TimeColumn';\nimport useTimeState from '../TimePanelBody/useTimeState';\nimport ClockDial from './ClockDial';\nimport { type DialNumber, isInnerRing, nearestOnCircle, pad, stepCircular } from './geometry';\n\ntype View = 'hour' | 'minute';\n\nconst enabledValues = (units: Unit<number>[]) =>\n  units.filter((unit) => !unit.disabled).map((unit) => unit.value);\n\nconst isEnabled = (units: Unit<number>[], value: number) =>\n  units.some((unit) => unit.value === value && !unit.disabled);\n\nexport default function TimeClock<DateType extends object = any>(props: SharedTimeProps<DateType>) {\n  const { showHour, showMinute, showSecond, use12Hours } = props;\n  const { prefixCls, locale } = usePanelContext<DateType>();\n  const state = useTimeState(props);\n  const [view, setView] = React.useState<View>(showHour ? 'hour' : 'minute');\n\n  const cls = `${prefixCls}-time-clock`;\n  const hour = state.hour ?? null;\n  const minute = state.minute ?? null;\n  const second = state.second ?? null;\n  const pm = hour !== null && hour >= 12;\n\n  const hourNumbers: DialNumber[] = [];\n  for (let index = 0; index < 12; index++) {\n    const outer = index === 0 ? 12 : index;\n    const angle = index * 30;\n    if (use12Hours) {\n      const value = index + (pm ? 12 : 0);\n      hourNumbers.push({\n        angle,\n        disabled: !isEnabled(state.hourUnits, value),\n        inner: false,\n        label: String(outer),\n        value,\n      });\n      continue;\n    }\n    const inner = index === 0 ? 0 : index + 12;\n    hourNumbers.push(\n      {\n        angle,\n        disabled: !isEnabled(state.hourUnits, outer),\n        inner: false,\n        label: String(outer),\n        value: outer,\n      },\n      {\n        angle,\n        disabled: !isEnabled(state.hourUnits, inner),\n        inner: true,\n        label: pad(inner),\n        value: inner,\n      },\n    );\n  }\n\n  const minuteNumbers: DialNumber[] = Array.from({ length: 12 }, (_, index) => ({\n    angle: index * 30,\n    disabled: !isEnabled(state.minuteUnits, index * 5),\n    inner: false,\n    label: pad(index * 5),\n    value: index * 5,\n  }));\n\n  const hourValues = enabledValues(state.hourUnits);\n  const minuteValues = enabledValues(state.minuteUnits);\n  const secondValues = enabledValues(state.secondUnits);\n\n  const pickHourAt = (angle: number, distance: number) => {\n    const index = Math.round(angle / 30) % 12;\n    const value = use12Hours\n      ? index + (pm ? 12 : 0)\n      : isInnerRing(distance)\n        ? index === 0\n          ? 0\n          : index + 12\n        : index === 0\n          ? 12\n          : index;\n    return isEnabled(state.hourUnits, value) ? value : undefined;\n  };\n\n  const pickMinuteAt = (angle: number) =>\n    nearestOnCircle(Math.round(angle / 6) % 60, minuteValues, 60);\n\n  const stepSecond = (direction: 1 | -1) => {\n    const next = stepCircular(second, secondValues, direction);\n    if (next !== undefined) state.onSecondChange(next);\n  };\n\n  const hourView = view === 'hour';\n  const displayHour = hour === null ? '--' : pad(use12Hours ? hour % 12 || 12 : hour);\n  const segment = (target: View, label: string | undefined, text: string) => (\n    <button\n      aria-label={label}\n      aria-pressed={view === target}\n      className={clsx(`${cls}-segment`, view === target && `${cls}-segment-active`)}\n      type=\"button\"\n      onClick={() => setView(target)}\n    >\n      {text}\n    </button>\n  );\n\n  return (\n    <>\n      <div className={`${prefixCls}-header`}>\n        <div className={`${cls}-header`}>\n          {showHour && segment('hour', locale.hours ?? 'Hours', displayHour)}\n          {showHour && showMinute && <span className={`${cls}-colon`}>:</span>}\n          {showMinute &&\n            segment('minute', locale.minutes ?? 'Minutes', minute === null ? '--' : pad(minute))}\n          {showSecond && (\n            <>\n              <span className={`${cls}-colon`}>:</span>\n              <div className={`${cls}-stepper`}>\n                <button\n                  aria-label={locale.nextSecond ?? 'Next second'}\n                  tabIndex={-1}\n                  type=\"button\"\n                  onClick={() => stepSecond(1)}\n                >\n                  <ChevronUp size={12} />\n                </button>\n                <span\n                  aria-label={locale.seconds ?? 'Seconds'}\n                  className={`${cls}-stepper-value`}\n                  onWheel={(event) => stepSecond(event.deltaY > 0 ? -1 : 1)}\n                >\n                  {second === null ? '--' : pad(second)}\n                </span>\n                <button\n                  aria-label={locale.previousSecond ?? 'Previous second'}\n                  tabIndex={-1}\n                  type=\"button\"\n                  onClick={() => stepSecond(-1)}\n                >\n                  <ChevronDown size={12} />\n                </button>\n              </div>\n            </>\n          )}\n          {use12Hours && (\n            <div className={`${cls}-meridiem`}>\n              {state.meridiemUnits.map((unit) => (\n                <button\n                  aria-pressed={state.meridiem === unit.value}\n                  disabled={unit.disabled}\n                  key={unit.value}\n                  type=\"button\"\n                  className={clsx(\n                    `${cls}-segment`,\n                    state.meridiem === unit.value && `${cls}-segment-active`,\n                  )}\n                  onClick={() => state.onMeridiemChange(unit.value)}\n                >\n                  {unit.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n      <div className={`${cls}-body`}>\n        <ClockDial\n          ariaPrefix={hourView ? (locale.hour ?? 'Hour') : (locale.minute ?? 'Minute')}\n          enabledValues={hourView ? hourValues : minuteValues}\n          key={view}\n          label={hourView ? (locale.hours ?? 'Hours') : (locale.minutes ?? 'Minutes')}\n          numbers={hourView ? hourNumbers : minuteNumbers}\n          prefixCls={prefixCls}\n          selected={hourView ? hour : minute}\n          selectedAngle={hourView ? ((hour ?? 0) % 12) * 30 : (minute ?? 0) * 6}\n          selectedInner={hourView && !use12Hours && hour !== null && (hour === 0 || hour > 12)}\n          selectedOffTick={!hourView && minute !== null && minute % 5 !== 0}\n          pickAt={(angle, distance) =>\n            hourView ? pickHourAt(angle, distance) : pickMinuteAt(angle)\n          }\n          onPick={(value) => (hourView ? state.onHourChange(value) : state.onMinuteChange(value))}\n          onDone={() => {\n            if (hourView && showMinute) setView('minute');\n          }}\n        />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/TimeColumn.mjs

@@ -0,0 +1,100 @@
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../hooks/react.mjs";
+import { usePanelContext } from "../../context.mjs";
+import useScrollTo from "./useScrollTo.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
+const SCROLL_DELAY = 300;
+function flattenUnits(units) {
+	return units.map(({ value, label, disabled }) => [
+		value,
+		label,
+		disabled
+	].join(",")).join(";");
+}
+function TimeColumn(props) {
+	const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } = props;
+	const { prefixCls, cellRender, now, locale, classNames, styles } = usePanelContext();
+	const panelPrefixCls = `${prefixCls}-time-panel`;
+	const cellPrefixCls = `${prefixCls}-time-panel-cell`;
+	const ulRef = React$1.useRef(null);
+	const checkDelayRef = React$1.useRef(void 0);
+	const clearDelayCheck = () => {
+		clearTimeout(checkDelayRef.current);
+	};
+	const [syncScroll, stopScroll, isScrolling] = useScrollTo(ulRef, value ?? optionalValue);
+	useLayoutEffect$1(() => {
+		syncScroll();
+		clearDelayCheck();
+		return () => {
+			stopScroll();
+			clearDelayCheck();
+		};
+	}, [
+		value,
+		optionalValue,
+		flattenUnits(units)
+	]);
+	const onInternalScroll = (event) => {
+		clearDelayCheck();
+		const target = event.target;
+		if (!isScrolling() && changeOnScroll) checkDelayRef.current = setTimeout(() => {
+			const ul = ulRef.current;
+			const firstLiTop = ul.querySelector(`li`).offsetTop;
+			const liDistList = Array.from(ul.querySelectorAll(`li`)).map((li) => li.offsetTop - firstLiTop).map((top, index) => {
+				if (units[index].disabled) return Number.MAX_SAFE_INTEGER;
+				return Math.abs(top - target.scrollTop);
+			});
+			const minDist = Math.min(...liDistList);
+			const minDistIndex = liDistList.indexOf(minDist);
+			const targetUnit = units[minDistIndex];
+			if (targetUnit && !targetUnit.disabled) onChange(targetUnit.value);
+		}, SCROLL_DELAY);
+	};
+	const columnPrefixCls = `${panelPrefixCls}-column`;
+	return /* @__PURE__ */ jsx("ul", {
+		className: columnPrefixCls,
+		"data-type": type,
+		ref: ulRef,
+		onScroll: onInternalScroll,
+		children: units.map(({ label, value: unitValue, disabled }) => {
+			const inner = /* @__PURE__ */ jsx("div", {
+				className: `${cellPrefixCls}-inner`,
+				children: label
+			});
+			return /* @__PURE__ */ jsx("li", {
+				"data-value": unitValue,
+				style: styles.item,
+				className: clsx(cellPrefixCls, classNames.item, {
+					[`${cellPrefixCls}-selected`]: value === unitValue,
+					[`${cellPrefixCls}-disabled`]: disabled
+				}),
+				onClick: () => {
+					if (!disabled) onChange(unitValue);
+				},
+				onDoubleClick: () => {
+					if (!disabled && onDblClick) onDblClick();
+				},
+				onMouseEnter: () => {
+					onHover(unitValue);
+				},
+				onMouseLeave: () => {
+					onHover(null);
+				},
+				children: cellRender ? cellRender(unitValue, {
+					prefixCls,
+					originNode: inner,
+					today: now,
+					type: "time",
+					subType: type,
+					locale
+				}) : inner
+			}, unitValue);
+		})
+	});
+}
+//#endregion
+export { TimeColumn as default };
+
+//# sourceMappingURL=TimeColumn.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/TimeColumn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeColumn.mjs","names":["React"],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { useLayoutEffect } from '../../../hooks/react';\nimport { usePanelContext } from '../../context';\nimport useScrollTo from './useScrollTo';\n\nconst SCROLL_DELAY = 300;\n\nexport type Unit<ValueType = number | string> = {\n  label: string | number;\n  value: ValueType;\n  disabled?: boolean;\n};\n\nexport interface TimeUnitColumnProps<ValueType extends number | string = number | string> {\n  changeOnScroll?: boolean;\n  onChange: (value: ValueType) => void;\n  onDblClick?: VoidFunction;\n  onHover: (value: ValueType | null) => void;\n  optionalValue?: ValueType;\n  type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';\n  units: Unit<ValueType>[];\n  value: ValueType | null;\n}\n\n// Not use JSON.stringify to avoid dead loop\nfunction flattenUnits(units: Unit<string | number>[]) {\n  return units.map(({ value, label, disabled }) => [value, label, disabled].join(',')).join(';');\n}\n\nexport default function TimeColumn<\n  DateType extends object,\n  ValueType extends number | string = number | string,\n>(props: TimeUnitColumnProps<ValueType>) {\n  const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } =\n    props;\n\n  const { prefixCls, cellRender, now, locale, classNames, styles } = usePanelContext<DateType>();\n\n  const panelPrefixCls = `${prefixCls}-time-panel`;\n  const cellPrefixCls = `${prefixCls}-time-panel-cell`;\n\n  // ========================== Refs ==========================\n  const ulRef = React.useRef<HTMLUListElement>(null);\n\n  // ========================= Scroll =========================\n  const checkDelayRef = React.useRef<any>(undefined);\n\n  const clearDelayCheck = () => {\n    clearTimeout(checkDelayRef.current);\n  };\n\n  // ========================== Sync ==========================\n  const [syncScroll, stopScroll, isScrolling] = useScrollTo(ulRef, value ?? optionalValue);\n\n  // Effect sync value scroll\n  useLayoutEffect(() => {\n    syncScroll();\n    clearDelayCheck();\n\n    return () => {\n      stopScroll();\n      clearDelayCheck();\n    };\n  }, [value, optionalValue, flattenUnits(units)]);\n\n  // ========================= Change =========================\n  // Scroll event if sync onScroll\n  const onInternalScroll: React.UIEventHandler<HTMLUListElement> = (event) => {\n    clearDelayCheck();\n\n    const target = event.target as HTMLUListElement;\n\n    if (!isScrolling() && changeOnScroll) {\n      checkDelayRef.current = setTimeout(() => {\n        const ul = ulRef.current!;\n        const firstLiTop = ul.querySelector<HTMLLIElement>(`li`)!.offsetTop;\n        const liList = Array.from(ul.querySelectorAll<HTMLLIElement>(`li`));\n        const liTopList = liList.map((li) => li.offsetTop - firstLiTop);\n        const liDistList = liTopList.map((top, index) => {\n          if (units[index].disabled) {\n            return Number.MAX_SAFE_INTEGER;\n          }\n          return Math.abs(top - target.scrollTop);\n        });\n\n        // Find min distance index\n        const minDist = Math.min(...liDistList);\n        const minDistIndex = liDistList.indexOf(minDist);\n        const targetUnit = units[minDistIndex];\n        if (targetUnit && !targetUnit.disabled) {\n          onChange(targetUnit.value);\n        }\n      }, SCROLL_DELAY);\n    }\n  };\n\n  // ========================= Render =========================\n  const columnPrefixCls = `${panelPrefixCls}-column`;\n\n  return (\n    <ul className={columnPrefixCls} data-type={type} ref={ulRef} onScroll={onInternalScroll}>\n      {units.map(({ label, value: unitValue, disabled }) => {\n        const inner = <div className={`${cellPrefixCls}-inner`}>{label}</div>;\n\n        return (\n          <li\n            data-value={unitValue}\n            key={unitValue}\n            style={styles.item}\n            className={clsx(cellPrefixCls, classNames.item, {\n              [`${cellPrefixCls}-selected`]: value === unitValue,\n              [`${cellPrefixCls}-disabled`]: disabled,\n            })}\n            onClick={() => {\n              if (!disabled) {\n                onChange(unitValue);\n              }\n            }}\n            onDoubleClick={() => {\n              if (!disabled && onDblClick) {\n                onDblClick();\n              }\n            }}\n            onMouseEnter={() => {\n              onHover(unitValue);\n            }}\n            onMouseLeave={() => {\n              onHover(null);\n            }}\n          >\n            {cellRender\n              ? cellRender(unitValue, {\n                  prefixCls,\n                  originNode: inner,\n                  today: now,\n                  type: 'time',\n                  subType: type,\n                  locale,\n                })\n              : inner}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,eAAe;AAoBrB,SAAS,aAAa,OAAgC;CACpD,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO,eAAe;EAAC;EAAO;EAAO;CAAQ,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG;AAC/F;AAEA,SAAwB,WAGtB,OAAuC;CACvC,MAAM,EAAE,OAAO,OAAO,eAAe,MAAM,UAAU,SAAS,YAAY,mBACxE;CAEF,MAAM,EAAE,WAAW,YAAY,KAAK,QAAQ,YAAY,WAAW,gBAA0B;CAE7F,MAAM,iBAAiB,GAAG,UAAU;CACpC,MAAM,gBAAgB,GAAG,UAAU;CAGnC,MAAM,QAAQA,QAAM,OAAyB,IAAI;CAGjD,MAAM,gBAAgBA,QAAM,OAAY,KAAA,CAAS;CAEjD,MAAM,wBAAwB;EAC5B,aAAa,cAAc,OAAO;CACpC;CAGA,MAAM,CAAC,YAAY,YAAY,eAAe,YAAY,OAAO,SAAS,aAAa;CAGvF,wBAAsB;EACpB,WAAW;EACX,gBAAgB;EAEhB,aAAa;GACX,WAAW;GACX,gBAAgB;EAClB;CACF,GAAG;EAAC;EAAO;EAAe,aAAa,KAAK;CAAC,CAAC;CAI9C,MAAM,oBAA4D,UAAU;EAC1E,gBAAgB;EAEhB,MAAM,SAAS,MAAM;EAErB,IAAI,CAAC,YAAY,KAAK,gBACpB,cAAc,UAAU,iBAAiB;GACvC,MAAM,KAAK,MAAM;GACjB,MAAM,aAAa,GAAG,cAA6B,IAAI,CAAC,CAAE;GAG1D,MAAM,aAFS,MAAM,KAAK,GAAG,iBAAgC,IAAI,CAC1C,CAAC,CAAC,KAAK,OAAO,GAAG,YAAY,UACzB,CAAC,CAAC,KAAK,KAAK,UAAU;IAC/C,IAAI,MAAM,MAAM,CAAC,UACf,OAAO,OAAO;IAEhB,OAAO,KAAK,IAAI,MAAM,OAAO,SAAS;GACxC,CAAC;GAGD,MAAM,UAAU,KAAK,IAAI,GAAG,UAAU;GACtC,MAAM,eAAe,WAAW,QAAQ,OAAO;GAC/C,MAAM,aAAa,MAAM;GACzB,IAAI,cAAc,CAAC,WAAW,UAC5B,SAAS,WAAW,KAAK;EAE7B,GAAG,YAAY;CAEnB;CAGA,MAAM,kBAAkB,GAAG,eAAe;CAE1C,OACE,oBAAC,MAAD;EAAI,WAAW;EAAiB,aAAW;EAAM,KAAK;EAAO,UAAU;EACpE,UAAA,MAAM,KAAK,EAAE,OAAO,OAAO,WAAW,eAAe;GACpD,MAAM,QAAQ,oBAAC,OAAD;IAAK,WAAW,GAAG,cAAc;IAAU,UAAA;GAAW,CAAA;GAEpE,OACE,oBAAC,MAAD;IACE,cAAY;IAEZ,OAAO,OAAO;IACd,WAAW,KAAK,eAAe,WAAW,MAAM;MAC7C,GAAG,cAAc,aAAa,UAAU;MACxC,GAAG,cAAc,aAAa;IACjC,CAAC;IACD,eAAe;KACb,IAAI,CAAC,UACH,SAAS,SAAS;IAEtB;IACA,qBAAqB;KACnB,IAAI,CAAC,YAAY,YACf,WAAW;IAEf;IACA,oBAAoB;KAClB,QAAQ,SAAS;IACnB;IACA,oBAAoB;KAClB,QAAQ,IAAI;IACd;IAEC,UAAA,aACG,WAAW,WAAW;KACpB;KACA,YAAY;KACZ,OAAO;KACP,MAAM;KACN,SAAS;KACT;IACF,CAAC,IACD;GACF,GAjCG,SAiCH;EAER,CAAC;CACC,CAAA;AAER"}

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/index.mjs

@@ -0,0 +1,71 @@
+import { PickerHackContext, usePanelContext } from "../../context.mjs";
+import useTimeState from "./useTimeState.mjs";
+import TimeColumn from "./TimeColumn.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/index.tsx
+function TimePanelBody(props) {
+	const { showHour, showMinute, showSecond, showMillisecond, use12Hours: showMeridiem, changeOnScroll } = props;
+	const { prefixCls, classNames, styles } = usePanelContext();
+	const { onCellDblClick } = React$1.use(PickerHackContext);
+	const { hour, hourUnits, meridiem, meridiemUnits, millisecond, millisecondUnits, minute, minuteUnits, onHourChange, onHourHover, onMeridiemChange, onMeridiemHover, onMillisecondChange, onMillisecondHover, onMinuteChange, onMinuteHover, onSecondChange, onSecondHover, pickerHour, pickerMillisecond, pickerMinute, pickerSecond, second, secondUnits } = useTimeState(props);
+	const sharedColumnProps = {
+		onDblClick: onCellDblClick,
+		changeOnScroll
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`${prefixCls}-content`, classNames.content),
+		style: styles.content,
+		children: [
+			showHour && /* @__PURE__ */ jsx(TimeColumn, {
+				optionalValue: pickerHour,
+				type: "hour",
+				units: hourUnits,
+				value: hour,
+				onChange: onHourChange,
+				onHover: onHourHover,
+				...sharedColumnProps
+			}),
+			showMinute && /* @__PURE__ */ jsx(TimeColumn, {
+				optionalValue: pickerMinute,
+				type: "minute",
+				units: minuteUnits,
+				value: minute,
+				onChange: onMinuteChange,
+				onHover: onMinuteHover,
+				...sharedColumnProps
+			}),
+			showSecond && /* @__PURE__ */ jsx(TimeColumn, {
+				optionalValue: pickerSecond,
+				type: "second",
+				units: secondUnits,
+				value: second,
+				onChange: onSecondChange,
+				onHover: onSecondHover,
+				...sharedColumnProps
+			}),
+			showMillisecond && /* @__PURE__ */ jsx(TimeColumn, {
+				optionalValue: pickerMillisecond,
+				type: "millisecond",
+				units: millisecondUnits,
+				value: millisecond,
+				onChange: onMillisecondChange,
+				onHover: onMillisecondHover,
+				...sharedColumnProps
+			}),
+			showMeridiem && /* @__PURE__ */ jsx(TimeColumn, {
+				type: "meridiem",
+				units: meridiemUnits,
+				value: meridiem,
+				onChange: onMeridiemChange,
+				onHover: onMeridiemHover,
+				...sharedColumnProps
+			})
+		]
+	});
+}
+//#endregion
+export { TimePanelBody as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["React"],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/index.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport type { SharedPanelProps, SharedTimeProps } from '../../../interface';\nimport { PickerHackContext, usePanelContext } from '../../context';\nimport TimeColumn from './TimeColumn';\nimport useTimeState from './useTimeState';\n\nexport type TimePanelBodyProps<DateType extends object = any> = SharedPanelProps<DateType>;\n\nexport default function TimePanelBody<DateType extends object = any>(\n  props: SharedTimeProps<DateType>,\n) {\n  const {\n    showHour,\n    showMinute,\n    showSecond,\n    showMillisecond,\n    use12Hours: showMeridiem,\n    changeOnScroll,\n  } = props;\n\n  const { prefixCls, classNames, styles } = usePanelContext<DateType>();\n  const { onCellDblClick } = React.use(PickerHackContext);\n\n  const {\n    hour,\n    hourUnits,\n    meridiem,\n    meridiemUnits,\n    millisecond,\n    millisecondUnits,\n    minute,\n    minuteUnits,\n    onHourChange,\n    onHourHover,\n    onMeridiemChange,\n    onMeridiemHover,\n    onMillisecondChange,\n    onMillisecondHover,\n    onMinuteChange,\n    onMinuteHover,\n    onSecondChange,\n    onSecondHover,\n    pickerHour,\n    pickerMillisecond,\n    pickerMinute,\n    pickerSecond,\n    second,\n    secondUnits,\n  } = useTimeState(props);\n\n  // ========================= Render =========================\n  const sharedColumnProps = {\n    onDblClick: onCellDblClick,\n    changeOnScroll,\n  };\n\n  return (\n    <div className={clsx(`${prefixCls}-content`, classNames.content)} style={styles.content}>\n      {showHour && (\n        <TimeColumn\n          optionalValue={pickerHour}\n          type=\"hour\"\n          units={hourUnits}\n          value={hour}\n          onChange={onHourChange}\n          onHover={onHourHover}\n          {...sharedColumnProps}\n        />\n      )}\n      {showMinute && (\n        <TimeColumn\n          optionalValue={pickerMinute}\n          type=\"minute\"\n          units={minuteUnits}\n          value={minute}\n          onChange={onMinuteChange}\n          onHover={onMinuteHover}\n          {...sharedColumnProps}\n        />\n      )}\n      {showSecond && (\n        <TimeColumn\n          optionalValue={pickerSecond}\n          type=\"second\"\n          units={secondUnits}\n          value={second}\n          onChange={onSecondChange}\n          onHover={onSecondHover}\n          {...sharedColumnProps}\n        />\n      )}\n      {showMillisecond && (\n        <TimeColumn\n          optionalValue={pickerMillisecond}\n          type=\"millisecond\"\n          units={millisecondUnits}\n          value={millisecond}\n          onChange={onMillisecondChange}\n          onHover={onMillisecondHover}\n          {...sharedColumnProps}\n        />\n      )}\n      {showMeridiem && (\n        <TimeColumn\n          type=\"meridiem\"\n          units={meridiemUnits}\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onHover={onMeridiemHover}\n          {...sharedColumnProps}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAwB,cACtB,OACA;CACA,MAAM,EACJ,UACA,YACA,YACA,iBACA,YAAY,cACZ,mBACE;CAEJ,MAAM,EAAE,WAAW,YAAY,WAAW,gBAA0B;CACpE,MAAM,EAAE,mBAAmBA,QAAM,IAAI,iBAAiB;CAEtD,MAAM,EACJ,MACA,WACA,UACA,eACA,aACA,kBACA,QACA,aACA,cACA,aACA,kBACA,iBACA,qBACA,oBACA,gBACA,eACA,gBACA,eACA,YACA,mBACA,cACA,cACA,QACA,gBACE,aAAa,KAAK;CAGtB,MAAM,oBAAoB;EACxB,YAAY;EACZ;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,GAAG,UAAU,WAAW,WAAW,OAAO;EAAG,OAAO,OAAO;EAAhF,UAAA;GACG,YACC,oBAAC,YAAD;IACE,eAAe;IACf,MAAK;IACL,OAAO;IACP,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAI;GACL,CAAA;GAEF,cACC,oBAAC,YAAD;IACE,eAAe;IACf,MAAK;IACL,OAAO;IACP,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAI;GACL,CAAA;GAEF,cACC,oBAAC,YAAD;IACE,eAAe;IACf,MAAK;IACL,OAAO;IACP,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAI;GACL,CAAA;GAEF,mBACC,oBAAC,YAAD;IACE,eAAe;IACf,MAAK;IACL,OAAO;IACP,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAI;GACL,CAAA;GAEF,gBACC,oBAAC,YAAD;IACE,MAAK;IACL,OAAO;IACP,OAAO;IACP,UAAU;IACV,SAAS;IACT,GAAI;GACL,CAAA;EAEA;;AAET"}

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/useScrollTo.mjs

@@ -0,0 +1,62 @@
+import { useEvent } from "../../../hooks/react.mjs";
+import { isVisible, raf } from "../../../utils/common.mjs";
+import * as React$1 from "react";
+//#region src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts
+const SPEED_PTG = 1 / 3;
+function useScrollTo(ulRef, value) {
+	const scrollingRef = React$1.useRef(false);
+	const scrollRafRef = React$1.useRef(null);
+	const scrollDistRef = React$1.useRef(null);
+	const isScrolling = () => scrollingRef.current;
+	const stopScroll = () => {
+		raf.cancel(scrollRafRef.current);
+		scrollingRef.current = false;
+	};
+	const scrollRafTimesRef = React$1.useRef(void 0);
+	const startScroll = () => {
+		const ul = ulRef.current;
+		scrollDistRef.current = null;
+		scrollRafTimesRef.current = 0;
+		if (ul) {
+			const targetLi = ul.querySelector(`[data-value="${value}"]`);
+			const firstLi = ul.querySelector(`li`);
+			const doScroll = () => {
+				stopScroll();
+				scrollingRef.current = true;
+				scrollRafTimesRef.current += 1;
+				const { scrollTop: currentTop } = ul;
+				const firstLiTop = firstLi.offsetTop;
+				const targetLiTop = targetLi.offsetTop;
+				const targetTop = targetLiTop - firstLiTop;
+				if (targetLiTop === 0 && targetLi !== firstLi || !isVisible(ul)) {
+					if (scrollRafTimesRef.current <= 5) scrollRafRef.current = raf(doScroll);
+					return;
+				}
+				const nextTop = currentTop + (targetTop - currentTop) * SPEED_PTG;
+				const dist = Math.abs(targetTop - nextTop);
+				if (scrollDistRef.current !== null && scrollDistRef.current < dist) {
+					stopScroll();
+					return;
+				}
+				scrollDistRef.current = dist;
+				if (dist <= 1) {
+					ul.scrollTop = targetTop;
+					stopScroll();
+					return;
+				}
+				ul.scrollTop = nextTop;
+				scrollRafRef.current = raf(doScroll);
+			};
+			if (targetLi && firstLi) doScroll();
+		}
+	};
+	return [
+		useEvent(startScroll),
+		stopScroll,
+		isScrolling
+	];
+}
+//#endregion
+export { useScrollTo as default };
+
+//# sourceMappingURL=useScrollTo.mjs.map

package/es/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/useScrollTo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollTo.mjs","names":["React"],"sources":["../../../../../../src/DatePicker/core/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useEvent } from '../../../hooks/react';\nimport { isVisible, raf } from '../../../utils/common';\n\nconst SPEED_PTG = 1 / 3;\n\nexport default function useScrollTo(\n  ulRef: React.RefObject<HTMLUListElement | null>,\n  value: number | string | null | undefined,\n): [syncScroll: VoidFunction, clearScroll: VoidFunction, isScrolling: () => boolean] {\n  // ========================= Scroll =========================\n  const scrollingRef = React.useRef<boolean>(false);\n  const scrollRafRef = React.useRef<number>(null);\n  const scrollDistRef = React.useRef<number>(null);\n\n  const isScrolling = () => scrollingRef.current;\n\n  const stopScroll = () => {\n    raf.cancel(scrollRafRef.current!);\n    scrollingRef.current = false;\n  };\n\n  const scrollRafTimesRef = React.useRef<number | undefined>(undefined);\n\n  const startScroll = () => {\n    const ul = ulRef.current;\n    scrollDistRef.current = null;\n    scrollRafTimesRef.current = 0;\n\n    if (ul) {\n      const targetLi = ul.querySelector<HTMLLIElement>(`[data-value=\"${value}\"]`);\n      const firstLi = ul.querySelector<HTMLLIElement>(`li`);\n\n      const doScroll = () => {\n        stopScroll();\n        scrollingRef.current = true;\n        scrollRafTimesRef.current! += 1;\n\n        const { scrollTop: currentTop } = ul;\n\n        const firstLiTop = firstLi!.offsetTop;\n        const targetLiTop = targetLi!.offsetTop;\n        const targetTop = targetLiTop - firstLiTop;\n\n        // Wait for element exist. 5 frames is enough\n        if ((targetLiTop === 0 && targetLi !== firstLi) || !isVisible(ul)) {\n          if (scrollRafTimesRef.current! <= 5) {\n            scrollRafRef.current = raf(doScroll);\n          }\n          return;\n        }\n\n        const nextTop = currentTop + (targetTop - currentTop) * SPEED_PTG;\n        const dist = Math.abs(targetTop - nextTop);\n\n        // Break if dist get larger, which means user is scrolling\n        if (scrollDistRef.current !== null && scrollDistRef.current < dist) {\n          stopScroll();\n          return;\n        }\n        scrollDistRef.current = dist;\n\n        // Stop when dist is less than 1\n        if (dist <= 1) {\n          ul.scrollTop = targetTop;\n          stopScroll();\n          return;\n        }\n\n        // IE not support `scrollTo`\n        ul.scrollTop = nextTop;\n\n        scrollRafRef.current = raf(doScroll);\n      };\n\n      if (targetLi && firstLi) {\n        doScroll();\n      }\n    }\n  };\n\n  // ======================== Trigger =========================\n  const syncScroll = useEvent(startScroll);\n\n  return [syncScroll, stopScroll, isScrolling];\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY,IAAI;AAEtB,SAAwB,YACtB,OACA,OACmF;CAEnF,MAAM,eAAeA,QAAM,OAAgB,KAAK;CAChD,MAAM,eAAeA,QAAM,OAAe,IAAI;CAC9C,MAAM,gBAAgBA,QAAM,OAAe,IAAI;CAE/C,MAAM,oBAAoB,aAAa;CAEvC,MAAM,mBAAmB;EACvB,IAAI,OAAO,aAAa,OAAQ;EAChC,aAAa,UAAU;CACzB;CAEA,MAAM,oBAAoBA,QAAM,OAA2B,KAAA,CAAS;CAEpE,MAAM,oBAAoB;EACxB,MAAM,KAAK,MAAM;EACjB,cAAc,UAAU;EACxB,kBAAkB,UAAU;EAE5B,IAAI,IAAI;GACN,MAAM,WAAW,GAAG,cAA6B,gBAAgB,MAAM,GAAG;GAC1E,MAAM,UAAU,GAAG,cAA6B,IAAI;GAEpD,MAAM,iBAAiB;IACrB,WAAW;IACX,aAAa,UAAU;IACvB,kBAAkB,WAAY;IAE9B,MAAM,EAAE,WAAW,eAAe;IAElC,MAAM,aAAa,QAAS;IAC5B,MAAM,cAAc,SAAU;IAC9B,MAAM,YAAY,cAAc;IAGhC,IAAK,gBAAgB,KAAK,aAAa,WAAY,CAAC,UAAU,EAAE,GAAG;KACjE,IAAI,kBAAkB,WAAY,GAChC,aAAa,UAAU,IAAI,QAAQ;KAErC;IACF;IAEA,MAAM,UAAU,cAAc,YAAY,cAAc;IACxD,MAAM,OAAO,KAAK,IAAI,YAAY,OAAO;IAGzC,IAAI,cAAc,YAAY,QAAQ,cAAc,UAAU,MAAM;KAClE,WAAW;KACX;IACF;IACA,cAAc,UAAU;IAGxB,IAAI,QAAQ,GAAG;KACb,GAAG,YAAY;KACf,WAAW;KACX;IACF;IAGA,GAAG,YAAY;IAEf,aAAa,UAAU,IAAI,QAAQ;GACrC;GAEA,IAAI,YAAY,SACd,SAAS;EAEb;CACF;CAKA,OAAO;EAFY,SAAS,WAEX;EAAG;EAAY;CAAW;AAC7C"}