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

package/lib/cjs/index.js

@@ -5,8 +5,8 @@ let clsx = require("clsx");
 let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
-let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let _radix_ui_react_direction = require("@radix-ui/react-direction");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
@@ -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);
+		})
 	});
 }
 
@@ -111,10 +119,57 @@ function Avatar(props) {
 	});
 }
 
+//#endregion
+//#region src/helper/is-browser.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function isBrowser() {
+	return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+//#endregion
+//#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 value = (0, react.useMemo)(() => {
+		return {
+			locale,
+			direction,
+			mountContainer
+		};
+	}, [
+		locale,
+		direction,
+		mountContainer
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_direction.DirectionProvider, {
+			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			children
+		})
+	});
+}
+
 //#endregion
 //#region src/components/badge/Badge.tsx
 function Badge(props) {
 	const { className, children, closable = false, onClose } = props;
+	const { locale } = (0, react.useContext)(ConfigContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		"data-u-comp": "badge",
 		className: clsx$1("univer-box-border univer-inline-flex univer-items-center univer-gap-1 univer-truncate univer-rounded-md univer-border univer-border-solid univer-border-gray-100 univer-bg-gray-100 univer-px-2.5 univer-py-0.5 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-border-gray-500 dark:!univer-bg-gray-700 dark:!univer-text-gray-300", className),
@@ -124,7 +179,7 @@ function Badge(props) {
 		}), closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-p-0 univer-outline-none univer-transition-opacity hover:univer-opacity-70",
 			type: "button",
-			"aria-label": "Close badge",
+			"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.closeBadge,
 			onClick: onClose,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-text-current" })
 		})]
@@ -144,6 +199,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,52 +224,6 @@ const Button = (0, react.forwardRef)(({ className, variant, size, asChild = fals
 });
 Button.displayName = "Button";
 
-//#endregion
-//#region src/helper/is-browser.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-function isBrowser() {
-	return typeof window !== "undefined" && typeof document !== "undefined";
-}
-
-//#endregion
-//#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 value = (0, react.useMemo)(() => {
-		return {
-			locale,
-			direction,
-			mountContainer
-		};
-	}, [
-		locale,
-		direction,
-		mountContainer
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigContext.Provider, {
-		value,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_direction.DirectionProvider, {
-			dir: direction !== null && direction !== void 0 ? direction : "ltr",
-			children
-		})
-	});
-}
-
 //#endregion
 //#region src/components/button/ButtonGroup.tsx
 const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
@@ -647,7 +657,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());
@@ -743,6 +753,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", {
@@ -752,7 +763,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",
@@ -797,7 +808,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" })
 					})
 				]
 			}),
@@ -1143,7 +1154,6 @@ 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, mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
@@ -1154,11 +1164,11 @@ function Dialog(props) {
 		className: "univer-flex univer-justify-end univer-gap-2",
 		children: [showCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			onClick: onCancel,
-			children: (_locale$Confirm$cance = locale === null || locale === void 0 || (_locale$Confirm = locale.Confirm) === null || _locale$Confirm === void 0 ? void 0 : _locale$Confirm.cancel) !== null && _locale$Confirm$cance !== void 0 ? _locale$Confirm$cance : "Cancel"
+			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
 		}), showOk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 			variant: "primary",
 			onClick: onOk,
