@tiny-design/react 1.3.0 → 1.5.0

package/lib/style/base.css

@@ -27,19 +27,26 @@
   --ty-color-fill-secondary: #f5f5f5;
   --ty-color-fill-tertiary: #f0f0f0;
   --ty-color-success: #52c41a;
+  --ty-color-success-hover: #73d13d;
+  --ty-color-success-active: #389e0d;
   --ty-color-success-bg: #f6ffed;
   --ty-color-success-border: #b7eb8f;
   --ty-color-success-text: #49b10e;
   --ty-color-warning: #ff9800;
+  --ty-color-warning-hover: #ffad33;
+  --ty-color-warning-active: #e68a00;
   --ty-color-warning-bg: #fffbe6;
   --ty-color-warning-border: #ffe58f;
   --ty-color-warning-text: #d48806;
   --ty-color-danger: #f44336;
+  --ty-color-danger-hover: #ff7875;
+  --ty-color-danger-active: #cf1322;
   --ty-color-danger-bg: #fff1f0;
   --ty-color-danger-border: #ffa39e;
   --ty-color-danger-text: #cf1322;
-  --ty-color-danger-hover: #ff7875;
   --ty-color-info: #1890ff;
+  --ty-color-info-hover: #40a9ff;
+  --ty-color-info-active: #096dd9;
   --ty-color-info-bg: #e6f7ff;
   --ty-color-info-border: #91d5ff;
   --ty-color-info-text: #096dd9;
@@ -263,6 +270,25 @@
   --ty-calendar-bg: #fff;
   --ty-calendar-border: #e9ecef;
   --ty-calendar-hover: #f6f9fc;
