@broxus/react-uikit 0.1.3 → 0.2.1

package/dist/cjs/styles/variables.scss

@@ -75,7 +75,7 @@ $global-default-background:                     #e5e5e5 !default;
 $global-muted-background:                       #f8f8f8 !default;
 $global-primary-background:                     #1e87f0 !default;
 $global-secondary-background:                   #222 !default;
-$global-tertiary-background:                    #c16635 !default;
+$global-tertiary-background:                    #b8b8b8 !default;
 $global-success-background:                     #1cb57c !default;
 $global-warning-background:                     #ffbc60 !default;
 $global-danger-background:                      #f5604b !default;
@@ -86,7 +86,7 @@ $global-danger-background:                      #f5604b !default;
 
 $global-border-width:                           1px !default;
 $global-border-style:                           solid !default;
-$global-border:                                 $global-default-background !default;
+$global-border:                                 darken($global-default-background, 3%) !default;
 $global-muted-border:                           $global-muted-background !default;
 $global-primary-border:                         $global-primary-background !default;
 $global-secondary-border:                       $global-secondary-background !default;
@@ -199,9 +199,9 @@ $alert-danger-color:                            $global-danger-background !defau
 // Align
 // ========================================================================
 
-$align-margin-horizontal: $global-gutter !default;
-$align-margin-vertical: $global-gutter !default;
-$align-margin-horizontal-l: $global-medium-gutter !default;
+$align-margin-horizontal:                       $global-gutter !default;
+$align-margin-vertical:                         $global-gutter !default;
+$align-margin-horizontal-l:                     $global-medium-gutter !default;
 
 
 // Animation
@@ -857,6 +857,7 @@ $checkbox-focus-border:                         $global-primary-border !default;
 $checkbox-checked-background:                   $global-primary-background !default;
 $checkbox-checked-border:                       $global-primary-border !default;
 $checkbox-checked-icon-color:                   $global-inverse-color !default;
+$checkbox-control-background:                   rgba($control-background, 45%) !default;
 $checkbox-checked-control-background:           rgba($checkbox-checked-background, 15%) !default;
 $checkbox-checked-control-color:                $global-primary-background !default;
 $checkbox-checked-control-padding:              10px !default;
@@ -879,6 +880,7 @@ $radio-focus-border:                            $control-focus-border !default;
 $radio-checked-background:                      transparent !default;
 $radio-checked-border:                          $global-primary-border !default;
 $radio-checked-icon-color:                      $global-primary-background !default;
+$radio-control-background:                      rgba($control-background, 45%) !default;
 $radio-checked-control-background:              rgba($radio-checked-icon-color, 15%) !default;
 $radio-checked-control-color:                   $global-primary-background !default;
 $radio-disabled-background:                     $control-disabled-background !default;
@@ -1248,6 +1250,8 @@ $nav-header-padding-horizontal:                 $nav-item-padding-horizontal !de
 $nav-header-font-size:                          $global-small-font-size !default;
 $nav-header-text-transform:                     uppercase !default;
 $nav-header-margin-top:                         $global-margin !default;
+$nav-divider-border-width:                      $global-border-width !default;
+$nav-divider-border:                            $global-border !default;
 $nav-divider-margin-vertical:                   5px !default;
 $nav-divider-margin-horizontal:                 0 !default;
 $nav-default-item-color:                        $global-muted-color !default;

package/dist/cjs/types.d.ts

@@ -1,4 +1,4 @@
-export declare type BreakpointsConfig<T> = {
+export type BreakpointsConfig<T> = {
     default?: T;
     xs?: T;
     s?: T;
@@ -6,5 +6,17 @@ export declare type BreakpointsConfig<T> = {
     l?: T;
     xl?: T;
 };
-export declare type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type Direction = 'ltr' | 'rtl';
+export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type Direction = 'ltr' | 'rtl';
+export type TooltipOptions = {
+    animation?: string;
+    cls?: string;
+    delay?: number;
+    duration?: number;
+    offset?: boolean | number;
+    pos?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    title?: string;
+};
+export type TooltipProps = {
+    tooltip?: string | TooltipOptions;
+};

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

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

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

@@ -2,6 +2,6 @@
 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}` : ''}` : ''));
