@univerjs/design 1.0.0-rc.0 → 1.0.1

package/lib/cjs/index.js

@@ -1960,16 +1960,18 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = (0, react.createContext)({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer, direction } = props;
+	const { children, locale, mountContainer, direction, mobileKeyboardViewport } = props;
 	const value = (0, react.useMemo)(() => {
 		return {
 			locale,
 			direction,
-			mountContainer
+			mountContainer,
+			mobileKeyboardViewport
 		};
 	}, [
 		locale,
 		direction,
+		mobileKeyboardViewport,
 		mountContainer
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
@@ -3970,6 +3972,7 @@ function ColorPickerPanel({ value = "#000000", confirmText, onConfirm }) {
 function MobileDialog(props) {
 	var _globalThis$CSS;
 	const { className, overlayClassName, children, style, open = false, title, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
+	const contentRef = (0, react.useRef)(null);
 	const { locale, mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const maxHeight = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "80dvh" : "80vh";
 	const footer = propFooter ?? (showOk || showCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3997,7 +4000,13 @@ function MobileDialog(props) {
 		onOpenChange: handleOpenChange,
 		modal: mask !== false,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
-			className: clsx("!univer-bottom-0 !univer-left-0 !univer-right-0 !univer-top-auto !univer-max-w-none !univer-translate-x-0 !univer-translate-y-0 !univer-gap-4 !univer-overflow-y-auto !univer-rounded-t-2xl !univer-p-4 [&_[data-slot='dialog-footer']]:!univer-flex-row [&_[data-slot='dialog-footer']]:!univer-gap-3 [&_[data-slot='dialog-footer']_button]:!univer-h-12 [&_[data-slot='dialog-footer']_button]:!univer-flex-1 [&_button[data-slot='close']]:!univer-right-3 [&_button[data-slot='close']]:!univer-top-3 [&_button[data-slot='close']]:!univer-size-10", className),
+			className: clsx("!univer-bottom-0 !univer-left-0 !univer-right-0 !univer-top-auto !univer-flex !univer-max-w-none !univer-translate-x-0 !univer-translate-y-0 !univer-flex-col !univer-gap-4 !univer-overflow-hidden !univer-rounded-t-2xl !univer-p-4 [&_[data-slot='dialog-footer']]:!univer-flex-row [&_[data-slot='dialog-footer']]:!univer-gap-3 [&_[data-slot='dialog-footer']_button]:!univer-h-12 [&_[data-slot='dialog-footer']_button]:!univer-flex-1 [&_button[data-slot='close']]:!univer-right-3 [&_button[data-slot='close']]:!univer-top-3 [&_button[data-slot='close']]:!univer-size-10", className),
+			ref: contentRef,
+			onOpenAutoFocus: (event) => {
+				var _contentRef$current;
+				event.preventDefault();
+				(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus({ preventScroll: true });
+			},
 			style: {
 				...style,
 				position: "fixed",
@@ -4014,7 +4023,6 @@ function MobileDialog(props) {
 			mountContainer,
 			overlayClassName,
 			dir: direction,
-			onClickClose: close,
 			onEscapeKeyDown: (event) => {
 				if (keyboard) close();
 				event.preventDefault();
@@ -4025,45 +4033,70 @@ function MobileDialog(props) {
 			},
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, {
-					className: title ? void 0 : "!univer-hidden",
+					className: title ? "univer-shrink-0 univer-px-10" : "!univer-hidden",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { className: "univer-hidden" })]
 				}),
-				children,
-				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, { children: footer })
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-min-h-0 univer-min-w-0 univer-overflow-y-auto",
+					children
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, {
+					className: "univer-shrink-0",
+					children: footer
+				})
 			]
 		})
 	});
 }
 
+//#endregion
+//#region src/components/dropdown/mobile-overlay-context.ts
+/** The host supplies layout and focus behavior for nested mobile surfaces. */
+const MobileOverlayContext = (0, react.createContext)(null);
+
 //#endregion
 //#region src/components/dropdown/MobileDropdownSurface.tsx
 function MobileDropdownSurface(props) {
 	var _globalThis$CSS;
 	const { children, content, open, disabled, onOpenChange } = props;
 	const { locale, mountContainer } = (0, react.useContext)(ConfigContext);
-	const maxHeight = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "80dvh" : "80vh";
+	const mobileOverlay = (0, react.useContext)(MobileOverlayContext);
+	const [surface, setSurface] = (0, react.useState)(null);
+	const modal = (mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.modal) ?? true;
+	(0, react.useLayoutEffect)(() => {
+		if (open && surface) return mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.onMount(surface);
+	}, [
+		open,
+		surface,
+		mobileOverlay
+	]);
+	const viewportHeightUnit = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "dvh" : "vh";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Dialog$1, {
 		open,
 		onOpenChange,
-		modal: true,
+		modal,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTrigger, {
 			asChild: true,
 			disabled,
 			children
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
+			ref: setSurface,
 			mountContainer,
 			overlayClassName: "!univer-z-[1390]",
-			className: "!univer-bottom-0 !univer-left-0 !univer-right-0 !univer-top-auto !univer-z-[1400] !univer-block !univer-w-full !univer-max-w-none !univer-translate-x-0 !univer-translate-y-0 !univer-overflow-y-auto !univer-rounded-t-2xl !univer-border-0 !univer-bg-gray-50 !univer-p-4 !univer-pt-14 dark:!univer-bg-gray-900 [&_button[data-slot='close']]:!univer-right-3 [&_button[data-slot='close']]:!univer-top-3 [&_button[data-slot='close']]:!univer-size-10 [&_button]:!univer-min-h-11",
+			className: "!univer-left-0 !univer-right-0 !univer-top-auto !univer-z-[1400] !univer-block !univer-w-full !univer-max-w-none !univer-translate-x-0 !univer-translate-y-0 !univer-overflow-y-auto !univer-rounded-t-2xl !univer-border-0 !univer-bg-gray-50 !univer-p-4 !univer-pt-14 dark:!univer-bg-gray-900 [&_button[data-slot='close']]:!univer-right-3 [&_button[data-slot='close']]:!univer-top-3 [&_button[data-slot='close']]:!univer-size-10 [&_button]:!univer-min-h-11",
 			style: {
 				position: "fixed",
 				insetInline: 0,
 				top: "auto",
 				bottom: 0,
+				maxHeight: `80${viewportHeightUnit}`,
 				width: "100%",
-				maxHeight,
 				maxWidth: "none",
-				transform: "none"
+				transform: "none",
+				...mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.contentProps.style
 			},
+			onOpenAutoFocus: mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.contentProps.onOpenAutoFocus,
+			onCloseAutoFocus: mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.contentProps.onCloseAutoFocus,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"aria-hidden": "true",
@@ -5192,8 +5225,10 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 	const longPressTimerRef = (0, react.useRef)(null);
 	const longPressIntervalRef = (0, react.useRef)(null);
 	const mergedRef = (node) => {
-		if (ref) if (typeof ref === "function") ref(node);
-		else ref.current = node;
+		if (ref) {
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		}
 		inputRef.current = node;
 	};
 	(0, react.useEffect)(() => {
@@ -5263,7 +5298,8 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 		onChange === null || onChange === void 0 || onChange(parsedValue);
 	}
 	function handleBlur(e) {
-		if (internalValue === null) {
+		const currentValue = value !== void 0 ? value : internalValue;
+		if (currentValue === null) {
 			if (inputValue === "" && allowEmpty) {
 				if (onChange) onChange(null);
 			} else {
@@ -5275,14 +5311,17 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 			onBlur === null || onBlur === void 0 || onBlur(e);
 			return;
 		}
-		let valueInRange = internalValue;
+		let valueInRange = currentValue;
 		if (max !== void 0 && valueInRange > max) valueInRange = max;
 		if (min !== void 0 && valueInRange < min) valueInRange = min;
-		if (valueInRange !== internalValue) {
+		if (valueInRange !== currentValue) {
 			setInternalValue(valueInRange);
 			setInputValue(formatValue(valueInRange));
 			onChange === null || onChange === void 0 || onChange(valueInRange);
-		} else setInputValue(formatValue(internalValue));
+		} else {
+			setInternalValue(currentValue);
+			setInputValue(formatValue(currentValue));
+		}
 		onBlur === null || onBlur === void 0 || onBlur(e);
 	}
 	function handleStep(isUp) {
@@ -5812,7 +5851,7 @@ function GradientColorPicker(props) {
 						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.diamond,
 						value: "diamond"
 					}
-				].map((item) => {
+				].filter((item) => !props.types || props.types.some((type) => type === item.value)).map((item) => {
 					const selected = draftValue.type === item.value;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
@@ -5840,7 +5879,7 @@ function GradientColorPicker(props) {
 						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.diamond,
 						value: "diamond"
 					}
-				],
+				].filter((item) => !props.types || props.types.some((type) => type === item.value)),
 				value: draftValue.type,
 				onChange: (v) => handleTypeChange(v)
 			}),
@@ -5972,6 +6011,182 @@ function GradientColorPicker(props) {
 	});
 }
 
+//#endregion
+//#region src/components/mobile-action-row/MobileActionRow.tsx
+function MobileActionRow(props) {
+	const { title, icon, value, valueType = "color", trailing, bordered, variant = "surface", className, type = "button", ...buttonProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type,
+		className: clsx(resetButtonClassName, "univer-flex univer-min-h-12 univer-w-full univer-items-center univer-gap-3 univer-rounded-xl univer-px-4 univer-text-left univer-text-base univer-font-medium univer-text-gray-900 disabled:univer-opacity-40 dark:!univer-text-gray-100 [&>svg]:univer-size-5", {
+			"univer-bg-gray-0 active:univer-bg-gray-100 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-700": variant === "surface",
+			"univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-700": variant === "subtle"
+		}, bordered && borderBottomClassName, className),
+		...buttonProps,
+		children: [
+			icon,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-flex-1",
+				children: title
+			}),
+			value && valueType === "color" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-size-6 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 dark:!univer-border-gray-600",
+				style: { backgroundColor: value }
+			}),
+			value && valueType === "text" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-max-w-32 univer-truncate univer-text-sm univer-font-normal univer-text-gray-500 dark:!univer-text-gray-400",
+				children: value
+			}),
+			trailing
+		]
+	});
+}
+
+//#endregion
+//#region src/components/gradient-color-picker/MobileGradientColorPicker.tsx
+const GRADIENT_TYPES = [
+	"linear",
+	"radial",
+	"angular",
+	"diamond"
+];
+const NUMBER_CLASS = "univer-w-full [&_input]:!univer-h-12 [&_input]:!univer-text-base";
+function MobileGradientColorPicker({ value = {
+	type: "linear",
+	stops: [{
+		color: "#ffffff",
+		offset: 0
+	}, {
+		color: "#000000",
+		offset: 100
+	}],
+	angle: 0
+}, onChange, types = GRADIENT_TYPES, className }) {
+	const { locale } = (0, react.useContext)(ConfigContext);
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const index = Math.min(selectedIndex, Math.max(0, value.stops.length - 1));
+	const selectedStop = value.stops[index];
+	function updateStop(patch) {
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			stops: value.stops.map((stop, stopIndex) => stopIndex === index ? {
+				...stop,
+				...patch
+			} : stop)
+		});
+	}
+	function addStop() {
+		const stop = selectedStop ?? {
+			color: "#ffffff",
+			offset: 0
+		};
+		const nextOffset = value.stops.filter((item) => item.offset > stop.offset).reduce((offset, item) => Math.min(offset, item.offset), 100);
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			stops: [...value.stops, {
+				...stop,
+				offset: Math.round((stop.offset + nextOffset) / 2)
+			}]
+		});
+		setSelectedIndex(value.stops.length);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: clsx("univer-grid univer-w-full univer-min-w-0 univer-gap-4", className),
+		children: [
+			types.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2",
+				children: types.map((type) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileActionRow, {
+					title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker[type],
+					"aria-pressed": value.type === type,
+					className: value.type === type ? "!univer-bg-primary-50 !univer-text-primary-600" : void 0,
+					onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange({
+						...value,
+						type
+					})
+				}, type))
+			}),
+			(value.type === "linear" || value.type === "angular") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "univer-grid univer-gap-2 univer-text-base",
+				children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+					className: NUMBER_CLASS,
+					controls: false,
+					value: value.angle ?? 0,
+					min: 0,
+					max: 360,
+					onChange: (angle) => onChange === null || onChange === void 0 ? void 0 : onChange({
+						...value,
+						angle: angle ?? 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2",
+				children: [
+					value.stops.map((stop, stopIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"aria-label": `${locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset} ${stop.offset}%`,
+						"aria-pressed": index === stopIndex,
+						className: clsx("univer-flex univer-h-12 univer-min-w-12 univer-appearance-none univer-items-center univer-justify-center univer-gap-2 univer-rounded-lg univer-border univer-border-solid univer-bg-transparent univer-px-2 univer-text-sm", index === stopIndex ? "univer-border-primary-600 univer-text-primary-600" : "univer-border-gray-200"),
+						onClick: () => setSelectedIndex(stopIndex),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-size-6 univer-shrink-0 univer-rounded",
+							style: {
+								backgroundColor: stop.color,
+								opacity: stop.opacity ?? 1
+							}
+						}), `${stop.offset}%`]
+					}, stopIndex)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						className: "univer-size-12",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
+						onClick: addStop,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						className: "univer-size-12",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
+						disabled: value.stops.length <= 2,
+						onClick: () => {
+							onChange === null || onChange === void 0 || onChange({
+								...value,
+								stops: value.stops.filter((_, stopIndex) => stopIndex !== index)
+							});
+							setSelectedIndex(0);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
+					})
+				]
+			}),
+			selectedStop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "univer-grid univer-gap-2 univer-text-base",
+					children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+						className: NUMBER_CLASS,
+						controls: false,
+						value: selectedStop.offset,
+						min: 0,
+						max: 100,
+						onChange: (offset) => updateStop({ offset: offset ?? 0 })
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "univer-grid univer-gap-2 univer-text-base",
+					children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+						className: NUMBER_CLASS,
+						controls: false,
+						value: Math.round((1 - (selectedStop.opacity ?? 1)) * 100),
+						min: 0,
+						max: 100,
+						onChange: (transparency) => updateStop({ opacity: 1 - (transparency ?? 0) / 100 })
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileColorPicker, {
+				value: selectedStop.color,
+				onChange: (color) => updateStop({ color })
+			})] })
+		]
+	});
+}
+
 //#endregion
 //#region src/components/hover-card/HoverCardPrimitive.tsx
 const HoverCardPrimitive = _radix_ui_react_hover_card.Root;