+  --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+  --ty-font-size-base: 1rem;
+  --ty-font-size-sm: 0.875rem;
+  --ty-font-size-lg: 1.25rem;
+  --ty-font-weight: 400;
+  --ty-line-height-base: 1.5;
+  --ty-headings-font-weight: 500;
+  --ty-h1-font-size: 2.5rem;
+  --ty-h2-font-size: 2rem;
+  --ty-h3-font-size: 1.75rem;
+  --ty-h4-font-size: 1.5rem;
+  --ty-h5-font-size: 1.25rem;
+  --ty-h6-font-size: 1rem;
+  --ty-border-radius: 2px;
+  --ty-height-sm: 24px;
+  --ty-height-md: 32px;
+  --ty-height-lg: 42px;
+  --ty-spacer: 1rem;
 }
 
 html[data-tiny-theme=dark] {
@@ -294,19 +320,26 @@ html[data-tiny-theme=dark] {
   --ty-color-fill-secondary: #2a2a2a;
   --ty-color-fill-tertiary: #303030;
   --ty-color-success: #49aa19;
+  --ty-color-success-hover: #6abe39;
+  --ty-color-success-active: #3c8c14;
   --ty-color-success-bg: #162312;
   --ty-color-success-border: #274916;
   --ty-color-success-text: #6abe39;
   --ty-color-warning: #d89614;
+  --ty-color-warning-hover: #e8b339;
+  --ty-color-warning-active: #b37a10;
   --ty-color-warning-bg: #2b2111;
   --ty-color-warning-border: #594214;
   --ty-color-warning-text: #e8b339;
   --ty-color-danger: #d32029;
+  --ty-color-danger-hover: #e84749;
+  --ty-color-danger-active: #ab1a20;
   --ty-color-danger-bg: #2a1215;
   --ty-color-danger-border: #58181c;
   --ty-color-danger-text: #e84749;
-  --ty-color-danger-hover: #e84749;
   --ty-color-info: #177ddc;
+  --ty-color-info-hover: #3c9ae8;
+  --ty-color-info-active: #1268b3;
   --ty-color-info-bg: #111d2c;
   --ty-color-info-border: #15395b;
   --ty-color-info-text: #3c9ae8;
@@ -530,6 +563,25 @@ html[data-tiny-theme=dark] {
   --ty-calendar-bg: #1f1f1f;
   --ty-calendar-border: #363636;
   --ty-calendar-hover: #2a2a2a;
+  --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+  --ty-font-size-base: 1rem;
+  --ty-font-size-sm: 0.875rem;
+  --ty-font-size-lg: 1.25rem;
+  --ty-font-weight: 400;
+  --ty-line-height-base: 1.5;
+  --ty-headings-font-weight: 500;
+  --ty-h1-font-size: 2.5rem;
+  --ty-h2-font-size: 2rem;
+  --ty-h3-font-size: 1.75rem;
+  --ty-h4-font-size: 1.5rem;
+  --ty-h5-font-size: 1.25rem;
+  --ty-h6-font-size: 1rem;
+  --ty-border-radius: 2px;
+  --ty-height-sm: 24px;
+  --ty-height-md: 32px;
+  --ty-height-lg: 42px;
+  --ty-spacer: 1rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -562,19 +614,26 @@ html[data-tiny-theme=dark] {
     --ty-color-fill-secondary: #2a2a2a;
     --ty-color-fill-tertiary: #303030;
     --ty-color-success: #49aa19;
+    --ty-color-success-hover: #6abe39;
+    --ty-color-success-active: #3c8c14;
     --ty-color-success-bg: #162312;
     --ty-color-success-border: #274916;
     --ty-color-success-text: #6abe39;
     --ty-color-warning: #d89614;
+    --ty-color-warning-hover: #e8b339;
+    --ty-color-warning-active: #b37a10;
     --ty-color-warning-bg: #2b2111;
     --ty-color-warning-border: #594214;
     --ty-color-warning-text: #e8b339;
     --ty-color-danger: #d32029;
+    --ty-color-danger-hover: #e84749;
+    --ty-color-danger-active: #ab1a20;
     --ty-color-danger-bg: #2a1215;
     --ty-color-danger-border: #58181c;
     --ty-color-danger-text: #e84749;
-    --ty-color-danger-hover: #e84749;
     --ty-color-info: #177ddc;
+    --ty-color-info-hover: #3c9ae8;
+    --ty-color-info-active: #1268b3;
     --ty-color-info-bg: #111d2c;
     --ty-color-info-border: #15395b;
     --ty-color-info-text: #3c9ae8;
@@ -798,6 +857,25 @@ html[data-tiny-theme=dark] {
     --ty-calendar-bg: #1f1f1f;
     --ty-calendar-border: #363636;
     --ty-calendar-hover: #2a2a2a;
+    --ty-font-family: -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    --ty-font-family-monospace: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
+    --ty-font-size-base: 1rem;
+    --ty-font-size-sm: 0.875rem;
+    --ty-font-size-lg: 1.25rem;
+    --ty-font-weight: 400;
+    --ty-line-height-base: 1.5;
+    --ty-headings-font-weight: 500;
+    --ty-h1-font-size: 2.5rem;
+    --ty-h2-font-size: 2rem;
+    --ty-h3-font-size: 1.75rem;
+    --ty-h4-font-size: 1.5rem;
+    --ty-h5-font-size: 1.25rem;
+    --ty-h6-font-size: 1rem;
+    --ty-border-radius: 2px;
+    --ty-height-sm: 24px;
+    --ty-height-md: 32px;
+    --ty-height-lg: 42px;
+    --ty-spacer: 1rem;
   }
 }
 /* stylelint-disable scss/comment-no-empty */

package/lib/table/style/_index.scss

@@ -2,7 +2,7 @@
 
 .#{$prefix}-table {
   color: var(--ty-color-text, #{$gray-800});
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   &__wrapper {
     overflow-x: auto;
@@ -24,8 +24,8 @@
 
   // Sizes
   &_sm &__cell {
-    padding: 8px 8px;
-    font-size: $font-size-sm;
+    padding: 8px;
+    font-size: var(--ty-font-size-sm);
   }
 
   &_md &__cell {
@@ -33,8 +33,8 @@
   }
 
   &_lg &__cell {
-    padding: 16px 16px;
-    font-size: $font-size-lg;
+    padding: 16px;
+    font-size: var(--ty-font-size-lg);
   }
 
   // Sticky header for virtual scroll
@@ -99,7 +99,7 @@
     }
 
     &_selected {
-      background: var(--ty-table-selected-bg, rgba(110, 65, 191, 0.06));
+      background: var(--ty-table-selected-bg, rgb(110 65 191 / 6%));
     }
   }
 

package/lib/table/style/index.css

@@ -1,6 +1,6 @@
 .ty-table {
   color: var(--ty-color-text, #32325d);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-table__wrapper {
   overflow-x: auto;
@@ -17,15 +17,15 @@
   border: 1px solid var(--ty-table-border, #dee2e6);
 }
 .ty-table_sm .ty-table__cell {
-  padding: 8px 8px;
-  font-size: 0.875rem;
+  padding: 8px;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-table_md .ty-table__cell {
   padding: 12px 16px;
 }
 .ty-table_lg .ty-table__cell {
-  padding: 16px 16px;
-  font-size: 1.25rem;
+  padding: 16px;
+  font-size: var(--ty-font-size-lg);
 }
 .ty-table__thead_sticky {
   position: sticky;

package/lib/tag/style/_index.scss

@@ -102,6 +102,30 @@
     background: var(--ty-tag-purple-bg);
     border-color: var(--ty-tag-purple-border);
   }
+
+  &_success {
+    color: var(--ty-color-success);
+    background: var(--ty-color-success-bg);
+    border-color: var(--ty-color-success-border);
+  }
+
+  &_info {
+    color: var(--ty-color-info);
+    background: var(--ty-color-info-bg);
+    border-color: var(--ty-color-info-border);
+  }
+
+  &_warning {
+    color: var(--ty-color-warning);
+    background: var(--ty-color-warning-bg);
+    border-color: var(--ty-color-warning-border);
+  }
+
+  &_danger {
+    color: var(--ty-color-danger);
+    background: var(--ty-color-danger-bg);
+    border-color: var(--ty-color-danger-border);
+  }
 }
 
 .#{$prefix}-checkable-tag {

package/lib/tag/style/index.css

@@ -7,7 +7,7 @@
   padding: 3px 7px;
   font-size: 12px;
   border: 1px solid var(--ty-tag-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text);
   background: var(--ty-tag-bg);
 }
@@ -88,6 +88,26 @@
   background: var(--ty-tag-purple-bg);
   border-color: var(--ty-tag-purple-border);
 }
+.ty-tag_success {
+  color: var(--ty-color-success);
+  background: var(--ty-color-success-bg);
+  border-color: var(--ty-color-success-border);
+}
+.ty-tag_info {
+  color: var(--ty-color-info);
+  background: var(--ty-color-info-bg);
+  border-color: var(--ty-color-info-border);
+}
+.ty-tag_warning {
+  color: var(--ty-color-warning);
+  background: var(--ty-color-warning-bg);
+  border-color: var(--ty-color-warning-border);
+}
+.ty-tag_danger {
+  color: var(--ty-color-danger);
+  background: var(--ty-color-danger-bg);
+  border-color: var(--ty-color-danger-border);
+}
 
 .ty-checkable-tag {
   background-color: var(--ty-tag-checkable-bg);

package/lib/tag/types.d.ts

@@ -8,8 +8,9 @@ interface CheckableTagProps extends BaseProps {
   onChange?: (checked: boolean, e: React.MouseEvent) => void;
   children?: React.ReactNode;
 }
+type StatusColor = 'success' | 'warning' | 'info' | 'danger';
 interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  color?: string;
+  color?: string | StatusColor;
   closable?: boolean;
   onClose?: React.MouseEventHandler;
   onClick?: React.MouseEventHandler;

package/lib/tag/types.js

@@ -1,4 +1,3 @@
-//#region src/tag/types.ts
 const PresetColors = [
 	"magenta",
 	"red",
@@ -10,7 +9,13 @@ const PresetColors = [
 	"cyan",
 	"blue",
 	"geekblue",
-	"purple"
+	"purple",
+	...[
+		"success",
+		"info",
+		"warning",
+		"danger"
+	]
 ];
 //#endregion
 exports.PresetColors = PresetColors;

package/lib/tag/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/tag/types.ts"],"sourcesContent":["import React from 'react';\nimport { BaseProps } from '../_utils/props';\n\nexport interface CheckableTagProps extends BaseProps {\n  defaultChecked?: boolean;\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.MouseEvent) => void;\n  children?: React.ReactNode;\n}\n\nexport const PresetColors = [\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n];\n\nexport interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {\n  color?: string;\n  closable?: boolean;\n  onClose?: React.MouseEventHandler;\n  onClick?: React.MouseEventHandler;\n  defaultVisible?: boolean;\n  visible?: boolean;\n  children?: React.ReactNode;\n}\n"],"mappings":";AAUA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/tag/types.ts"],"sourcesContent":["import React from 'react';\nimport { BaseProps } from '../_utils/props';\n\nexport interface CheckableTagProps extends BaseProps {\n  defaultChecked?: boolean;\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.MouseEvent) => void;\n  children?: React.ReactNode;\n}\n\nexport type StatusColor = 'success' | 'warning' | 'info' | 'danger';\n\nexport const StatusColors: StatusColor[] = ['success', 'info', 'warning', 'danger'];\n\nexport const PresetColors = [\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n  ...StatusColors,\n];\n\nexport interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {\n  color?: string | StatusColor;\n  closable?: boolean;\n  onClose?: React.MouseEventHandler;\n  onClick?: React.MouseEventHandler;\n  defaultVisible?: boolean;\n  visible?: boolean;\n  children?: React.ReactNode;\n}\n"],"mappings":"AAcA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAdyC;EAAC;EAAW;EAAQ;EAAW;EAAS;CAelF"}

package/lib/textarea/style/index.css

@@ -6,8 +6,8 @@
   border: 1px solid var(--ty-input-border);
   transition: all 0.3s;
   outline: 0;
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 }
 .ty-textarea:hover {

package/lib/time-picker/style/_index.scss

@@ -5,7 +5,7 @@ $tp: #{$prefix}-time-picker;
 .#{$tp} {
   display: inline-flex;
   position: relative;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   // ---- Input ----
   &__input {
@@ -29,6 +29,10 @@ $tp: #{$prefix}-time-picker;
     box-shadow: var(--ty-input-focus-shadow);
   }
 
+  &_pending &__input-field {
+    color: var(--ty-color-text-tertiary);
+  }
+
   &__input-field {
     flex: 1;
     border: none;
@@ -191,6 +195,15 @@ $tp: #{$prefix}-time-picker;
       }
     }
 
+    &_pending {
+      background: var(--ty-color-primary-bg);
+      color: var(--ty-color-text-tertiary);
+
+      &:hover {
+        background: var(--ty-color-primary-bg-hover);
+      }
+    }
+
     &_disabled {
       color: var(--ty-color-text-quaternary);
       cursor: not-allowed;

package/lib/time-picker/style/index.css

@@ -1,7 +1,7 @@
 .ty-time-picker {
   display: inline-flex;
   position: relative;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-time-picker__input {
   display: inline-flex;
@@ -21,6 +21,9 @@
   border-color: var(--ty-color-primary);
   box-shadow: var(--ty-input-focus-shadow);
 }
+.ty-time-picker_pending .ty-time-picker__input-field {
+  color: var(--ty-color-text-tertiary);
+}
 .ty-time-picker__input-field {
   flex: 1;
   border: none;
@@ -157,6 +160,13 @@
 .ty-time-picker__cell_selected:hover {
   background: var(--ty-color-primary-bg-hover);
 }
+.ty-time-picker__cell_pending {
+  background: var(--ty-color-primary-bg);
+  color: var(--ty-color-text-tertiary);
+}
+.ty-time-picker__cell_pending:hover {
+  background: var(--ty-color-primary-bg-hover);
+}
 .ty-time-picker__cell_disabled {
   color: var(--ty-color-text-quaternary);
   cursor: not-allowed;

package/lib/time-picker/time-panel.js

@@ -6,14 +6,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/time-picker/time-panel.tsx
 const ITEM_HEIGHT = 28;
 const TimePanel = (props) => {
-	const { prefixCls, value, items, disabledItems = [], loop = false, onChange } = props;
+	const { prefixCls, value, pendingValue, items, disabledItems = [], loop = false, onChange } = props;
 	const panelRef = (0, react.useRef)(null);
 	const itemRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const isResetting = (0, react.useRef)(false);
 	const clickedRef = (0, react.useRef)(false);
 	const scrollToItemRef = (0, react.useRef)(null);
 	const oneGroupHeight = items.length * ITEM_HEIGHT;
+	const displayValue = pendingValue ?? value;
 	scrollToItemRef.current = (val) => {
+		if (val === null) return;
 		const panel = panelRef.current;
 		if (!panel) return;
 		if (loop) {
@@ -41,8 +43,8 @@ const TimePanel = (props) => {
 			clickedRef.current = false;
 			return;
 		}
-		scrollToItemRef.current?.(value);
-	}, [value]);
+		scrollToItemRef.current?.(displayValue);
+	}, [displayValue]);
 	const handleScroll = (0, react.useCallback)(() => {
 		if (!loop || isResetting.current) return;
 		const panel = panelRef.current;
@@ -64,6 +66,16 @@ const TimePanel = (props) => {
 		clickedRef.current = true;
 		onChange(num);
 	};
+	const isPending = pendingValue !== null;
+	const isCommitted = value !== null && pendingValue === null;
+	const cellCls = (num) => {
+		const isSelected = num === displayValue;
+		return (0, classnames.default)(`${prefixCls}__cell`, {
+			[`${prefixCls}__cell_selected`]: isSelected && isCommitted,
+			[`${prefixCls}__cell_pending`]: isSelected && isPending,
+			[`${prefixCls}__cell_disabled`]: disabledItems.includes(num)
+		});
+	};
 	if (loop) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `${prefixCls}__column`,
 		ref: panelRef,
@@ -74,17 +86,11 @@ const TimePanel = (props) => {
 				0,
 				1,
 				2
-			].map((copyIdx) => items.map((num, i) => {
-				const isDisabled = disabledItems.includes(num);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					className: (0, classnames.default)(`${prefixCls}__cell`, {
-						[`${prefixCls}__cell_selected`]: num === value,
-						[`${prefixCls}__cell_disabled`]: isDisabled
-					}),
-					onClick: () => handleClick(num),
-					children: String(num).padStart(2, "0")
-				}, `c${copyIdx}-${i}`);
-			}))
+			].map((copyIdx) => items.map((num, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: cellCls(num),
+				onClick: () => handleClick(num),
+				children: String(num).padStart(2, "0")
+			}, `c${copyIdx}-${i}`)))
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -92,20 +98,14 @@ const TimePanel = (props) => {
 		ref: panelRef,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: `${prefixCls}__column-list`,
-			children: items.map((num) => {
-				const isDisabled = disabledItems.includes(num);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					ref: (el) => {
-						if (el) itemRefs.current.set(num, el);
-					},
-					className: (0, classnames.default)(`${prefixCls}__cell`, {
-						[`${prefixCls}__cell_selected`]: num === value,
-						[`${prefixCls}__cell_disabled`]: isDisabled
-					}),
-					onClick: () => handleClick(num),
-					children: String(num).padStart(2, "0")
-				}, num);
-			})
+			children: items.map((num) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				ref: (el) => {
+					if (el) itemRefs.current.set(num, el);
+				},
+				className: cellCls(num),
+				onClick: () => handleClick(num),
+				children: String(num).padStart(2, "0")
+			}, num))
 		})
 	});
 };

