@univerjs/design 0.23.0 → 0.24.0

package/lib/cjs/index.js

@@ -919,6 +919,7 @@ function Dialog(props) {
 * limitations under the License.
 */
 const hsvToRgb = (h, s, v) => {
+	h = h % 360;
 	s = s / 100;
 	v = v / 100;
 	const c = v * s;
@@ -1029,6 +1030,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const sliderRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
+	const alphaRef = (0, react.useRef)(alpha);
 	const calculateAlpha = (0, react.useCallback)((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1047,10 +1049,13 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateAlpha(e.clientX);
 	}, [isDragging, calculateAlpha]);
+	(0, react.useEffect)(() => {
+		alphaRef.current = alpha;
+	}, [alpha]);
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(alpha);
-	}, [alpha]);
+		onChanged === null || onChanged === void 0 || onChanged(alphaRef.current);
+	}, [onChanged]);
 	(0, react.useEffect)(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1077,6 +1082,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	};
 	const color = hsvToRgb(...hsv);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "color-picker-alpha-slider",
 		className: "univer-relative univer-w-full univer-select-none",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-absolute univer-inset-0 univer-rounded-full",
@@ -1087,6 +1093,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			}
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: sliderRef,
+			"data-u-comp": "color-picker-alpha-slider-track",
 			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
 			style: { background: `linear-gradient(to right, transparent, rgb(${color.join(",")}))` },
 			onPointerDown: (e) => {
@@ -1095,6 +1102,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-alpha-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1374,7 +1382,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
 		ctx.fillStyle = gradientV;
 		ctx.fillRect(0, 0, canvas.width, canvas.height);
-	}, [hsv]);
+	}, [hsv[0]]);
 	const handlePointerEvent = (e) => {
 		e.stopPropagation();
 		const canvas = canvasRef.current;
@@ -1388,7 +1396,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 	};
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-	}, [hsv]);
+	}, []);
 	function handleChange() {
 		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
 	}
@@ -1431,6 +1439,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		className: "univer-relative univer-overflow-hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 			ref: canvasRef,
+			"data-u-comp": "color-picker-spectrum-canvas",
 			className: "univer-size-full univer-cursor-crosshair univer-rounded",
 			onPointerDown: (e) => {
 				setIsDragging(true);
@@ -1465,6 +1474,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const sliderRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
+	const hsvRef = (0, react.useRef)(hsv);
 	const calculateHue = (0, react.useCallback)((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1484,10 +1494,14 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateHue(e.clientX);
 	}, [isDragging, calculateHue]);
+	(0, react.useEffect)(() => {
+		hsvRef.current = hsv;
+	}, [hsv]);
 	const handlePointerUp = (0, react.useCallback)(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
-	}, [hsv, onChanged]);
+		const [h, s, v] = hsvRef.current;
+		onChanged === null || onChanged === void 0 || onChanged(h, s, v);
+	}, [onChanged]);
 	(0, react.useEffect)(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1532,6 +1546,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-hue-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -3062,6 +3077,19 @@ function GradientColorPicker(props) {
 	const { locale } = (0, react.useContext)(ConfigContext);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
 	const barRef = (0, react.useRef)(null);
+	const cleanupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setSelectedIndex((prev) => {
+			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			return prev;
+		});
+	}, [value.stops.length]);
+	(0, react.useEffect)(() => {
+		return () => {
+			var _cleanupRef$current;
+			(_cleanupRef$current = cleanupRef.current) === null || _cleanupRef$current === void 0 || _cleanupRef$current.call(cleanupRef);
+		};
+	}, []);
 	const stops = (0, react.useMemo)(() => {
 		return [...value.stops].sort((a, b) => a.offset - b.offset);
 	}, [value.stops]);
@@ -3163,6 +3191,7 @@ function GradientColorPicker(props) {
 				onChange: (v) => handleTypeChange(v)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "gradient-color-picker-preview",
 				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
 				style: { background: mainPreview }
 			}),
@@ -3170,10 +3199,13 @@ function GradientColorPicker(props) {
 				className: "univer-relative univer-mt-4 univer-h-6",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: barRef,
+					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
 				}), value.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "gradient-color-picker-stop",
