@broxus/react-uikit 0.4.6 → 0.4.8

package/dist/esm/components/Accordion/Accordion.d.ts

@@ -3,4 +3,7 @@ import * as React from 'react';
 export interface AccordionProps extends CollapseProps {
     direction?: string;
 }
-export declare const Accordion: React.MemoExoticComponent<(props: AccordionProps) => React.JSX.Element>;
+export declare function Accordion(props: AccordionProps): React.JSX.Element;
+export declare namespace Accordion {
+    var displayName: string;
+}

package/dist/esm/components/Accordion/Accordion.js

@@ -3,14 +3,14 @@ import Collapse from 'rc-collapse';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { getCollapseMotion } from '../../utils';
-export const Accordion = React.memo((props) => {
+export function Accordion(props) {
     const config = useConfig();
     const { className, direction, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'accordion'), [config, prefixCls]);
     return (React.createElement(Collapse, { className: classNames({
             [`${rootCls}-rtl`]: direction === 'rtl',
         }, className), openMotion: getCollapseMotion(prefixCls || config.prefixCls), prefixCls: rootCls, ...restProps }));
-});
+}
 if (process.env.NODE_ENV !== 'production') {
     Accordion.displayName = 'Accordion';
 }

package/dist/esm/components/Accordion/Item.d.ts

@@ -5,4 +5,7 @@ export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps
  * Use Accordion items props instead
  * @deprecated
  */
-export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => React.JSX.Element>;
+export declare function Item(props: AccordionItemProps): React.JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

package/dist/esm/components/Accordion/Item.js

@@ -5,12 +5,12 @@ import { Icon } from '../../components/Icon';
  * Use Accordion items props instead
  * @deprecated
  */