+    return Object.entries(config).map(([key, value]) => value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : '');
 }
 exports.getBreakpointsConfigClasses = getBreakpointsConfigClasses;

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

@@ -1,4 +1,3 @@
-export * from './hooks';
-export * from './get-breakpoints-config-classes';
-export * from './modal';
-export * from './motion';
+export * from '../utils/get-breakpoints-config-classes';
+export * from '../utils/modal';
+export * from '../utils/motion';

package/dist/cjs/utils/index.js

@@ -14,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./hooks"), exports);
-__exportStar(require("./get-breakpoints-config-classes"), exports);
-__exportStar(require("./modal"), exports);
-__exportStar(require("./motion"), exports);
+__exportStar(require("../utils/get-breakpoints-config-classes"), exports);
+__exportStar(require("../utils/modal"), exports);
+__exportStar(require("../utils/motion"), exports);

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

@@ -1,3 +1,3 @@
-import { CSSMotionProps } from 'rc-motion';
-export declare const collapseMotion: CSSMotionProps;
-export declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
+import { type CSSMotionProps } from 'rc-motion';
+export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
+export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;

package/dist/cjs/utils/motion.js

@@ -1,29 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTransitionName = exports.collapseMotion = void 0;
+exports.getCollapseMotion = exports.getMotionName = void 0;
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
 const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
-const skipOpacityTransition = (_, event) => (event?.deadline === true
-    || event.propertyName === 'height');
-exports.collapseMotion = {
-    leavedClassName: 'uk-hidden',
-    motionDeadline: 300,
-    motionName: 'uk-motion-collapse',
-    onAppearActive: getRealHeight,
-    onAppearEnd: skipOpacityTransition,
-    onAppearStart: getCollapsedHeight,
-    onEnterActive: getRealHeight,
-    onEnterEnd: skipOpacityTransition,
-    onEnterStart: getCollapsedHeight,
-    onLeaveActive: getCollapsedHeight,
-    onLeaveEnd: skipOpacityTransition,
-    onLeaveStart: getCurrentHeight,
-};
-const getTransitionName = (rootPrefixCls, motion, transitionName) => {
+const skipOpacityTransition = (_, event) => event?.deadline === true || event.propertyName === 'height';
+function getMotionName(prefixCls, motion, transitionName) {
     if (transitionName !== undefined) {
         return transitionName;
     }
-    return `${rootPrefixCls}-${motion}`;
-};
-exports.getTransitionName = getTransitionName;
+    return `${prefixCls}-motion-${motion}`;
+}
+exports.getMotionName = getMotionName;
+function getCollapseMotion(prefixCls) {
+    return {
+        leavedClassName: `${prefixCls}-hidden`,
+        motionDeadline: 300,
+        motionName: getMotionName(prefixCls, 'collapse'),
+        onAppearActive: getRealHeight,
+        onAppearEnd: skipOpacityTransition,
+        onAppearStart: getCollapsedHeight,
+        onEnterActive: getRealHeight,
+        onEnterEnd: skipOpacityTransition,
+        onEnterStart: getCollapsedHeight,
+        onLeaveActive: getCollapsedHeight,
+        onLeaveEnd: skipOpacityTransition,
+        onLeaveStart: getCurrentHeight,
+    };
+}
+exports.getCollapseMotion = getCollapseMotion;

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

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

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import Collapse from 'rc-collapse';
-import { collapseMotion } from '../../utils';
 import { useConfig } from '../ConfrigProvider';
-export function Accordion(props) {
+import { getCollapseMotion } from '../../utils';
+export const Accordion = React.memo((props) => {
     const config = useConfig();
-    const { direction, prefixCls = `${config.prefixCls}-accordion`, ...restProps } = props;
+    const { 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: collapseMotion, prefixCls: prefixCls, ...restProps }));
+        }), 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,7 +1,4 @@
 import * as React from 'react';
