@cube-dev/ui-kit 0.65.0 → 0.66.0

package/types/components/actions/index.d.ts

@@ -6,5 +6,7 @@ declare const Button: import("react").ForwardRefExoticComponent<Omit<import("./B
 };
 export * from './Button';
 export * from './Action/Action';
+export * from './Menu';
+export * from './CommandMenu';
 export * from './use-action';
 export { Button, ButtonGroup };

package/types/components/content/HotKeys/HotKeys.d.ts

@@ -1,6 +1,6 @@
-import { AllBaseProps, ContainerStyleProps } from '../../../tasty';
-export interface CubeHotKeysProps extends AllBaseProps, ContainerStyleProps {
-    keys: string;
+import { BasePropsWithoutChildren, ContainerStyleProps } from '../../../tasty';
+export interface CubeHotKeysProps extends BasePropsWithoutChildren, ContainerStyleProps {
+    children: string;
 }
 declare const _HotKeys: import("react").ForwardRefExoticComponent<CubeHotKeysProps & import("react").RefAttributes<unknown>>;
 export { _HotKeys as HotKeys };

package/types/components/fields/ComboBox/ComboBox.d.ts

@@ -30,7 +30,7 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
      * Has no effect when `items` is provided.
      */
     filter?: FilterFn;
-    size?: 'small' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'default' | 'large' | string;
     suffixPosition?: 'before' | 'after';
     menuTrigger?: MenuTriggerAction;
     allowsCustomValue?: boolean;

package/types/components/fields/Select/Select.d.ts

@@ -31,10 +31,10 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     popoverRef?: RefObject<HTMLInputElement>;
     /** The ref for the list box. */
     listBoxRef?: RefObject<HTMLElement>;
-    size?: 'small' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'default' | 'large' | string;
     placeholder?: string;
 }
-export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, ...otherProps }: {
+export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, ...otherProps }: {
     [x: string]: any;
     state: any;
     popoverRef: any;
@@ -46,6 +46,7 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
     shouldUseVirtualFocus?: boolean | undefined;
     placement: any;
     minWidth: any;
+    size?: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;

package/types/components/status/Spin/Cube.d.ts

@@ -1,4 +1,4 @@
 import { SpinCubeProps } from './types';
 export declare const Cube: import("react").MemoExoticComponent<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }>, SpinCubeProps>, never>>>;

package/types/components/status/Spin/SpinsContainer.d.ts

@@ -1,5 +1,5 @@
 export declare const SpinsContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }>, {
     $ownSize: number;
 }>, never>>;

package/types/index.d.ts

@@ -64,10 +64,12 @@ export * from './components/content/HotKeys';
 export type { CubeSearchInputProps } from './components/fields/SearchInput/SearchInput';
 export type { CubeListBoxProps } from './components/fields/ListBox';
 export { ListBox } from './components/fields/ListBox';
-export { Menu } from './components/pickers/Menu/Menu';
-export type { CubeMenuProps } from './components/pickers/Menu/Menu';
-export { MenuTrigger } from './components/pickers/Menu/MenuTrigger';
-export type { CubeMenuTriggerProps } from './components/pickers/Menu/MenuTrigger';
+export { Menu } from './components/actions/Menu/Menu';
+export type { CubeMenuProps } from './components/actions/Menu/Menu';
+export { MenuTrigger } from './components/actions/Menu/MenuTrigger';
+export type { CubeMenuTriggerProps } from './components/actions/Menu/MenuTrigger';
+export { CommandMenu } from './components/actions/CommandMenu';
+export type { CubeCommandMenuProps, CommandMenuItem, } from './components/actions/CommandMenu';
 export { Select, ListBoxPopup } from './components/fields/Select/Select';
 export type { CubeSelectProps, CubeSelectBaseProps, } from './components/fields/Select/Select';
 export { Avatar } from './components/content/Avatar/Avatar';

package/es/components/pickers/Menu/Menu.js