-export const Item = React.memo((props) => {
+export function Item(props) {
     const { expandIcon, ...restProps } = props;
     const mergedExpandIcon = React.useMemo(() => expandIcon
         || (({ isActive }) => (React.createElement(Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);
     return React.createElement(Panel, { expandIcon: mergedExpandIcon, ...restProps });
-});
+}
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Accordion.Item';
 }

package/dist/esm/components/Button/Button.d.ts

@@ -17,4 +17,4 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
 export type ButtonProps<E extends React.ElementType = any> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>;

package/dist/esm/components/Button/Button.js

@@ -4,9 +4,9 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { Link } from '../../components/Link';
 const defaultElement = 'button';
-const ForwardedButton = React.forwardRef((props, ref) => {
+export const Button = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape, size, type, ...restProps } = props;
+    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape = config.buttonShape, size = config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -27,8 +27,6 @@ const ForwardedButton = React.forwardRef((props, ref) => {
     }
     return (React.createElement(Component, { ref: ref || buttonRef, component: defaultElement, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
 });
-export const Button = React.memo(ForwardedButton);
 if (process.env.NODE_ENV !== 'production') {
-    ForwardedButton.displayName = 'Button.Forwarded';
     Button.displayName = 'Button';
 }

package/dist/esm/components/Button/Group.d.ts

@@ -2,4 +2,7 @@ import * as React from 'react';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare const Group: React.MemoExoticComponent<(props: ButtonGroupProps) => React.JSX.Element>;
+export declare function Group(props: ButtonGroupProps): React.JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}

package/dist/esm/components/Button/Group.js

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export const Group = React.memo((props) => {
+export function Group(props) {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button-group'), [config, prefixCls]);
     return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
-});
+}
 if (process.env.NODE_ENV !== 'production') {
     Group.displayName = 'Button.Group';
 }

package/dist/esm/components/Button/index.d.ts

@@ -3,7 +3,7 @@ import { type ButtonProps } from '../../components/Button/Button';
 import { Group } from '../../components/Button/Group';
 import './index.scss';
 export type { ButtonProps };
-export interface Button extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps>> {
+export interface Button extends React.ForwardRefExoticComponent<ButtonProps> {
     Group: typeof Group;
 }
 export declare const Button: Button;

package/dist/esm/components/Button/index.scss

@@ -19,8 +19,7 @@
 //                  `uk-button-xlarge`
 //                  `uk-button-circle`
 //                  `uk-button-round`
-//
-// TODO: Add `ghost` and `dashed` modifiers
+//                  `uk-button-ghost`
 //
 // States:          `uk-active`
 //
@@ -410,6 +409,90 @@
 }
 
 
+/* Ghost modifiers
+ ========================================================================== */
+
+.uk-button-ghost {
+    background-color: transparent;
+    border: var(--button-ghost-border-width) var(--button-ghost-border-style);
+}
+
+.uk-button-default.uk-button-ghost {
+    border-color: var(--button-ghost-default-border);
+    color: var(--button-ghost-default-color);
+}
+
+.uk-button-default.uk-button-ghost:hover,
+.uk-button-default.uk-button-ghost:focus {
+    border-color: var(--button-ghost-default-hover-border);
+}
+
+.uk-button-default.uk-button-ghost:active,
+.uk-button-default.uk-button-ghost.active {
+    border-color: var(--button-ghost-default-active-border);
+}
+
+.uk-button-primary.uk-button-ghost {
+    border-color: var(--button-ghost-primary-border);
+    color: var(--button-ghost-primary-color);
+}
+
+.uk-button-primary.uk-button-ghost:hover,
+.uk-button-primary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-primary-hover-border);
+}
+
+.uk-button-primary.uk-button-ghost:active,
+.uk-button-primary.uk-button-ghost.active {
+    border-color: var(--button-ghost-primary-active-border);
+}
+
+.uk-button-secondary.uk-button-ghost {
+    border-color: var(--button-ghost-secondary-border);
+    color: var(--button-ghost-secondary-color);
+}
+
+.uk-button-secondary.uk-button-ghost:hover,
+.uk-button-secondary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-secondary-hover-border);
+}
+
+.uk-button-secondary.uk-button-ghost:active,
+.uk-button-secondary.uk-button-ghost.active {
+    border-color: var(--button-ghost-secondary-active-border);
+}
+
+.uk-button-tertiary.uk-button-ghost {
+    border-color: var(--button-ghost-tertiary-border);
+    color: var(--button-ghost-tertiary-color);
+}
+
+.uk-button-tertiary.uk-button-ghost:hover,
+.uk-button-tertiary.uk-button-ghost:focus {
+    border-color: var(--button-ghost-tertiary-hover-border);
+}
+
+.uk-button-tertiary.uk-button-ghost:active,
+.uk-button-tertiary.uk-button-ghost.active {
+    border-color: var(--button-ghost-tertiary-active-border);
+}
+
+.uk-button-danger.uk-button-ghost {
+    border-color: var(--button-ghost-danger-border);
+    color: var(--button-ghost-danger-color);
+}
+
+.uk-button-danger.uk-button-ghost:hover,
+.uk-button-danger.uk-button-ghost:focus {
+    border-color: var(--button-ghost-danger-hover-border);
+}
+
+.uk-button-danger.uk-button-ghost:active,
+.uk-button-danger.uk-button-ghost.active {
+    border-color: var(--button-ghost-danger-active-border);
+}
+
+
 /* Shape modifiers
  ========================================================================== */
 
@@ -498,6 +581,28 @@
     --button-danger-hover-color: var(--global-inverse-color);
     --button-danger-active-background: #{$button-danger-active-background};
     --button-danger-active-color: var(--global-inverse-color);
