@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/esm/components/Align/Right.d.ts

@@ -1,5 +1,3 @@
-import type { AlignProps } from './Align';
-export declare function Right(props: Omit<AlignProps, 'side'>): JSX.Element;
-export declare namespace Right {
-    var displayName: string;
-}
+import * as React from 'react';
+import { type AlignProps } from '../Align/Align';
+export declare const Right: React.MemoExoticComponent<(props: Omit<AlignProps, 'side'>) => JSX.Element>;

package/dist/esm/components/Align/Right.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { Align } from './Align';
-export function Right(props) {
-    return React.createElement(Align, { ...props, side: "right" });
-}
+import { Align } from '../Align/Align';
+export const Right = React.memo((props) => (React.createElement(Align, { ...props, side: "right" })));
 if (process.env.NODE_ENV !== 'production') {
     Right.displayName = 'Align.Right';
 }

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

@@ -1,10 +1,11 @@
-import { PolymorphicComponent } from '../Component';
-import { AlignOwnProps } from './Align';
-import { Left } from './Left';
-import { Right } from './Right';
+import type * as React from 'react';
+import { type AlignOwnProps, type AlignProps } from '../Align/Align';
+import { Left } from '../Align/Left';
+import { Right } from '../Align/Right';
 import './index.scss';
-export declare type CompoundedAlign = PolymorphicComponent<AlignOwnProps> & {
+export type { AlignOwnProps, AlignProps };
+export interface Align extends React.MemoExoticComponent<React.FunctionComponent<AlignProps>> {
     Left: typeof Left;
     Right: typeof Right;
-};
-export declare const Align: CompoundedAlign;
+}
+export declare const Align: Align;

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

@@ -1,6 +1,6 @@
-import { Align as InternalAlign } from './Align';
-import { Left } from './Left';
-import { Right } from './Right';
+import { Align as InternalAlign } from '../Align/Align';
+import { Left } from '../Align/Left';
+import { Right } from '../Align/Right';
 import './index.scss';
 export const Align = InternalAlign;
 Align.Left = Left;

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export declare function Article(props: ArticleProps): JSX.Element;
+export declare const Article: React.MemoExoticComponent<(props: ArticleProps) => JSX.Element>;

package/dist/esm/components/Article/Article.js

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Article(props) {
+import { ComponentProvider } from '../ComponentProvider';
+export const Article = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement("article", { className: classNames(prefixCls, className), ...restProps }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'article'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider, { component: "article", prefixCls: prefixCls || config.prefixCls },
+        React.createElement("article", { className: classNames(rootCls, className), ...restProps })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Article.displayName = 'Article';
 }

package/dist/esm/components/Article/Meta.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type ArticleMetaOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type ArticleMetaOwnProps = {
     prefixCls?: string;
 };
-export declare type ArticleMetaProps<E extends React.ElementType> = PolymorphicComponentProps<E, ArticleMetaOwnProps>;
-declare const defaultElement = "p";
-export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): JSX.Element;
-export declare namespace Meta {
-    var displayName: string;
-}
-export {};
+export type ArticleMetaProps<E extends React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
+export declare const Meta: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: ArticleMetaProps<E>) => JSX.Element)>;