@@ -1,95 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSyncRef } from '@react-aria/utils';
-import { useDOMRef } from '@react-spectrum/utils';
-import React, { useMemo } from 'react';
-import { useMenu } from 'react-aria';
-import { Item as BaseItem, Section as BaseSection, useTreeState, } from 'react-stately';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
-import { mergeProps } from '../../../utils/react';
-import { useMenuContext } from './context';
-import { MenuItem } from './MenuItem';
-import { MenuSection } from './MenuSection';
-import { StyledDivider, StyledHeader, StyledMenu } from './styled';
-function Menu(props, ref) {
-    const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, qa, ...rest } = props;
-    const domRef = useDOMRef(ref);
-    const contextProps = useMenuContext();
-    const completeProps = mergeProps(contextProps, rest);
-    // Props used for collection building.
-    const treeProps = completeProps;
-    const state = useTreeState(treeProps);
-    const collectionItems = [...state.collection];
-    const hasSections = collectionItems.some((item) => item.type === 'section');
-    const { menuProps } = useMenu(treeProps, state, domRef);
-    const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
-    const defaultProps = {
-        qa,
-        styles,
-        mods: {
-            sections: hasSections,
-            footer: !!footer,
-            header: !!header,
-        },
-    };
-    // Sync the ref stored in the context object with the DOM ref returned by useDOMRef.
-    // The helper from @react-aria/utils expects the context object as the first argument
-    // to keep it up-to-date, and a ref object as the second.
-    useSyncRef(contextProps, domRef);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledHeader, { role: "presentation", children: header }), (() => {
-                // Build the list of menu elements, automatically inserting dividers between sections.
-                const renderedItems = useMemo(() => {
-                    const items = [];
-                    let isFirstSection = true;
-                    collectionItems.forEach((item) => {
-                        if (item.type === 'section') {
-                            if (!isFirstSection) {
-                                items.push(_jsx(StyledDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
-                            }
-                            items.push(_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
-                            isFirstSection = false;
-                            return;
-                        }
-                        let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, onAction: item.onAction }, item.key));
-                        if (item.props.wrapper) {
-                            menuItem = item.props.wrapper(menuItem);
-                        }
-                        // Ensure every child has a stable key, even if the wrapper component didn't set one.
-                        items.push(React.cloneElement(menuItem, { key: item.key }));
-                    });
-                    return items;
-                }, [
-                    collectionItems,
-                    state,
-                    sectionStyles,
-                    itemStyles,
-                    selectionIcon,
-                    sectionHeadingStyles,
-                ]);
-                return renderedItems;
-            })()] }));
-}
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-const _Menu = React.forwardRef(Menu);
-const Item = Object.assign(BaseItem, {
-    displayName: 'Item',
-});
-const Section = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-const __Menu = Object.assign(_Menu, {
-    Item: Item,
-    Section,
-    displayName: 'Menu',
-});
-__Menu.displayName = 'Menu';
-export { __Menu as Menu };
-
-        

package/es/components/pickers/Menu/MenuButton.js

@@ -1,96 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPointFilled } from '@tabler/icons-react';
-import { CheckIcon } from '../../../icons';
-import { tasty } from '../../../tasty';
-import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES } from '../../actions';
-import { Block } from '../../Block';
-import { Text } from '../../content/Text';
-import { Space } from '../../layout/Space';
-const StyledButton = tasty(Block, {
-    styles: {
-        ...DEFAULT_BUTTON_STYLES,
-        ...DEFAULT_NEUTRAL_STYLES,
-        height: 'min 4x',
-        border: '#clear',
-        fill: {
-            '': '#clear',
-            focused: '#dark.03',
-            selected: '#dark.06',
-            'selected & focused': '#dark.09',
-            pressed: '#dark.06',
-            disabled: '#clear',
-        },
-        color: {
-            '': '#dark-02',
-            'selected | pressed': '#dark',
-            disabled: '#dark-04',
-        },
-        cursor: {
-            '': 'pointer',
-            disabled: 'default',
-        },
-        shadow: '#clear',
-        padding: {
-            '': '0 (1x - 1bw)',
-            'selectionIcon & selectable & !selected': '0 (1x - 1bw) 0 (1x - 1bw + 3x)',
-        },
-        display: 'flex',
-        flow: 'row',
-        justifyContent: 'start',
-        gap: '.75x',
-        outline: false,
-        ButtonIcon: {
-            display: 'grid',
-            fontSize: '@icon-size',
-            width: '@icon-size',
-            height: '@icon-size',
-            placeSelf: 'center',
-            placeItems: 'center',
-        },
-        Postfix: {
-            color: {
-                '': '#dark-03',
-                pressed: '#dark-02',
-                disabled: '#dark-04',
-            },
-        },
-        Description: {
-            preset: 't4',
-            color: '#dark-03',
-        },
-    },
-});
-const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix })) : (postfix);
-const getSelectionTypeIcon = (selectionIcon) => {
-    switch (selectionIcon) {
-        case 'checkbox':
-            return _jsx(CheckIcon, {});
-        case 'radio':
-            return _jsx(IconPointFilled, {});
-        default:
-            return undefined;
-    }
-};
-export function MenuButton({ children, icon, postfix, description, ...props }) {
-    const { selectionIcon, isSelected, isSelectable, isDisabled, ...rest } = props;
-    const checkIcon = isSelectable && isSelected
-        ? getSelectionTypeIcon(selectionIcon)
-        : undefined;
-    const mods = {
-        ...props.mods,
-        selectionIcon: !!selectionIcon,
-        selectable: isSelectable,
-        selected: isSelected,
-        disabled: isDisabled,
-    };
-    return (_jsxs(StyledButton, { "data-size": "small", ...rest, mods: mods, children: [checkIcon ? _jsx("div", { "data-element": "ButtonIcon", children: checkIcon }) : null, icon ? _jsx("div", { "data-element": "ButtonIcon", children: icon }) : null, _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "clip", width: "100%", children: [_jsxs(Space, { flow: "column", gap: "0", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }), description ? (_jsx(Text, { nowrap: true, ellipsis: true, "data-element": "Description", preset: "t4", color: "#dark-03", children: description })) : null] }), postfix && getPostfix(postfix)] })] }));
-}
-
-        