+					"data-selected": selectedIndex === index,
 					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
@@ -3204,7 +3236,9 @@ function GradientColorPicker(props) {
 						const handlePointerUp = () => {
 							window.removeEventListener("pointermove", handlePointerMove);
 							window.removeEventListener("pointerup", handlePointerUp);
+							cleanupRef.current = null;
 						};
+						cleanupRef.current = handlePointerUp;
 						window.addEventListener("pointermove", handlePointerMove);
 						window.addEventListener("pointerup", handlePointerUp);
 					}
@@ -3242,6 +3276,7 @@ function GradientColorPicker(props) {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
 								disabled: value.stops.length <= 2,
@@ -3441,6 +3476,83 @@ const removeMessage = (id) => {
 	activeMessageIds.clear();
 };
 
+//#endregion
+//#region src/components/panel/Panel.tsx
+function Panel(props) {
+	const { children, className, style } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "panel",
+		className: clsx$1("univer-flex univer-flex-col univer-gap-5 univer-py-2", className),
+		style,
+		children
+	});
+}
+function PanelSection(props) {
+	const { title, children, className, defaultExpanded = true, collapsible = true } = props;
+	const [expanded, setExpanded] = (0, react.useState)(defaultExpanded);
+	const contentId = (0, react.useId)();
+	const headerId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "panel-section",
+		className: clsx$1("univer-flex univer-flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			id: headerId,
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": contentId,
+			disabled: !collapsible,
+			className: clsx$1("univer-box-border univer-flex univer-w-full univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-0 univer-pb-2.5 univer-text-left univer-text-sm univer-font-medium univer-text-gray-700 dark:!univer-text-gray-200", {
+				"univer-cursor-pointer": collapsible,
+				"univer-cursor-default": !collapsible
+			}),
+			onClick: () => collapsible && setExpanded((v) => !v),
+			children: [collapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+				"-univer-rotate-90": !expanded,
+				"univer-rotate-0": expanded
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": headerId,
+			className: clsx$1("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-300 univer-ease-in-out", {
+				"univer-max-h-[1000px] univer-opacity-100": expanded,
+				"univer-max-h-0 univer-opacity-0": !expanded
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-box-border univer-flex univer-flex-col univer-gap-3 univer-py-1",
+				children
+			})
+		})]
+	});
+}
+function PanelField(props) {
+	const { label, children, className, required, error } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "panel-field",
+		className: clsx$1("univer-flex univer-flex-col univer-gap-1.5", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-items-center univer-gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-xs univer-text-gray-600 dark:!univer-text-gray-300",
+					children: label
+				}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-xs univer-text-red-500",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-w-full",
+				children
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-text-xs univer-text-red-500",
+				children: error
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/popup/Popup.tsx
 const POPUP_POINTER_OFFSET = 2;
@@ -4253,6 +4365,9 @@ exports.MessageType = MessageType;
 exports.Messager = Messager;
 exports.MultipleSelect = MultipleSelect;
 exports.Pager = Pager;
+exports.Panel = Panel;
+exports.PanelField = PanelField;
+exports.PanelSection = PanelSection;
 exports.Popup = Popup;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;

package/lib/es/index.js

@@ -1,5 +1,5 @@
 import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, DropdownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx as clsx$1 } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -918,6 +918,7 @@ function Dialog(props) {
 * limitations under the License.
 */
 const hsvToRgb = (h, s, v) => {
+	h = h % 360;
 	s = s / 100;
 	v = v / 100;
 	const c = v * s;
@@ -1028,6 +1029,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);
 	const thumbRef = useRef(null);
+	const alphaRef = useRef(alpha);
 	const calculateAlpha = useCallback((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1046,10 +1048,13 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateAlpha(e.clientX);
 	}, [isDragging, calculateAlpha]);
+	useEffect(() => {
+		alphaRef.current = alpha;
+	}, [alpha]);
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(alpha);
-	}, [alpha]);
+		onChanged === null || onChanged === void 0 || onChanged(alphaRef.current);
+	}, [onChanged]);
 	useEffect(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1076,6 +1081,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	};
 	const color = hsvToRgb(...hsv);
 	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "color-picker-alpha-slider",
 		className: "univer-relative univer-w-full univer-select-none",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "univer-absolute univer-inset-0 univer-rounded-full",
