@univerjs/design 0.24.0 → 0.25.0-insiders.20260608-e4336f7

package/lib/cjs/index.js

@@ -2652,7 +2652,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 		if (formatter) return formatter(formattedValue);
 		return String(formattedValue);
 	}
-	function parseValue(val) {
+	function parseNumberValue(val) {
 		if (!val) return null;
 		let parsedValue = val;
 		if (parser) parsedValue = parser(val);
@@ -2671,21 +2671,27 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				else result = roundedNum;
 			} else if (num.toString().includes("e")) result = Number.parseFloat(num.toFixed(16).replace(/\.?0+$/, ""));
 			else result = num;
-			if (max !== void 0 && result > max) result = max;
-			if (min !== void 0 && result < min) result = min;
 			return result;
 		} catch (e) {
 			return null;
 		}
 	}
+	function clampValue(val) {
+		if (val === null) return null;
+		if (max !== void 0 && val > max) return max;
+		if (min !== void 0 && val < min) return min;
+		return val;
+	}
 	function handleInputChange(value) {
-		setInputValue(value);
 		if (allowEmpty && value === "") {
+			setInputValue(value);
 			setInternalValue(null);
 			onChange === null || onChange === void 0 || onChange(null);
 			return;
 		}
-		const parsedValue = parseValue(value);
+		const parsedNumber = parseNumberValue(value);
+		const parsedValue = clampValue(parsedNumber);
+		setInputValue(parsedNumber !== null && parsedValue !== parsedNumber ? formatValue(parsedValue) : value);
 		setInternalValue(parsedValue);
 		onChange === null || onChange === void 0 || onChange(parsedValue);
 	}
@@ -2834,7 +2840,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "segmented",
 		ref: containerRef,
-		className: clsx$1("univer-relative univer-box-border univer-flex univer-gap-4 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
+		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", {
 			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-white univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
 			style: slideStyle
@@ -2842,7 +2848,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 			ref: (el) => {
 				if (el) itemRefs.current.set(item.value, el);
 			},
-			className: clsx$1("univer-relative univer-box-border univer-flex-1 univer-cursor-pointer univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
+			className: clsx$1("univer-relative univer-box-border univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
 				"univer-text-gray-900 dark:!univer-text-white": selectedItem === item.value,
 				"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white": selectedItem !== item.value
 			}),
@@ -3069,21 +3075,68 @@ const DEFAULT_VALUE = {
 		color: "#000000",
 		offset: 100
 	}],
-	angle: 90
+	angle: 0
 };
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function getStopOpacity(stop) {
+	var _stop$opacity;
+	return clamp((_stop$opacity = stop === null || stop === void 0 ? void 0 : stop.opacity) !== null && _stop$opacity !== void 0 ? _stop$opacity : 1, 0, 1);
+}
+function getColorWithOpacity(color, opacity) {
+	if (opacity >= 1) return color;
+	const value = color.trim();
+	if (/^#[0-9a-f]{3}$/i.test(value)) {
+		const [, r, g, b] = value;
+		return `rgba(${Number.parseInt(r + r, 16)}, ${Number.parseInt(g + g, 16)}, ${Number.parseInt(b + b, 16)}, ${opacity})`;
+	}
+	if (/^#[0-9a-f]{6}$/i.test(value)) return `rgba(${Number.parseInt(value.slice(1, 3), 16)}, ${Number.parseInt(value.slice(3, 5), 16)}, ${Number.parseInt(value.slice(5, 7), 16)}, ${opacity})`;
+	const rgba = /^rgba?\(([^)]+)\)$/i.exec(value);
+	if (rgba) {
+		const parts = rgba[1].split(",").map((part) => part.trim());
+		const baseAlpha = parts[3] === void 0 ? 1 : Number.parseFloat(parts[3]);
+		const alpha = Number.isFinite(baseAlpha) ? clamp(baseAlpha * opacity, 0, 1) : opacity;
+		return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+	}
+	return color;
+}
+function getStopColor(stop) {
+	return getColorWithOpacity(stop.color, getStopOpacity(stop));
+}
+function getGradientAngle(value) {
+	var _ref, _value$angle;
+	return (_ref = (_value$angle = value.angle) !== null && _value$angle !== void 0 ? _value$angle : DEFAULT_VALUE.angle) !== null && _ref !== void 0 ? _ref : 0;
+}
+function getCssLinearGradientAngle(value) {
+	return (getGradientAngle(value) + 90) % 360;
+}
 function GradientColorPicker(props) {
-	var _value$stops$selected, _value$stops$selected2;
-	const { className, value = DEFAULT_VALUE, onChange } = props;
+	var _draftValue$stops$sel, _locale$GradientColor, _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);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
 	const barRef = (0, react.useRef)(null);