+    --button-ghost-border-width: var(--global-border-width);
+    --button-ghost-border-style: var(--global-border-style);
+    --button-ghost-default-color: var(--button-default-background);
+    --button-ghost-default-border: var(--button-default-background);
+    --button-ghost-default-hover-border: var(--button-default-hover-background);
+    --button-ghost-default-active-border: var(--button-default-active-background);
+    --button-ghost-primary-color: var(--button-primary-background);
+    --button-ghost-primary-border: var(--button-primary-background);
+    --button-ghost-primary-hover-border: var(--button-primary-hover-background);
+    --button-ghost-primary-active-border: var(--button-primary-active-background);
+    --button-ghost-secondary-color: var(--button-secondary-background);
+    --button-ghost-secondary-border: var(--button-secondary-background);
+    --button-ghost-secondary-hover-border: var(--button-secondary-hover-background);
+    --button-ghost-secondary-active-border: var(--button-secondary-active-background);
+    --button-ghost-tertiary-color: var(--button-tertiary-background);
+    --button-ghost-tertiary-border: var(--button-tertiary-background);
+    --button-ghost-tertiary-hover-border: var(--button-tertiary-hover-background);
+    --button-ghost-tertiary-active-border: var(--button-tertiary-active-background);
+    --button-ghost-danger-color: var(--button-danger-background);
+    --button-ghost-danger-border: var(--button-danger-background);
+    --button-ghost-danger-hover-border: var(--button-danger-hover-background);
+    --button-ghost-danger-active-border: var(--button-danger-active-background);
     --button-circle-border-radius: #{$button-circle-border-radius};
     --button-round-border-radius: #{$button-round-border-radius};
     --button-disabled-background: var(--global-muted-background);

package/dist/esm/components/Card/Card.d.ts

@@ -10,4 +10,9 @@ export type CardOwnProps = {
     size?: 'small' | 'large';
 };
 export type CardProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardOwnProps>;
-export declare const Card: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: CardProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): React.JSX.Element;
+export declare namespace Card {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/Card/Card.js

@@ -5,7 +5,7 @@ import { Component } from '../../components/Component';
 import { ComponentProvider } from '../../components/ComponentProvider';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export const Card = React.memo((props) => {
+export function Card(props) {
     const config = useConfig();
     const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
         // @ts-ignore
@@ -20,7 +20,7 @@ export const Card = React.memo((props) => {
                 [`${rootCls}-hover`]: hoverable,
                 [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
             }, className), component: defaultElement, ...restProps })));
-});
+}
 if (process.env.NODE_ENV !== 'production') {
     Card.displayName = 'Card';
 }

package/dist/esm/components/Card/index.d.ts

@@ -8,7 +8,7 @@ import { Media } from '../../components/Card/Media';
 import { Title } from '../../components/Card/Title';
 import './index.scss';
 export type { CardProps };
