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

package/lib/cjs/index.js

@@ -18,42 +18,50 @@ let _radix_ui_react_separator = require("@radix-ui/react-separator");
 let react_dom_client = require("react-dom/client");
 
 //#region src/helper/clsx.ts
+const twMerge = (0, tailwind_merge.extendTailwindMerge)({ prefix: "univer-" });
 function clsx$1(...inputs) {
-	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+	return twMerge((0, clsx.clsx)(inputs));
 }
 
 //#endregion
 //#region src/components/accordion/Accordion.tsx
 function Accordion(props) {
-	const { className, items } = props;
-	const [openIndex, setOpenIndex] = (0, react.useState)(null);
+	var _props$openIndex;
+	const { className, defaultOpenIndex = null, items, onOpenIndexChange } = props;
+	const [innerOpenIndex, setInnerOpenIndex] = (0, react.useState)(defaultOpenIndex);
+	const openIndex = (_props$openIndex = props.openIndex) !== null && _props$openIndex !== void 0 ? _props$openIndex : innerOpenIndex;
 	const toggleItem = (index) => {
-		setOpenIndex(openIndex === index ? null : index);
+		const nextOpenIndex = openIndex === index ? null : index;
+		if (props.openIndex === void 0) setInnerOpenIndex(nextOpenIndex);
+		onOpenIndexChange === null || onOpenIndexChange === void 0 || onOpenIndexChange(nextOpenIndex);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-u-comp": "accordion",
 		className: clsx$1("univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600", className),
-		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
-			type: "button",
-			onClick: () => toggleItem(index),
-			children: [/* @__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": openIndex !== index,
-				"univer-rotate-0": openIndex === index
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-font-medium",
-				children: item.label
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: clsx$1("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
-				"univer-max-h-screen": openIndex === index,
-				"univer-max-h-0": openIndex !== index
-			}),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-box-border univer-px-4 univer-py-1.5",
-				children: item.children
-			})
-		})] }, index))
+		children: items.map((item, index) => {
+			var _item$id;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
+				type: "button",
+				onClick: () => toggleItem(index),
+				children: [/* @__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": openIndex !== index,
+					"univer-rotate-0": openIndex === index
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-font-medium",
+					children: item.label
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: clsx$1("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
+					"univer-max-h-screen": openIndex === index,
+					"univer-max-h-0": openIndex !== index
+				}),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-box-border univer-px-4 univer-py-1.5",
+					children: item.children
+				})
+			})] }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+		})
 	});
 }
 
@@ -144,6 +152,7 @@ const buttonVariants = (0, class_variance_authority.cva)("univer-box-border univ
 			ghost: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600"
 		},
 		size: {
+			icon: "univer-size-8 !univer-p-0",
 			small: "univer-h-6 univer-rounded-md univer-px-1.5 univer-text-xs",
 			middle: "univer-h-8 univer-rounded-lg univer-px-2 univer-text-sm",
 			large: "univer-h-10 univer-rounded-lg univer-px-3 univer-text-sm"
@@ -168,32 +177,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 +223,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
 /**
@@ -644,7 +656,7 @@ function DayButton(props) {
 }
 function Calendar(props) {
 	const { className, max, min, showTime = false, value, onValueChange } = props;
-	const { locale } = (0, react.useContext)(ConfigContext);
+	const { direction = "ltr", locale } = (0, react.useContext)(ConfigContext);
 	const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
 	const today = /* @__PURE__ */ new Date();
 	const [currentYear, setCurrentYear] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getFullYear());
@@ -740,6 +752,7 @@ function Calendar(props) {
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "calendar",
+		dir: direction,
 		className: clsx$1("univer-mx-auto univer-max-w-xs univer-select-none univer-rounded univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
@@ -749,7 +762,7 @@ function Calendar(props) {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
 						"aria-label": ariaLabels.previousMonth,
 						onClick: prevMonth,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-rotate-180" })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-rotate-180 rtl:!univer-rotate-0" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "univer-flex univer-items-center univer-gap-0.5 univer-text-sm univer-font-medium",
@@ -794,7 +807,7 @@ function Calendar(props) {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
 						"aria-label": ariaLabels.nextMonth,
 						onClick: nextMonth,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "rtl:univer-rotate-180" })
 					})
 				]
 			}),
