@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/cjs/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/cjs/components/Button/Group.js

@@ -30,12 +30,12 @@ exports.Group = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Group(props) {
+exports.Group = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-button-group`, ...restProps } = props;
-    return (React.createElement("div", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
-}
-exports.Group = Group;
+    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: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Group.displayName = 'Button.Group';
+    exports.Group.displayName = 'Button.Group';
 }

package/dist/cjs/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/cjs/components/Button/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const Button_1 = require("./Button");
-const Group_1 = require("./Group");
+const Button_1 = require("../Button/Button");
+const Group_1 = require("../Button/Group");
 require("./index.scss");
 exports.Button = Button_1.Button;
 exports.Button.Group = Group_1.Group;

package/dist/cjs/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/cjs/components/Card/Badge.js

@@ -29,14 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const Badge_1 = require("../Badge");
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
-const Label_1 = require("../Label");
-function Badge(props) {
+const defaultElement = 'span';
+exports.Badge = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-card-badge`, ...restProps } = props;
-    return (React.createElement(Label_1.Label, { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
-}
-exports.Badge = Badge;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
+    return React.createElement(Badge_1.Badge, { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Badge.displayName = 'Card.Badge';
+    exports.Badge.displayName = 'Card.Badge';
 }

package/dist/cjs/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/cjs/components/Card/Body.js

@@ -29,13 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Body(props) {
+exports.Body = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-card-body`, ...restProps } = props;
-    return (React.createElement("div", { className: (0, classnames_1.default)(prefixCls, className), ...restProps }));
-}
-exports.Body = Body;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'body'), [config, prefixCls]);
+    return React.createElement("div", { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Body.displayName = 'Card.Body';
+    exports.Body.displayName = 'Card.Body';
 }

package/dist/cjs/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/cjs/components/Card/Card.js

@@ -31,19 +31,25 @@ const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Card(props) {
+exports.Card = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
     const { asBody, className, color, colorMode = color !== 'default' && color !== undefined
-        ? config[`card${(0, js_utils_1.capitalizeFirstLetter)(color)}ColorMode`]
-        : undefined, hoverable, prefixCls = `${config.prefixCls}-card`, size, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(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${(0, js_utils_1.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_1.ComponentProvider, { component: "card", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component_1.Component, { className: (0, classnames_1.default)(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') {
+    exports.Card.displayName = 'Card';
 }
-exports.Card = Card;

package/dist/cjs/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/cjs/components/Card/Footer.js

@@ -31,13 +31,15 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
 const ConfrigProvider_1 = require("../ConfrigProvider");
+const ComponentProvider_1 = require("../ComponentProvider");
 const defaultElement = 'footer';
-function Footer(props) {
+exports.Footer = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-card-footer`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, ...restProps }));
-}
-exports.Footer = Footer;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'footer'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Footer.displayName = 'Card.Footer';
+    exports.Footer.displayName = 'Card.Footer';
 }

package/dist/cjs/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)>;

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

@@ -31,13 +31,15 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
 const ConfrigProvider_1 = require("../ConfrigProvider");
+const ComponentProvider_1 = require("../ComponentProvider");
 const defaultElement = 'header';