package/es/components/pickers/Menu/MenuItem.js

@@ -1,90 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { FocusRing, useMenuItem } from 'react-aria';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { ClearSlots, mergeProps, SlotProvider } from '../../../utils/react';
-import { HotKeys } from '../../content/HotKeys';
-import { useMenuContext } from './context';
-import { MenuButton } from './MenuButton';
-import { StyledItem } from './styled';
-/** @private */
-export function MenuItem(props) {
-    const { item, state, styles, selectionIcon, isVirtualized, onAction } = props;
-    const { onClose, closeOnSelect } = useMenuContext();
-    const { rendered, key, props: itemProps } = item;
-    // Extract optional keyboard shortcut from item props so it is not passed down to DOM elements.
-    // `hotkeys` is our custom prop for specifying keyboard shortcuts, similar to `postfix` or `icon`.
-    const { hotkeys, ...cleanItemProps } = (itemProps || {});
-    const isSelectable = state.selectionManager.selectionMode !== 'none';
-    const isDisabledKey = state.disabledKeys.has(key);
-    const ref = useRef(null);
-    const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, isFocused, isSelected, isPressed, isDisabled, } = useMenuItem({
-        isSelected: state.selectionManager.isSelected(key),
-        isDisabled: isDisabledKey,
-        'aria-label': item['aria-label'],
-        key,
-        onClose,
-        closeOnSelect,
-        isVirtualized,
-        onAction,
-    }, state, ref);
-    const buttonProps = {
-        qa: cleanItemProps.qa
-            ? cleanItemProps.qa
-            : `MenuButton-${key}`,
-        mods: {
-            ...cleanItemProps.mods,
-            focused: isFocused,
-            pressed: isPressed,
-        },
-    };
-    // Build extra props for MenuButton: automatically add postfix HotKeys component when shortcut provided
-    const extraButtonProps = {};
-    if (hotkeys && !cleanItemProps.postfix) {
-        extraButtonProps.postfix = _jsx(HotKeys, { keys: hotkeys });
-    }
-    const contents = (_jsx(MenuButton, { ...mergeProps(cleanItemProps, buttonProps, extraButtonProps), styles: styles, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }));
-    // Register global hotkey if provided
-    useHotkeys(typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '', () => {
-        if (!hotkeys)
-            return;
-        if (isDisabledKey || isDisabled) {
-            return;
-        }
-        // Simulate a click on the menu item so all existing handlers run
-        if (ref.current) {
-            ref.current.click();
-        }
-    }, {
-        // Ensure the hotkey is active even when the element is not focused
-        enableOnContentEditable: true,
-        enabled: !!hotkeys,
-        preventDefault: true,
-    }, [hotkeys, isDisabledKey, isDisabled]);
-    return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, {
-                'aria-disabled': isDisabled || undefined,
-            }), ref: ref, qa: cleanItemProps.qa
-                ? `MenuItem-${cleanItemProps.qa}`
-                : `MenuItem-${key}`, mods: {
-                disabled: isDisabled,
-                selected: isSelected,
-                selectable: isSelectable,
-                focused: isFocused,
-                pressed: isPressed,
-            }, children: _jsx(ClearSlots, { children: _jsx(SlotProvider, { slots: {
-                        text: { className: 'itemLabel', ...labelProps },
-                        end: { className: 'end', ...descriptionProps },
-                        icon: { className: 'icon', size: 'S' },
-                        description: { className: 'description', ...descriptionProps },
-                        keyboard: { className: 'keyboard', ...keyboardShortcutProps },
-                    }, children: contents }) }) }) }));
-}
-
-        

package/es/components/pickers/Menu/styled.js