-			children: (_locale$Confirm$confi = locale === null || locale === void 0 || (_locale$Confirm2 = locale.Confirm) === null || _locale$Confirm2 === void 0 ? void 0 : _locale$Confirm2.confirm) !== null && _locale$Confirm$confi !== void 0 ? _locale$Confirm$confi : "OK"
+			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
 		})]
 	}) : null;
 	const handleContentRef = (0, react.useCallback)((node) => {
@@ -1905,7 +1915,6 @@ const MemoizedAlphaSlider = (0, react.memo)(AlphaSlider);
 const MemoizedColorInput = (0, react.memo)(ColorInput);
 const MemoizedColorPresets = (0, react.memo)(ColorPresets);
 function ColorPicker({ format = "hex", value, onChange }) {
-	if (!isBrowser) return null;
 	const { direction, locale } = (0, react.useContext)(ConfigContext);
 	const [hsv, setHsv] = (0, react.useState)([
 		0,
@@ -1942,6 +1951,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 			console.error("Invalid value:", error);
 		}
 	}, [value, format]);
+	if (!isBrowser) return null;
 	function handleColorChange(h, s, v) {
 		setHsv([
 			h,
@@ -2430,11 +2440,7 @@ const FormDualColumnLayout = (props) => {
 */
 function Pager(props) {
 	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
-	const text = (0, react.useMemo)(() => propText !== null && propText !== void 0 ? propText : `${current}/${count}`, [
-		current,
-		count,
-		propText
-	]);
+	const text = propText !== null && propText !== void 0 ? propText : `${current}/${count}`;
 	const hasValue = count > 0;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
@@ -2452,11 +2458,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",
@@ -2464,11 +2470,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",
@@ -2504,9 +2510,10 @@ function Gallery(props) {
 	const [isVisible, setIsVisible] = (0, react.useState)(false);
 	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
 	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
-	const { direction } = (0, react.useContext)(ConfigContext);
+	const { direction, locale } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
-	const activeImage = (0, react.useMemo)(() => images[activeImageIndex], [activeImageIndex, images]);
+	const activeImage = images[activeImageIndex];
+	const hasPagination = images.length > 1;
 	(0, react.useEffect)(() => {
 		if (open && dialogRef.current) dialogRef.current.focus();
 	}, [open]);
@@ -2555,7 +2562,7 @@ function Gallery(props) {
 		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-label": "Image gallery",
+		"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery,
 		tabIndex: -1,
 		ref: dialogRef,
 		className: clsx$1("univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-h-screen univer-w-screen univer-select-none univer-items-center univer-justify-center", {
@@ -2574,14 +2581,14 @@ function Gallery(props) {
 					className: "univer-h-full univer-w-full univer-object-contain univer-transition-transform univer-duration-300 univer-ease-out",
 					style: { transform: `scale(${zoomLevel})` },
 					src: activeImage,
-					alt: `Image ${activeImageIndex + 1} of ${images.length}`,
+					alt: locale === null || locale === void 0 ? void 0 : locale.Accessibility.image.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length)),
 					draggable: false
 				})
 			}),
 			/* @__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,
@@ -2589,21 +2596,21 @@ function Gallery(props) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": "Zoom in",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom(.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomInIcon, { "aria-hidden": "true" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": "Zoom out",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom(-.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomOutIcon, { "aria-hidden": "true" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": "Reset zoom",
+						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom,
 						className: buttonClassName,
 						onClick: () => handleToggleZoom("reset"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.OneToOneIcon, { "aria-hidden": "true" })
@@ -2661,7 +2668,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 : {
+	const mergedInputStyle = direction === "rtl" && paddingRight === 0 ? inputStyle : direction === "rtl" ? {
+		...inputStyle,
+		paddingLeft: paddingRight
+	} : {
 		...inputStyle,
 		paddingRight
 	};
@@ -2672,7 +2682,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,
@@ -2685,7 +2695,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 			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",
@@ -2700,9 +2710,10 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
 const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+	const { locale } = (0, react.useContext)(ConfigContext);
 	const [internalValue, setInternalValue] = (0, react.useState)(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = (0, react.useRef)(internalValue);
-	const [inputValue, setInputValue] = (0, react.useState)(formatValue(internalValue));
+	const [inputValue, setInputValue] = (0, react.useState)(() => formatValue(internalValue));
 	const inputRef = (0, react.useRef)(null);
 	const longPressTimerRef = (0, react.useRef)(null);
 	const longPressIntervalRef = (0, react.useRef)(null);
@@ -2854,7 +2865,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
-					"aria-label": "increment",
+					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
 					"aria-disabled": incrementDisabled,
 					tabIndex: -1,
 					onMouseDown: (e) => e.preventDefault(),
@@ -2866,7 +2877,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
-					"aria-label": "decrement",
+					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.decrement,
 					"aria-disabled": decrementDisabled,
 					tabIndex: -1,
 					onMouseDown: (e) => e.preventDefault(),
@@ -2883,7 +2894,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());
@@ -2897,14 +2910,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)`
 			});
@@ -2912,7 +2927,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	};
 	(0, react.useEffect)(() => {
 		updateSliderPosition(selectedItem);
-	}, [selectedItem]);
+	}, [direction, selectedItem]);
 	const handleClick = (itemValue) => {
 		const oldValue = selectedItem;
 		setSelectedItem(itemValue);
@@ -2921,6 +2936,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", {
@@ -3194,7 +3210,7 @@ function getCssLinearGradientAngle(value) {
 	return (getGradientAngle(value) + 90) % 360;
 }
 function GradientColorPicker(props) {
-	var _draftValue$stops$sel, _locale$GradientColor, _draftValue$stops$sel2;
+	var _draftValue$stops$sel, _draftValue$stops$sel2;
 	const { className, compact = false, value = DEFAULT_VALUE, onChange } = props;
 	const { locale } = (0, react.useContext)(ConfigContext);
 	const [draftValue, setDraftValue] = (0, react.useState)(value);
@@ -3462,7 +3478,7 @@ function GradientColorPicker(props) {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "univer-mb-0.5 univer-text-xs univer-text-gray-500",
-							children: (_locale$GradientColor = locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency) !== null && _locale$GradientColor !== void 0 ? _locale$GradientColor : "Transparency"
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
 							value: Math.round((1 - getStopOpacity(draftValue.stops[selectedIndex])) * 100),
 							min: 0,
@@ -4387,7 +4403,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,
@@ -4568,5 +4584,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

@@ -1,6 +1,16 @@
 
 //#region src/locale/ar-SA.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "إغلاق الشارة",
+		imageGallery: "معرض الصور",
+		image: "الصورة {0} من {1}",
+		zoomIn: "تكبير",
+		zoomOut: "تصغير",
+		resetZoom: "إعادة ضبط التكبير",
+		increment: "زيادة",
+		decrement: "إنقاص"
+	},
 	Confirm: {
 		cancel: "إلغاء",
 		confirm: "موافق"
@@ -53,7 +63,7 @@ const locale = { design: {
 		angle: "زاوية",
 		flip: "قلب",
 		delete: "حذف",
-		transparency: "Transparency"
+		transparency: "الشفافية"
 	}
 } };
 

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

@@ -1,6 +1,16 @@
 
 //#region src/locale/ca-ES.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Tanca la insígnia",
+		imageGallery: "Galeria d’imatges",
+		image: "Imatge {0} de {1}",
+		zoomIn: "Apropa",
+		zoomOut: "Allunya",
+		resetZoom: "Restableix el zoom",
+		increment: "Incrementa",
+		decrement: "Disminueix"
+	},
 	Confirm: {
 		cancel: "cancel·la",
 		confirm: "ok"
@@ -53,7 +63,7 @@ const locale = { design: {
 		angle: "Angle",
 		flip: "Girar",
 		delete: "Eliminar",
-		transparency: "Transparency"
+		transparency: "Transparència"
 	}
 } };
 

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

@@ -1,6 +1,16 @@
 
 //#region src/locale/de-DE.ts
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Badge schließen",
+		imageGallery: "Bildergalerie",
+		image: "Bild {0} von {1}",
+		zoomIn: "Vergrößern",
+		zoomOut: "Verkleinern",
+		resetZoom: "Zoom zurücksetzen",
+		increment: "Erhöhen",
+		decrement: "Verringern"
+	},
 	Confirm: {
 		cancel: "Abbrechen",
 		confirm: "OK"
@@ -53,7 +63,7 @@ const locale = { design: {
 		angle: "Winkel",
 		flip: "Umkehren",
 		delete: "Löschen",
-		transparency: "Transparency"
+		transparency: "Transparenz"
 	}
 } };
 

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

@@ -16,6 +16,16 @@
 * limitations under the License.
 */
 const locale = { design: {
+	Accessibility: {
+		closeBadge: "Close badge",
+		imageGallery: "Image gallery",
+		image: "Image {0} of {1}",
+		zoomIn: "Zoom in",
+		zoomOut: "Zoom out",
+		resetZoom: "Reset zoom",
+		increment: "increment",
+		decrement: "decrement"
+	},
 	Confirm: {
 		cancel: "cancel",
 		confirm: "ok"