+	const valueRef = (0, react.useRef)(value);
 	const cleanupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		valueRef.current = draftValue;
+	}, [draftValue]);
+	(0, react.useEffect)(() => {
+		setDraftValue(value);
+	}, [value]);
+	const emitChange = (nextValue) => {
+		valueRef.current = nextValue;
+		setDraftValue(nextValue);
+		onChange === null || onChange === void 0 || onChange(nextValue);
+	};
 	(0, react.useEffect)(() => {
 		setSelectedIndex((prev) => {
-			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			if (prev >= draftValue.stops.length) return Math.max(0, draftValue.stops.length - 1);
 			return prev;
 		});
-	}, [value.stops.length]);
+	}, [draftValue.stops.length]);
 	(0, react.useEffect)(() => {
 		return () => {
 			var _cleanupRef$current;
@@ -3091,40 +3144,52 @@ function GradientColorPicker(props) {
 		};
 	}, []);
 	const stops = (0, react.useMemo)(() => {
-		return [...value.stops].sort((a, b) => a.offset - b.offset);
-	}, [value.stops]);
+		return [...draftValue.stops].sort((a, b) => a.offset - b.offset);
+	}, [draftValue.stops]);
 	const handleTypeChange = (type) => {
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			type
 		});
 	};
 	const handleAngleChange = (angle) => {
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			angle: angle !== null && angle !== void 0 ? angle : 0
 		});
 	};
 	const handleStopColorChange = (color) => {
-		const newStops = [...value.stops];
+		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
 			color
 		};
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 	};
 	const handleStopOffsetChange = (offset) => {
 		if (offset === null) return;
-		const newStops = [...value.stops];
+		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
 			offset
 		};
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
+			stops: newStops
+		});
+	};
+	const handleStopTransparencyChange = (transparency) => {
+		const nextTransparency = clamp(transparency !== null && transparency !== void 0 ? transparency : 0, 0, 100);
+		const newStops = [...valueRef.current.stops];
+		newStops[selectedIndex] = {
+			...newStops[selectedIndex],
+			opacity: (100 - nextTransparency) / 100
+		};
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 	};
@@ -3132,43 +3197,92 @@ function GradientColorPicker(props) {
 		if (!barRef.current) return;
 		const rect = barRef.current.getBoundingClientRect();
 		const offset = Math.round((e.clientX - rect.left) / rect.width * 100);
+		const leftStop = [...stops].reverse().find((s) => s.offset <= offset) || stops[0];
 		const newStop = {
-			color: ([...stops].reverse().find((s) => s.offset <= offset) || stops[0]).color,
-			offset
+			color: leftStop.color,
+			offset,
+			opacity: getStopOpacity(leftStop)
 		};
-		const newStops = [...value.stops, newStop];
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		const newStops = [...valueRef.current.stops, newStop];
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 		setSelectedIndex(newStops.length - 1);
 	};
 	const handleRemoveStop = () => {
-		if (value.stops.length <= 2) return;
-		const newStops = value.stops.filter((_, i) => i !== selectedIndex);
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		if (draftValue.stops.length <= 2) return;
+		const newStops = valueRef.current.stops.filter((_, i) => i !== selectedIndex);
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 		setSelectedIndex(0);
 	};
 	const gradientPreview = (0, react.useMemo)(() => {
-		return `linear-gradient(to right, ${stops.map((s) => `${s.color} ${s.offset}%`).join(", ")})`;
+		return `linear-gradient(to right, ${stops.map((s) => `${getStopColor(s)} ${s.offset}%`).join(", ")})`;
 	}, [stops]);
 	const mainPreview = (0, react.useMemo)(() => {
-		const stopsStr = stops.map((s) => `${s.color} ${s.offset}%`).join(", ");
-		switch (value.type) {
-			case "linear": return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+		const stopsStr = stops.map((s) => `${getStopColor(s)} ${s.offset}%`).join(", ");
+		switch (draftValue.type) {
+			case "linear": return `linear-gradient(${getCssLinearGradientAngle(draftValue)}deg, ${stopsStr})`;
 			case "radial": return `radial-gradient(circle, ${stopsStr})`;
-			case "angular": return `conic-gradient(from ${value.angle}deg, ${stopsStr})`;
+			case "angular": return `conic-gradient(from ${getGradientAngle(draftValue)}deg, ${stopsStr})`;
 			case "diamond": return `radial-gradient(circle, ${stopsStr})`;
-			default: return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+			default: return `linear-gradient(${getCssLinearGradientAngle(draftValue)}deg, ${stopsStr})`;
 		}
-	}, [value, stops]);
+	}, [draftValue, stops]);
+	const showAngleEditor = draftValue.type === "linear" || draftValue.type === "angular";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: clsx$1("univer-flex univer-w-64 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
+		className: clsx$1(compact ? `
+                      univer-flex univer-w-full univer-min-w-0 univer-flex-col univer-gap-3 univer-rounded-md
+                      univer-bg-transparent univer-p-0
+                      dark:!univer-bg-transparent
+                    ` : `
+                      univer-flex univer-w-full univer-min-w-0 univer-max-w-80 univer-flex-col univer-gap-4
+                      univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg
+                      dark:!univer-bg-gray-800
+                    `, className),
+		onClick: (e) => e.stopPropagation(),
+		onPointerDown: (e) => e.stopPropagation(),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segmented, {
+			compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "\n                          univer-flex univer-min-w-0 univer-items-center univer-gap-4 univer-border-b\n                          univer-border-gray-100\n                          dark:!univer-border-gray-700\n                        ",
+				children: [
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.linear,
+						value: "linear"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.radial,
+						value: "radial"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angular,
+						value: "angular"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.diamond,
+						value: "diamond"
+					}
+				].map((item) => {
+					const selected = draftValue.type === item.value;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: clsx$1("univer-relative univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-0 univer-pb-2 univer-pt-0 univer-text-xs univer-transition-colors", selected ? `
+                                              univer-font-medium univer-text-primary-600
+                                              dark:!univer-text-primary-300
+                                            ` : `
+                                              univer-text-gray-500
+                                              hover:univer-text-gray-900
+                                              dark:hover:!univer-text-white
+                                            `),
+						onClick: () => handleTypeChange(item.value),
+						children: [item.label, selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "\n                                              univer-absolute univer-inset-x-2 -univer-bottom-px univer-h-0.5\n                                              univer-rounded-full univer-bg-primary-600\n                                              dark:!univer-bg-primary-300\n                                            " })]
+					}, item.value);
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segmented, {
+				className: "univer-w-full univer-min-w-0 univer-gap-1 univer-overflow-hidden",
 				items: [
 					{
 						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.linear,
@@ -3187,49 +3301,67 @@ function GradientColorPicker(props) {
 						value: "diamond"
 					}
 				],
-				value: value.type,
+				value: draftValue.type,
 				onChange: (v) => handleTypeChange(v)
 			}),