@@ -1,113 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.0
- * Released under the MIT license.
- */
-
-import { tasty } from '../../../tasty';
-import { Space } from '../../layout/Space';
-export const StyledMenu = tasty({
-    as: 'ul',
-    qa: 'Menu',
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        gap: {
-            '': '1bw',
-            sections: false,
-        },
-        fill: '#white',
-        margin: 0,
-        padding: {
-            '': '0.5x',
-            section: 0, // section menu
-        },
-        overflow: {
-            '': 'auto',
-            section: '',
-        },
-        border: {
-            '': '#border',
-            section: false,
-        },
-        radius: '(1cr + 1bw)',
-        boxShadow: {
-            '': '',
-            popover: '0px 5px 15px #dark.05',
-        },
-        scrollbar: 'styled',
-    },
-});
-export const StyledDivider = tasty({
-    qa: 'Divider',
-    as: 'li',
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        margin: '.5x',
-        listStyle: 'none',
-        fill: '#border',
-        height: '1bw',
-        flexShrink: 0,
-    },
-});
-export const StyledHeader = tasty(Space, {
-    qa: 'Header',
-    as: 'li',
-    styles: {
-        color: '#dark-02',
-        preset: 't2m',
-        padding: '0.75x 1.5x',
-        margin: '-0.5x -0.5x (0.5x - 1bw) -0.5x',
-        border: '#dark-05 bottom',
-        placeContent: 'space-between',
-        align: 'start',
-        radius: '1r 1r 0 0',
-        whiteSpace: 'nowrap',
-    },
-});
-export const StyledSection = tasty({
-    qa: 'Section',
-    as: 'li',
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        margin: '0',
-        padding: '0',
-        listStyle: 'none',
-        fill: '#white',
-    },
-});
-export const StyledItem = tasty({
-    qa: 'Item',
-    as: 'li',
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        gap: '1bw',
-        margin: '0',
-        padding: '0',
-        listStyle: 'none',
-        fill: '#white',
-        preset: 't3m',
-        color: {
-            '': 'inherit',
-            disabled: '#dark-04',
-        },
-        whiteSpace: 'nowrap',
-    },
-});
-export const StyledSectionHeading = tasty(Space, {
-    as: 'SectionHeading',
-    styles: {
-        color: '#dark-04',
-        preset: 'c2',
-        padding: '.5x 1.5x',
-        height: '3x',
-        placeContent: 'center space-between',
-        align: 'start',
-    },
-});
-
-        

package/types/components/pickers/Menu/Menu.d.ts

@@ -1,43 +0,0 @@
-import { DOMRef, ItemProps, Key } from '@react-types/shared';
-import { ReactElement, ReactNode } from 'react';
-import { AriaMenuProps } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
-import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from '../../../tasty';
-import { MenuButtonProps, MenuSelectionType } from './MenuButton';
-export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerStyleProps, AriaMenuProps<T> {
-    selectionIcon?: MenuSelectionType;
-    header?: ReactNode;
-    footer?: ReactNode;
-    styles?: Styles;
-    itemStyles?: Styles;
-    sectionStyles?: Styles;
-    sectionHeadingStyles?: Styles;
-    /** Keys that should appear disabled */
-    disabledKeys?: Iterable<Key>;
-    /** Selection mode for the menu: 'single' | 'multiple' */
-    selectionMode?: 'single' | 'multiple';
-}
-type PartialMenuButton = Partial<MenuButtonProps>;
-type ItemComponent = <T>(props: ItemProps<T> & PartialMenuButton & {
-    description?: ReactNode;
-    wrapper?: (item: ReactElement) => ReactElement;
-    /** Keyboard shortcut string, e.g. "Ctrl+C" */
-    hotkeys?: string;
-}) => ReactElement;
-type SectionComponent = typeof BaseSection;
-declare const Item: ItemComponent;
-declare const Section: SectionComponent;
-declare const __Menu: (<T>(props: CubeMenuProps<T> & {
-    ref?: DOMRef<HTMLUListElement>;
-}) => ReactElement) & {
-    Item: typeof Item;
-    Section: typeof Section;
-} & {
-    Item: (props: {
-        description?: ReactNode;
-        [key: string]: any;
-    }) => ReactElement;
-    Section: any;
-    displayName: string;
-};
-export { __Menu as Menu };

package/types/components/pickers/Menu/MenuButton.d.ts

@@ -1,14 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { CubeBlockProps } from '../../Block';
-export type MenuSelectionType = 'checkbox' | 'radio';
-export type MenuButtonProps = {
-    postfix?: ReactNode;
-    /** Optional description shown under the main label */
-    description?: ReactNode;
-    selectionIcon?: MenuSelectionType;
-    isSelectable?: boolean;
-    isSelected?: boolean;
-    icon?: ReactElement;
-    onAction?: () => void;
-} & CubeBlockProps;
-export declare function MenuButton({ children, icon, postfix, description, ...props }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;