@@ -6151,36 +6366,6 @@ const removeMessage = (id) => {
 	activeMessageIds.clear();
 };
 
-//#endregion
-//#region src/components/mobile-action-row/MobileActionRow.tsx
-function MobileActionRow(props) {
-	const { title, icon, value, valueType = "color", trailing, bordered, variant = "surface", className, type = "button", ...buttonProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type,
-		className: clsx(resetButtonClassName, "univer-flex univer-min-h-12 univer-w-full univer-items-center univer-gap-3 univer-rounded-xl univer-px-4 univer-text-left univer-text-base univer-font-medium univer-text-gray-900 disabled:univer-opacity-40 dark:!univer-text-gray-100 [&>svg]:univer-size-5", {
-			"univer-bg-gray-0 active:univer-bg-gray-100 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-700": variant === "surface",
-			"univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-bg-gray-800 dark:active:!univer-bg-gray-700": variant === "subtle"
-		}, bordered && borderBottomClassName, className),
-		...buttonProps,
-		children: [
-			icon,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-flex-1",
-				children: title
-			}),
-			value && valueType === "color" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-size-6 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 dark:!univer-border-gray-600",
-				style: { backgroundColor: value }
-			}),
-			value && valueType === "text" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-max-w-32 univer-truncate univer-text-sm univer-font-normal univer-text-gray-500 dark:!univer-text-gray-400",
-				children: value
-			}),
-			trailing
-		]
-	});
-}
-
 //#endregion
 //#region src/components/panel/Panel.tsx
 function Panel(props) {
@@ -6420,9 +6605,10 @@ function SelectList(props) {
 	const value = Array.isArray(_value) ? _value : [_value];
 	function handleSelect(newValue) {
 		const index = value.indexOf(newValue);
-		if (!multiple) if (index > -1) onChange(void 0);
-		else onChange(newValue);
-		else if (index > -1) onChange(value.filter((i) => i === newValue));
+		if (!multiple) {
+			if (index > -1) onChange(void 0);
+			else onChange(newValue);
+		} else if (index > -1) onChange(value.filter((i) => i === newValue));
 		else onChange([...value, newValue]);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
@@ -6559,16 +6745,19 @@ function MobileSelect(props) {
 		items,
 		disabled,
 		onOpenChange: setOpen,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			disabled,
+			"aria-expanded": open,
 			"data-u-comp": "mobile-select",
-			className: clsx(selectClassName, {
+			className: clsx(selectClassName, "!univer-h-auto !univer-min-h-12 univer-text-left", {
 				"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900": open && !borderless,
 				"univer-border-transparent univer-bg-transparent": borderless,
 				"univer-cursor-not-allowed": disabled,
 				"univer-cursor-pointer": !disabled
 			}, className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-gray-0",
+				className: "univer-flex-1 univer-truncate univer-text-base univer-text-gray-500 dark:!univer-text-gray-0",
 				children: displayValue
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
@@ -7017,6 +7206,91 @@ function unmount(container) {
 	}
 }
 
+//#endregion
+//#region src/hooks/use-mobile-keyboard-viewport.ts
+function resolveMobileKeyboardViewportLayout(containingBlockTop, containingBlockBottom, viewport, heightRatio) {
+	const visibleTop = Math.max(containingBlockTop, viewport.top);
+	const visibleBottom = Math.min(containingBlockBottom, viewport.bottom);
+	const availableHeight = Math.max(0, visibleBottom - visibleTop);
+	return {
+		availableHeight,
+		bottom: Math.max(0, containingBlockBottom - visibleBottom),
+		height: heightRatio == null ? void 0 : Math.min(viewport.stableHeight * heightRatio, availableHeight)
+	};
+}
+function revealFocusedElementInMobileViewport(container, viewport) {
+	const activeElement = document.activeElement;
+	if (!(activeElement instanceof HTMLElement) || !container.contains(activeElement)) return false;
+	const margin = 12;
+	const targetRect = activeElement.getBoundingClientRect();
+	let scrollContainer = activeElement.parentElement;
+	while (scrollContainer && scrollContainer !== container) {
+		const overflowY = getComputedStyle(scrollContainer).overflowY;
+		if ((overflowY === "auto" || overflowY === "scroll") && scrollContainer.scrollHeight > scrollContainer.clientHeight) {
+			const scrollRect = scrollContainer.getBoundingClientRect();
+			const safeTop = Math.max(scrollRect.top, viewport.top) + margin;
+			const safeBottom = Math.min(scrollRect.bottom, viewport.bottom) - margin;
+			if (targetRect.bottom > safeBottom) {
+				const previousScrollTop = scrollContainer.scrollTop;
+				scrollContainer.scrollTop += targetRect.bottom - safeBottom;
+				if (targetRect.bottom - (scrollContainer.scrollTop - previousScrollTop) <= safeBottom) return true;
+				break;
+			}
+			if (targetRect.top < safeTop) {
+				const previousScrollTop = scrollContainer.scrollTop;
+				scrollContainer.scrollTop -= safeTop - targetRect.top;
+				if (targetRect.top + (previousScrollTop - scrollContainer.scrollTop) >= safeTop) return true;
+				break;
+			}
+			return false;
+		}
+		scrollContainer = scrollContainer.parentElement;
+	}
+	const safeTop = viewport.top + margin;
+	const safeBottom = viewport.bottom - margin;
+	if (targetRect.bottom > safeBottom || targetRect.top < safeTop) {
+		activeElement.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		return true;
+	}
+	return false;
+}
+function useMobileKeyboardViewportLayout(elementRef, heightRatio) {
+	const { mobileKeyboardViewport } = (0, react.useContext)(ConfigContext);
+	const [layout, updateLayout] = (0, react.useReducer)((_current, next) => next, null);
+	const layoutRef = (0, react.useRef)(null);
+	const measure = (0, react.useCallback)(() => {
+		const element = elementRef.current;
+		if (!element || !mobileKeyboardViewport) {
+			if (layoutRef.current !== null) {
+				layoutRef.current = null;
+				updateLayout(null);
+			}
+			return;
+		}
+		const containingBlock = element.offsetParent;
+		const fixedToViewport = getComputedStyle(element).position === "fixed" || !containingBlock;
+		const containingBlockRect = containingBlock === null || containingBlock === void 0 ? void 0 : containingBlock.getBoundingClientRect();
+		const nextLayout = resolveMobileKeyboardViewportLayout(fixedToViewport ? 0 : (containingBlockRect === null || containingBlockRect === void 0 ? void 0 : containingBlockRect.top) ?? 0, fixedToViewport ? window.innerHeight : (containingBlockRect === null || containingBlockRect === void 0 ? void 0 : containingBlockRect.bottom) ?? window.innerHeight, mobileKeyboardViewport, heightRatio);
+		const previous = layoutRef.current;
+		if ((previous === null || previous === void 0 ? void 0 : previous.availableHeight) === nextLayout.availableHeight && previous.bottom === nextLayout.bottom && previous.height === nextLayout.height) return;
+		layoutRef.current = nextLayout;
+		updateLayout(nextLayout);
+	}, [
+		elementRef,
+		heightRatio,
+		mobileKeyboardViewport
+	]);
+	(0, react.useLayoutEffect)(() => {
+		measure();
+		const frame = requestAnimationFrame(measure);
+		return () => cancelAnimationFrame(frame);
+	});
+	return layout;
+}
+
 //#endregion
 exports.Accordion = Accordion;
 exports.ActionRow = ActionRow;
@@ -7066,6 +7340,8 @@ exports.MobileConfirm = MobileConfirm;
 exports.MobileDialog = MobileDialog;
 exports.MobileDropdown = MobileDropdown;
 exports.MobileDropdownMenu = MobileDropdownMenu;
+exports.MobileGradientColorPicker = MobileGradientColorPicker;
+exports.MobileOverlayContext = MobileOverlayContext;
 exports.MobileSelect = MobileSelect;
 exports.MultipleSelect = MultipleSelect;
 exports.Pager = Pager;
@@ -7111,7 +7387,10 @@ exports.message = message;
 exports.removeMessage = removeMessage;
 exports.render = render;
 exports.resetButtonClassName = resetButtonClassName;
+exports.resolveMobileKeyboardViewportLayout = resolveMobileKeyboardViewportLayout;
+exports.revealFocusedElementInMobileViewport = revealFocusedElementInMobileViewport;
 exports.scrollbarClassName = scrollbarClassName;
 exports.selectClassName = selectClassName;
 exports.toast = sonner.toast;
-exports.unmount = unmount;
+exports.unmount = unmount;
+exports.useMobileKeyboardViewportLayout = useMobileKeyboardViewportLayout;

package/lib/cjs/locale/ar-SA.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/ar-SA.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/ca-ES.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/ca-ES.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/de-DE.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/de-DE.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/en-US.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/en-US.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.

package/lib/cjs/locale/es-ES.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/es-ES.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/fa-IR.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/fa-IR.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/fr-FR.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/fr-FR.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/id-ID.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/id-ID.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/it-IT.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/it-IT.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/ja-JP.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/ja-JP.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/ko-KR.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/ko-KR.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/pl-PL.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/pl-PL.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/pt-BR.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/pt-BR.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/ru-RU.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/ru-RU.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/sk-SK.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/sk-SK.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/vi-VN.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/vi-VN.ts
 const locale = { design: {
 	Accessibility: {

package/lib/cjs/locale/zh-CN.js

@@ -1,4 +1,3 @@
-
 //#region src/locale/zh-CN.ts
 const locale = { design: {
 	Accessibility: {