@univerjs/design 1.0.0-alpha.5 → 1.0.0-alpha.7

package/lib/cjs/index.js

@@ -10,6 +10,7 @@ let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+let cmdk = require("cmdk");
 let react_dom = require("react-dom");
 let _radix_ui_react_hover_card = require("@radix-ui/react-hover-card");
 let sonner = require("sonner");
@@ -2062,6 +2063,69 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/command/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
+		"data-slot": "command",
+		className: clsx$1("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "command-input-wrapper",
+		className: "univer-flex univer-h-10 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-3 dark:!univer-border-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0 [&>svg]:univer-text-gray-400",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SearchIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
+			"data-slot": "command-input",
+			className: clsx$1("univer-h-10 univer-w-full univer-border-none univer-bg-transparent univer-text-sm univer-outline-none placeholder:univer-text-gray-400", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.List, {
+		"data-slot": "command-list",
+		className: clsx$1("univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden univer-p-1 [scroll-padding-block:4px]", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Empty, {
+		"data-slot": "command-empty",
+		className: clsx$1("univer-py-6 univer-text-center univer-text-sm univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Group, {
+		"data-slot": "command-group",
+		className: clsx$1("univer-overflow-hidden univer-p-1 [&_[cmdk-group-heading]]:univer-px-2 [&_[cmdk-group-heading]]:univer-py-1.5 [&_[cmdk-group-heading]]:univer-text-xs [&_[cmdk-group-heading]]:univer-font-medium [&_[cmdk-group-heading]]:univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Item, {
+		"data-slot": "command-item",
+		className: clsx$1("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 data-[disabled=true]:univer-pointer-events-none data-[selected=true]:univer-bg-gray-100 data-[disabled=true]:univer-opacity-50 dark:data-[selected=true]:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Separator, {
+		"data-slot": "command-separator",
+		className: clsx$1("univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-shortcut",
+		className: clsx$1("univer-ml-auto univer-text-xs univer-tracking-widest univer-text-gray-400 rtl:univer-ml-0 rtl:univer-mr-auto", className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/confirm/Confirm.tsx
 function Footer(props) {
@@ -2709,7 +2773,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
-const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false, allowClear = false }, ref) => {
 	const { locale } = (0, react.useContext)(ConfigContext);
 	const [internalValue, setInternalValue] = (0, react.useState)(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = (0, react.useRef)(internalValue);
@@ -2855,6 +2919,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				className: clsx$1("univer-box-border", inputClassName),
 				size,
 				value: inputValue,
+				allowClear,
 				disabled,
 				onChange: handleInputChange,
 				onFocus,
@@ -4520,6 +4585,14 @@ exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ColorPicker = ColorPicker;
 exports.ColorPresets = ColorPresets;
+exports.Command = Command;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
 exports.ConfigContext = ConfigContext;
 exports.ConfigProvider = ConfigProvider;
 exports.Confirm = Confirm;

package/lib/es/index.js

@@ -1,4 +1,4 @@
-import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
+import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SearchIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
 import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx as clsx$1 } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -9,6 +9,7 @@ import { Slot } from "@radix-ui/react-slot";
 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 { Command as Command$1 } from "cmdk";
 import { createPortal } from "react-dom";
 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";
@@ -2061,6 +2062,69 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/command/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: clsx("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "univer-flex univer-h-10 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-3 dark:!univer-border-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0 [&>svg]:univer-text-gray-400",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: clsx("univer-h-10 univer-w-full univer-border-none univer-bg-transparent univer-text-sm univer-outline-none placeholder:univer-text-gray-400", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: clsx("univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden univer-p-1 [scroll-padding-block:4px]", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: clsx("univer-py-6 univer-text-center univer-text-sm univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: clsx("univer-overflow-hidden univer-p-1 [&_[cmdk-group-heading]]:univer-px-2 [&_[cmdk-group-heading]]:univer-py-1.5 [&_[cmdk-group-heading]]:univer-text-xs [&_[cmdk-group-heading]]:univer-font-medium [&_[cmdk-group-heading]]:univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		"data-slot": "command-item",
+		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 data-[disabled=true]:univer-pointer-events-none data-[selected=true]:univer-bg-gray-100 data-[disabled=true]:univer-opacity-50 dark:data-[selected=true]:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: clsx("univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: clsx("univer-ml-auto univer-text-xs univer-tracking-widest univer-text-gray-400 rtl:univer-ml-0 rtl:univer-mr-auto", className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/confirm/Confirm.tsx
 function Footer(props) {
@@ -2708,7 +2772,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
-const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false, allowClear = false }, ref) => {
 	const { locale } = useContext(ConfigContext);
 	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = useRef(internalValue);
@@ -2854,6 +2918,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				className: clsx("univer-box-border", inputClassName),
 				size,
 				value: inputValue,
+				allowClear,
 				disabled,
 				onChange: handleInputChange,
 				onFocus,
@@ -4508,4 +4573,4 @@ function resizeObserverCtor(callback) {
 }
 
 //#endregion
-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, selectClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPresets, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, 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, selectClassName, toast, unmount };

package/lib/index.css

@@ -456,6 +456,10 @@
   max-height: 1000px;
 }
 
+.univer-max-h-\[300px\] {
+  max-height: 300px;
+}
+
 .univer-max-h-full {
   max-height: 100%;
 }
@@ -867,6 +871,10 @@
   overflow-y: auto;
 }
 
+.univer-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .univer-truncate {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1280,6 +1288,11 @@
   padding-bottom: .75rem;
 }
 
+.univer-py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .\!univer-pl-4 {
   padding-left: 1rem !important;
 }
@@ -1884,6 +1897,10 @@
   animation-timing-function: cubic-bezier(0, 0, .2, 1);
 }
 
+.\[scroll-padding-block\:4px\] {
+  scroll-padding-block: 4px;
+}
+
 .placeholder\:univer-text-gray-200::placeholder {
   color: var(--univer-gray-200);
 }
@@ -1939,7 +1956,7 @@
   margin-bottom: 0;
 }
 
-.data-\[disabled\]\:univer-pointer-events-none[data-disabled] {
+.data-\[disabled\=true\]\:univer-pointer-events-none[data-disabled="true"], .data-\[disabled\]\:univer-pointer-events-none[data-disabled] {
   pointer-events: none;
 }
 
@@ -1959,7 +1976,7 @@
   width: 1px;
 }
 
-.data-\[state\=open\]\:univer-bg-gray-100[data-state="open"] {
+.data-\[selected\=true\]\:univer-bg-gray-100[data-selected="true"], .data-\[state\=open\]\:univer-bg-gray-100[data-state="open"] {
   background-color: var(--univer-gray-100);
 }
 
@@ -1967,7 +1984,7 @@
   color: var(--univer-red-600);
 }
 
-.data-\[disabled\]\:univer-opacity-50[data-disabled] {
+.data-\[disabled\=true\]\:univer-opacity-50[data-disabled="true"], .data-\[disabled\]\:univer-opacity-50[data-disabled] {
   opacity: .5;
 }
 
@@ -2221,6 +2238,14 @@
   right: auto;
 }
 
+.rtl\:univer-ml-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0;
+}
+
+.rtl\:univer-mr-auto:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: auto;
+}
+
 .rtl\:\!univer-rotate-0:where([dir="rtl"], [dir="rtl"] *) {
   --univer-tw-rotate: 0deg !important;
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(0deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y)) !important;
@@ -2395,6 +2420,10 @@
   background-color: var(--univer-gray-600) !important;
 }
 
+.dark\:data-\[selected\=true\]\:\!univer-bg-gray-600[data-selected="true"]:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-600) !important;
+}
+
 .dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
@@ -2485,6 +2514,10 @@
   flex-shrink: 0;
 }
 
+.\[\&\>svg\]\:univer-text-gray-400 > svg {
+  color: var(--univer-gray-400);
+}
+
 .\[\&\>ul\:not\(\:last-child\)\]\:univer-border-0 > ul:not(:last-child) {
   border-width: 0;
 }
@@ -2501,6 +2534,29 @@
   border-right-color: var(--univer-gray-200);
 }
 
+.\[\&_\[cmdk-group-heading\]\]\:univer-px-2 [cmdk-group-heading] {
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+.\[\&_\[cmdk-group-heading\]\]\:univer-py-1\.5 [cmdk-group-heading] {
+  padding-top: .375rem;
+  padding-bottom: .375rem;
+}
+
+.\[\&_\[cmdk-group-heading\]\]\:univer-text-xs [cmdk-group-heading] {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.\[\&_\[cmdk-group-heading\]\]\:univer-font-medium [cmdk-group-heading] {
+  font-weight: 500;
+}
+
+.\[\&_\[cmdk-group-heading\]\]\:univer-text-gray-500 [cmdk-group-heading] {
+  color: var(--univer-gray-500);
+}
+
 .\[\&_\[data-description\]\]\:univer-text-sm [data-description] {
   font-size: .875rem;
   line-height: 1.25rem;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
+import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SearchIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
 import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx as clsx$1 } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -9,6 +9,7 @@ import { Slot } from "@radix-ui/react-slot";
 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 { Command as Command$1 } from "cmdk";
 import { createPortal } from "react-dom";
 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";
@@ -2061,6 +2062,69 @@ function ColorPicker({ format = "hex", value, onChange }) {
 	});
 }
 
+//#endregion
+//#region src/components/command/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: clsx("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "univer-flex univer-h-10 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-px-3 dark:!univer-border-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0 [&>svg]:univer-text-gray-400",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: clsx("univer-h-10 univer-w-full univer-border-none univer-bg-transparent univer-text-sm univer-outline-none placeholder:univer-text-gray-400", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: clsx("univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden univer-p-1 [scroll-padding-block:4px]", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: clsx("univer-py-6 univer-text-center univer-text-sm univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: clsx("univer-overflow-hidden univer-p-1 [&_[cmdk-group-heading]]:univer-px-2 [&_[cmdk-group-heading]]:univer-py-1.5 [&_[cmdk-group-heading]]:univer-text-xs [&_[cmdk-group-heading]]:univer-font-medium [&_[cmdk-group-heading]]:univer-text-gray-500", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		"data-slot": "command-item",
+		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 data-[disabled=true]:univer-pointer-events-none data-[selected=true]:univer-bg-gray-100 data-[disabled=true]:univer-opacity-50 dark:data-[selected=true]:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: clsx("univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: clsx("univer-ml-auto univer-text-xs univer-tracking-widest univer-text-gray-400 rtl:univer-ml-0 rtl:univer-mr-auto", className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/confirm/Confirm.tsx
 function Footer(props) {
@@ -2708,7 +2772,7 @@ const Input = forwardRef(({ autoFocus = false, className, style, type = "text",
 
 //#endregion
 //#region src/components/input-number/InputNumber.tsx
-const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false, allowClear = false }, ref) => {
 	const { locale } = useContext(ConfigContext);
 	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
 	const lastValidValueRef = useRef(internalValue);
@@ -2854,6 +2918,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 				className: clsx("univer-box-border", inputClassName),
 				size,
 				value: inputValue,
+				allowClear,
 				disabled,
 				onChange: handleInputChange,
 				onFocus,
@@ -4508,4 +4573,4 @@ function resizeObserverCtor(callback) {
 }
 
 //#endregion
-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, selectClassName, toast, unmount };
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ColorPresets, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, 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, selectClassName, toast, unmount };

package/lib/types/components/command/Command.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { ComponentProps } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+export declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
+export declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react").JSX.Element;
+export declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+export declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
+export declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
+export declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react").JSX.Element;
+export declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
+export declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;

package/lib/types/components/input-number/InputNumber.d.ts

@@ -32,5 +32,6 @@ export interface IInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputEle
     onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
     onPressEnter?: (e: KeyboardEvent<HTMLInputElement>) => void;
     allowEmpty?: boolean;
+    allowClear?: boolean;
 }
 export declare const InputNumber: import("react").ForwardRefExoticComponent<IInputNumberProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/components/input-number/InputNumber.stories.d.ts

@@ -26,6 +26,9 @@ export declare const InputNumberDisabled: {
 export declare const InputNumberHideControls: {
     render(): import("react").JSX.Element;
 };
+export declare const InputNumberAllowClear: {
+    render(): import("react").JSX.Element;
+};
 export declare const InputNumberRtl: {
     render(): import("react").JSX.Element;
 };

package/lib/types/index.d.ts

@@ -34,6 +34,7 @@ export type { ICheckboxProps } from './components/checkbox/Checkbox';
 export { ColorPicker } from './components/color-picker/ColorPicker';
 export type { IColorPickerProps } from './components/color-picker/ColorPicker';
 export { ColorPresets } from './components/color-picker/ColorPresets';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from './components/command/Command';
 export { ConfigContext, ConfigProvider } from './components/config-provider/ConfigProvider';
 export type { IConfigProviderProps } from './components/config-provider/ConfigProvider';
 export { Confirm } from './components/confirm/Confirm';