@univerjs/design 0.25.1 → 1.0.0-alpha.1

package/lib/index.js

@@ -3,13 +3,13 @@ import { Children, cloneElement, createContext, forwardRef, isValidElement, memo
 import { clsx as clsx$1 } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cva, cva as cva$1 } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
 import { DirectionProvider } from "@radix-ui/react-direction";
-import { Close, Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
-import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger } from "@radix-ui/react-popover";
+import { CheckboxItem, Content, Item, ItemIndicator, Portal, RadioGroup as RadioGroup$1, RadioItem, Root, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-dropdown-menu";
+import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-popover";
+import { Close, Content as Content$2, Description, Overlay, Portal as Portal$2, Root as Root$2, Title } from "@radix-ui/react-dialog";
 import { createPortal } from "react-dom";
-import { CheckboxItem, Content as Content$2, Item, ItemIndicator, Portal as Portal$2, RadioGroup as RadioGroup$1, RadioItem, Root as Root$2, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger as Trigger$1 } from "@radix-ui/react-dropdown-menu";
 import { Content as Content$3, Portal as Portal$3, Root as Root$3, Trigger as Trigger$2 } from "@radix-ui/react-hover-card";
 import { Toaster as Toaster$1, toast, toast as toast$1 } from "sonner";
 import { CSSTransition } from "react-transition-group";
@@ -58,10 +58,7 @@ function Accordion(props) {
 
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-const avatarVariants = cva(`
-      univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200
-      univer-text-center univer-align-middle univer-text-white
-    `, {
+const avatarVariants = cva$1("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-white", {
 	variants: {
 		/**
 		* The shape of the avatar
@@ -135,55 +132,15 @@ function Badge(props) {
 
 //#endregion
 //#region src/components/button/Button.tsx
-const buttonVariants = cva(`
-      univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center
-      univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid
-      univer-text-sm univer-font-medium univer-transition-colors
-      disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50
-      [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0
-    `, {
+const buttonVariants = cva$1("univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid univer-text-sm univer-font-medium univer-transition-colors disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", {
 	variants: {
 		variant: {
-			default: `
-                  univer-border-gray-200 univer-bg-white univer-text-gray-700
-                  hover:univer-bg-gray-100
-                  active:univer-bg-gray-200
-                  dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-white
-                  dark:hover:!univer-bg-gray-600
-                  dark:active:!univer-bg-gray-700
-                `,
-			primary: `
-                  univer-border-primary-600 univer-bg-primary-600 univer-text-white
-                  hover:univer-bg-primary-500
-                  active:univer-bg-primary-700
-                `,
-			danger: `
-                  univer-border-red-500 univer-bg-red-500 univer-text-white
-                  hover:univer-border-red-400 hover:univer-bg-red-400
-                  active:univer-border-red-600 active:univer-bg-red-600
-                `,
-			text: `
-                  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
-                `,
-			link: `
-                  univer-underline-current univer-border-transparent univer-bg-transparent univer-text-primary-600
-                  univer-underline-offset-4
-                  hover:univer-text-primary-500 hover:univer-underline
-                  active:univer-text-primary-700
-                `,
-			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
-                `
+			default: "univer-border-gray-200 univer-bg-white univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-white dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700",
+			primary: "univer-border-primary-600 univer-bg-primary-600 univer-text-white hover:univer-bg-primary-500 active:univer-bg-primary-700",
+			danger: "univer-border-red-500 univer-bg-red-500 univer-text-white hover:univer-border-red-400 hover:univer-bg-red-400 active:univer-border-red-600 active:univer-bg-red-600",
+			text: "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",
+			link: "univer-underline-current univer-border-transparent univer-bg-transparent univer-text-primary-600 univer-underline-offset-4 hover:univer-text-primary-500 hover:univer-underline active:univer-text-primary-700",
+			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: {
 			small: "univer-h-6 univer-rounded-md univer-px-1.5 univer-text-xs",
@@ -310,6 +267,243 @@ const borderBottomClassName = clsx(borderBasicClassName, "univer-border-l-0 univ
 const borderRightClassName = clsx(borderBasicClassName, "univer-border-l-0 univer-border-b-0 univer-border-t-0 univer-border-r");
 const divideYClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid";
 const divideXClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid";
+const resetButtonClassName = "univer-m-0 univer-flex univer-appearance-none univer-items-center univer-justify-center univer-border-0 univer-bg-transparent univer-p-0 univer-leading-none univer-outline-none univer-cursor-pointer";
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenuPrimitive.tsx
+function DropdownMenuPrimitive({ ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: clsx("univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[state=open]:univer-bg-gray-100 focus:univer-bg-gray-100 dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(MoreRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[variant=destructive]:univer-text-red-600 data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 data-[variant=destructive]:focus:univer-bg-red-50 dark:data-[variant=destructive]:!univer-text-red-400 dark:focus:!univer-bg-gray-600 dark:data-[variant=destructive]:focus:!univer-bg-red-900 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		checked,
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ jsx("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
+	return /* @__PURE__ */ jsxs(RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ jsx("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		className: clsx("-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenu.tsx
+function DropdownMenu(props) {
+	const { children, items, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	function renderMenuItem(item, index) {
+		const { className, type } = item;
+		if (type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, { className }, index);
+		else if (type === "custom") return /* @__PURE__ */ jsx("div", {
+			className,
+			children: item.children
+		}, index);
+		else if (type === "radio") return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			className,
+			value: item.value,
+			onValueChange: item.onSelect,
+			children: item.options.map((option, index) => {
+				if ("type" in option) {
+					if (option.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: option.className }, index);
+				} else {
+					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
+					return /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: option.value,
+						disabled: option.disabled,
+						hideIndicator: item.hideIndicator,
+						children: option.label
+					}, option.value);
+				}
+				return null;
+			})
+		}, index);
+		else if (type === "checkbox") return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			className,
+			disabled: item.disabled,
+			checked: item.checked,
+			onSelect: () => {
+				var _item$onSelect;
+				(_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item, item.value);
+			},
+			children: item.label
+		}, index);
+		else if (type === "item") return /* @__PURE__ */ jsx(DropdownMenuItem, {
+			className,
+			disabled: item.disabled,
+			variant: item.variant,
+			onSelect: () => {
+				var _item$onSelect2;
+				(_item$onSelect2 = item.onSelect) === null || _item$onSelect2 === void 0 || _item$onSelect2.call(item, item);
+			},
+			children: item.children
+		}, index);
+		else if (type === "subItem") {
+			var _item$options;
+			return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+				sideOffset: 12,
+				children: (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
+			}) })] }, index);
+		}
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive, {
+		modal: false,
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "univer-text-sm",
+			collisionPadding: {
+				top: 12,
+				bottom: 12
+			},
+			onWheel: (e) => e.stopPropagation(),
+			...restProps,
+			children: items.map((item, index) => renderMenuItem(item, index))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/dropdown/PopoverPrimitive.tsx
+function PopoverPrimitive({ ...props }) {
+	return /* @__PURE__ */ jsx(Root$1, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Trigger$1, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(Content$1, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: clsx("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-white dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
+		...props
+	}) });
+}
+
+//#endregion
+//#region src/components/dropdown/Dropdown.tsx
+function Dropdown(props) {
+	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	return /* @__PURE__ */ jsxs(PopoverPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			...restProps,
+			children: overlay
+		})]
+	});
+}
 
 //#endregion
 //#region src/helper/date.ts
