@univerjs/design 1.0.0-rc.0 → 1.0.1

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

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

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

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

package/lib/es/index.js

@@ -1,5 +1,5 @@
-import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SearchIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, IncreaseIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SearchIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva, cva as cva$1 } from "class-variance-authority";
 import { DirectionProvider } from "@radix-ui/react-direction";
@@ -1959,16 +1959,18 @@ function isBrowser() {
 //#region src/components/config-provider/ConfigProvider.tsx
 const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
 function ConfigProvider(props) {
-	const { children, locale, mountContainer, direction } = props;
+	const { children, locale, mountContainer, direction, mobileKeyboardViewport } = props;
 	const value = useMemo(() => {
 		return {
 			locale,
 			direction,
-			mountContainer
+			mountContainer,
+			mobileKeyboardViewport
 		};
 	}, [
 		locale,
 		direction,
+		mobileKeyboardViewport,
 		mountContainer
 	]);
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
@@ -3969,6 +3971,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 = useRef(null);
 	const { locale, mountContainer, direction } = 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__ */ jsxs("div", {
@@ -3996,7 +3999,13 @@ function MobileDialog(props) {
 		onOpenChange: handleOpenChange,
 		modal: mask !== false,
 		children: /* @__PURE__ */ 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",
@@ -4013,7 +4022,6 @@ function MobileDialog(props) {
 			mountContainer,
 			overlayClassName,
 			dir: direction,
-			onClickClose: close,
 			onEscapeKeyDown: (event) => {
 				if (keyboard) close();
 				event.preventDefault();
@@ -4024,45 +4032,70 @@ function MobileDialog(props) {
 			},
 			children: [
 				/* @__PURE__ */ jsxs(DialogHeader, {
-					className: title ? void 0 : "!univer-hidden",
+					className: title ? "univer-shrink-0 univer-px-10" : "!univer-hidden",
 					children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { className: "univer-hidden" })]
 				}),
-				children,
-				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-min-h-0 univer-min-w-0 univer-overflow-y-auto",
+					children
+				}),
+				footer && /* @__PURE__ */ 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 = 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 } = useContext(ConfigContext);
-	const maxHeight = ((_globalThis$CSS = globalThis.CSS) === null || _globalThis$CSS === void 0 ? void 0 : _globalThis$CSS.supports("height", "1dvh")) ? "80dvh" : "80vh";
+	const mobileOverlay = useContext(MobileOverlayContext);
+	const [surface, setSurface] = useState(null);
+	const modal = (mobileOverlay === null || mobileOverlay === void 0 ? void 0 : mobileOverlay.modal) ?? true;
+	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__ */ jsxs(Dialog$1, {
 		open,
 		onOpenChange,
-		modal: true,
+		modal,
 		children: [/* @__PURE__ */ jsx(DialogTrigger, {
 			asChild: true,
 			disabled,
 			children
 		}), /* @__PURE__ */ 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__ */ jsx("div", {
 					"aria-hidden": "true",
@@ -5191,8 +5224,10 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 	const longPressTimerRef = useRef(null);
 	const longPressIntervalRef = 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;
 	};
 	useEffect(() => {
@@ -5262,7 +5297,8 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 		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 {
@@ -5274,14 +5310,17 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 			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) {
@@ -5811,7 +5850,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__ */ jsxs("button", {
 						type: "button",
@@ -5839,7 +5878,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)
 			}),
@@ -5971,6 +6010,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__ */ 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__ */ jsx("span", {
+				className: "univer-flex-1",
+				children: title
+			}),
+			value && valueType === "color" && /* @__PURE__ */ 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__ */ 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 } = useContext(ConfigContext);
+	const [selectedIndex, setSelectedIndex] = 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__ */ jsxs("div", {
+		className: clsx("univer-grid univer-w-full univer-min-w-0 univer-gap-4", className),
+		children: [
+			types.length > 1 && /* @__PURE__ */ jsx("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-2",
+				children: types.map((type) => /* @__PURE__ */ 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__ */ jsxs("label", {
+				className: "univer-grid univer-gap-2 univer-text-base",
+				children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle, /* @__PURE__ */ 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__ */ jsxs("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2",
+				children: [
+					value.stops.map((stop, stopIndex) => /* @__PURE__ */ 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__ */ jsx("span", {
+							className: "univer-size-6 univer-shrink-0 univer-rounded",
+							style: {
+								backgroundColor: stop.color,
+								opacity: stop.opacity ?? 1
+							}
+						}), `${stop.offset}%`]
+					}, stopIndex)),
+					/* @__PURE__ */ jsx(Button, {
+						className: "univer-size-12",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
+						onClick: addStop,
+						children: /* @__PURE__ */ jsx(IncreaseIcon, {})
+					}),
+					/* @__PURE__ */ 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__ */ jsx(DeleteIcon, {})
+					})
+				]
+			}),
+			selectedStop && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-2 univer-gap-3",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "univer-grid univer-gap-2 univer-text-base",
+					children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset, /* @__PURE__ */ jsx(InputNumber, {
+						className: NUMBER_CLASS,
+						controls: false,
+						value: selectedStop.offset,
+						min: 0,
+						max: 100,
+						onChange: (offset) => updateStop({ offset: offset ?? 0 })
+					})]
+				}), /* @__PURE__ */ jsxs("label", {
+					className: "univer-grid univer-gap-2 univer-text-base",
+					children: [locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency, /* @__PURE__ */ 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__ */ jsx(MobileColorPicker, {
+				value: selectedStop.color,
+				onChange: (color) => updateStop({ color })
+			})] })
+		]
+	});
+}
+
 //#endregion
 //#region src/components/hover-card/HoverCardPrimitive.tsx
 const HoverCardPrimitive = Root$3;
@@ -6150,36 +6365,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__ */ 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__ */ jsx("span", {
-				className: "univer-flex-1",
-				children: title
-			}),
-			value && valueType === "color" && /* @__PURE__ */ 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__ */ 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) {
@@ -6419,9 +6604,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__ */ jsx("ul", {
@@ -6558,16 +6744,19 @@ function MobileSelect(props) {
 		items,
 		disabled,
 		onOpenChange: setOpen,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ 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__ */ 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__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
@@ -7017,4 +7206,89 @@ function unmount(container) {
 }
 
 //#endregion
-export { Accordion, ActionRow, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPickerPanel, ColorPresets, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileColorPresets, MobileConfirm, MobileDialog, MobileDropdown, MobileDropdownMenu, MobileSelect, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, StateIconButton, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resetButtonClassName, scrollbarClassName, selectClassName, toast, unmount };
+//#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 } = useContext(ConfigContext);
+	const [layout, updateLayout] = useReducer((_current, next) => next, null);
+	const layoutRef = useRef(null);
+	const measure = 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
+	]);
+	useLayoutEffect(() => {
+		measure();
+		const frame = requestAnimationFrame(measure);
+		return () => cancelAnimationFrame(frame);
+	});
+	return layout;
+}
+
+//#endregion
+export { Accordion, ActionRow, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPickerPanel, ColorPresets, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileColorPresets, MobileConfirm, MobileDialog, MobileDropdown, MobileDropdownMenu, MobileGradientColorPicker, MobileOverlayContext, MobileSelect, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, StateIconButton, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resetButtonClassName, resolveMobileKeyboardViewportLayout, revealFocusedElementInMobileViewport, scrollbarClassName, selectClassName, toast, unmount, useMobileKeyboardViewportLayout };

package/lib/index.css

@@ -337,6 +337,10 @@
   display: inline-block;
 }
 
+.\!univer-flex {
+  display: flex !important;
+}
+
 .univer-flex {
   display: flex;
 }
@@ -371,6 +375,11 @@
   height: 2.5rem;
 }
 