-export interface Card extends React.MemoExoticComponent<React.FunctionComponent<CardProps>> {
+export interface Card extends React.FunctionComponent<CardProps> {
     Badge: typeof Badge;
     Body: typeof Body;
     Footer: typeof Footer;

package/dist/esm/components/Component/index.d.ts

@@ -5,7 +5,7 @@ type ComponentOwnProp<T extends React.ElementType = React.ElementType> = React.C
 type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = {}> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
 export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = {}> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
 export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = {}> {
-    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): JSX.Element;
+    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.JSX.Element;
     displayName?: string;
     propTypes?: React.WeakValidationMap<any>;
     contextTypes?: React.ValidationMap<any>;

package/dist/esm/components/ComponentProvider/index.d.ts

@@ -8,4 +8,4 @@ export interface ComponentContextProviderProps extends React.PropsWithChildren<P
 }
 export declare const ComponentContext: React.Context<ComponentContextConsumerProps>;
 export declare function useComponentContext(): ComponentContextConsumerProps;
-export declare function ComponentProvider(props: ComponentContextProviderProps): JSX.Element;
+export declare function ComponentProvider(props: ComponentContextProviderProps): React.JSX.Element;

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { type BreakpointsConfig, type TooltipOptions } from '../../types';
+import { ButtonProps } from "../../components/Button";
 export type ColorMode = 'light' | 'dark';
 export type ConfigContextConsumerProps = {
     breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
+    buttonShape?: ButtonProps['shape'];
+    buttonSize?: ButtonProps['size'];
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
@@ -24,4 +27,4 @@ export type ConfigContextConsumerProps = {
 export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
 export declare function useConfig(): ConfigContextConsumerProps;
-export declare const ConfigContextProvider: React.MemoExoticComponent<(props: Partial<ConfigContextProviderProps>) => React.JSX.Element>;
+export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;

package/dist/esm/components/ConfigProvider/index.js

@@ -45,7 +45,7 @@ export const ConfigContext = React.createContext({
 export function useConfig() {
     return React.useContext(ConfigContext);
 }
-export const ConfigContextProvider = React.memo((props) => {
+export function ConfigContextProvider(props) {
     const initialContext = useConfig();
     const { children, ...restProps } = props;
     const context = React.useMemo(() => {
@@ -59,7 +59,7 @@ export const ConfigContextProvider = React.memo((props) => {
         return { ...initialContext, direction, ...restProps };
     }, [initialContext, restProps]);
     return React.createElement(ConfigContext.Provider, { value: context }, children);
-});
+}
 if (process.env.NODE_ENV !== 'production') {
     ConfigContext.displayName = 'ConfigContext';
 }

package/dist/esm/components/Flex/Flex.d.ts

@@ -19,4 +19,6 @@ export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
     prefixCls?: string;
 }
 export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
-export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): React.JSX.Element;
+export {};

package/dist/esm/components/Flex/Flex.js

@@ -5,7 +5,7 @@ import { ComponentProvider } from '../../components/ComponentProvider';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'div';
-export const Flex = React.memo((props) => {
+export function Flex(props) {
     const config = useConfig();
     const { alignContent, alignItems, className, flexDirection, flexWrap, inline, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
@@ -21,4 +21,4 @@ export const Flex = React.memo((props) => {
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
                 [`${rootCls}-wrap-${alignContent}`]: alignContent !== undefined,
             }, justifyContentCls, className), component: defaultElement, ...restProps })));
-});
+}

package/dist/esm/components/Flex/Item.d.ts

@@ -9,5 +9,6 @@ export interface ItemOwnItem {
     prefixCls?: string;
 }
 export type ItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ItemOwnItem & PolymorphicProps<E>> & PolymorphicProps<E, ItemOwnItem>;
-export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ItemProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Item<E extends React.ElementType = typeof defaultElement>(props: ItemProps<E>): React.JSX.Element;
 export {};

package/dist/esm/components/Flex/Item.js

@@ -5,7 +5,7 @@ import { useComponentContext } from '../../components/ComponentProvider';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'div';
-export const Item = React.memo((props) => {
+export function Item(props) {
     const config = useConfig();
     const { getRootCls } = useComponentContext();
     const { className, itemDimensions, order, prefixCls = getRootCls(), ...restProps } = props;
@@ -15,4 +15,4 @@ export const Item = React.memo((props) => {
     return (React.createElement(Component, { className: classNames({
             [`${prefixCls}-${itemDimensions}`]: itemDimensions !== undefined,
         }, orderCls, className), component: defaultElement, ...restProps }));
-});
+}

package/dist/esm/components/Flex/index.d.ts

@@ -3,7 +3,7 @@ import { type FlexAlignContent, type FlexAlignItems, type FlexDirection, type Fl
 import { type ItemProps as FlexItemProps, Item } from '../../components/Flex/Item';
 import './index.scss';
 export type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexItemProps, FlexProps, FlexWrap };
-export interface Flex extends React.MemoExoticComponent<React.FunctionComponent<FlexProps>> {
+export interface Flex extends React.FunctionComponent<FlexProps> {
     Item: typeof Item;
 }
 export declare const Flex: Flex;

package/dist/esm/components/Grid/index.d.ts

@@ -14,4 +14,6 @@ export type GridOwnProps = {
     rowGap?: GridGap;
 };
 export type GridProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<GridOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, GridOwnProps>;
-export declare const Grid: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: GridProps<E>) => React.JSX.Element)>;
+declare const defaultElement: React.ElementType;
+export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): React.JSX.Element;
+export {};

package/dist/esm/components/Grid/index.js

@@ -5,7 +5,7 @@ import { useConfig } from '../../components/ConfigProvider';
 import { getChildWidthClassname } from '../../components/Width';
 import './index.scss';
 const defaultElement = 'div';
-export const Grid = React.memo((props) => {
+export function Grid(props) {
     const config = useConfig();
     const { childWidth, className, columnGap, divider, gap, margin, match, prefixCls = config.prefixCls, rowGap, ...restProps } = props;
     const childWithClassName = React.useMemo(() => getChildWidthClassname(childWidth), [childWidth]);
@@ -18,4 +18,4 @@ export const Grid = React.memo((props) => {
             [`${rootCls}-divider`]: divider,
             [`${rootCls}-match`]: match,
         }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
-});
+}

package/dist/esm/components/Nav/Nav.d.ts

@@ -57,4 +57,4 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
         disabled: boolean;
     }) => React.ReactElement;
 }
