@univerjs/design 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/cjs/index.js

@@ -168,32 +168,6 @@ const Button = (0, react.forwardRef)(({ className, variant, size, asChild = fals
 });
 Button.displayName = "Button";
 
-//#endregion
-//#region src/components/button/ButtonGroup.tsx
-const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
-	const totalButtons = react.Children.count(children);
-	const isHorizontal = orientation === "horizontal";
-	const isVertical = orientation === "vertical";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: clsx$1("univer-grid", {
-			"univer-grid-flow-row": isVertical,
-			"univer-w-fit": isVertical
-		}, className),
-		children: react.Children.map(children, (child, index) => {
-			const isFirst = index === 0;
-			const isLast = index === totalButtons - 1;
-			return (0, react.cloneElement)(child, { className: clsx$1({
-				"!univer-rounded-l-none": isHorizontal && !isFirst,
-				"!univer-rounded-r-none": isHorizontal && !isLast,
-				"!univer-border-l-0": isHorizontal && !isFirst,
-				"!univer-rounded-t-none": isVertical && !isFirst,
-				"!univer-rounded-b-none": isVertical && !isLast,
-				"!univer-border-t-0": isVertical && !isFirst
-			}, child.props.className) });
-		})
-	});
-};
-
 //#endregion
 //#region src/helper/is-browser.ts
 /**
@@ -240,6 +214,35 @@ function ConfigProvider(props) {
 	});
 }
 
+//#endregion
+//#region src/components/button/ButtonGroup.tsx
+const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
+	const { direction } = (0, react.useContext)(ConfigContext);
+	const totalButtons = react.Children.count(children);
+	const isHorizontal = orientation === "horizontal";
+	const isVertical = orientation === "vertical";
+	const isRtl = direction === "rtl";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-grid", {
+			"univer-grid-flow-row": isVertical,
+			"univer-w-fit": isVertical
+		}, className),
+		children: react.Children.map(children, (child, index) => {
+			const isFirst = index === 0;
+			const isLast = index === totalButtons - 1;
+			return (0, react.cloneElement)(child, { className: clsx$1({
+				"!univer-rounded-l-none": isHorizontal && (isRtl ? !isLast : !isFirst),
+				"!univer-rounded-r-none": isHorizontal && (isRtl ? !isFirst : !isLast),
+				"!univer-border-l-0": isHorizontal && !isRtl && !isFirst,
+				"!univer-border-r-0": isHorizontal && isRtl && !isFirst,
+				"!univer-rounded-t-none": isVertical && !isFirst,
+				"!univer-rounded-b-none": isVertical && !isLast,
+				"!univer-border-t-0": isVertical && !isFirst
+			}, child.props.className) });
+		})
+	});
+};
+
 //#endregion
 //#region src/helper/class-utilities.ts
 /**
@@ -979,22 +982,27 @@ const DialogOverlay = (0, react.forwardRef)(({ className, ...props }, ref) => /*
 	...props
 }));
 DialogOverlay.displayName = _radix_ui_react_dialog.Overlay.displayName;
-const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-	ref,
-	className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
-	...props,
-	children: [children, closable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
-		className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none",
-		onClick: onClickClose,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "univer-sr-only",
-			children: "Close"
+const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
+	container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+		ref,
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
+		...props,
+		children: [children, closable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
+			"data-slot": "close",
+			className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none rtl:univer-left-4 rtl:univer-right-auto",
+			onClick: onClickClose,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-sr-only",
+				children: "Close"
+			})]
 		})]
 	})]
-})] }));
+}));
 DialogContent.displayName = _radix_ui_react_dialog.Content.displayName;
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: clsx$1("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left", className),
+	"data-slot": "dialog-header",
+	className: clsx$1("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left sm:rtl:!univer-text-right", className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
@@ -1137,7 +1145,7 @@ function useDraggable(options = {}) {
 function Dialog(props) {
 	var _locale$Confirm$cance, _locale$Confirm, _locale$Confirm$confi, _locale$Confirm2;
 	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
-	const { locale } = (0, react.useContext)(ConfigContext);
+	const { locale, mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
 		defaultPosition,
 		enabled: draggable
@@ -1187,6 +1195,8 @@ function Dialog(props) {
 				} : {}
 			},
 			closable,
+			mountContainer,
+			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
 				if (keyboard) handleClickClose();
@@ -1453,14 +1463,14 @@ function HexInput({ hsv, onChange }) {
 		if (!isValidHex(inputValue)) setInputValue(hexValue.replace(/^#/, ""));
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		className: clsx$1("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white", borderClassName),
+		className: clsx$1("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-white", borderClassName),
 		value: inputValue,
 		onChange: handleChange,
 		onBlur: handleBlur,
 		maxLength: 6,
 		spellCheck: false
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",
+		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400 rtl:univer-left-auto rtl:univer-right-1.5",
 		children: "#"
 	})] });
 }
@@ -1896,7 +1906,7 @@ const MemoizedColorInput = (0, react.memo)(ColorInput);
 const MemoizedColorPresets = (0, react.memo)(ColorPresets);
 function ColorPicker({ format = "hex", value, onChange }) {
 	if (!isBrowser) return null;
-	const { locale } = (0, react.useContext)(ConfigContext);
+	const { direction, locale } = (0, react.useContext)(ConfigContext);
 	const [hsv, setHsv] = (0, react.useState)([
 		0,
 		100,
@@ -1965,6 +1975,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "color-picker",
+		dir: direction,
 		className: "univer-cursor-default univer-space-y-2 univer-rounded-lg",
 		onClick: (e) => e.stopPropagation(),
 		children: [
@@ -1985,7 +1996,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
-				className: "!univer-w-fit !univer-p-2.5",
+				className: "!univer-z-[1090] !univer-w-fit !univer-p-2.5",
 				closable: false,
 				maskClosable: false,
 				open: visible,
@@ -2615,6 +2626,7 @@ const inputVariants = (0, class_variance_authority.cva)("univer-box-border unive
 	defaultVariants: { size: "small" }
 });
 const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type = "text", placeholder, value, size = "small", allowClear = false, disabled = false, onClick, onKeyDown, onChange, onFocus, onBlur, slot, inputClass, inputStyle, ...props }, ref) => {
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const handleClear = (e) => {
 		e.stopPropagation();
 		onChange === null || onChange === void 0 || onChange("");
@@ -2649,6 +2661,10 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 	(0, react.useEffect)(() => {
 		if (allowClear && !(slot && slotRef.current)) setPaddingRight(26);
 	}, []);
+	const mergedInputStyle = direction === "rtl" && paddingRight === 0 ? inputStyle : {
+		...inputStyle,
+		paddingRight
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "input",
 		className: clsx$1("univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md", disabled && "univer-cursor-not-allowed", className),
@@ -2666,10 +2682,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 			onChange: handleChange,
 			onFocus,
 			onBlur,
-			style: {
-				...inputStyle,
-				paddingRight
-			},
+			style: mergedInputStyle,
 			...props
 		}), hasSlotContent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full",

package/lib/es/index.js

@@ -167,32 +167,6 @@ const Button = forwardRef(({ className, variant, size, asChild = false, ...props
 });
 Button.displayName = "Button";
 
-//#endregion
-//#region src/components/button/ButtonGroup.tsx
-const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
-	const totalButtons = Children.count(children);
-	const isHorizontal = orientation === "horizontal";
-	const isVertical = orientation === "vertical";
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("univer-grid", {
-			"univer-grid-flow-row": isVertical,
-			"univer-w-fit": isVertical
-		}, className),
-		children: Children.map(children, (child, index) => {
-			const isFirst = index === 0;
-			const isLast = index === totalButtons - 1;
-			return cloneElement(child, { className: clsx({
-				"!univer-rounded-l-none": isHorizontal && !isFirst,
-				"!univer-rounded-r-none": isHorizontal && !isLast,
-				"!univer-border-l-0": isHorizontal && !isFirst,
-				"!univer-rounded-t-none": isVertical && !isFirst,
-				"!univer-rounded-b-none": isVertical && !isLast,
-				"!univer-border-t-0": isVertical && !isFirst
-			}, child.props.className) });
-		})
-	});
-};
-
 //#endregion
 //#region src/helper/is-browser.ts
 /**
@@ -239,6 +213,35 @@ function ConfigProvider(props) {
 	});
 }
 
+//#endregion
+//#region src/components/button/ButtonGroup.tsx
+const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
+	const { direction } = useContext(ConfigContext);
+	const totalButtons = Children.count(children);
+	const isHorizontal = orientation === "horizontal";
+	const isVertical = orientation === "vertical";
+	const isRtl = direction === "rtl";
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-grid", {
+			"univer-grid-flow-row": isVertical,
+			"univer-w-fit": isVertical
+		}, className),
+		children: Children.map(children, (child, index) => {
+			const isFirst = index === 0;
+			const isLast = index === totalButtons - 1;
+			return cloneElement(child, { className: clsx({
+				"!univer-rounded-l-none": isHorizontal && (isRtl ? !isLast : !isFirst),
+				"!univer-rounded-r-none": isHorizontal && (isRtl ? !isFirst : !isLast),
+				"!univer-border-l-0": isHorizontal && !isRtl && !isFirst,
+				"!univer-border-r-0": isHorizontal && isRtl && !isFirst,
+				"!univer-rounded-t-none": isVertical && !isFirst,
+				"!univer-rounded-b-none": isVertical && !isLast,
+				"!univer-border-t-0": isVertical && !isFirst
+			}, child.props.className) });
+		})
+	});
+};
+
 //#endregion
 //#region src/helper/class-utilities.ts
 /**
@@ -978,22 +981,27 @@ const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 	...props
 }));
 DialogOverlay.displayName = Overlay.displayName;
-const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
-	ref,
-	className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
-	...props,
-	children: [children, closable && /* @__PURE__ */ jsxs(Close, {
-		className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none",
-		onClick: onClickClose,
-		children: [/* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ jsx("span", {
-			className: "univer-sr-only",
-			children: "Close"
+const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, {
+	container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
+	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
+		ref,
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
+		...props,
+		children: [children, closable && /* @__PURE__ */ jsxs(Close, {
+			"data-slot": "close",
+			className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none rtl:univer-left-4 rtl:univer-right-auto",
+			onClick: onClickClose,
+			children: [/* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ jsx("span", {
+				className: "univer-sr-only",
+				children: "Close"
+			})]
 		})]
 	})]
-})] }));
+}));
 DialogContent.displayName = Content$2.displayName;
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: clsx("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left", className),
+	"data-slot": "dialog-header",
+	className: clsx("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left sm:rtl:!univer-text-right", className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
@@ -1136,7 +1144,7 @@ function useDraggable(options = {}) {
 function Dialog(props) {
 	var _locale$Confirm$cance, _locale$Confirm, _locale$Confirm$confi, _locale$Confirm2;
 	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
-	const { locale } = useContext(ConfigContext);
+	const { locale, mountContainer, direction } = useContext(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
 		defaultPosition,
 		enabled: draggable
@@ -1186,6 +1194,8 @@ function Dialog(props) {
 				} : {}
 			},
 			closable,
+			mountContainer,
+			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
 				if (keyboard) handleClickClose();
@@ -1452,14 +1462,14 @@ function HexInput({ hsv, onChange }) {
 		if (!isValidHex(inputValue)) setInputValue(hexValue.replace(/^#/, ""));
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white", borderClassName),
+		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-white", borderClassName),
 		value: inputValue,
 		onChange: handleChange,
 		onBlur: handleBlur,
 		maxLength: 6,
 		spellCheck: false
 	}), /* @__PURE__ */ jsx("span", {
-		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",
+		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400 rtl:univer-left-auto rtl:univer-right-1.5",
 		children: "#"
 	})] });
 }
@@ -1895,7 +1905,7 @@ const MemoizedColorInput = memo(ColorInput);
 const MemoizedColorPresets = memo(ColorPresets);
 function ColorPicker({ format = "hex", value, onChange }) {
 	if (!isBrowser) return null;
-	const { locale } = useContext(ConfigContext);
+	const { direction, locale } = useContext(ConfigContext);
 	const [hsv, setHsv] = useState([
 		0,
 		100,
@@ -1964,6 +1974,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "color-picker",
+		dir: direction,
 		className: "univer-cursor-default univer-space-y-2 univer-rounded-lg",
 		onClick: (e) => e.stopPropagation(),
 		children: [
@@ -1984,7 +1995,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 				})
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
-				className: "!univer-w-fit !univer-p-2.5",
+				className: "!univer-z-[1090] !univer-w-fit !univer-p-2.5",
 				closable: false,
 				maskClosable: false,
 				open: visible,
@@ -2614,6 +2625,7 @@ const inputVariants = cva$1("univer-box-border univer-w-full univer-rounded-md u
 	defaultVariants: { size: "small" }
 });
 const Input = forwardRef(({ autoFocus = false, className, style, type = "text", placeholder, value, size = "small", allowClear = false, disabled = false, onClick, onKeyDown, onChange, onFocus, onBlur, slot, inputClass, inputStyle, ...props }, ref) => {
+	const { direction } = useContext(ConfigContext);
 	const handleClear = (e) => {
 		e.stopPropagation();
 		onChange === null || onChange === void 0 || onChange("");
@@ -2648,6 +2660,10 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 	useEffect(() => {
 		if (allowClear && !(slot && slotRef.current)) setPaddingRight(26);
 	}, []);
+	const mergedInputStyle = direction === "rtl" && paddingRight === 0 ? inputStyle : {
+		...inputStyle,
+		paddingRight
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "input",
 		className: clsx("univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md", disabled && "univer-cursor-not-allowed", className),
@@ -2665,10 +2681,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 			onChange: handleChange,
 			onFocus,
 			onBlur,
-			style: {
-				...inputStyle,
-				paddingRight
-			},
+			style: mergedInputStyle,
 			...props
 		}), hasSlotContent && /* @__PURE__ */ jsxs("div", {
 			className: "univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full",

package/lib/index.css

@@ -179,6 +179,10 @@
   top: 1px;
 }
 
+.\!univer-z-\[1090\] {
+  z-index: 1090 !important;
+}
+
 .univer-z-0 {
   z-index: 0;
 }
@@ -945,6 +949,10 @@
   border-left-width: 0 !important;
 }
 
+.\!univer-border-r-0 {
+  border-right-width: 0 !important;
+}
+
 .\!univer-border-t-0 {
   border-top-width: 0 !important;
 }
@@ -2169,10 +2177,22 @@
   }
 }
 
+.rtl\:univer-left-4:where([dir="rtl"], [dir="rtl"] *) {
+  left: 1rem;
+}
+
+.rtl\:univer-left-auto:where([dir="rtl"], [dir="rtl"] *) {
+  left: auto;
+}
+
 .rtl\:univer-left-px:where([dir="rtl"], [dir="rtl"] *) {
   left: 1px;
 }
 
+.rtl\:univer-right-1\.5:where([dir="rtl"], [dir="rtl"] *) {
+  right: .375rem;
+}
+
 .rtl\:univer-right-auto:where([dir="rtl"], [dir="rtl"] *) {
   right: auto;
 }
@@ -2195,6 +2215,20 @@
   border-right-width: 1px;
 }
 
+.rtl\:\!univer-pl-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: .5rem !important;
+}
+
+.rtl\:\!univer-pr-4:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 1rem !important;
+}
+
+@media (min-width: 640px) {
+  .sm\:rtl\:\!univer-text-right:where([dir="rtl"], [dir="rtl"] *) {
+    text-align: right !important;
+  }
+}
+
 .dark\:\!univer-divide-gray-600:where(.univer-dark, .univer-dark *) > :not([hidden]) ~ :not([hidden]) {
   border-color: var(--univer-gray-600) !important;
 }