@@ -372,28 +566,89 @@ function TimeInput(props) {
 }
 
 //#endregion
-//#region src/components/calendar/Calendar.tsx
-function getDaysInMonth(year, month) {
-	return new Date(year, month + 1, 0).getDate();
-}
-function getFirstDayOfWeek(year, month) {
-	return new Date(year, month, 1).getDay();
-}
-function DayButton(props) {
-	const { className, ...restProps } = props;
-	return /* @__PURE__ */ jsx("button", {
-		className: clsx("univer-size-7 univer-rounded-md univer-border-none univer-bg-transparent univer-p-1 univer-transition-all hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", className),
-		type: "button",
-		...restProps
-	});
-}
-function Calendar(props) {
-	const { className, max, min, showTime = false, value, onValueChange } = props;
-	const { locale } = useContext(ConfigContext);
-	const { year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
-	const today = /* @__PURE__ */ new Date();
-	const [currentYear, setCurrentYear] = useState((value !== null && value !== void 0 ? value : today).getFullYear());
-	const [currentMonth, setCurrentMonth] = useState((value !== null && value !== void 0 ? value : today).getMonth());
+//#region src/components/virtual-list/VirtualList.tsx
+function VirtualList(props) {
+	const { data, itemKey, children, height, itemHeight, initialScrollIndex = 0, overscan = 2, className, style } = props;
+	const initialScrollTop = height && itemHeight ? initialScrollIndex * itemHeight : 0;
+	const scrollerRef = useRef(null);
+	const [scrollTop, setScrollTop] = useState(initialScrollTop);
+	useEffect(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller || !height || !itemHeight) return;
+		const nextScrollTop = initialScrollIndex * itemHeight;
+		scroller.scrollTop = nextScrollTop;
+		setScrollTop(nextScrollTop);
+	}, [
+		height,
+		initialScrollIndex,
+		itemHeight
+	]);
+	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		style,
+		children: data.map((item, index) => {
+			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+			return /* @__PURE__ */ jsx("div", { children: children(item, index) }, key);
+		})
+	});
+	const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+	const visibleCount = Math.ceil(height / itemHeight) + overscan * 2;
+	const end = Math.min(data.length, start + visibleCount);
+	const offsetY = start * itemHeight;
+	const totalHeight = data.length * itemHeight;
+	const visibleItems = data.slice(start, end);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scrollerRef,
+		className,
+		style: {
+			...style,
+			height,
+			overflowY: "auto"
+		},
+		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: totalHeight,
+				position: "relative"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: { transform: `translateY(${offsetY}px)` },
+				children: visibleItems.map((item, index) => {
+					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+					return /* @__PURE__ */ jsx("div", { children: children(item, start + index) }, key);
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/calendar/Calendar.tsx
+const DEFAULT_YEAR_RANGE = 100;
+const YEAR_ITEM_HEIGHT = 32;
+const YEAR_LIST_HEIGHT = 224;
+function getDaysInMonth(year, month) {
+	return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+	return new Date(year, month, 1).getDay();
+}
+function DayButton(props) {
+	const { className, ...restProps } = props;
+	return /* @__PURE__ */ jsx("button", {
+		className: clsx("univer-size-7 univer-rounded-md univer-border-none univer-bg-transparent univer-p-1 univer-transition-all hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", className),
+		type: "button",
+		...restProps
+	});
+}
+function Calendar(props) {
+	const { className, max, min, showTime = false, value, onValueChange } = props;
+	const { locale } = useContext(ConfigContext);
+	const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
+	const today = /* @__PURE__ */ new Date();
+	const [currentYear, setCurrentYear] = useState((value !== null && value !== void 0 ? value : today).getFullYear());
+	const [currentMonth, setCurrentMonth] = useState((value !== null && value !== void 0 ? value : today).getMonth());
+	const [yearDropdownOpen, setYearDropdownOpen] = useState(false);
 	function prevMonth() {
 		setCurrentMonth((prev) => {
 			if (prev === 0) {
@@ -412,6 +667,34 @@ function Calendar(props) {
 			return prev + 1;
 		});
 	}
+	function handleChangeMonth(month) {
+		setCurrentMonth(Number(month));
+	}
+	function handleChangeYear(year) {
+		setCurrentYear(year);
+		setYearDropdownOpen(false);
+	}
+	const yearOptions = useMemo(() => {
+		var _min$getFullYear, _max$getFullYear;
+		const startYear = (_min$getFullYear = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _min$getFullYear !== void 0 ? _min$getFullYear : currentYear - DEFAULT_YEAR_RANGE;
+		const endYear = (_max$getFullYear = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _max$getFullYear !== void 0 ? _max$getFullYear : currentYear + DEFAULT_YEAR_RANGE;
+		return Array.from({ length: Math.max(0, endYear - startYear + 1) }, (_, index) => ({ year: startYear + index }));
+	}, [
+		currentYear,
+		max,
+		min
+	]);
+	const currentYearIndex = Math.max(0, yearOptions.findIndex((item) => item.year === currentYear));
+	const monthMenuItems = useMemo(() => [{
+		type: "radio",
+		value: String(currentMonth),
+		hideIndicator: true,
+		options: months.map((month, index) => ({
+			label: month,
+			value: String(index)
+		})),
+		onSelect: handleChangeMonth
+	}], [currentMonth, months]);
 	const daysInMonth = getDaysInMonth(currentYear, currentMonth);
 	const firstDay = getFirstDayOfWeek(currentYear, currentMonth);
 	const days = useMemo(() => {
@@ -463,21 +746,52 @@ function Calendar(props) {
 				children: [
 					/* @__PURE__ */ jsx(DayButton, {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
-						"aria-label": "Previous Month",
+						"aria-label": ariaLabels.previousMonth,
 						onClick: prevMonth,
 						children: /* @__PURE__ */ jsx(MoreRightIcon, { className: "univer-rotate-180" })
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "univer-flex univer-gap-0.5 univer-text-sm univer-font-medium",
-						children: [
-							/* @__PURE__ */ jsx("span", { children: currentYear }),
-							/* @__PURE__ */ jsx("span", { children: year }),
-							/* @__PURE__ */ jsx("span", { children: months[currentMonth] })
-						]
+						className: "univer-flex univer-items-center univer-gap-0.5 univer-text-sm univer-font-medium",
+						children: [/* @__PURE__ */ jsx(Dropdown, {
+							align: "center",
+							className: "univer-w-24 univer-p-1.5",
+							open: yearDropdownOpen,
+							overlay: /* @__PURE__ */ jsx(VirtualList, {
+								className: "univer-rounded",
+								data: yearOptions,
+								height: YEAR_LIST_HEIGHT,
+								initialScrollIndex: currentYearIndex,
+								itemHeight: YEAR_ITEM_HEIGHT,
+								itemKey: "year",
+								children: (item) => /* @__PURE__ */ jsx("button", {
+									className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", { "univer-bg-gray-200 dark:!univer-bg-gray-500": item.year === currentYear }),
+									type: "button",
+									onClick: () => handleChangeYear(item.year),
+									children: item.year
+								})
+							}),
+							onOpenChange: setYearDropdownOpen,
+							children: /* @__PURE__ */ jsxs(Button, {
+								variant: "text",
+								type: "button",
+								"aria-label": ariaLabels.selectYear,
+								children: [currentYear, year]
+							})
+						}), /* @__PURE__ */ jsx(DropdownMenu, {
+							align: "center",
+							className: "univer-max-h-80 univer-min-w-28 univer-overflow-auto",
+							items: monthMenuItems,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "text",
+								type: "button",
+								"aria-label": ariaLabels.selectMonth,
+								children: months[currentMonth]
+							})
+						})]
 					}),
 					/* @__PURE__ */ jsx(DayButton, {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
-						"aria-label": "Next Month",
+						"aria-label": ariaLabels.nextMonth,
 						onClick: nextMonth,
 						children: /* @__PURE__ */ jsx(MoreRightIcon, {})
 					})
@@ -656,15 +970,15 @@ function Checkbox(props) {
 
 //#endregion
 //#region src/components/dialog/DialogPrimitive.tsx
-const Dialog$1 = Root;
-const DialogPortal = Portal;
+const Dialog$1 = Root$2;
+const DialogPortal = Portal$2;
 const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Overlay, {
 	ref,
 	className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 univer-fixed univer-inset-0 univer-z-[1080] univer-bg-[rgba(0,0,0,0.8)]", className),
 	...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, {
+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,
@@ -677,7 +991,7 @@ const DialogContent = forwardRef(({ className, children, closable = true, onClic
 		})]
 	})]
 })] }));
-DialogContent.displayName = Content.displayName;
+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),
 	...props
@@ -1764,55 +2078,6 @@ function Confirm(props) {
 	});
 }
 
