@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/cjs/utils/get-breakpoints-config-classes.d.ts

@@ -1,2 +1,2 @@
 import { type BreakpointsConfig } from '../types';
-export declare function getBreakpointsConfigClasses<E>(prefixCls: string, coreCls: string, config?: BreakpointsConfig<E>): string[];
+export declare function getBreakpointsConfigClasses<E>(prefixCls: string, componentCls: string, config?: BreakpointsConfig<E>): string;

package/dist/cjs/utils/get-breakpoints-config-classes.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBreakpointsConfigClasses = void 0;
-function getBreakpointsConfigClasses(prefixCls, coreCls, config = {}) {
-    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : ''));
+function getBreakpointsConfigClasses(prefixCls, componentCls, config = {}) {
+    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${componentCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '')).join(' ');
 }
 exports.getBreakpointsConfigClasses = getBreakpointsConfigClasses;

package/dist/cjs/utils/modal.d.ts

@@ -1,2 +1,3 @@
-export declare function addModalMode(): void;
-export declare function removeModalMode(): void;
+import classNames from 'classnames';
+export declare function addModalMode(...args: classNames.ArgumentArray): void;
+export declare function removeModalMode(...args: classNames.ArgumentArray): void;

package/dist/cjs/utils/modal.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeModalMode = exports.addModalMode = void 0;
 const js_utils_1 = require("@broxus/js-utils");