package/dist/esm/components/Article/Meta.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'p';
-export function Meta(props) {
+export const Meta = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(`${prefixCls}-meta`, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'meta'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Meta.displayName = 'Article.Meta';
 }

package/dist/esm/components/Article/Title.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type ArticleTitleOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type ArticleTitleOwnProps = {
     prefixCls?: string;
 };
-export declare type ArticleTitleProps<E extends React.ElementType> = PolymorphicComponentProps<E, ArticleTitleOwnProps>;
-declare const defaultElement = "h1";
-export declare function Title<E extends React.ElementType = typeof defaultElement>(props: ArticleTitleProps<E>): JSX.Element;
-export declare namespace Title {
-    var displayName: string;
-}
-export {};
+export type ArticleTitleProps<E extends React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
+export declare const Title: React.MemoExoticComponent<(<E extends React.ElementType<any> = "h1">(props: ArticleTitleProps<E>) => JSX.Element)>;

package/dist/esm/components/Article/Title.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'h1';
-export function Title(props) {
+export const Title = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-article`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(`${prefixCls}-title`, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Article.Title';
 }

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

@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { Meta } from './Meta';
-import { Title } from './Title';
-import type { ArticleProps } from './Article';
-import type { ArticleMetaProps } from './Meta';
-import type { ArticleTitleProps } from './Title';
+import type * as React from 'react';
+import { type ArticleProps } from '../Article/Article';
+import { type ArticleMetaProps, Meta } from '../Article/Meta';
+import { type ArticleTitleProps, Title } from '../Article/Title';
 import './index.scss';
-export type { ArticleProps, ArticleMetaProps, ArticleTitleProps };
-export interface CompoundedArticle extends React.FunctionComponent<ArticleProps> {
+export type { ArticleMetaProps, ArticleProps, ArticleTitleProps };
+export interface Article extends React.MemoExoticComponent<React.FunctionComponent<ArticleProps>> {
     Meta: typeof Meta;
     Title: typeof Title;
 }
-export declare const Article: CompoundedArticle;
+export declare const Article: Article;

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

@@ -1,6 +1,6 @@
-import { Article as InternalArticle } from './Article';
-import { Meta } from './Meta';
-import { Title } from './Title';
+import { Article as InternalArticle } from '../Article/Article';
+import { Meta } from '../Article/Meta';
+import { Title } from '../Article/Title';
 import './index.scss';
 export const Article = InternalArticle;
 Article.Meta = Meta;

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type BadgeOwnProps = {
+export type BadgeOwnProps = {
     prefixCls?: string;
 };
-export declare type BadgeProps<E extends React.ElementType> = PolymorphicComponentProps<E, BadgeOwnProps>;
-declare const defaultElement = "span";
-export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): JSX.Element;
-export {};
+export type BadgeProps<E extends React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: BadgeProps<E>) => JSX.Element)>;

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

@@ -4,8 +4,12 @@ import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'span';
-export function Badge(props) {
+export const Badge = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-badge`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Badge.displayName = 'Badge';
 }

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
 }
-export declare function Breadcrumb(props: BreadcrumbProps): JSX.Element;
+export declare const Breadcrumb: React.MemoExoticComponent<(props: BreadcrumbProps) => JSX.Element>;