-//#endregion
-//#region src/components/dropdown/PopoverPrimitive.tsx
-function PopoverPrimitive({ ...props }) {
-	return /* @__PURE__ */ jsx(Root$1, {
-		"data-slot": "popover",
-		...props
-	});
-}
-function PopoverTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Trigger, {
-		"data-slot": "popover-trigger",
-		...props
-	});
-}
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(Content$1, {
-		"data-slot": "popover-content",
-		align,
-		sideOffset,
-		className: clsx("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-white dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
-		...props
-	}) });
-}
-
-//#endregion
-//#region src/components/dropdown/Dropdown.tsx
-function Dropdown(props) {
-	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-	const isControlled = controlledOpen !== void 0;
-	const open = isControlled ? controlledOpen : uncontrolledOpen;
-	function handleChangeOpen(newOpen) {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledOpen(newOpen);
-		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
-	}
-	return /* @__PURE__ */ jsxs(PopoverPrimitive, {
-		open,
-		onOpenChange: handleChangeOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			...restProps,
-			children: overlay
-		})]
-	});
-}
-
 //#endregion
 //#region src/components/date-picker/DatePicker.tsx
 /**
@@ -1917,364 +2182,177 @@ function DateRangePicker(props) {
 	});
 }
 
-//#endregion
-//#region src/components/draggable-list/DraggableList.tsx
-function moveItemByIndex(list, fromIndex, toIndex) {
-	if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= list.length || toIndex >= list.length) return list;
-	const next = [...list];
-	const [item] = next.splice(fromIndex, 1);
-	next.splice(toIndex, 0, item);
-	return next;
-}
-function DraggableList(props) {
-	const { list, onListChange, idKey, itemRender, className, style, draggableHandle, rowHeight, margin = [0, 0], onDragStart, onDragStop, ...restProps } = props;
-	const [displayList, setDisplayList] = useState(list);
-	const displayListRef = useRef(list);
-	const [draggingId, setDraggingId] = useState(null);
-	const [dragOverId, setDragOverId] = useState(null);
-	const [ghostElement, setGhostElement] = useState(null);
-	const [ghostPosition, setGhostPosition] = useState(null);
-	const [canUsePortal, setCanUsePortal] = useState(false);
-	const pointerIdRef = useRef(null);
-	const dragPointerOffsetRef = useRef({
-		x: 0,
-		y: 0
-	});
-	const dragItemSizeRef = useRef({
-		width: 0,
-		height: 0
-	});
-	const ghostContainerRef = useRef(null);
-	const pressedHandleIdRef = useRef(null);
-	const dragSourceIdRef = useRef(null);
-	const dragStartIndexRef = useRef(-1);
-	const { direction } = useContext(ConfigContext);
-	useEffect(() => {
-		if (!draggingId) {
-			setDisplayList(list);
-			displayListRef.current = list;
-		}
-	}, [draggingId, list]);
-	useEffect(() => {
-		setCanUsePortal(typeof document !== "undefined");
-	}, []);
-	useEffect(() => {
-		const container = ghostContainerRef.current;
-		if (!container) return;
-		container.replaceChildren();
-		if (ghostElement) container.appendChild(ghostElement);
-	}, [ghostElement]);
-	useEffect(() => {
-		if (!draggingId) return;
-		const handlePointerMove = (evt) => {
-			const sourceId = dragSourceIdRef.current;
-			if (!sourceId || pointerIdRef.current !== evt.pointerId) return;
-			setGhostPosition({
-				x: evt.clientX - dragPointerOffsetRef.current.x,
-				y: evt.clientY - dragPointerOffsetRef.current.y
-			});
-			const element = document.elementFromPoint(evt.clientX, evt.clientY);
-			const itemElement = element === null || element === void 0 ? void 0 : element.closest("[data-draggable-list-item-id]");
-			const targetId = itemElement === null || itemElement === void 0 ? void 0 : itemElement.dataset.draggableListItemId;
-			if (!targetId || targetId === sourceId) return;
-			setDragOverId(targetId);
-			setDisplayList((prev) => {
-				const fromIndex = prev.findIndex((it) => getItemId(it) === sourceId);
-				const toIndex = prev.findIndex((it) => getItemId(it) === targetId);
-				if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return prev;
-				const next = moveItemByIndex(prev, fromIndex, toIndex);
-				displayListRef.current = next;
-				return next;
-			});
-		};
-		const handlePointerUp = (evt) => {
-			if (pointerIdRef.current !== evt.pointerId) return;
-			const sourceId = dragSourceIdRef.current;
-			const startIndex = dragStartIndexRef.current;
-			const currentList = displayListRef.current;
-			if (sourceId) {
-				const finalIndex = currentList.findIndex((it) => getItemId(it) === sourceId);
-				onDragStop === null || onDragStop === void 0 || onDragStop(void 0, { y: startIndex }, { y: finalIndex });
-				if (startIndex >= 0) onListChange([...currentList]);
-			}
-			pointerIdRef.current = null;
-			pressedHandleIdRef.current = null;
-			dragSourceIdRef.current = null;
-			dragStartIndexRef.current = -1;
-			setDragOverId(null);
-			setGhostElement(null);
-			setGhostPosition(null);
-			setDraggingId(null);
-		};
-		window.addEventListener("pointermove", handlePointerMove);
-		window.addEventListener("pointerup", handlePointerUp);
-		window.addEventListener("pointercancel", handlePointerUp);
-		return () => {
-			window.removeEventListener("pointermove", handlePointerMove);
-			window.removeEventListener("pointerup", handlePointerUp);
-			window.removeEventListener("pointercancel", handlePointerUp);
-		};
-	}, [
-		draggingId,
-		onDragStop,
-		onListChange
-	]);
-	const gapStyle = useMemo(() => {
-		const [horizontal, vertical] = margin;
-		return {
-			rowGap: `${vertical}px`,
-			paddingLeft: horizontal ? `${horizontal}px` : void 0,
-			paddingRight: horizontal ? `${horizontal}px` : void 0,
-			...style
-		};
-	}, [margin, style]);
-	const getItemId = (item) => String(item[idKey]);
-	const draggingItem = draggingId ? displayList.find((item) => getItemId(item) === draggingId) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		...restProps,
-		className: clsx("univer-flex univer-flex-col", draggingId && "univer-cursor-grabbing univer-select-none", className),
-		style: gapStyle,
-		children: displayList.map((item, index) => {
-			const itemId = getItemId(item);
-			const isDraggingItem = draggingId === itemId;
-			return /* @__PURE__ */ jsxs("div", {
-				"data-draggable-list-item-id": itemId,
-				className: clsx("univer-relative univer-transition-all univer-duration-150", isDraggingItem && "univer-opacity-0", dragOverId === itemId && !isDraggingItem && `
-                                  univer-bg-primary-50/60
-                                  dark:!univer-bg-primary-900/20
-                                  univer-rounded univer-border univer-border-primary-200
-                                  dark:!univer-border-primary-700
-                                `),
-				onPointerDownCapture: (e) => {
-					if (pointerIdRef.current !== null) return;
-					if (!draggableHandle) pressedHandleIdRef.current = itemId;
-					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
-					if (pressedHandleIdRef.current !== itemId) return;
-					const rect = e.currentTarget.getBoundingClientRect();
-					dragPointerOffsetRef.current = {
-						x: e.clientX - rect.left,
-						y: e.clientY - rect.top
-					};
-					dragItemSizeRef.current = {
-						width: rect.width,
-						height: rect.height
-					};
-					setGhostPosition({
-						x: rect.left,
-						y: rect.top
-					});
-					setGhostElement(e.currentTarget.cloneNode(true));
-					pointerIdRef.current = e.pointerId;
-					dragSourceIdRef.current = itemId;
-					dragStartIndexRef.current = index;
-					setDraggingId(itemId);
-					displayListRef.current = displayList;
-					onDragStart === null || onDragStart === void 0 || onDragStart(void 0, { y: index });
-					e.preventDefault();
-					e.currentTarget.setPointerCapture(e.pointerId);
-				},
-				style: {
-					...rowHeight ? { minHeight: `${rowHeight}px` } : void 0,
-					cursor: draggingId ? "grabbing" : void 0
-				},
-				children: [isDraggingItem && /* @__PURE__ */ jsx("div", { className: "\n                                      univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded\n                                      univer-border univer-border-dashed univer-border-primary-300\n                                    " }), itemRender(item, index)]
-			}, itemId);
-		})
-	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
-		dir: direction,
-		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
-		style: {
-			zIndex: 2147483647,
-			left: `${ghostPosition.x}px`,
-			top: `${ghostPosition.y}px`,
-			width: `${dragItemSizeRef.current.width}px`,
-			height: `${dragItemSizeRef.current.height}px`,
-			opacity: .95
-		},
-		children: ghostElement ? /* @__PURE__ */ jsx("div", { ref: ghostContainerRef }) : itemRender(draggingItem, displayList.findIndex((item) => getItemId(item) === getItemId(draggingItem)))
-	}), document.body)] });
-}
-
-//#endregion
-//#region src/components/dropdown-menu/DropdownMenuPrimitive.tsx
-function DropdownMenuPrimitive({ ...props }) {
-	return /* @__PURE__ */ jsx(Root$2, {
-		"data-slot": "dropdown-menu",
-		...props
-	});
-}
-function DropdownMenuPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Portal$2, {
-		"data-slot": "dropdown-menu-portal",
-		...props
-	});
-}
-function DropdownMenuTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Trigger$1, {
-		"data-slot": "dropdown-menu-trigger",
-		...props
-	});
-}
-function DropdownMenuSub({ ...props }) {
-	return /* @__PURE__ */ jsx(Sub, {
-		"data-slot": "dropdown-menu-sub",
-		...props
-	});
-}
-function DropdownMenuRadioGroup({ ...props }) {
-	return /* @__PURE__ */ jsx(RadioGroup$1, {
-		"data-slot": "dropdown-menu-radio-group",
-		...props
-	});
-}
-function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
-	return /* @__PURE__ */ jsxs(SubTrigger, {
-		"data-slot": "dropdown-menu-sub-trigger",
-		"data-inset": inset,
-		className: clsx("univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[state=open]:univer-bg-gray-100 focus:univer-bg-gray-100 dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", className),
-		...props,
-		children: [children, /* @__PURE__ */ jsx(MoreRightIcon, { className: "ml-auto" })]
-	});
-}
-function DropdownMenuSubContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(SubContent, {
-		"data-slot": "dropdown-menu-sub-content",
-		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
-		...props
-	});
-}
-function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(Content$2, {
-		"data-slot": "dropdown-menu-content",
-		sideOffset,
-		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
-		...props
-	}) });
-}
-function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx(Item, {
-		"data-slot": "dropdown-menu-item",
-		"data-inset": inset,
-		"data-variant": variant,
-		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0", className),
-		...props
-	});
-}
-function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }) {
-	return /* @__PURE__ */ jsxs(CheckboxItem, {
-		"data-slot": "dropdown-menu-checkbox-item",
-		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
-			"univer-pl-8": !hideIndicator,
-			"univer-pl-2": hideIndicator
-		}, className),
-		checked,
-		...props,
-		children: [!hideIndicator && /* @__PURE__ */ jsx("span", {
-			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
-			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
-		}), children]
-	});
-}
-function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
-	return /* @__PURE__ */ jsxs(RadioItem, {
-		"data-slot": "dropdown-menu-radio-item",
-		className: clsx("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
-			"univer-pl-8": !hideIndicator,
-			"univer-pl-2": hideIndicator
-		}, className),
-		...props,
-		children: [!hideIndicator && /* @__PURE__ */ jsx("span", {
-			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
-			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
-		}), children]
-	});
-}
-function DropdownMenuSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Separator$1, {
-		className: clsx("-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/components/dropdown-menu/DropdownMenu.tsx
-function DropdownMenu(props) {
-	const { children, items, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-	const isControlled = controlledOpen !== void 0;
-	const open = isControlled ? controlledOpen : uncontrolledOpen;
-	function handleChangeOpen(newOpen) {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledOpen(newOpen);
-		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
-	}
-	function renderMenuItem(item, index) {
-		const { className, type } = item;
-		if (type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, { className }, index);
-		else if (type === "radio") return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-			className,
-			value: item.value,
-			onValueChange: item.onSelect,
-			children: item.options.map((option, index) => {
-				if ("type" in option) {
-					if (option.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: option.className }, index);
-				} else {
-					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
-					return /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
-						value: option.value,
-						disabled: option.disabled,
-						hideIndicator: item.hideIndicator,
-						children: option.label
-					}, option.value);
-				}
-				return null;
-			})
-		}, index);
-		else if (type === "checkbox") return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-			className,
-			disabled: item.disabled,
-			checked: item.checked,
-			onSelect: () => {
-				var _item$onSelect;
-				(_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item, item.value);
-			},
-			children: item.label
-		}, index);
-		else if (type === "item") return /* @__PURE__ */ jsx(DropdownMenuItem, {
-			className,
-			disabled: item.disabled,
-			onSelect: () => {
-				var _item$onSelect2;
-				(_item$onSelect2 = item.onSelect) === null || _item$onSelect2 === void 0 || _item$onSelect2.call(item, item);
-			},
-			children: item.children
-		}, index);
-		else if (type === "subItem") {
-			var _item$options;
-			return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuSubContent, {
-				sideOffset: 12,
-				children: (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
-			}) })] }, index);
-		}
-	}
-	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive, {
-		modal: false,
-		open,
-		onOpenChange: handleChangeOpen,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			className: "univer-text-sm",
-			collisionPadding: {
-				top: 12,
-				bottom: 12
-			},
-			onWheel: (e) => e.stopPropagation(),
-			...restProps,
-			children: items.map((item, index) => renderMenuItem(item, index))
-		})]
+//#endregion
+//#region src/components/draggable-list/DraggableList.tsx
+function moveItemByIndex(list, fromIndex, toIndex) {
+	if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= list.length || toIndex >= list.length) return list;
+	const next = [...list];
+	const [item] = next.splice(fromIndex, 1);
+	next.splice(toIndex, 0, item);
+	return next;
+}
+function DraggableList(props) {
+	const { list, onListChange, idKey, itemRender, className, style, draggableHandle, rowHeight, margin = [0, 0], onDragStart, onDragStop, ...restProps } = props;
+	const [displayList, setDisplayList] = useState(list);
+	const displayListRef = useRef(list);
+	const [draggingId, setDraggingId] = useState(null);
+	const [dragOverId, setDragOverId] = useState(null);
+	const [ghostElement, setGhostElement] = useState(null);
+	const [ghostPosition, setGhostPosition] = useState(null);
+	const [canUsePortal, setCanUsePortal] = useState(false);
+	const pointerIdRef = useRef(null);
+	const dragPointerOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const dragItemSizeRef = useRef({
+		width: 0,
+		height: 0
 	});
+	const ghostContainerRef = useRef(null);
+	const pressedHandleIdRef = useRef(null);
+	const dragSourceIdRef = useRef(null);
+	const dragStartIndexRef = useRef(-1);
+	const { direction } = useContext(ConfigContext);
+	useEffect(() => {
+		if (!draggingId) {
+			setDisplayList(list);
+			displayListRef.current = list;
+		}
+	}, [draggingId, list]);
+	useEffect(() => {
+		setCanUsePortal(typeof document !== "undefined");
+	}, []);
+	useEffect(() => {
+		const container = ghostContainerRef.current;
+		if (!container) return;
+		container.replaceChildren();
+		if (ghostElement) container.appendChild(ghostElement);
+	}, [ghostElement]);
+	useEffect(() => {
+		if (!draggingId) return;
+		const handlePointerMove = (evt) => {
+			const sourceId = dragSourceIdRef.current;
+			if (!sourceId || pointerIdRef.current !== evt.pointerId) return;
+			setGhostPosition({
+				x: evt.clientX - dragPointerOffsetRef.current.x,
+				y: evt.clientY - dragPointerOffsetRef.current.y
+			});
+			const element = document.elementFromPoint(evt.clientX, evt.clientY);
+			const itemElement = element === null || element === void 0 ? void 0 : element.closest("[data-draggable-list-item-id]");
+			const targetId = itemElement === null || itemElement === void 0 ? void 0 : itemElement.dataset.draggableListItemId;
+			if (!targetId || targetId === sourceId) return;
+			setDragOverId(targetId);
+			setDisplayList((prev) => {
+				const fromIndex = prev.findIndex((it) => getItemId(it) === sourceId);
+				const toIndex = prev.findIndex((it) => getItemId(it) === targetId);
+				if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return prev;
+				const next = moveItemByIndex(prev, fromIndex, toIndex);
+				displayListRef.current = next;
+				return next;
+			});
+		};
+		const handlePointerUp = (evt) => {
+			if (pointerIdRef.current !== evt.pointerId) return;
+			const sourceId = dragSourceIdRef.current;
+			const startIndex = dragStartIndexRef.current;
+			const currentList = displayListRef.current;
+			if (sourceId) {
+				const finalIndex = currentList.findIndex((it) => getItemId(it) === sourceId);
+				onDragStop === null || onDragStop === void 0 || onDragStop(void 0, { y: startIndex }, { y: finalIndex });
+				if (startIndex >= 0) onListChange([...currentList]);
+			}
+			pointerIdRef.current = null;
+			pressedHandleIdRef.current = null;
+			dragSourceIdRef.current = null;
+			dragStartIndexRef.current = -1;
+			setDragOverId(null);
+			setGhostElement(null);
+			setGhostPosition(null);
+			setDraggingId(null);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [
+		draggingId,
+		onDragStop,
+		onListChange
+	]);
+	const gapStyle = useMemo(() => {
+		const [horizontal, vertical] = margin;
+		return {
+			rowGap: `${vertical}px`,
+			paddingLeft: horizontal ? `${horizontal}px` : void 0,
+			paddingRight: horizontal ? `${horizontal}px` : void 0,
+			...style
+		};
+	}, [margin, style]);
+	const getItemId = (item) => String(item[idKey]);
+	const draggingItem = draggingId ? displayList.find((item) => getItemId(item) === draggingId) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		...restProps,
+		className: clsx("univer-flex univer-flex-col", draggingId && "univer-cursor-grabbing univer-select-none", className),
+		style: gapStyle,
+		children: displayList.map((item, index) => {
+			const itemId = getItemId(item);
+			const isDraggingItem = draggingId === itemId;
+			return /* @__PURE__ */ jsxs("div", {
+				"data-draggable-list-item-id": itemId,
+				className: clsx("univer-relative univer-transition-all univer-duration-150", isDraggingItem && "univer-opacity-0", dragOverId === itemId && !isDraggingItem && "univer-bg-primary-50/60 dark:!univer-bg-primary-900/20 univer-rounded univer-border univer-border-primary-200 dark:!univer-border-primary-700"),
+				onPointerDownCapture: (e) => {
+					if (pointerIdRef.current !== null) return;
+					if (!draggableHandle) pressedHandleIdRef.current = itemId;
+					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
+					if (pressedHandleIdRef.current !== itemId) return;
+					const rect = e.currentTarget.getBoundingClientRect();
+					dragPointerOffsetRef.current = {
+						x: e.clientX - rect.left,
+						y: e.clientY - rect.top
+					};
+					dragItemSizeRef.current = {
+						width: rect.width,
+						height: rect.height
+					};
+					setGhostPosition({
+						x: rect.left,
+						y: rect.top
+					});
+					setGhostElement(e.currentTarget.cloneNode(true));
+					pointerIdRef.current = e.pointerId;
+					dragSourceIdRef.current = itemId;
+					dragStartIndexRef.current = index;
+					setDraggingId(itemId);
+					displayListRef.current = displayList;
+					onDragStart === null || onDragStart === void 0 || onDragStart(void 0, { y: index });
+					e.preventDefault();
+					e.currentTarget.setPointerCapture(e.pointerId);
+				},
+				style: {
+					...rowHeight ? { minHeight: `${rowHeight}px` } : void 0,
+					cursor: draggingId ? "grabbing" : void 0
+				},
+				children: [isDraggingItem && /* @__PURE__ */ jsx("div", { className: "univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded univer-border univer-border-dashed univer-border-primary-300" }), itemRender(item, index)]
+			}, itemId);
+		})
+	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
+		dir: direction,
+		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
+		style: {
+			zIndex: 2147483647,
+			left: `${ghostPosition.x}px`,
+			top: `${ghostPosition.y}px`,
+			width: `${dragItemSizeRef.current.width}px`,
+			height: `${dragItemSizeRef.current.height}px`,
+			opacity: .95
+		},
+		children: ghostElement ? /* @__PURE__ */ jsx("div", { ref: ghostContainerRef }) : itemRender(draggingItem, displayList.findIndex((item) => getItemId(item) === getItemId(draggingItem)))
+	}), document.body)] });
 }
 
 //#endregion
