@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -30,57 +30,74 @@ exports.Drop = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_trigger_1 = __importDefault(require("rc-trigger"));
-const placements_1 = __importDefault(require("./placements"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const placements_1 = __importDefault(require("../Drop/placements"));
+const utils_1 = require("../../utils");
 require("./index.scss");
 exports.Drop = React.forwardRef((props, ref) => {
-    const { align, alignPoint, animation, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = 'uk-drop', placement = 'bottom-left', placements = placements_1.default, showAction, transitionName = 'uk-motion-slide-up', trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { align, alignPoint, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = config.prefixCls, placement = 'bottom-left', placements = placements_1.default, rootCls: externalRootCls, showAction, trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
     const triggerRef = React.useRef(null);
     const [triggerVisible, setTriggerVisible] = React.useState();
     const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
-    const onPopupVisibleChange = (value) => {
+    const rootCls = React.useMemo(() => externalRootCls ?? config.getRootPrefixCls(prefixCls || config.prefixCls, 'drop'), [config, prefixCls, externalRootCls]);
+    const onPopupVisibleChange = React.useCallback((value) => {
         setTriggerVisible(value);
         onVisibleChange?.(value);
-    };
-    const getOverlayElement = () => {
+    }, [onVisibleChange]);
+    const getOverlayElement = React.useCallback(() => {
         if (typeof overlay === 'function') {
             return overlay();
         }
         return overlay;
-    };
-    const getDropElement = () => (React.createElement(React.Fragment, null,
+    }, [overlay]);
+    const getDropElement = React.useCallback(() => (React.createElement(React.Fragment, null,
         arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
         React.cloneElement(getOverlayElement(), {
             onClick: onOverlayClick,
-        })));
-    const getDropElementOrLambda = () => {
+        }))), [arrow, getOverlayElement, onOverlayClick, prefixCls]);
+    const getDropElementOrLambda = React.useCallback(() => {
         if (typeof overlay === 'function') {
-            return getDropElement;
+            return getDropElement();
         }
-        return getDropElement();
-    };
-    const getMinOverlayWidthMatchTrigger = () => {
+        return getDropElement;
+    }, [getDropElement, overlay]);
+    const getMinOverlayWidthMatchTrigger = React.useCallback(() => {
         if (minOverlayWidthMatchTrigger !== undefined) {
             return minOverlayWidthMatchTrigger;
         }
         return !alignPoint;
-    };
-    const renderChildren = () => {
+    }, [alignPoint, minOverlayWidthMatchTrigger]);
+    const renderChildren = React.useCallback(() => {
         const childrenProps = children.props ? children.props : {};
-        const childClassName = (0, classnames_1.default)(childrenProps.className, 'uk-open');
+        const childClassName = (0, classnames_1.default)(childrenProps.className, `${prefixCls || config.prefixCls}-open`);
         return triggerVisible && children
             ? React.cloneElement(children, {
                 className: childClassName,
             })
             : children;
-    };
-    React.useImperativeHandle(ref, () => triggerRef.current);
+    }, [children, config.prefixCls, prefixCls, triggerVisible]);
+    React.useImperativeHandle(ref, () => ({
+        close() {
+            setTriggerVisible(false);
+        },
+        open() {
+            setTriggerVisible(true);
+        },
+        // @ts-ignore
+        triggerRef: triggerRef.current,
+    }));
     let triggerHideAction = hideAction;
     if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
         triggerHideAction = ['click'];
     }
-    return (React.createElement(rc_trigger_1.default, { ref: triggerRef, ...restProps, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], popup: getDropElementOrLambda(), popupAlign: align, popupAnimation: animation, popupClassName: (0, classnames_1.default)(overlayClassName, {
-            [`${prefixCls}-show-arrow`]: arrow,
-        }), popupPlacement: placement, popupStyle: overlayStyle, popupTransitionName: transitionName, popupVisible: mergedVisible, prefixCls: prefixCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+    return (React.createElement(rc_trigger_1.default, { ref: triggerRef, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: (0, classnames_1.default)(overlayClassName, {
+            [`${rootCls}-show-arrow`]: arrow,
+        }), popupMotion: {
+            forceRender: true,
+            motionDeadline: 300,
+            motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
+        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Drop.displayName = 'Drop';

package/dist/cjs/components/Drop/index.scss

@@ -44,32 +44,6 @@
 .uk-drop-hidden { display: none; }
 
 
-/* Position Animation
- ========================================================================== */
-
-[class*='uk-drop-placement-bottom'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-up-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-up-out;
-    }
-}
-
-[class*='uk-drop-placement-top'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-down-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-down-out;
-    }
-}
-
-
 /* Grid modifiers
  ========================================================================== */
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { DropProps } from '../Drop';
+import { type DropProps, type DropRef } from '../Drop';
 import './index.scss';
-export declare type DropdownProps = DropProps;
-export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;
+export type DropdownProps = DropProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;

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

@@ -25,11 +25,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const React = __importStar(require("react"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const Drop_1 = require("../Drop");
 require("./index.scss");
 exports.Dropdown = React.forwardRef((props, ref) => {
-    const { children, ...restProps } = props;
-    return (React.createElement(Drop_1.Drop, { ref: ref, ...restProps, prefixCls: "uk-dropdown" }, children));
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'dropdown'), [config, prefixCls]);
+    return (React.createElement(Drop_1.Drop, { ref: ref, ...restProps, rootCls: rootCls }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Dropdown.displayName = 'Dropdown';

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { BreakpointsConfig } from '../../types';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
+import { type BreakpointsConfig } from '../../types';
 import './index.scss';
-export declare type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
-export declare type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
-export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-export declare type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
-export declare type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
-export declare type FlexBreakpoint = {
+export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
+export type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
+export type FlexBreakpoint = {
     alignContent?: FlexAlignContent;
     alignItems?: FlexAlignItems;
     flexDirection?: FlexDirection;
@@ -16,11 +16,10 @@ export declare type FlexBreakpoint = {
     itemDimensions?: FlexItemDimensions;
     justifyContent?: FlexJustifyContent;
 };
-export declare type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
-export declare type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
+export type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
+export type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
     inline?: boolean;
+    prefixCls?: string;
 };
-export declare type FlexProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FlexOwnProps>;
-declare const defaultElement = "div";
-export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): JSX.Element;
-export {};
+export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
+export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => JSX.Element)>;

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

@@ -30,19 +30,21 @@ exports.Flex = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'div';
-function Flex(props) {
-    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, ...restProps } = props;
+exports.Flex = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
-            'uk-flex': !inline,
-            'uk-flex-inline': inline,
-            [`uk-flex-${alignItems}`]: alignItems !== undefined,
-            [`uk-flex-${flexDirection}`]: flexDirection !== undefined,
-            [`uk-flex-${flexWrap}`]: flexWrap !== undefined,
-            [`uk-flex-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
-            [`uk-flex-${justifyContent}`]: justifyContent !== undefined,
-            [`uk-flex-${itemDimensions}`]: itemDimensions !== undefined,
-        }, className), component: defaultElement, ...restProps }));
-}
-exports.Flex = Flex;
+            [rootCls]: !inline,
+            [`${rootCls}-inline`]: inline,
+            [`${rootCls}-${alignItems}`]: alignItems !== undefined,
+            [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
+            [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
+            [`${rootCls}-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
+            [`${rootCls}-${justifyContent}`]: justifyContent !== undefined,
+            [`${rootCls}-${itemDimensions}`]: itemDimensions !== undefined,
+        }, className), ...restProps }));
+});

package/dist/cjs/components/Form/Controls.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function Controls(props: ControlsProps): JSX.Element;
-export declare namespace Controls {
-    var displayName: string;
+export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
 }
+export declare const Controls: React.MemoExoticComponent<(props: ControlsProps) => JSX.Element>;

package/dist/cjs/components/Form/Controls.js

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

package/dist/cjs/components/Form/ControlsText.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type ControlsTextProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function ControlsText(props: ControlsTextProps): JSX.Element;
-export declare namespace ControlsText {
-    var displayName: string;
+export interface ControlsTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
 }
+export declare const ControlsText: React.MemoExoticComponent<(props: ControlsTextProps) => JSX.Element>;

package/dist/cjs/components/Form/ControlsText.js

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

package/dist/cjs/components/Form/Fieldset.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
-export declare function Fieldset(props: FieldsetProps): JSX.Element;
-export declare namespace Fieldset {
-    var displayName: string;
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    layout?: 'stacked' | 'horizontal';
+    prefixCls?: string;
 }
+export declare const Fieldset: React.MemoExoticComponent<(props: FieldsetProps) => JSX.Element>;

package/dist/cjs/components/Form/Fieldset.js

@@ -29,11 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fieldset = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function Fieldset(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement("fieldset", { className: (0, classnames_1.default)('uk-fieldset', className), ...restProps }));
-}
-exports.Fieldset = Fieldset;
+const ConfrigProvider_1 = require("../ConfrigProvider");
+exports.Fieldset = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'fieldset'), [config, prefixCls]);
+    return (React.createElement("fieldset", { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${layout}`]: layout !== undefined,
+        }, className), ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Fieldset.displayName = 'Form.Fieldset';
+    exports.Fieldset.displayName = 'Form.Fieldset';
 }

package/dist/cjs/components/Form/Form.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 export interface FormOwnProps {
     layout?: 'stacked' | 'horizontal';
+    prefixCls?: string;
 }
-export declare type FormProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FormOwnProps>;
-declare const defaultElement = "form";
-export declare function Form<E extends React.ElementType = typeof defaultElement>(props: FormProps<E>): JSX.Element;
-export {};
+export type FormProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FormOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FormOwnProps>;
+export declare const Form: React.MemoExoticComponent<(<E extends React.ElementType<any> = "form">(props: FormProps<E>) => JSX.Element)>;

package/dist/cjs/components/Form/Form.js

@@ -30,11 +30,15 @@ exports.Form = void 0;
 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 = 'form';
-function Form(props) {
-    const { className, layout, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-form', {
-            [`uk-form-${layout}`]: layout !== undefined,
-        }, className), component: defaultElement, ...restProps }));
-}
-exports.Form = Form;
+exports.Form = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'form'), [config, prefixCls]);
+    return (React.createElement(ComponentProvider_1.ComponentProvider, { component: "form", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
+                [`${rootCls}-${layout}`]: layout !== undefined,
+            }, className), component: defaultElement, ...restProps })));
+});

package/dist/cjs/components/Form/Label.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-export declare function Label(props: LabelProps): JSX.Element;
-export declare namespace Label {
-    var displayName: string;
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    prefixCls?: string;
 }
+export declare const Label: React.MemoExoticComponent<(props: LabelProps) => JSX.Element>;

package/dist/cjs/components/Form/Label.js

@@ -29,11 +29,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function Label(props) {
-    const { className, htmlFor, ...restProps } = props;
-    return (React.createElement("label", { className: (0, classnames_1.default)('uk-form-label', className), htmlFor: htmlFor, ...restProps }));
-}
-exports.Label = Label;
+const ConfrigProvider_1 = require("../ConfrigProvider");
+/* eslint-disable jsx-a11y/label-has-associated-control */
+exports.Label = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'form-label'), [config, prefixCls]);
+    return React.createElement("label", { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Label.displayName = 'Form.Label';
+    exports.Label.displayName = 'Form.Label';
 }

package/dist/cjs/components/Form/Legend.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type LegendProps = React.HTMLAttributes<HTMLLegendElement>;
-export declare function Legend(props: LegendProps): JSX.Element;
-export declare namespace Legend {
-    var displayName: string;
+export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+    prefixCls?: string;
 }
+export declare const Legend: React.MemoExoticComponent<(props: LegendProps) => JSX.Element>;

package/dist/cjs/components/Form/Legend.js

@@ -29,11 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Legend = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function Legend(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement("legend", { className: (0, classnames_1.default)('uk-legend', className), ...restProps }));
-}
-exports.Legend = Legend;
+const ConfrigProvider_1 = require("../ConfrigProvider");
+exports.Legend = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'legend'), [config, prefixCls]);
+    return React.createElement("legend", { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
-    Legend.displayName = 'Form.Legend';
+    exports.Legend.displayName = 'Form.Legend';
 }

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { Controls } from './Controls';
-import { ControlsText } from './ControlsText';
-import { Fieldset } from './Fieldset';
-import { Label } from './Label';
-import { Legend } from './Legend';
-import type { FormProps } from './Form';
+import type * as React from 'react';
+import { Controls } from '../Form/Controls';
+import { ControlsText } from '../Form/ControlsText';
+import { Fieldset } from '../Form/Fieldset';
+import { type FormProps } from '../Form/Form';
+import { Label } from '../Form/Label';
+import { Legend } from '../Form/Legend';
 import './index.scss';
 export type { FormProps };
-export interface CompoundedForm extends React.FunctionComponent<FormProps> {
+export interface Form extends React.MemoExoticComponent<React.ForwardRefExoticComponent<FormProps>> {
     Controls: typeof Controls;
     ControlsText: typeof ControlsText;
     Fieldset: typeof Fieldset;
     Label: typeof Label;
     Legend: typeof Legend;
 }
-export declare const Form: CompoundedForm;
+export declare const Form: Form;

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
-const Controls_1 = require("./Controls");
-const ControlsText_1 = require("./ControlsText");
-const Fieldset_1 = require("./Fieldset");
-const Form_1 = require("./Form");
-const Label_1 = require("./Label");
-const Legend_1 = require("./Legend");
+const Controls_1 = require("../Form/Controls");
+const ControlsText_1 = require("../Form/ControlsText");
+const Fieldset_1 = require("../Form/Fieldset");
+const Form_1 = require("../Form/Form");
+const Label_1 = require("../Form/Label");
+const Legend_1 = require("../Form/Legend");
 require("./index.scss");
 exports.Form = Form_1.Form;
 exports.Form.Controls = Controls_1.Controls;

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

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { ChildWidthBreakpointsConfig, ChildWidthSize } from '../Width';
+import { type PolymorphicProps } from '../Component';
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize } from '../Width';
 import './index.scss';
-export declare type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
-export declare type GridOwnProps = {
+export type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
+export type GridOwnProps = {
     childWidth?: ChildWidthSize | ChildWidthBreakpointsConfig;
     columnGap?: GridGap;
     divider?: boolean;
     gap?: GridGap;
     margin?: GridGap;
     match?: boolean;
+    prefixCls?: string;
     rowGap?: GridGap;
 };
-export declare type GridProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, GridOwnProps>;
-declare const defaultElement = "div";
-export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): JSX.Element;
-export {};
+export type GridProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<GridOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, GridOwnProps>;
+export declare const Grid: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: GridProps<E>) => JSX.Element)>;

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

@@ -30,19 +30,21 @@ exports.Grid = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const Width_1 = require("../Width");
 require("./index.scss");
 const defaultElement = 'div';
-function Grid(props) {
-    const { childWidth, className, columnGap, divider, gap, margin, match, rowGap, ...restProps } = props;
+exports.Grid = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { childWidth, className, columnGap, divider, gap, margin, match, prefixCls = config.prefixCls, rowGap, ...restProps } = props;
     const childWithClassName = React.useMemo(() => (0, Width_1.getChildWidthClassname)(childWidth), [childWidth]);
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-grid', {
-            [`uk-grid-${gap}`]: gap !== undefined,
-            [`uk-grid-row-${rowGap}`]: rowGap !== undefined,
-            [`uk-grid-column-${columnGap}`]: columnGap !== undefined,
-            [`uk-grid-margin-${margin}`]: margin !== undefined,
-            'uk-grid-divider': divider,
-            'uk-grid-match': match,
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'grid'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${gap}`]: gap !== undefined,
+            [`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
+            [`${rootCls}-column-${columnGap}`]: columnGap !== undefined,
+            [`${rootCls}-margin-${margin}`]: margin !== undefined,
+            [`${rootCls}-divider`]: divider,
+            [`${rootCls}-match`]: match,
         }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
-}
-exports.Grid = Grid;
+});

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type HeadingOwnProps = {
+export type HeadingOwnProps = {
     decoration?: 'bullet' | 'divider' | 'line';
+    prefixCls?: string;
     size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 };
-export declare type HeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, HeadingOwnProps>;
-declare const defaultElement = "div";
-export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): JSX.Element;
-export {};
+export type HeadingProps<E extends React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
+export declare const Heading: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: HeadingProps<E>) => JSX.Element)>;

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

@@ -30,13 +30,18 @@ exports.Heading = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
 const defaultElement = 'div';
-function Heading(props) {
-    const { children, className, size, decoration, ...restProps } = props;
+exports.Heading = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { children, className, prefixCls = config.prefixCls, size, decoration, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'heading'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
-            [`uk-heading-${decoration}`]: decoration !== undefined,
-            [`uk-heading-${size}`]: size !== undefined,
-        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? (React.createElement("span", null, children)) : children));
+            [`${rootCls}-${decoration}`]: decoration !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? React.createElement("span", null, children) : children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Heading.displayName = 'Heading';
 }
-exports.Heading = Heading;

package/dist/cjs/components/Icon/Button.d.ts

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