+			showAngleEditor && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "gradient-color-picker-angle",
+				className: "univer-flex univer-items-center univer-justify-between univer-gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-xs univer-text-gray-500",
+					children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+					className: "univer-w-24",
+					value: getGradientAngle(draftValue),
+					min: 0,
+					max: 360,
+					onChange: handleAngleChange
+				})]
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-u-comp": "gradient-color-picker-preview",
-				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
+				className: clsx$1("univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600", compact ? "univer-h-20" : "univer-h-32"),
 				style: { background: mainPreview }
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-relative univer-mt-4 univer-h-6",
+				className: clsx$1("univer-relative univer-h-6", compact ? "univer-mt-1" : "univer-mt-4"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: barRef,
 					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
-				}), value.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), draftValue.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-u-comp": "gradient-color-picker-stop",
 					"data-selected": selectedIndex === index,
 					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
-						backgroundColor: stop.color
+						backgroundColor: getStopColor(stop)
 					},
 					onClick: (e) => {
 						e.stopPropagation();
 						setSelectedIndex(index);
 					},
 					onPointerDown: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
 						const startX = e.clientX;
 						const startOffset = stop.offset;
+						setSelectedIndex(index);
 						const handlePointerMove = (moveEvent) => {
 							if (!barRef.current) return;
+							moveEvent.preventDefault();
 							const rect = barRef.current.getBoundingClientRect();
 							const deltaOffset = (moveEvent.clientX - startX) / rect.width * 100;
 							const newOffset = Math.max(0, Math.min(100, Math.round(startOffset + deltaOffset)));
-							const newStops = [...value.stops];
+							const newStops = [...valueRef.current.stops];
 							newStops[index] = {
 								...newStops[index],
 								offset: newOffset
 							};
-							onChange === null || onChange === void 0 || onChange({
-								...value,
+							emitChange({
+								...valueRef.current,
 								stops: newStops
 							});
 						};
@@ -3250,25 +3382,28 @@ function GradientColorPicker(props) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							className: "univer-mb-0.5 univer-text-xs univer-text-gray-500",
 							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
-							value: (_value$stops$selected = value.stops[selectedIndex]) === null || _value$stops$selected === void 0 ? void 0 : _value$stops$selected.offset,
+							value: (_draftValue$stops$sel = draftValue.stops[selectedIndex]) === null || _draftValue$stops$sel === void 0 ? void 0 : _draftValue$stops$sel.offset,
 							min: 0,
 							max: 100,
 							onChange: handleStopOffsetChange
 						})]
 					}),