-function Header(props) {
+exports.Header = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-card-header`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, ...restProps }));
-}
-exports.Header = Header;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'header'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Header.displayName = 'Card.Header';
+    exports.Header.displayName = 'Card.Header';
 }

package/dist/cjs/components/Card/Media.d.ts

@@ -3,7 +3,4 @@ export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
 }
-export declare function Media(props: CardMediaProps): JSX.Element;
-export declare namespace Media {
-    var displayName: string;
-}
+export declare const Media: React.MemoExoticComponent<(props: CardMediaProps) => JSX.Element>;

package/dist/cjs/components/Card/Media.js

@@ -29,15 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Media = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
-function Media(props) {
+exports.Media = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, position, prefixCls = `${config.prefixCls}-card-media`, ...restProps } = props;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, position, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
     return (React.createElement("div", { className: (0, classnames_1.default)({
-            [`${prefixCls}-${position}`]: position !== undefined,
+            [`${rootCls}-${position}`]: position !== undefined,
         }, className), ...restProps }));
-}
-exports.Media = Media;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Media.displayName = 'Card.Media';
+    exports.Media.displayName = 'Card.Media';
 }

package/dist/cjs/components/Card/Title.d.ts

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

package/dist/cjs/components/Card/Title.js

@@ -30,14 +30,16 @@ exports.Title = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ComponentProvider_1 = require("../ComponentProvider");
 const ConfrigProvider_1 = require("../ConfrigProvider");
-const defaultElement = 'h1';
-function Title(props) {
+const defaultElement = 'h3';
+exports.Title = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-card-title`, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, ...restProps }));
-}
-exports.Title = Title;
+    const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Title.displayName = 'Card.Title';
+    exports.Title.displayName = 'Card.Title';
 }

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { Badge } from './Badge';
-import { Body } from './Body';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Media } from './Media';
-import { Title } from './Title';
-import type { CardProps } from './Card';
+import type * as React from 'react';
+import { Badge } from '../Card/Badge';
+import { Body } from '../Card/Body';
+import { type CardProps } from '../Card/Card';
+import { Footer } from '../Card/Footer';
+import { Header } from '../Card/Header';
+import { Media } from '../Card/Media';
+import { Title } from '../Card/Title';
 import './index.scss';
 export type { CardProps };
-export interface CompoundedCard extends React.FunctionComponent<CardProps> {
+export interface Card extends React.MemoExoticComponent<React.FunctionComponent<CardProps>> {
     Badge: typeof Badge;
     Body: typeof Body;
     Footer: typeof Footer;
@@ -16,4 +16,4 @@ export interface CompoundedCard extends React.FunctionComponent<CardProps> {
     Media: typeof Media;
     Title: typeof Title;
 }
-export declare const Card: CompoundedCard;
+export declare const Card: Card;

package/dist/cjs/components/Card/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
-const Badge_1 = require("./Badge");
-const Body_1 = require("./Body");
-const Card_1 = require("./Card");
-const Footer_1 = require("./Footer");
-const Header_1 = require("./Header");
-const Media_1 = require("./Media");
-const Title_1 = require("./Title");
+const Badge_1 = require("../Card/Badge");
+const Body_1 = require("../Card/Body");
+const Card_1 = require("../Card/Card");
+const Footer_1 = require("../Card/Footer");
+const Header_1 = require("../Card/Header");
+const Media_1 = require("../Card/Media");
+const Title_1 = require("../Card/Title");
 require("./index.scss");
 exports.Card = Card_1.Card;
 exports.Card.Badge = Badge_1.Badge;

package/dist/cjs/components/Close/index.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import type { IconProps } from '../Icon';
-export declare type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'> & {
-    prefixCls?: string;
-};
-declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): JSX.Element;
-export {};
+import { type IconProps } from '../Icon';
+export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
+export declare const Close: React.MemoExoticComponent<(<E extends React.ElementType<any> = "button">(props: CloseProps<E>) => JSX.Element)>;

package/dist/cjs/components/Close/index.js