@@ -979,22 +992,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 +1155,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 +1205,8 @@ function Dialog(props) {
 				} : {}
 			},
 			closable,
+			mountContainer,
+			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
 				if (keyboard) handleClickClose();
@@ -1453,14 +1473,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 +1916,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 +1985,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 +2006,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,
@@ -2441,11 +2462,11 @@ function Pager(props) {
 		children: hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-left-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
 				type: "button",
 				role: "button",
 				onClick: onClickLeftArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "rtl:univer-rotate-180" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-mx-1",
@@ -2453,11 +2474,11 @@ function Pager(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-right-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
 				type: "button",
 				role: "button",
 				onClick: onClickRightArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "rtl:univer-rotate-180" })
 			})
 		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mx-1",
@@ -2496,6 +2517,7 @@ function Gallery(props) {
 	const { direction } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
 	const activeImage = (0, react.useMemo)(() => images[activeImageIndex], [activeImageIndex, images]);
+	const hasPagination = images.length > 1;
 	(0, react.useEffect)(() => {
 		if (open && dialogRef.current) dialogRef.current.focus();
 	}, [open]);
@@ -2570,7 +2592,7 @@ function Gallery(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pager, {
+					hasPagination && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pager, {
 						className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
 						value: activeImageIndex + 1,
 						total: images.length,
@@ -2615,6 +2637,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 +2672,13 @@ 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 : direction === "rtl" ? {
+		...inputStyle,
+		paddingLeft: paddingRight
+	} : {
+		...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),
@@ -2656,7 +2686,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref,
 			type,
-			className: clsx$1(inputVariants({ size }), borderClassName, disabled && "univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400 dark:!univer-text-gray-500", allowClear && !slot && "univer-pr-8", inputClass),
+			className: clsx$1(inputVariants({ size }), borderClassName, disabled && "univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400 dark:!univer-text-gray-500", allowClear && !slot && (direction === "rtl" ? "univer-pl-8" : "univer-pr-8"), inputClass),
 			placeholder,
 			value,
 			disabled,
@@ -2666,13 +2696,10 @@ 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",
+			className: clsx$1("univer-absolute univer-flex univer-items-center univer-gap-1 univer-rounded-full", direction === "rtl" ? "univer-left-2" : "univer-right-2"),
 			ref: slotRef,
 			children: [slot, allowClear && value && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -2870,7 +2897,9 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 
 //#endregion
 //#region src/components/segmented/Segmented.tsx
+const SEGMENTED_PADDING = 4;
 function Segmented({ items, value, defaultValue, onChange, className = "" }) {
+	const { direction } = (0, react.useContext)(ConfigContext);
 	const [selectedItem, setSelectedItem] = (0, react.useState)(value !== void 0 ? value : defaultValue || items[0].value);
 	const [slideStyle, setSlideStyle] = (0, react.useState)({});
 	const itemRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -2884,14 +2913,16 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 		if (newItemElement && containerRef.current) {
 			const containerRect = containerRef.current.getBoundingClientRect();
 			const newRect = newItemElement.getBoundingClientRect();
-			const newLeft = newRect.left - containerRect.left - 4;
+			const newLeft = newRect.left - containerRect.left - SEGMENTED_PADDING;
 			if (oldItemElement) setSlideStyle({
-				"--slide-from": `${oldItemElement.getBoundingClientRect().left - containerRect.left - 4}px`,
+				"--slide-from": `${oldItemElement.getBoundingClientRect().left - containerRect.left - SEGMENTED_PADDING}px`,
 				"--slide-to": `${newLeft}px`,
+				left: `${SEGMENTED_PADDING}px`,
 				width: `${newRect.width}px`,
 				transform: `translateX(${newLeft}px)`
 			});
 			else setSlideStyle({
+				left: `${SEGMENTED_PADDING}px`,
 				width: `${newRect.width}px`,
 				transform: `translateX(${newLeft}px)`
 			});
@@ -2899,7 +2930,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	};
 	(0, react.useEffect)(() => {
 		updateSliderPosition(selectedItem);
-	}, [selectedItem]);
+	}, [direction, selectedItem]);
 	const handleClick = (itemValue) => {
 		const oldValue = selectedItem;
 		setSelectedItem(itemValue);
@@ -2908,6 +2939,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "segmented",
+		dir: direction,
 		ref: containerRef,
 		className: clsx$1("univer-relative univer-box-border univer-flex univer-min-w-0 univer-gap-1 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4374,7 +4406,7 @@ function Tree(props) {
 							e.stopPropagation();
 							handleExpendItem(treeItem);
 						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, {})
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
 						checked: selected && !intermediated,
@@ -4555,5 +4587,6 @@ exports.render = render;
 exports.resetButtonClassName = resetButtonClassName;
 exports.resizeObserverCtor = resizeObserverCtor;
 exports.scrollbarClassName = scrollbarClassName;
+exports.selectClassName = selectClassName;
 exports.toast = sonner.toast;
 exports.unmount = unmount;

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "زاوية",
 		flip: "قلب",
 		delete: "حذف",
-		transparency: "Transparency"
+		transparency: "الشفافية"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Angle",
 		flip: "Girar",
 		delete: "Eliminar",
-		transparency: "Transparency"
+		transparency: "Transparència"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Winkel",
 		flip: "Umkehren",
 		delete: "Löschen",
-		transparency: "Transparency"
+		transparency: "Transparenz"
 	}
 } };
 

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

@@ -2,8 +2,8 @@
 //#region src/locale/es-ES.ts
 const locale = { design: {
 	Confirm: {
-		cancel: "cancel·la",
-		confirm: "ok"
+		cancel: "Cancelar",
+		confirm: "Aceptar"
 	},
 	CascaderList: { empty: "Cap" },
 	Calendar: {
@@ -40,20 +40,20 @@ const locale = { design: {
 	},
 	Select: { empty: "Cap" },
 	ColorPicker: {
-		more: "Més colors",
-		cancel: "cancel·la",
-		confirm: "ok"
+		more: "Más colores",
+		cancel: "Cancelar",
+		confirm: "Aceptar"
 	},
 	GradientColorPicker: {
 		linear: "Lineal",
 		radial: "Radial",
 		angular: "Angular",
-		diamond: "Diamant",
-		offset: "Desplaçament",
-		angle: "Angle",
-		flip: "Girar",
+		diamond: "Diamante",
+		offset: "Desplazamiento",
+		angle: "Ángulo",
+		flip: "Invertir",
 		delete: "Eliminar",
-		transparency: "Transparency"
+		transparency: "Transparencia"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "زاویه",
 		flip: "برگردان",
 		delete: "حذف",
-		transparency: "Transparency"
+		transparency: "شفافیت"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Angle",
 		flip: "Retourner",
 		delete: "Supprimer",
-		transparency: "Transparency"
+		transparency: "Transparence"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Sudut",
 		flip: "Balik",
 		delete: "Hapus",
-		transparency: "Transparency"
+		transparency: "Transparansi"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Angolo",
 		flip: "Capovolgi",
 		delete: "Elimina",
-		transparency: "Transparency"
+		transparency: "Trasparenza"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "角度",
 		flip: "反転",
 		delete: "削除",
-		transparency: "Transparency"
+		transparency: "透明度"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "각도",
 		flip: "뒤집기",
 		delete: "삭제",
-		transparency: "Transparency"
+		transparency: "투명도"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Kąt",
 		flip: "Obrót",
 		delete: "Usuń",
-		transparency: "Transparency"
+		transparency: "Przezroczystość"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Ângulo",
 		flip: "Inverter",
 		delete: "Excluir",
-		transparency: "Transparency"
+		transparency: "Transparência"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "угол",
 		flip: "перевернуть",
 		delete: "удалить",
-		transparency: "Transparency"
+		transparency: "прозрачность"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Uhol",
 		flip: "Prevrátiť",
 		delete: "Odstrániť",
-		transparency: "Transparency"
+		transparency: "Priehľadnosť"
 	}
 } };
 

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

@@ -53,7 +53,7 @@ const locale = { design: {
 		angle: "Góc",
 		flip: "Lật",
 		delete: "Xóa",
-		transparency: "Transparency"
+		transparency: "Độ trong suốt"
 	}
 } };