@univerjs/design 0.6.10 → 0.7.0-beta.0

package/lib/types/components/button/Button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { ButtonHTMLAttributes } from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "text" | "primary" | null | undefined;
+    variant?: "link" | "default" | "text" | "primary" | "danger" | null | undefined;
     size?: "middle" | "small" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/lib/types/components/button/ButtonGroup.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { IButtonProps } from './Button';
+export interface IButtonGroupProps {
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    children: ReactElement<IButtonProps>[];
+}
+export declare const ButtonGroup: ({ className, orientation, children, }: IButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/components/button/ButtonGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { ButtonGroup } from './ButtonGroup';
+declare const meta: Meta<typeof ButtonGroup>;
+export default meta;
+export declare const ButtonGroupBasic: {
+    render(): import("react/jsx-runtime").JSX.Element;
+};

package/lib/types/components/button/index.d.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { Button, type IButtonProps } from './Button';
+export { ButtonGroup, type IButtonGroupProps } from './ButtonGroup';

package/lib/types/components/dialog/Dialog.d.ts

@@ -1,16 +1,15 @@
-import { ModalStyles } from 'rc-dialog/lib/IDialogPropTypes';
-import { default as React } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface IDialogProps {
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * The style of the dialog.
      */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /**
      * Whether the dialog is visible.
      * @default false
      */
-    visible?: boolean;
+    open?: boolean;
     /**
      * The width of the dialog.
      */
@@ -18,7 +17,7 @@ export interface IDialogProps {
     /**
      * The title of the dialog.
      */
-    title?: React.ReactNode;
+    title?: ReactNode;
     /**
      * Whether the dialog can be dragged. If a dialog is draggable, the backdrop would be hidden and
      * the wrapper container would not response to user's mouse events.
@@ -26,10 +25,6 @@ export interface IDialogProps {
      * @default false
      */
     draggable?: boolean;
-    /**
-     * The close icon of the dialog.
-     */
-    closeIcon?: React.ReactNode;
     /**
      * The default position of the dialog.
      */
@@ -50,11 +45,7 @@ export interface IDialogProps {
     /**
      * The footer of the dialog.
      */
-    footer?: React.ReactNode;
-    /**
-     * Callback when the dialog is closed.
-     */
-    onClose?: () => void;
+    footer?: ReactNode;
     /**
      *  Whether the dialog should show a mask.
      */
@@ -63,10 +54,6 @@ export interface IDialogProps {
      * additional className for dialog
      */
     className?: string;
-    /**
-     * The style of the customize.
-     */
-    dialogStyles?: ModalStyles;
     /**
      * whether show close button
      */
@@ -80,9 +67,17 @@ export interface IDialogProps {
      * @default true
      */
     keyboard?: boolean;
+    /**
+     * The callback function when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The callback function when the dialog is closed.
+     */
+    onClose?: () => void;
     showOk?: boolean;
     showCancel?: boolean;
     onOk?: () => void;
     onCancel?: () => void;
 }
-export declare function Dialog(props: IDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Dialog(props: IDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/dialog/DialogPrimitive.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+declare const Dialog: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
+declare const DialogTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: import('react').FC<import('@radix-ui/react-dialog').DialogPortalProps>;
+declare const DialogClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+interface IDialogContentProps {
+    closable?: boolean;
+    onClickClose?: () => void;
+}
+declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & IDialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/lib/types/components/dropdown/Dropdown.d.ts

@@ -1,11 +1,10 @@
 import { Content } from '@radix-ui/react-popover';
 import { ComponentProps, ReactNode } from 'react';
-interface IDropdownProps {
+export interface IDropdownProps extends ComponentProps<typeof Content> {
     children: ReactNode;
     overlay: ReactNode;
     disabled?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare function Dropdown(props: IDropdownProps & ComponentProps<typeof Content>): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Dropdown(props: IDropdownProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/dropdown/index.d.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { Dropdown } from './Dropdown';
+export { Dropdown, type IDropdownProps } from './Dropdown';

package/lib/types/components/dropdown-menu/DropdownMenu.d.ts

@@ -13,6 +13,7 @@ type DropdownMenu = {
     type?: 'radio';
     className?: string;
     value: string;
+    hideIndicator?: boolean;
     options: {
         value: string;
         label: ReactNode;
@@ -20,12 +21,12 @@ type DropdownMenu = {
     }[];
     onSelect?: (item: string) => void;
 };
-export interface IDropdownProps {
+export interface IDropdownMenuProps extends ComponentProps<typeof DropdownMenuContent> {
     children: ReactNode;
     items: DropdownMenu[];
     disabled?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare function DropdownMenu(props: IDropdownProps & ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu(props: IDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/types/components/dropdown-menu/DropdownMenuPrimitive.d.ts

@@ -15,8 +15,12 @@ declare function DropdownMenuItem({ className, inset, variant, ...props }: Compo
     inset?: boolean;
     variant?: 'default' | 'destructive';
 }): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof CheckboxItem>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }: ComponentProps<typeof CheckboxItem> & {
+    hideIndicator?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }: ComponentProps<typeof RadioItem> & {
+    hideIndicator?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof Label> & {
     inset?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/dropdown-menu/index.d.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { DropdownMenu, type IDropdownProps } from './DropdownMenu';
+export { DropdownMenu, type IDropdownMenuProps } from './DropdownMenu';

package/lib/types/components/input/Input.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { default as React } from 'react';
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 export declare const inputVariants: (props?: ({
     size?: "middle" | "small" | "large" | null | undefined;
@@ -17,6 +18,7 @@ export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'>, Var
     onChange?: (value: string) => void;
     inputClass?: string;
     inputStyle?: React.CSSProperties;
+    slot?: React.ReactNode;
 }
-export declare const Input: import('react').ForwardRefExoticComponent<IInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/lib/types/components/input/Input.stories.d.ts

@@ -11,3 +11,9 @@ export declare const InputSize: {
 export declare const InputDisabled: {
     render(): import("react/jsx-runtime").JSX.Element;
 };
+export declare const Clear: {
+    render(): import("react/jsx-runtime").JSX.Element;
+};
+export declare const ClearWithPage: {
+    render(): import("react/jsx-runtime").JSX.Element;
+};

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

@@ -15,5 +15,6 @@ export interface IInputNumberProps extends Omit<React.InputHTMLAttributes<HTMLIn
     onChange?: (value: number | null) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    allowEmpty?: boolean;
 }
 export declare const InputNumber: React.ForwardRefExoticComponent<IInputNumberProps & React.RefAttributes<HTMLInputElement>>;

package/lib/types/components/kbd/Kbd.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+export interface IKBDProps {
+    keyboard: string;
+    className?: string;
+}
+export declare function KBD(props: IKBDProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/components/kbd/Kbd.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { KBD } from './Kbd';
+declare const meta: Meta<typeof KBD>;
+export default meta;
+export declare const KBDBasic: {
+    render(): import("react/jsx-runtime").JSX.Element;
+};

package/lib/types/components/{select → kbd}/index.d.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { type ISelectProps, Select } from './Select';
+export { type IKBDProps, KBD } from './Kbd';

package/lib/types/components/menu/Menu.d.ts

@@ -1,10 +1,14 @@
 import { MenuItemGroupProps, MenuItemProps, MenuProps, MenuRef, SubMenuProps } from 'rc-menu';
 import { default as React } from 'react';
+/** @deprecated */
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & {
     wrapperClass?: string;
 } & React.RefAttributes<MenuRef>>;
+/** @deprecated */
 export declare function MenuItem(props: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+/** @deprecated */
 export declare function SubMenu(props: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+/** @deprecated */
 export declare function MenuItemGroup(props: MenuItemGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface ITinyMenuItem {
     onClick: () => void;

package/lib/types/components/select/LegacySelect.d.ts

@@ -0,0 +1,44 @@
+import { LabelInValueType } from 'rc-select/lib/Select';
+import { CSSProperties, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+/** @deprecated */
+interface ILegacyOption {
+    label?: string | ReactNode;
+    value?: string;
+    options?: ILegacyOption[];
+}
+/** @deprecated */
+export interface ILegacySelectProps {
+    /**
+     * The value of select
+     */
+    value: string;
+    /**
+     * The options of select
+     * @default []
+     */
+    options?: ILegacyOption[];
+    /**
+     * The callback function that is triggered when the value is changed
+     */
+    onChange: (value: string) => void;
+    style?: CSSProperties;
+    /**
+     * Whether the borderless style is used
+     * @default false
+     */
+    borderless?: boolean;
+    className?: string;
+    /**
+     * select mode
+     */
+    mode?: 'combobox' | 'multiple' | 'tags' | undefined;
+    dropdownRender?: (menu: ReactElement<any, string | JSXElementConstructor<any>>) => ReactElement<any, string | JSXElementConstructor<any>>;
+    labelRender?: ((props: LabelInValueType) => ReactNode) | undefined;
+    open?: boolean;
+    dropdownStyle?: CSSProperties;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+/** @deprecated */
+export declare function LegacySelect(props: ILegacySelectProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/types/components/select/Select.d.ts

@@ -1,41 +1,39 @@
-import { LabelInValueType } from 'rc-select/lib/Select';
-import { CSSProperties, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface IOption {
     label?: string | ReactNode;
     value?: string;
     options?: IOption[];
 }
 export interface ISelectProps {
+    className?: string;
     /**
      * The value of select
      */
     value: string;
+    /**
+     * select mode
+     * @default 'combobox'
+     */
+    mode?: 'combobox' | 'multiple';
+    /**
+     * Whether the select is disabled
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * The options of select
      * @default []
      */
     options?: IOption[];
     /**
-     * The callback function that is triggered when the value is changed
-     */
-    onChange: (value: string) => void;
-    style?: CSSProperties;
-    /**
-     * Whether the borderless style is used
+     * The style of select
      * @default false
      */
     borderless?: boolean;
-    className?: string;
     /**
-     * select mode
+     * The callback function that is triggered when the value is changed
      */
-    mode?: 'combobox' | 'multiple' | 'tags' | undefined;
-    dropdownRender?: (menu: ReactElement<any, string | JSXElementConstructor<any>>) => ReactElement<any, string | JSXElementConstructor<any>>;
-    labelRender?: ((props: LabelInValueType) => ReactNode) | undefined;
-    open?: boolean;
-    dropdownStyle?: CSSProperties;
-    onDropdownVisibleChange?: (open: boolean) => void;
-    disabled?: boolean;
+    onChange: (value: string) => void;
 }
-export declare function Select(props: ISelectProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Select(props: ISelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/types/components/toaster/Toaster.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { Toaster as Sonner, toast } from 'sonner';
+export type IToasterProps = ComponentProps<typeof Sonner>;
+declare const Toaster: ({ visibleToasts, ...props }: IToasterProps) => import("react/jsx-runtime").JSX.Element;
+export { toast, Toaster };

package/lib/types/index.d.ts

@@ -15,7 +15,7 @@
  */
 import './global.css';
 export { Avatar, type IAvatarProps } from './components/avatar';
-export { Button, type IButtonProps } from './components/button';
+export { Button, ButtonGroup, type IButtonGroupProps, type IButtonProps } from './components/button';
 export { CascaderList, type ICascaderListProps, type ICascaderOption } from './components/cascader-list';
 export { Checkbox, type ICheckboxProps } from './components/checkbox';
 export { CheckboxGroup, type ICheckboxGroupProps } from './components/checkbox-group';
@@ -25,7 +25,7 @@ export { Confirm, type IConfirmProps } from './components/confirm';
 export { DatePanel, DatePicker, type IDatePanelProps, type IDatePickerProps } from './components/date-picker';
 export { Dialog, type IDialogProps } from './components/dialog';
 export { DropdownLegacy, type IDropdownLegacyProps } from './components/dropdown-legacy';
-export { Dropdown } from './components/dropdown';
+export { Dropdown, type IDropdownProps } from './components/dropdown';
 export { FormDualColumnLayout, FormLayout, type IFormDualColumnLayoutProps, type IFormLayoutProps } from './components/form-layout';
 export { type IInputProps, Input } from './components/input';
 export { type IInputNumberProps, InputNumber } from './components/input-number';
@@ -36,7 +36,8 @@ export { type IPopupProps, Popup } from './components/popup';
 export { type IRadioProps, Radio } from './components/radio';
 export { type IRadioGroupProps, RadioGroup } from './components/radio-group';
 export { type IScrollbarProps, Scrollbar } from './components/scrollbar';
-export { type ISelectProps, Select } from './components/select';
+export { type ILegacySelectProps, LegacySelect } from './components/select/LegacySelect';
+export { type ISelectProps, Select } from './components/select/Select';
 export { type ISelectListProps, SelectList } from './components/select-list';
 export { Segmented } from './components/segmented';
 export { type ITooltipProps, Tooltip } from './components/tooltip';
@@ -49,7 +50,8 @@ export { clsx } from './helper/clsx';
 export { resizeObserverCtor } from './helper/resize-observer';
 export { render, unmount } from './helper/react-dom';
 export { isBrowser } from './helper/is-browser';
-export { DropdownMenu, type IDropdownProps } from './components/dropdown-menu';
+export { DropdownMenu, type IDropdownMenuProps } from './components/dropdown-menu';
 export { Separator } from './components/separator';
 export { DateRangePicker } from './components/date-range-picker';
-export * from './components/side-menu';
+export { type IKBDProps, KBD } from './components/kbd';
+export { type IToasterProps, toast, Toaster } from './components/toaster/Toaster';