+.univer-size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+
 .univer-size-2 {
   width: .5rem;
   height: .5rem;
@@ -430,6 +439,10 @@
   height: 2.75rem !important;
 }
 
+.\!univer-h-auto {
+  height: auto !important;
+}
+
 .univer-h-0\.5 {
   height: .125rem;
 }
@@ -542,6 +555,10 @@
   max-height: 100vh;
 }
 
+.\!univer-min-h-12 {
+  min-height: 3rem !important;
+}
+
 .univer-min-h-0 {
   min-height: 0;
 }
@@ -642,6 +659,10 @@
   min-width: 0;
 }
 
+.univer-min-w-12 {
+  min-width: 3rem;
+}
+
 .univer-min-w-28 {
   min-width: 7rem;
 }
@@ -862,6 +883,10 @@
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.\!univer-flex-col {
+  flex-direction: column !important;
+}
+
 .univer-flex-col {
   flex-direction: column;
 }
@@ -1014,6 +1039,10 @@
   overflow: auto;
 }
 
+.\!univer-overflow-hidden {
+  overflow: hidden !important;
+}
+
 .univer-overflow-hidden {
   overflow: hidden;
 }
@@ -1459,6 +1488,11 @@
   padding-right: .375rem;
 }
 
+.univer-px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .univer-px-2 {
   padding-left: .5rem;
   padding-right: .5rem;
@@ -3294,6 +3328,10 @@
   display: flex;
 }
 
+.\[\&_input\]\:\!univer-h-12 input {
+  height: 3rem !important;
+}
+
 .\[\&_input\]\:univer-h-7 input {
   height: 1.75rem;
 }
@@ -3331,6 +3369,11 @@
   padding-right: .375rem;
 }
 
+.\[\&_input\]\:\!univer-text-base input {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
 .\[\&_input\]\:univer-text-sm input {
   font-size: .875rem;
   line-height: 1.25rem;