-function addModalMode() {
-    (0, js_utils_1.addClass)(document?.documentElement, 'uk-modal-page');
+const classnames_1 = __importDefault(require("classnames"));
+function addModalMode(...args) {
+    (0, js_utils_1.addClass)(document?.documentElement, (0, classnames_1.default)(args ?? 'uk-modal-page'));
 }
 exports.addModalMode = addModalMode;
-function removeModalMode() {
-    (0, js_utils_1.removeClass)(document?.documentElement, 'uk-modal-page');
+function removeModalMode(...args) {
+    (0, js_utils_1.removeClass)(document?.documentElement, (0, classnames_1.default)(args ?? 'uk-modal-page'));
 }
 exports.removeModalMode = removeModalMode;

package/dist/cjs/utils/motion.d.ts

@@ -1,3 +1,4 @@
 import { type CSSMotionProps } from 'rc-motion';
 export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
 export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;
+export declare function mergeDropMaskMotion(prefixCls: string, motion?: CSSMotionProps): CSSMotionProps;

package/dist/cjs/utils/motion.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCollapseMotion = exports.getMotionName = void 0;
+exports.mergeDropMaskMotion = exports.getCollapseMotion = exports.getMotionName = void 0;
+const js_utils_1 = require("@broxus/js-utils");
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
 const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
@@ -29,3 +30,43 @@ function getCollapseMotion(prefixCls) {
     };
 }
 exports.getCollapseMotion = getCollapseMotion;
+function mergeDropMaskMotion(prefixCls, motion) {
+    if (motion) {
+        return {
+            ...motion,
+            motionEnter: true,
+            onEnterStart: (node, event) => {
+                (0, js_utils_1.addClass)(node, `${prefixCls}-mask-active`);
+                console.log('onEnterStart', node);
+                return motion.onEnterStart?.(node, event);
+            },
+            onLeaveStart: (node, event) => {
+                (0, js_utils_1.removeClass)(node, `${prefixCls}-mask-active`);
+                console.log('onLeaveStart', node);
+                return motion.onEnterStart?.(node, event);
+            },
+        };
+    }
+    return {
+        motionAppear: true,
+        motionDeadline: 200,
+        motionEnter: true,
+        motionName: getMotionName(prefixCls, 'fade'),
+        onAppearEnd: (node, event) => {
+            (0, js_utils_1.addClass)(node, `${prefixCls}-active`);
+            console.log('onAppearEnd', node, event);
+            return undefined;
+        },
+        onEnterEnd: (node, event) => {
+            (0, js_utils_1.addClass)(node, `${prefixCls}-active`);
+            console.log('onEnterEnd', [node], event);
+            return undefined;
+        },
+        onLeaveStart: (node, event) => {
+            (0, js_utils_1.removeClass)(node, `${prefixCls}-active`);
+            console.log('onLeaveStart', node);
+            return { opacity: 0 };
+        },
+    };
+}
+exports.mergeDropMaskMotion = mergeDropMaskMotion;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { type CollapseProps } from 'rc-collapse';
+import * as React from 'react';
 export interface AccordionProps extends CollapseProps {
     direction?: string;
 }
-export declare const Accordion: React.MemoExoticComponent<(props: AccordionProps) => JSX.Element>;
+export declare const Accordion: React.MemoExoticComponent<(props: AccordionProps) => React.JSX.Element>;

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import Collapse from 'rc-collapse';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { getCollapseMotion } from '../../utils';
 export const Accordion = React.memo((props) => {
     const config = useConfig();
-    const { direction, prefixCls = config.prefixCls, ...restProps } = props;
+    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({
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-        }), openMotion: getCollapseMotion(prefixCls || config.prefixCls), prefixCls: rootCls, ...restProps }));
+            [`${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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { type CollapsePanelProps } from 'rc-collapse';
+import * as React from 'react';
 export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
 /**
  * Use Accordion items props instead
  * @deprecated
  */
-export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => JSX.Element>;
+export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => React.JSX.Element>;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Panel } from 'rc-collapse';
+import * as React from 'react';
 import { Icon } from '../../components/Icon';
 /**
  * Use Accordion items props instead

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

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import { type AccordionProps } from '../../components/Accordion/Accordion';
-import { Item, type AccordionItemProps } from '../../components/Accordion/Item';
+import { type AccordionItemProps, Item } from '../../components/Accordion/Item';
 import './index.scss';
 export type { AccordionProps, AccordionItemProps };
 export interface Accordion extends React.MemoExoticComponent<React.FunctionComponent<AccordionProps>> {

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

@@ -59,11 +59,6 @@
         @include hook-accordion-header;
     }
 
-    .uk-icon {
-        --icon-size: var(--accordion-icon-size);
-
-        margin-right: var(--accordion-icon-margin-right);
-    }
 }
 
 .uk-accordion-header-collapsible-only {
@@ -91,6 +86,11 @@
     }
 }
 
+/* Expand Icon */
+.uk-accordion-expand-icon {
+    --icon-size: var(--accordion-icon-size);
+    margin-right: var(--accordion-icon-margin-right);
+}
 
 /* Disabled item
  ========================================================================== */
@@ -151,6 +151,13 @@
 
 [dir='rtl'] .uk-accordion,
 .uk-accordion.uk-accordion-rtl {
+    direction: rtl;
+
+    .uk-accordion-expand-icon {
+        margin-left: var(--accordion-icon-margin-right);
+        margin-right: unset;
+    }
+
     .uk-accordion-extra {
         margin-left: var(--accordion-extra-margin-horizontal);
         margin-right: auto;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type MotionEndEventHandler } from 'rc-motion';
+import * as React from 'react';
 import './index.scss';
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     closable?: boolean;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 import { Close } from '../../components/Close';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 const ForwarderAlert = React.forwardRef((props, ref) => {
     const config = useConfig();

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

@@ -7,4 +7,4 @@ export type AlignOwnProps = {
     side?: 'left' | 'right';
 };
 export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
-export declare const Align: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: AlignProps<E>) => JSX.Element)>;
+export declare const Align: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: AlignProps<E>) => React.JSX.Element)>;

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Align = React.memo((props) => {
     const config = useConfig();
-    const { direction = config.direction, prefixCls = config.prefixCls, side = direction === 'rtl' ? 'right' : 'left', ...restProps } = props;
+    const { className, direction = config.direction, prefixCls = config.prefixCls, side = 'left', ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
     const invertedSide = React.useMemo(() => (side === 'left' ? 'right' : 'left'), [side]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'align'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames({
             [`${rootCls}-${isRtl ? invertedSide : side}`]: true,
-        }), component: defaultElement, ...restProps }));
+        }, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Align.displayName = 'Align';

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

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

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

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

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 const Article: React.MemoExoticComponent<(props: ArticleProps) => JSX.Element>;
+export declare const Article: React.MemoExoticComponent<(props: ArticleProps) => React.JSX.Element>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
 import { ComponentProvider } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
 export const Article = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -4,4 +4,4 @@ export type ArticleMetaOwnProps = {
     prefixCls?: string;
 };
 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)>;
+export declare const Meta: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: ArticleMetaProps<E>) => React.JSX.Element)>;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'p';
 export const Meta = React.memo((props) => {
     const config = useConfig();

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

@@ -4,4 +4,4 @@ export type ArticleTitleOwnProps = {
     prefixCls?: string;
 };
 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)>;
+export declare const Title: React.MemoExoticComponent<(<E extends React.ElementType<any> = "h1">(props: ArticleTitleProps<E>) => React.JSX.Element)>;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'h1';
 export const Title = React.memo((props) => {
     const config = useConfig();

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

@@ -5,4 +5,4 @@ export type BadgeOwnProps = {
     prefixCls?: string;
 };
 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)>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: BadgeProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 const defaultElement = 'span';
 export const Badge = React.memo((props) => {

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 const Breadcrumb: React.MemoExoticComponent<(props: BreadcrumbProps) => JSX.Element>;
+export declare const Breadcrumb: React.MemoExoticComponent<(props: BreadcrumbProps) => React.JSX.Element>;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const Breadcrumb = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

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

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

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const Item = React.memo((props) => {
     const config = useConfig();
     const { className, disabled, ...restProps } = props;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type PolymorphicProps } from '../../components/Component';
 export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<any>, 'onClick'> {
     href: string;
     target?: string;
@@ -8,11 +9,12 @@ export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<any>,
     htmlType?: 'button' | 'reset' | 'submit';
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
-export interface ButtonProps extends Partial<AnchorButtonProps>, Partial<NativeButtonProps> {
+export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<NativeButtonProps> {
     ghost?: boolean;
     prefixCls?: string;
     shape?: 'circle' | 'round';
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>>;
+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>>>;

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

@@ -1,7 +1,9 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { Component } from '../../components/Component';
+import { useConfig } from '../../components/ConfigProvider';
 import { Link } from '../../components/Link';
+const defaultElement = 'button';
 const ForwardedButton = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { children, ghost, htmlType = 'button', prefixCls = config.prefixCls, shape, size, type, ...restProps } = props;
@@ -21,9 +23,9 @@ const ForwardedButton = React.forwardRef((props, ref) => {
         [`${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: ref || buttonRef, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
     }
-    return (React.createElement("button", { ref: ref || buttonRef, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    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') {

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

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

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const Group = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { type BadgeProps } from '../../components/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)>;
+export declare const Badge: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: CardBadgeProps<E>) => React.JSX.Element)>;

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

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

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
+import { type PolymorphicProps } from '../../components/Component';
+export type CardBodyOwnProps = {
     prefixCls?: string;
-}
-export declare const Body: React.MemoExoticComponent<(props: CardBodyProps) => JSX.Element>;
+};
+export type CardBodyProps<E extends React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
+export declare const Body: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: CardBodyProps<E>) => React.JSX.Element)>;

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