-					(value.type === "linear" || value.type === "angular") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
-							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+							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"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
-							value: value.angle,
+							value: Math.round((1 - getStopOpacity(draftValue.stops[selectedIndex])) * 100),
 							min: 0,
-							max: 360,
-							onChange: handleAngleChange
+							max: 100,
+							step: 10,
+							formatter: (v) => `${v}%`,
+							parser: (v) => (v === null || v === void 0 ? void 0 : v.replace(/%/g, "")) || "",
+							onChange: handleStopTransparencyChange
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3279,7 +3414,7 @@ function GradientColorPicker(props) {
 								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
-								disabled: value.stops.length <= 2,
+								disabled: draftValue.stops.length <= 2,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
 							})
 						})
@@ -3287,9 +3422,9 @@ function GradientColorPicker(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700",
+				className: clsx$1("univer-border-t univer-border-gray-100 dark:!univer-border-gray-700", compact ? "univer-pt-3" : "univer-pt-4"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
-					value: (_value$stops$selected2 = value.stops[selectedIndex]) === null || _value$stops$selected2 === void 0 ? void 0 : _value$stops$selected2.color,
+					value: (_draftValue$stops$sel2 = draftValue.stops[selectedIndex]) === null || _draftValue$stops$sel2 === void 0 ? void 0 : _draftValue$stops$sel2.color,
 					onChange: handleStopColorChange
 				})
 			})
@@ -3793,7 +3928,7 @@ function Select(props) {
 		return label || value;
 	}, [options, value]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, {
-		className: "max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		className: "univer-max-h-80 univer-w-[--radix-popper-anchor-width] univer-min-w-36 univer-overflow-auto",
 		align: "start",
 		open,
 		items,

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

@@ -0,0 +1,55 @@
+
+//#region src/locale/ar-SA.ts
+const locale = { design: {
+	Confirm: {
+		cancel: "إلغاء",
+		confirm: "موافق"
+	},
+	CascaderList: { empty: "لا شيء" },
+	Calendar: {
+		year: "",
+		weekDays: [
+			"ح",
+			"ن",
+			"ث",
+			"ر",
+			"خ",
+			"ج",
+			"س"
+		],
+		months: [
+			"يناير",
+			"فبراير",
+			"مارس",
+			"أبريل",
+			"مايو",
+			"يونيو",
+			"يوليو",
+			"أغسطس",
+			"سبتمبر",
+			"أكتوبر",
+			"نوفمبر",
+			"ديسمبر"
+		]
+	},
+	Select: { empty: "لا شيء" },
+	ColorPicker: {
+		more: "المزيد من الألوان",
+		cancel: "إلغاء",
+		confirm: "موافق"
+	},
+	GradientColorPicker: {
+		linear: "خطي",
+		radial: "شعاعي",
+		angular: "زاوي",
+		diamond: "ماسي",
+		offset: "إزاحة",
+		angle: "زاوية",
+		flip: "قلب",
+		delete: "حذف",
+		transparency: "Transparency"
+	}
+} };
+
+//#endregion
+module.exports = locale;

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

@@ -46,7 +46,8 @@ const locale = { design: {
 		offset: "Desplaçament",
 		angle: "Angle",
 		flip: "Girar",
-		delete: "Eliminar"
+		delete: "Eliminar",
+		transparency: "Transparency"
 	}
 } };
 

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