@@ -1086,6 +1092,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			}
 		}), /* @__PURE__ */ jsx("div", {
 			ref: sliderRef,
+			"data-u-comp": "color-picker-alpha-slider-track",
 			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
 			style: { background: `linear-gradient(to right, transparent, rgb(${color.join(",")}))` },
 			onPointerDown: (e) => {
@@ -1094,6 +1101,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-alpha-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -1373,7 +1381,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
 		ctx.fillStyle = gradientV;
 		ctx.fillRect(0, 0, canvas.width, canvas.height);
-	}, [hsv]);
+	}, [hsv[0]]);
 	const handlePointerEvent = (e) => {
 		e.stopPropagation();
 		const canvas = canvasRef.current;
@@ -1387,7 +1395,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 	};
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-	}, [hsv]);
+	}, []);
 	function handleChange() {
 		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
 	}
@@ -1430,6 +1438,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		className: "univer-relative univer-overflow-hidden",
 		children: [/* @__PURE__ */ jsx("canvas", {
 			ref: canvasRef,
+			"data-u-comp": "color-picker-spectrum-canvas",
 			className: "univer-size-full univer-cursor-crosshair univer-rounded",
 			onPointerDown: (e) => {
 				setIsDragging(true);
@@ -1464,6 +1473,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const [isDragging, setIsDragging] = useState(false);
 	const sliderRef = useRef(null);
 	const thumbRef = useRef(null);
+	const hsvRef = useRef(hsv);
 	const calculateHue = useCallback((clientX) => {
 		var _thumbRef$current$cli, _thumbRef$current;
 		const slider = sliderRef.current;
@@ -1483,10 +1493,14 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		if (!isDragging) return;
 		calculateHue(e.clientX);
 	}, [isDragging, calculateHue]);
+	useEffect(() => {
+		hsvRef.current = hsv;
+	}, [hsv]);
 	const handlePointerUp = useCallback(() => {
 		setIsDragging(false);
-		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
-	}, [hsv, onChanged]);
+		const [h, s, v] = hsvRef.current;
+		onChanged === null || onChanged === void 0 || onChanged(h, s, v);
+	}, [onChanged]);
 	useEffect(() => {
 		if (isDragging) {
 			window.addEventListener("pointermove", handlePointerMove);
@@ -1531,6 +1545,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
+				"data-u-comp": "color-picker-hue-slider-thumb",
 				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
@@ -3061,6 +3076,19 @@ function GradientColorPicker(props) {
 	const { locale } = useContext(ConfigContext);
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const barRef = useRef(null);
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		setSelectedIndex((prev) => {
+			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			return prev;
+		});
+	}, [value.stops.length]);
+	useEffect(() => {
+		return () => {
+			var _cleanupRef$current;
+			(_cleanupRef$current = cleanupRef.current) === null || _cleanupRef$current === void 0 || _cleanupRef$current.call(cleanupRef);
+		};
+	}, []);
 	const stops = useMemo(() => {
 		return [...value.stops].sort((a, b) => a.offset - b.offset);
 	}, [value.stops]);
@@ -3162,6 +3190,7 @@ function GradientColorPicker(props) {
 				onChange: (v) => handleTypeChange(v)
 			}),
 			/* @__PURE__ */ jsx("div", {
+				"data-u-comp": "gradient-color-picker-preview",
 				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
 				style: { background: mainPreview }
 			}),
@@ -3169,10 +3198,13 @@ function GradientColorPicker(props) {
 				className: "univer-relative univer-mt-4 univer-h-6",
 				children: [/* @__PURE__ */ jsx("div", {
 					ref: barRef,
+					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
 				}), value.stops.map((stop, index) => /* @__PURE__ */ jsx("div", {
+					"data-u-comp": "gradient-color-picker-stop",
+					"data-selected": selectedIndex === index,
 					className: clsx("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
@@ -3203,7 +3235,9 @@ function GradientColorPicker(props) {
 						const handlePointerUp = () => {
 							window.removeEventListener("pointermove", handlePointerMove);
 							window.removeEventListener("pointerup", handlePointerUp);
+							cleanupRef.current = null;
 						};
+						cleanupRef.current = handlePointerUp;
 						window.addEventListener("pointermove", handlePointerMove);
 						window.addEventListener("pointerup", handlePointerUp);
 					}
@@ -3241,6 +3275,7 @@ function GradientColorPicker(props) {
 						children: /* @__PURE__ */ jsx(Tooltip, {
 							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
 							children: /* @__PURE__ */ jsx(Button, {
+								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
 								disabled: value.stops.length <= 2,
@@ -3440,6 +3475,83 @@ const removeMessage = (id) => {
 	activeMessageIds.clear();
 };
 
+//#endregion
+//#region src/components/panel/Panel.tsx
+function Panel(props) {
+	const { children, className, style } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-u-comp": "panel",
+		className: clsx("univer-flex univer-flex-col univer-gap-5 univer-py-2", className),
+		style,
+		children
+	});
+}
+function PanelSection(props) {
+	const { title, children, className, defaultExpanded = true, collapsible = true } = props;
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const contentId = useId();
+	const headerId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "panel-section",
+		className: clsx("univer-flex univer-flex-col", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			id: headerId,
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": contentId,
+			disabled: !collapsible,
+			className: clsx("univer-box-border univer-flex univer-w-full univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-0 univer-pb-2.5 univer-text-left univer-text-sm univer-font-medium univer-text-gray-700 dark:!univer-text-gray-200", {
+				"univer-cursor-pointer": collapsible,
+				"univer-cursor-default": !collapsible
+			}),
+			onClick: () => collapsible && setExpanded((v) => !v),
+			children: [collapsible && /* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+				"-univer-rotate-90": !expanded,
+				"univer-rotate-0": expanded
+			}) }), /* @__PURE__ */ jsx("span", { children: title })]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": headerId,
+			className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-300 univer-ease-in-out", {
+				"univer-max-h-[1000px] univer-opacity-100": expanded,
+				"univer-max-h-0 univer-opacity-0": !expanded
+			}),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-box-border univer-flex univer-flex-col univer-gap-3 univer-py-1",
+				children
+			})
+		})]
+	});
+}
+function PanelField(props) {
+	const { label, children, className, required, error } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "panel-field",
+		className: clsx("univer-flex univer-flex-col univer-gap-1.5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-items-center univer-gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-600 dark:!univer-text-gray-300",
+					children: label
+				}), required && /* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-red-500",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-w-full",
+				children
+			}),
+			error && /* @__PURE__ */ jsx("span", {
+				className: "univer-text-xs univer-text-red-500",
+				children: error
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/popup/Popup.tsx
 const POPUP_POINTER_OFFSET = 2;
@@ -4221,4 +4333,4 @@ function resizeObserverCtor(callback) {
 }
 
 //#endregion
-export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };

package/lib/index.css

@@ -418,6 +418,10 @@
   max-height: var(--radix-popper-available-height);
 }
 
+.univer-max-h-\[1000px\] {
+  max-height: 1000px;
+}
+
 .univer-max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -733,6 +737,10 @@
   gap: 1rem;
 }
 
+.univer-gap-5 {
+  gap: 1.25rem;
+}
+
 .univer-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
   --univer-tw-space-y-reverse: 0;
   margin-top: .375rem;
@@ -976,6 +984,10 @@
   border-color: var(--univer-primary-600);
 }
 
+.univer-border-red-300 {
+  border-color: var(--univer-red-300);
+}
+
 .univer-border-red-500 {
   border-color: var(--univer-red-500);
 }
@@ -1193,6 +1205,10 @@
   padding-left: 1rem !important;
 }
 
+.univer-pb-2\.5 {
+  padding-bottom: .625rem;
+}
+
 .univer-pl-2 {
   padding-left: .5rem;
 }
@@ -1454,6 +1470,10 @@
   opacity: 0;
 }
 
+.univer-opacity-100 {
+  opacity: 1;
+}
+
 .univer-opacity-40 {
   opacity: .4;
 }