package/dist/esm/components/Breadcrumb/Breadcrumb.js

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Breadcrumb(props) {
+export const Breadcrumb = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-breadcrumb`, ...restProps } = props;
-    return (React.createElement("ul", { className: classNames(prefixCls, className), ...restProps }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'breadcrumb'), [config, prefixCls]);
+    return React.createElement("ul", { className: classNames(rootCls, className), ...restProps });
+});
+if (process.env.NODE_ENV !== 'production') {
+    Breadcrumb.displayName = 'Breadcrumb';
 }

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

@@ -2,8 +2,5 @@ import * as React from 'react';
 interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
 }
-export declare function Item(props: BreadcrumbItemProps): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
-}
+export declare const Item: React.MemoExoticComponent<(props: BreadcrumbItemProps) => JSX.Element>;
 export {};

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Item(props) {
+export const Item = React.memo((props) => {
     const config = useConfig();
     const { className, disabled, ...restProps } = props;
     return (React.createElement("li", { className: classNames(className, {
             [`${config.prefixCls}-disabled`]: disabled,
         }), ...restProps }));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Breadcrumb.Item';
 }

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Item } from './Item';
-import type { BreadcrumbProps } from './Breadcrumb';
+import type * as React from 'react';
+import { type BreadcrumbProps } from '../Breadcrumb/Breadcrumb';
+import { Item } from '../Breadcrumb/Item';
 import './index.scss';
 export type { BreadcrumbProps };
-export interface CompoundedBreadcrumb extends React.FunctionComponent<BreadcrumbProps> {
+export interface Breadcrumb extends React.MemoExoticComponent<React.FunctionComponent<BreadcrumbProps>> {
     Item: typeof Item;
 }
-export declare const Breadcrumb: CompoundedBreadcrumb;
+export declare const Breadcrumb: Breadcrumb;

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

@@ -1,5 +1,5 @@
-import { Breadcrumb as InnerBreadcrumb } from './Breadcrumb';
-import { Item } from './Item';
+import { Breadcrumb as InternalBreadcrumb } from '../Breadcrumb/Breadcrumb';
+import { Item } from '../Breadcrumb/Item';
 import './index.scss';
-export const Breadcrumb = InnerBreadcrumb;
+export const Breadcrumb = InternalBreadcrumb;
 Breadcrumb.Item = Item;

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

@@ -15,4 +15,4 @@ export interface ButtonProps extends Partial<AnchorButtonProps>, Partial<NativeB
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<unknown>>;
+export declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>>;

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

@@ -2,29 +2,31 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
 import { Link } from '../Link';
-/* eslint-disable react/prop-types */
-export const Button = React.forwardRef((props, ref) => {
+const ForwardedButton = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, ghost, htmlType = 'button', prefixCls = `${config.prefixCls}-button`, shape, size, type, ...restProps } = props;
-    const buttonRef = ref || React.useRef(null);
-    const onClick = event => {
+    const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape, size, type, ...restProps } = props;
+    const buttonRef = React.useRef(null);
+    const onClick = React.useCallback(event => {
         if (restProps.disabled) {
             event.preventDefault();
             return;
         }
         restProps.onClick?.(event);
-    };
-    const className = classNames(prefixCls, {
-        [`${prefixCls}-${type}`]: type !== undefined,
-        [`${prefixCls}-ghost`]: ghost !== undefined,
-        [`${prefixCls}-${size}`]: size !== undefined,
-        [`${prefixCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
-    }, restProps.className);
+    }, [restProps]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const className = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-${type}`]: type !== undefined,
+        [`${rootCls}-ghost`]: ghost !== undefined,
+        [`${rootCls}-${size}`]: size !== undefined,
+        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+    }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
-        return (React.createElement(Link, { ref: buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Link, { ref: ref || buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
     }
-    return (React.createElement("button", { ref: buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement("button", { ref: ref || buttonRef, 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,7 +2,4 @@ import * as React from 'react';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function Group(props: ButtonGroupProps): JSX.Element;
-export declare namespace Group {
-    var displayName: string;
-}
+export declare const Group: React.MemoExoticComponent<(props: ButtonGroupProps) => JSX.Element>;

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useConfig } from '../ConfrigProvider';
-export function Group(props) {
+export const Group = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-button-group`, ...restProps } = props;
-    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
-}
+    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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Group } from './Group';
-import type { ButtonProps } from './Button';
+import type * as React from 'react';
+import { type ButtonProps } from '../Button/Button';
+import { Group } from '../Button/Group';
 import './index.scss';
 export type { ButtonProps };
-export interface CompoundedButton extends React.ForwardRefExoticComponent<ButtonProps> {
+export interface Button extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps>> {
     Group: typeof Group;
 }
-export declare const Button: CompoundedButton;
+export declare const Button: Button;

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

@@ -1,5 +1,5 @@
-import { Button as InternalButton } from './Button';
-import { Group } from './Group';
+import { Button as InternalButton } from '../Button/Button';
+import { Group } from '../Button/Group';
 import './index.scss';
 export const Button = InternalButton;
 Button.Group = Group;

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
-export interface CardBadgeProps extends React.HTMLAttributes<HTMLElement> {
-    prefixCls?: string;
-}
-export declare function Badge(props: CardBadgeProps): JSX.Element;
-export declare namespace Badge {
-    var displayName: string;
-}
+import { type BadgeProps } from '../Badge';
+export type CardBadgeProps<E extends React.ElementType> = BadgeProps<E>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: CardBadgeProps<E>) => JSX.Element)>;

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { Badge as BaseBadge } from '../Badge';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-import { Label } from '../Label';
-export function Badge(props) {
+const defaultElement = 'span';
+export const Badge = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-badge`, ...restProps } = props;
-    return (React.createElement(Label, { className: classNames(prefixCls, className), ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
+    return React.createElement(BaseBadge, { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';
 }

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

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

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

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useComponentContext } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
-export function Body(props) {
+export const Body = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-body`, ...restProps } = props;
-    return (React.createElement("div", { className: classNames(prefixCls, className), ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
+    return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Body.displayName = 'Card.Body';
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { ColorMode } from '../ConfrigProvider';
+import { type PolymorphicProps } from '../Component';
+import { type ColorMode } from '../ConfrigProvider';
 export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
     asBody?: boolean;
     color?: 'default' | 'primary' | 'secondary' | 'tertiary';
@@ -9,7 +9,5 @@ export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
     size?: 'small' | 'large';
 }
-export declare type CardProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardOwnProps>;
-declare const defaultElement = "div";
-export declare function Card<E extends React.ElementType = typeof defaultElement>(props: CardProps<E>): JSX.Element;
-export {};
+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>) => JSX.Element)>;

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