-import type { CollapsePanelProps } from 'rc-collapse/lib/interface';
-export declare type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
-export declare function Item(props: AccordionItemProps): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
-}
+import { type CollapsePanelProps } from 'rc-collapse';
+export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
+export declare const Item: React.MemoExoticComponent<(props: AccordionItemProps) => JSX.Element>;

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Panel } from 'rc-collapse';
 import { Icon } from '../Icon';
-export function Item(props) {
+export const Item = React.memo((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 }));
-}
+    const mergedExpandIcon = React.useMemo(() => expandIcon ||
+        (({ isActive }) => (React.createElement(Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);
+    return React.createElement(Panel, { expandIcon: mergedExpandIcon, ...restProps, headerClass: "fsds" });
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Accordion.Item';
 }

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MotionEndEventHandler } from 'rc-motion';
+import { type MotionEndEventHandler } from 'rc-motion';
 import './index.scss';
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     closable?: boolean;
@@ -9,7 +9,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose?: () => void;
     onClosed?: MotionEndEventHandler;
 }
-export declare type AlertRef = {
+export type AlertRef = {
     close: () => void;
 };
-export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;
+export declare const Alert: React.MemoExoticComponent<React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>>;

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

@@ -4,25 +4,32 @@ import CSSMotion from 'rc-motion';
 import { Close } from '../Close';
 import { useConfig } from '../ConfrigProvider';
 import './index.scss';
-export const Alert = React.forwardRef((props, ref) => {
+const ForwarderAlert = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { children, className, closable = true, closeIcon, prefixCls = `${config.prefixCls}-alert`, style, severity, onClose, onClosed, ...restProps } = props;
+    const { children, className, closable = true, closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
-    const close = () => {
+    const close = React.useCallback(() => {
         onClose?.();
         setClosed(true);
-    };
+    }, [onClose]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'alert'), [config, prefixCls]);
     React.useImperativeHandle(ref, () => ({
         close,
-    }), []);
-    return (React.createElement(CSSMotion, { visible: !closed, motionName: `${prefixCls}-motion`, motionAppear: false, motionEnter: false, onLeaveStart: node => ({
+    }), [close]);
+    return (React.createElement(CSSMotion, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
-        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(prefixCls, {
-            [`${prefixCls}-${severity}`]: severity !== undefined,
+        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: classNames(rootCls, {
+            [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
         closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
-            className: `${prefixCls}-close`,
+            // @ts-ignore
+            className: `${rootCls}-close`,
             onClick: close,
-        })) : (React.createElement(Close, { className: `${prefixCls}-close`, onClick: close }))),
+        })) : (React.createElement(Close, { className: `${rootCls}-close`, onClick: close }))),
         children))));
 });
+export const Alert = React.memo(ForwarderAlert);
+if (process.env.NODE_ENV !== 'production') {
+    ForwarderAlert.displayName = 'Alert.Forwarded';
+    Alert.displayName = 'Alert';
+}

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

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import type { Direction } from '../../types';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type AlignOwnProps = {
+import { type PolymorphicProps } from '../Component';
+import { type Direction } from '../../types';
+export type AlignOwnProps = {
     direction?: Direction;
     prefixCls?: string;
     side?: 'left' | 'right';
 };
-export declare type AlignProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, AlignOwnProps>;
-declare const defaultElement = "div";
-export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): JSX.Element;
-export {};
+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)>;

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

@@ -3,12 +3,16 @@ import classNames from 'classnames';
 import { Component } from '../Component';
 import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Align(props) {
+export const Align = React.memo((props) => {
     const config = useConfig();
-    const { direction, prefixCls = `${config.prefixCls}-align`, side = direction === 'rtl' ? 'right' : 'left', ...restProps } = props;
-    const isRtl = direction === 'rtl';
-    const invertedSide = side === 'left' ? 'right' : 'left';
+    const { direction = config.direction, prefixCls = config.prefixCls, side = direction === 'rtl' ? 'right' : '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({
-            [`${prefixCls}-${isRtl ? invertedSide : side}`]: true,
+            [`${rootCls}-${isRtl ? invertedSide : side}`]: true,
         }), component: defaultElement, ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Align.displayName = 'Align';
 }

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

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

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

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

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)>;