@@ -1,13 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
+import { Component } from '../../components/Component';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
+const defaultElement = 'div';
 export const Body = React.memo((props) => {
     const config = useConfig();
     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 });
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'body'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Body.displayName = 'Card.Body';

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import { type ColorMode } from '../../components/ConfrigProvider';
-export interface CardOwnProps extends React.HTMLAttributes<HTMLElement> {
+import { type ColorMode } from '../../components/ConfigProvider';
+export type CardOwnProps = {
     asBody?: boolean;
     color?: 'default' | 'primary' | 'secondary' | 'tertiary';
     colorMode?: ColorMode;
     hoverable?: boolean;
     prefixCls?: string;
     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>) => JSX.Element)>;
+export declare const Card: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: CardProps<E>) => React.JSX.Element)>;

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
 import { capitalizeFirstLetter } from '@broxus/js-utils';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
 import { ComponentProvider } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Card = React.memo((props) => {
     const config = useConfig();
@@ -11,7 +11,7 @@ export const Card = React.memo((props) => {
         // @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]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'card'), [config, prefixCls]);
     return (React.createElement(ComponentProvider, { component: "card", prefixCls: prefixCls || config.prefixCls },
         React.createElement(Component, { className: classNames(rootCls, {
                 [`${rootCls}-${color}`]: color !== undefined,

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

@@ -4,4 +4,4 @@ export type CardFooterOwnProps = {
     prefixCls?: string;
 };
 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)>;
+export declare const Footer: React.MemoExoticComponent<(<E extends React.ElementType<any> = "footer">(props: CardFooterProps<E>) => React.JSX.Element)>;

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
 import { useComponentContext } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'footer';
 export const Footer = React.memo((props) => {
     const config = useConfig();
     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 }));
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(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

@@ -4,4 +4,4 @@ export type CardHeaderOwnProps = {
     prefixCls?: string;
 };
 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)>;
+export declare const Header: React.MemoExoticComponent<(<E extends React.ElementType<any> = "header">(props: CardHeaderProps<E>) => React.JSX.Element)>;

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

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