package/lib/time-picker/time-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-panel.js","names":[],"sources":["../../src/time-picker/time-panel.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport interface TimePanelProps {\n  value: number;\n  items: number[];\n  disabledItems?: number[];\n  loop?: boolean;\n  onChange: (num: number) => void;\n  prefixCls: string;\n}\n\nconst ITEM_HEIGHT = 28; // 4px padding-top + 20px line-height + 4px padding-bottom\n\nconst TimePanel = (props: TimePanelProps): React.ReactElement => {\n  const { prefixCls, value, items, disabledItems = [], loop = false, onChange } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map());\n  const isResetting = useRef(false);\n  const clickedRef = useRef(false);\n  const scrollToItemRef = useRef<((val: number) => void) | null>(null);\n\n  const oneGroupHeight = items.length * ITEM_HEIGHT;\n\n  scrollToItemRef.current = (val: number) => {\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    if (loop) {\n      const idx = items.indexOf(val);\n      if (idx === -1) return;\n      const top = oneGroupHeight + idx * ITEM_HEIGHT;\n      isResetting.current = true;\n      panel.scrollTo({ top, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    } else {\n      const el = itemRefs.current.get(val);\n      if (el) {\n        panel.scrollTo({ top: el.offsetTop, behavior: 'auto' });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (clickedRef.current) {\n      clickedRef.current = false;\n      return;\n    }\n    scrollToItemRef.current?.(value);\n  }, [value]);\n\n  // Scroll reset for loop mode\n  const handleScroll = useCallback(() => {\n    if (!loop || isResetting.current) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    const st = panel.scrollTop;\n    if (st < oneGroupHeight || st >= 2 * oneGroupHeight) {\n      isResetting.current = true;\n      panel.scrollTo({ top: (st % oneGroupHeight) + oneGroupHeight, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    }\n  }, [loop, oneGroupHeight]);\n\n  const handleClick = (num: number) => {\n    if (disabledItems.includes(num)) return;\n    clickedRef.current = true;\n    onChange(num);\n  };\n\n  if (loop) {\n    const copies = [0, 1, 2];\n    return (\n      <div className={`${prefixCls}__column`} ref={panelRef} onScroll={handleScroll}>\n        <ul className={`${prefixCls}__column-list`}>\n          {copies.map((copyIdx) =>\n            items.map((num, i) => {\n              const isDisabled = disabledItems.includes(num);\n              const cls = classNames(`${prefixCls}__cell`, {\n                [`${prefixCls}__cell_selected`]: num === value,\n                [`${prefixCls}__cell_disabled`]: isDisabled,\n              });\n              return (\n                <li\n                  key={`c${copyIdx}-${i}`}\n                  className={cls}\n                  onClick={() => handleClick(num)}>\n                  {String(num).padStart(2, '0')}\n                </li>\n              );\n            })\n          )}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${prefixCls}__column`} ref={panelRef}>\n      <ul className={`${prefixCls}__column-list`}>\n        {items.map((num) => {\n          const isDisabled = disabledItems.includes(num);\n          const cls = classNames(`${prefixCls}__cell`, {\n            [`${prefixCls}__cell_selected`]: num === value,\n            [`${prefixCls}__cell_disabled`]: isDisabled,\n          });\n          return (\n            <li\n              key={num}\n              ref={(el) => {\n                if (el) itemRefs.current.set(num, el);\n              }}\n              className={cls}\n              onClick={() => handleClick(num)}>\n              {String(num).padStart(2, '0')}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default TimePanel;\n"],"mappings":"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"}
+{"version":3,"file":"time-panel.js","names":[],"sources":["../../src/time-picker/time-panel.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport interface TimePanelProps {\n  value: number | null;\n  pendingValue: number | null;\n  items: number[];\n  disabledItems?: number[];\n  loop?: boolean;\n  onChange: (num: number) => void;\n  prefixCls: string;\n}\n\nconst ITEM_HEIGHT = 28; // 4px padding-top + 20px line-height + 4px padding-bottom\n\nconst TimePanel = (props: TimePanelProps): React.ReactElement => {\n  const { prefixCls, value, pendingValue, items, disabledItems = [], loop = false, onChange } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map());\n  const isResetting = useRef(false);\n  const clickedRef = useRef(false);\n  const scrollToItemRef = useRef<((val: number | null) => void) | null>(null);\n\n  const oneGroupHeight = items.length * ITEM_HEIGHT;\n\n  // The displayed value: pending takes priority, then committed\n  const displayValue = pendingValue ?? value;\n\n  scrollToItemRef.current = (val: number | null) => {\n    if (val === null) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    if (loop) {\n      const idx = items.indexOf(val);\n      if (idx === -1) return;\n      const top = oneGroupHeight + idx * ITEM_HEIGHT;\n      isResetting.current = true;\n      panel.scrollTo({ top, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    } else {\n      const el = itemRefs.current.get(val);\n      if (el) {\n        panel.scrollTo({ top: el.offsetTop, behavior: 'auto' });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (clickedRef.current) {\n      clickedRef.current = false;\n      return;\n    }\n    scrollToItemRef.current?.(displayValue);\n  }, [displayValue]);\n\n  // Scroll reset for loop mode\n  const handleScroll = useCallback(() => {\n    if (!loop || isResetting.current) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    const st = panel.scrollTop;\n    if (st < oneGroupHeight || st >= 2 * oneGroupHeight) {\n      isResetting.current = true;\n      panel.scrollTo({ top: (st % oneGroupHeight) + oneGroupHeight, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    }\n  }, [loop, oneGroupHeight]);\n\n  const handleClick = (num: number) => {\n    if (disabledItems.includes(num)) return;\n    clickedRef.current = true;\n    onChange(num);\n  };\n\n  const isPending = pendingValue !== null;\n  const isCommitted = value !== null && pendingValue === null;\n\n  const cellCls = (num: number) => {\n    const isSelected = num === displayValue;\n    return classNames(`${prefixCls}__cell`, {\n      [`${prefixCls}__cell_selected`]: isSelected && isCommitted,\n      [`${prefixCls}__cell_pending`]: isSelected && isPending,\n      [`${prefixCls}__cell_disabled`]: disabledItems.includes(num),\n    });\n  };\n\n  if (loop) {\n    const copies = [0, 1, 2];\n    return (\n      <div className={`${prefixCls}__column`} ref={panelRef} onScroll={handleScroll}>\n        <ul className={`${prefixCls}__column-list`}>\n          {copies.map((copyIdx) =>\n            items.map((num, i) => (\n              <li\n                key={`c${copyIdx}-${i}`}\n                className={cellCls(num)}\n                onClick={() => handleClick(num)}>\n                {String(num).padStart(2, '0')}\n              </li>\n            ))\n          )}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${prefixCls}__column`} ref={panelRef}>\n      <ul className={`${prefixCls}__column-list`}>\n        {items.map((num) => (\n          <li\n            key={num}\n            ref={(el) => {\n              if (el) itemRefs.current.set(num, el);\n            }}\n            className={cellCls(num)}\n            onClick={() => handleClick(num)}>\n            {String(num).padStart(2, '0')}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default TimePanel;\n"],"mappings":"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"}