@@ -2,18 +2,25 @@ import * as React from 'react';
 import { capitalizeFirstLetter } from '@broxus/js-utils';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { ComponentProvider } from '../ComponentProvider';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Card(props) {
+export const Card = React.memo((props) => {
     const config = useConfig();
     const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
-        ? config[`card${capitalizeFirstLetter(color)}ColorMode`]
-        : undefined, hoverable, prefixCls = `${config.prefixCls}-card`, size, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, {
-            [`${prefixCls}-${color}`]: color !== undefined,
-            [`${prefixCls}-${size}`]: size !== undefined,
-            [`${prefixCls}-body`]: asBody,
-            [`${prefixCls}-hover`]: hoverable,
-            [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
-        }, className), component: defaultElement, ...restProps }));
+        ? // @ts-ignore
+            config[`card${capitalizeFirstLetter(color)}ColorMode`]
+        : undefined, hoverable, prefixCls = config.prefixCls, size, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'card'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider, { component: "card", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component, { className: classNames(rootCls, {
+                [`${rootCls}-${color}`]: color !== undefined,
+                [`${rootCls}-${size}`]: size !== undefined,
+                [`${rootCls}-body`]: asBody,
+                [`${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/Footer.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type CardFooterOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type CardFooterOwnProps = {
     prefixCls?: string;
 };
-export declare type CardFooterProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardFooterOwnProps>;
-declare const defaultElement = "footer";
-export declare function Footer<E extends React.ElementType = typeof defaultElement>(props: CardFooterProps<E>): JSX.Element;
-export declare namespace Footer {
-    var displayName: string;
-}
-export {};
+export type CardFooterProps<E extends React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
+export declare const Footer: React.MemoExoticComponent<(<E extends React.ElementType<any> = "footer">(props: CardFooterProps<E>) => JSX.Element)>;

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

@@ -2,12 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
+import { useComponentContext } from '../ComponentProvider';
 const defaultElement = 'footer';
-export function Footer(props) {
+export const Footer = React.memo((props) => {
     const config = useConfig();
-    const { className, prefixCls = `${config.prefixCls}-card-footer`, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(prefixCls, className), component: defaultElement, ...restProps }));
-}
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'footer'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Footer.displayName = 'Card.Footer';
 }

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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type CardHeaderOwnProps = {
+import { type PolymorphicProps } from '../Component';
+export type CardHeaderOwnProps = {
     prefixCls?: string;
 };
-export declare type CardHeaderProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, CardHeaderOwnProps>;
-declare const defaultElement = "header";
-export declare function Header<E extends React.ElementType = typeof defaultElement>(props: CardHeaderProps<E>): JSX.Element;
-export declare namespace Header {
-    var displayName: string;
-}
-export {};
+export type CardHeaderProps<E extends React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
+export declare const Header: React.MemoExoticComponent<(<E extends React.ElementType<any> = "header">(props: CardHeaderProps<E>) => JSX.Element)>;