@@ -0,0 +1,55 @@
+
+//#region src/locale/de-DE.ts
+const locale = { design: {
+	Confirm: {
+		cancel: "Abbrechen",
+		confirm: "OK"
+	},
+	CascaderList: { empty: "Keine" },
+	Calendar: {
+		year: "",
+		weekDays: [
+			"So",
+			"Mo",
+			"Di",
+			"Mi",
+			"Do",
+			"Fr",
+			"Sa"
+		],
+		months: [
+			"Jan",
+			"Feb",
+			"Mär",
+			"Apr",
+			"Mai",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Okt",
+			"Nov",
+			"Dez"
+		]
+	},
+	Select: { empty: "Keine" },
+	ColorPicker: {
+		more: "Mehr Farben",
+		cancel: "Abbrechen",
+		confirm: "OK"
+	},
+	GradientColorPicker: {
+		linear: "Linear",
+		radial: "Radial",
+		angular: "Winkel",
+		diamond: "Diamant",
+		offset: "Versatz",
+		angle: "Winkel",
+		flip: "Umkehren",
+		delete: "Löschen",
+		transparency: "Transparency"
+	}
+} };
+
+//#endregion
+module.exports = locale;

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

@@ -61,7 +61,8 @@ const locale = { design: {
 		offset: "Offset",
 		angle: "Angle",
 		flip: "Flip",
-		delete: "Delete"
+		delete: "Delete",
+		transparency: "Transparency"
 	}
 } };
 

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

@@ -46,7 +46,8 @@ const locale = { design: {
 		offset: "Desplaçament",
 		angle: "Angle",
 		flip: "Girar",
-		delete: "Eliminar"
+		delete: "Eliminar",
+		transparency: "Transparency"
 	}
 } };
 

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

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

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

@@ -46,7 +46,8 @@ const locale = { design: {
 		offset: "Décalage",
 		angle: "Angle",
 		flip: "Retourner",
-		delete: "Supprimer"
+		delete: "Supprimer",
+		transparency: "Transparency"
 	}
 } };
 

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

@@ -0,0 +1,55 @@
+
+//#region src/locale/id-ID.ts
+const locale = { design: {
+	Confirm: {
+		cancel: "Batal",
+		confirm: "OK"
+	},
+	CascaderList: { empty: "Tidak ada" },
+	Calendar: {
+		year: "",
+		weekDays: [
+			"Min",
+			"Sen",
+			"Sel",
+			"Rab",
+			"Kam",
+			"Jum",
+			"Sab"
+		],
+		months: [
+			"Jan",
+			"Feb",
+			"Mar",
+			"Apr",
+			"Mei",
+			"Jun",
+			"Jul",
+			"Agu",
+			"Sep",
+			"Okt",
+			"Nov",
+			"Des"
+		]
+	},
+	Select: { empty: "Tidak ada" },
+	ColorPicker: {
+		more: "Warna Lainnya",
+		cancel: "Batal",
+		confirm: "OK"
+	},
+	GradientColorPicker: {
+		linear: "Linear",
+		radial: "Radial",
+		angular: "Angular",
+		diamond: "Berlian",
+		offset: "Offset",
+		angle: "Sudut",
+		flip: "Balik",
+		delete: "Hapus",
+		transparency: "Transparency"
+	}
+} };
+
+//#endregion
+module.exports = locale;