@@ -32,9 +32,12 @@ const classnames_1 = __importDefault(require("classnames"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
 const Icon_1 = require("../Icon");
 const defaultElement = 'button';
-function Close(props) {
+exports.Close = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, prefixCls = `${config.prefixCls}-close`, ...restProps } = props;
-    return (React.createElement(Icon_1.Icon, { "aria-hidden": "false", className: (0, classnames_1.default)(prefixCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'close'), [config, prefixCls]);
+    return (React.createElement(Icon_1.Icon, { "aria-hidden": "false", className: (0, classnames_1.default)(rootCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Close.displayName = 'Close';
 }
-exports.Close = Close;

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import type { ComponentProps } from './Component';
-export { Component } from './Component';
-export declare type PolymorphicComponentProps<E extends React.ElementType, P> = ComponentProps<E> & P;
-export declare type PolymorphicComponent<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => React.ReactElement | null;
+type ComponentOwnProp<E extends React.ElementType = React.ElementType> = {
+    component?: E;
+};
+type PropsToOmit<E extends React.ElementType, P = {}> = keyof (ComponentOwnProp<E> & P);
+export type PolymorphicProps<E extends React.ElementType, P = {}> = ComponentOwnProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, P>>;
+export type PolymorphicComponent<P = {}, C extends React.ElementType = 'div', I = {}> = <E extends React.ElementType = C>(props: PolymorphicProps<E, P> & I) => React.ReactElement | null;
+declare const defaultElement: React.ElementType;
+export declare const Component: <E extends React.ElementType = typeof defaultElement, P = {}>(props: PolymorphicProps<E, P>) => React.ReactElement | null;
+export {};

package/dist/cjs/components/Component/index.js

@@ -1,5 +1,29 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = void 0;
-var Component_1 = require("./Component");
-Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_1.Component; } });
+const React = __importStar(require("react"));
+const defaultElement = 'div';
+exports.Component = React.forwardRef(({ component: Element = defaultElement, ...props }, ref) => React.createElement(Element, { ref: ref, ...props }));

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ComponentContextConsumerProps = {
+    getRootCls(): string | undefined;
+};
+export interface ComponentContextProviderProps extends React.PropsWithChildren<Partial<ComponentContextConsumerProps>> {
+    component: string;
+    prefixCls?: string;
+}
+export declare const ComponentContext: React.Context<ComponentContextConsumerProps>;
+export declare function useComponentContext(): ComponentContextConsumerProps;
+export declare function ComponentProvider(props: ComponentContextProviderProps): JSX.Element;

package/dist/cjs/components/ComponentProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentProvider = exports.useComponentContext = exports.ComponentContext = void 0;
+const React = __importStar(require("react"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const hooks_1 = require("../../hooks");
+exports.ComponentContext = React.createContext({
+    getRootCls() {
+        return undefined;
+    },
+});
+function useComponentContext() {
+    return (0, hooks_1.useContext)(exports.ComponentContext);
+}
+exports.useComponentContext = useComponentContext;
+function ComponentProvider(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, component, prefixCls = config.prefixCls } = props;
+    const context = React.useMemo(() => ({
+        getRootCls() {
+            return config.getRootPrefixCls(prefixCls || config.prefixCls, component);
+        },
+    }), [component, config, prefixCls]);
+    return React.createElement(exports.ComponentContext.Provider, { value: context }, children);
+}
+exports.ComponentProvider = ComponentProvider;

package/dist/cjs/components/ConfrigProvider/index.d.ts

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import type { BreakpointsConfig } from '../../types';
-export declare type ColorMode = 'light' | 'dark';
-export declare type ConfigContextConsumerProps = {
+import { type BreakpointsConfig, type TooltipOptions } from '../../types';
+export type ColorMode = 'light' | 'dark';
+export type ConfigContextConsumerProps = {
     breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
     cardPrimaryColorMode?: ColorMode;
     cardSecondaryColorMode?: ColorMode;
     cardTertiaryColorMode?: ColorMode;
     direction?: string;
+    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+    getRootPrefixCls: (prefix?: string, component?: string) => string;
+    getTooltipConfig: (props: string | TooltipOptions) => {
+        'data-uk-tooltip': string;
+    };
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     sectionPrimaryColorMode?: ColorMode;
@@ -15,11 +20,8 @@ export declare type ConfigContextConsumerProps = {
     tilePrimaryColorMode?: ColorMode;
     tileSecondaryColorMode?: ColorMode;
     tileTertiaryColorMode?: ColorMode;
-    [k: string]: any;
 };
-export interface ConfigContextProviderProps extends ConfigContextConsumerProps {
-    children: React.ReactNode | React.ReactNode[];
-}
+export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
 export declare function useConfig(): ConfigContextConsumerProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): JSX.Element;