@@ -2468,7 +2546,7 @@ function Gallery(props) {
 		"aria-label": "Image gallery",
 		tabIndex: -1,
 		ref: dialogRef,
-		className: clsx("univer-absolute univer-inset-0 univer-z-[1080] univer-flex univer-size-full univer-select-none univer-items-center univer-justify-center", {
+		className: clsx("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", {
 			"univer-animate-in univer-fade-in": open,
 			"univer-animate-out univer-fade-out": !open
 		}, className),
@@ -2479,9 +2557,9 @@ function Gallery(props) {
 				onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false)
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "univer-relative",
+				className: "univer-relative univer-flex univer-w-fit univer-items-center univer-justify-center",
 				children: activeImage && /* @__PURE__ */ jsx("img", {
-					className: "univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out",
+					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}`,
@@ -2526,13 +2604,7 @@ function Gallery(props) {
 
 //#endregion
 //#region src/components/input/Input.tsx
-const inputVariants = cva(`
-      univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200
-      placeholder:univer-text-gray-400
-      focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50
-      dark:!univer-bg-gray-700 dark:!univer-text-white
-      dark:focus:!univer-ring-primary-900
-    `, {
+const inputVariants = cva$1("univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-white dark:focus:!univer-ring-primary-900", {
 	variants: { size: {
 		mini: "univer-h-7 univer-px-1.5 univer-text-sm",
 		small: "univer-h-8 univer-px-2 univer-text-sm",
@@ -2583,10 +2655,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 		children: [/* @__PURE__ */ jsx("input", {
 			ref,
 			type,
-			className: clsx(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(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),
 			placeholder,
 			value,
 			disabled,
@@ -2651,7 +2720,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 		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);
@@ -2670,21 +2739,27 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				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);
 	}
@@ -2833,7 +2908,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "segmented",
 		ref: containerRef,
-		className: clsx("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("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__ */ 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
@@ -2841,7 +2916,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 			ref: (el) => {
 				if (el) itemRefs.current.set(item.value, el);
 			},
-			className: clsx("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("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
 			}),
@@ -2987,7 +3062,7 @@ function Tooltip(props) {
 	};
 	const triggerElement = asChild ? /* @__PURE__ */ jsx("span", {
 		...commonProps,
-		className: "univer-inline-block univer-max-w-full univer-truncate",
+		className: "univer-inline-flex univer-max-w-full univer-items-center univer-truncate",
 		children
 	}) : /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -3068,21 +3143,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 } = useContext(ConfigContext);
+	const [draftValue, setDraftValue] = useState(value);
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const barRef = useRef(null);
+	const valueRef = useRef(value);
 	const cleanupRef = useRef(null);
+	useEffect(() => {
+		valueRef.current = draftValue;
+	}, [draftValue]);
+	useEffect(() => {
+		setDraftValue(value);
+	}, [value]);
+	const emitChange = (nextValue) => {
+		valueRef.current = nextValue;
+		setDraftValue(nextValue);
+		onChange === null || onChange === void 0 || onChange(nextValue);
+	};
 	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]);
 	useEffect(() => {
 		return () => {
 			var _cleanupRef$current;
@@ -3090,40 +3212,52 @@ function GradientColorPicker(props) {
 		};
 	}, []);
 	const stops = 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
 		});
 	};
@@ -3131,43 +3265,77 @@ 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 = 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 = 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__ */ jsxs("div", {
-		className: clsx("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(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__ */ jsx(Segmented, {
+			compact ? /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-min-w-0 univer-items-center univer-gap-4 univer-border-b univer-border-gray-100 dark:!univer-border-gray-700",
+				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__ */ jsxs("button", {
+						type: "button",
+						className: clsx("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__ */ jsx("span", { className: "univer-absolute univer-inset-x-2 -univer-bottom-px univer-h-0.5 univer-rounded-full univer-bg-primary-600 dark:!univer-bg-primary-300" })]
+					}, item.value);
+				})
+			}) : /* @__PURE__ */ 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,
@@ -3186,49 +3354,67 @@ function GradientColorPicker(props) {
 						value: "diamond"
 					}
 				],
-				value: value.type,
+				value: draftValue.type,
 				onChange: (v) => handleTypeChange(v)
 			}),
+			showAngleEditor && /* @__PURE__ */ jsxs("div", {
+				"data-u-comp": "gradient-color-picker-angle",
+				className: "univer-flex univer-items-center univer-justify-between univer-gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-text-xs univer-text-gray-500",
+					children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+				}), /* @__PURE__ */ jsx(InputNumber, {
+					className: "univer-w-24",
+					value: getGradientAngle(draftValue),
+					min: 0,
+					max: 360,
+					onChange: handleAngleChange
+				})]
+			}),
 			/* @__PURE__ */ 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("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__ */ jsxs("div", {
-				className: "univer-relative univer-mt-4 univer-h-6",
+				className: clsx("univer-relative univer-h-6", compact ? "univer-mt-1" : "univer-mt-4"),
 				children: [/* @__PURE__ */ 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__ */ jsx("div", {
+				}), draftValue.stops.map((stop, index) => /* @__PURE__ */ jsx("div", {
 					"data-u-comp": "gradient-color-picker-stop",
 					"data-selected": selectedIndex === index,
 					className: clsx("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
 							});
 						};
@@ -3249,25 +3435,28 @@ function GradientColorPicker(props) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
+					/* @__PURE__ */ jsxs("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
@@ -3278,7 +3467,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__ */ jsx(DeleteIcon, {})
 							})
 						})
@@ -3286,9 +3475,9 @@ function GradientColorPicker(props) {
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700",
+				className: clsx("univer-border-t univer-border-gray-100 dark:!univer-border-gray-700", compact ? "univer-pt-3" : "univer-pt-4"),
 				children: /* @__PURE__ */ 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
 				})
 			})
@@ -3792,7 +3981,7 @@ function Select(props) {
 		return label || value;
 	}, [options, value]);
 	return /* @__PURE__ */ 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,
@@ -3994,49 +4183,6 @@ function Toaster({ visibleToasts, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/virtual-list/VirtualList.tsx
-function VirtualList(props) {
-	const { data, itemKey, children, height, itemHeight, overscan = 2, className, style } = props;
-	const [scrollTop, setScrollTop] = useState(0);
-	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ jsx("div", {
-		className,
-		style,
-		children: data.map((item, index) => {
-			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
-			return /* @__PURE__ */ jsx("div", { children: children(item, index) }, key);
-		})
-	});
-	const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-	const visibleCount = Math.ceil(height / itemHeight) + overscan * 2;
-	const end = Math.min(data.length, start + visibleCount);
-	const offsetY = start * itemHeight;
-	const totalHeight = data.length * itemHeight;
-	const visibleItems = data.slice(start, end);
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		style: {
-			...style,
-			height,
-			overflowY: "auto"
-		},
-		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				height: totalHeight,
-				position: "relative"
-			},
-			children: /* @__PURE__ */ jsx("div", {
-				style: { transform: `translateY(${offsetY}px)` },
-				children: visibleItems.map((item, index) => {
-					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
-					return /* @__PURE__ */ jsx("div", { children: children(item, start + index) }, key);
-				})
-			})
-		})
-	});
-}
-
 //#endregion
 //#region src/components/tree/util.ts
 const findNodePathFromTree = (tree, key) => {
@@ -4237,7 +4383,7 @@ function Tree(props) {
 						}
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: "\n                          univer-mx-1 univer-flex univer-h-full univer-shrink univer-items-center univer-overflow-hidden\n                          univer-text-ellipsis univer-whitespace-nowrap\n                        ",
+						className: "univer-mx-1 univer-flex univer-h-full univer-shrink univer-items-center univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap",
 						onClick: (e) => {
 							e.stopPropagation();
 							handleExpendItem(treeItem);
@@ -4259,7 +4405,7 @@ function Tree(props) {
 		}, key);
 	}
 	return /* @__PURE__ */ jsx("section", {
-		className: "\n              univer-relative univer-select-none univer-text-gray-900\n              dark:!univer-text-white\n            ",
+		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-white",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
 			style,
@@ -4333,4 +4479,4 @@ function resizeObserverCtor(callback) {
 }
 
 //#endregion
-export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPresets, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Panel, PanelField, PanelSection, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resetButtonClassName, resizeObserverCtor, scrollbarClassName, toast, unmount };