-export declare const Nav: React.MemoExoticComponent<React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>>;
+export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>;

package/dist/esm/components/Nav/Nav.js

@@ -20,7 +20,7 @@ import { warnItemProp } from '../../components/Nav/utils/warnUtil';
 import { useMounted } from '../../hooks';
 import { getCollapseMotion, getMotionName } from '../../utils';
 const EMPTY_LIST = [];
-const ForwardedNav = React.forwardRef((props, ref) => {
+export const Nav = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { activeKey, builtinPlacements, children, className, defaultActiveFirst, defaultOpenKeys, defaultSelectedKeys, direction, disabled, disabledOverflow, expandIcon, forceSubNavRender, getPopupContainer, id, inlineCollapsed, itemIcon, items, mode = 'inline', modifiers, motion, multiple = false, openKeys, overflowedIndicator = '...', overflowedIndicatorPopupClassName, popupPrefixCls = `${config.prefixCls}-dropdown`, prefixCls = config.prefixCls, defaultMotions = {
         horizontal: {
@@ -118,6 +118,7 @@ const ForwardedNav = React.forwardRef((props, ref) => {
             : childList.slice(lastVisibleIndex + 1).map(child => child.key));
     }, [lastVisibleIndex, allVisible, refreshOverflowKeys, childList]);
     // ======================== Active ========================
+    // eslint-disable-next-line function-paren-newline
     const [mergedActiveKey, setMergedActiveKey] = useMergedState(activeKey || ((defaultActiveFirst && childList[0]?.key)), { value: activeKey });
     const onActive = useMemoCallback((key) => {
         setMergedActiveKey(key);
@@ -255,4 +256,3 @@ const ForwardedNav = React.forwardRef((props, ref) => {
                 React.createElement("div", { style: { display: 'none' }, "aria-hidden": true },
                     React.createElement(PathRegisterContext.Provider, { value: registerPathContext }, childList))))));
 });
-export const Nav = React.memo(ForwardedNav);

package/dist/esm/components/Tabs/hooks/useLegacyItems.d.ts

@@ -1,4 +1,4 @@
 import { type Tab } from 'rc-tabs/lib/interface';
 import * as React from 'react';
 import { type TabsProps } from '../../../components/Tabs';
-export default function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode): Tab[];
+export declare function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode): Tab[];

package/dist/esm/components/Tabs/hooks/useLegacyItems.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 function filter(items) {
     return items.filter(item => item);
 }
-export default function useLegacyItems(items, children) {
+export function useLegacyItems(items, children) {
     if (items) {
         return items;
     }

package/dist/esm/components/Tabs/index.d.ts

@@ -14,4 +14,4 @@ export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => React.JSX.Element>;
+export declare function Tabs(props: TabsProps): React.JSX.Element;

package/dist/esm/components/Tabs/index.js

@@ -3,11 +3,10 @@ import RcTabs from 'rc-tabs';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
-import { useAnimateConfig } from '../../components/Tabs/hooks';
+import { useAnimateConfig, useLegacyItems } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
 import './index.scss';
-import useLegacyItems from '../../components/Tabs/hooks/useLegacyItems';
-export const Tabs = React.memo((props) => {
+export function Tabs(props) {
     const config = useConfig();
     const { addIcon, animated, centered, children, className, direction, hideAdd, items, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
@@ -29,4 +28,4 @@ export const Tabs = React.memo((props) => {
             [`${rootCls}-editable-card`]: type === 'editable-card',
             [`${rootCls}-centered`]: centered,
         }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
-});
+}

package/dist/esm/styles/margin.scss

@@ -298,6 +298,7 @@
 
 :root {
     --margin: var(--global-margin);
+    --xsmall-margin: var(--global-xsmall-margin);
     --small-margin: var(--global-small-margin);
     --medium-margin: var(--global-medium-margin);
     --large-margin: var(--global-medium-margin);