@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -30,14 +30,16 @@ exports.Section = 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 = 'section';
-function Section(props) {
-    const { className, color, preserveColor, size, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-section', {
-            [`uk-section-${size}`]: size !== undefined,
-            [`uk-section-${color}`]: color !== undefined,
-            'uk-preserve-color': preserveColor,
+exports.Section = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, color, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
-}
-exports.Section = Section;
+});

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './index.scss';
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner(props: Props): JSX.Element;
-export {};
+export declare function Spinner(props: SpinnerProps): JSX.Element;

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

@@ -29,15 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const Icon_1 = require("../Icon");
 require("./index.scss");
 function Spinner(props) {
-    const { className, ratio, ...restProps } = props;
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
     return (React.createElement("span", { className: (0, classnames_1.default)([
-            'uk-spinner',
-            'uk-icon',
+            `${prefixCls || config.prefixCls}-spinner`,
+            `${prefixCls || config.prefixCls}-icon`,
         ], className), ...restProps },
-        React.createElement("svg", { ...Icon_1.defaultProps, ...(0, Icon_1.getSize)(20, 20, ratio), viewBox: "0 0 30 30" },
-            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: "15", cy: "15", r: "14" }))));
+        React.createElement("svg", { ...Icon_1.defaultSvgProps, ...(0, Icon_1.getSize)(20, 20, ratio), viewBox: "0 0 30 30" },
+            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 15, cy: 15, r: 14 }))));
 }
 exports.Spinner = Spinner;

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import { TabPane } from 'rc-tabs';
-import type { TabPaneProps, TabsProps } from 'rc-tabs';
+import { type TabsProps as RcTabsProps } from 'rc-tabs';
+import { type Tab, type TabPosition as TabsPosition } from 'rc-tabs/lib/interface';
 import './index.scss';
-export type { TabPaneProps };
-export declare type TabType = 'line' | 'card' | 'editable-card';
-export declare type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
-export interface TabProps extends Exclude<TabsProps, 'editable'> {
+export { type Tab };
+export type TabType = 'line' | 'card' | 'editable-card';
+export { type TabsPosition };
+export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
     hideAdd?: boolean;
-    prefixCls?: string;
     size?: string;
     type?: TabType;
     onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare function Tabs(props: TabProps): JSX.Element;
-export declare namespace Tabs {
-    var Pane: typeof TabPane;
-}
+export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => JSX.Element>;

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

@@ -29,16 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const rc_tabs_1 = __importStar(require("rc-tabs"));
+const rc_tabs_1 = __importDefault(require("rc-tabs"));
 const ConfrigProvider_1 = require("../ConfrigProvider");
-require("./index.scss");
 const Icon_1 = require("../Icon");
-function Tabs(props) {
+const utils_1 = require("../../utils");
+require("./index.scss");
+exports.Tabs = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
-    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = `${config.prefixCls}-tabs`, size, type, onEdit, ...restProps } = props;
-    let editable;
-    if (type === 'editable-card') {
-        editable = {
+    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
+    const editable = React.useMemo(() => type === 'editable-card'
+        ? {
             addIcon: addIcon || React.createElement(Icon_1.Icon, { icon: "add" }),
             removeIcon: React.createElement(Icon_1.Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
@@ -47,14 +48,12 @@ function Tabs(props) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
-        };
-    }
-    return (React.createElement(rc_tabs_1.default, { direction: direction, moreTransitionName: `${config.prefixCls}-motion-slide-up`, ...restProps, className: (0, classnames_1.default)({
-            [`${prefixCls}-${size}`]: size,
-            [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
-            [`${prefixCls}-editable-card`]: type === 'editable-card',
-            [`${prefixCls}-centered`]: centered,
-        }, className), editable: editable, moreIcon: moreIcon, prefixCls: prefixCls }));
-}
-exports.Tabs = Tabs;
-Tabs.Pane = rc_tabs_1.TabPane;
+        }
+        : undefined, [addIcon, hideAdd, onEdit, type]);
+    return (React.createElement(rc_tabs_1.default, { direction: direction, moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
+            [`${rootCls}-${size}`]: size,
+            [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${rootCls}-editable-card`]: type === 'editable-card',
+            [`${rootCls}-centered`]: centered,
+        }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
+});

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

@@ -223,6 +223,14 @@
 }
 
 
+/* Tabpane
+ ========================================================================== */
+
+.uk-tabs-tabpane-hidden {
+    display: none;
+}
+
+
 /* Card modifier
  ========================================================================== */
 
@@ -628,12 +636,12 @@
 }
 
 .uk-tabs-dropdown-rtl { direction: rtl; }
+
 .uk-tabs-dropdown-rtl .uk-tabs-dropdown-menu-item {
     text-align: right;
 }
 
 
-
 // Ink Bar
 // ========================================================================
 

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { BreakpointsConfig } from '../../types';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
-export declare type TextOwnProps = {
+import { type PolymorphicProps } from '../Component';
+import { type BreakpointsConfig } from '../../types';
+export type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
     color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
@@ -10,13 +10,12 @@ export declare type TextOwnProps = {
     decoration?: 'none';
     dropcap?: boolean;
     italic?: boolean;
+    prefixCls?: string;
     size?: 'default' | 'small' | 'medium' | 'large' | 'lead';
     transform?: 'capitalize' | 'uppercase' | 'lowercase';
     verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
     weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';
     wrap?: 'truncate' | 'break' | 'nowrap';
 };
-export declare type TextProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, TextOwnProps>;
-declare const defaultElement = "p";
-export declare function Text<E extends React.ElementType = typeof defaultElement>(props: TextProps<E>): JSX.Element;
-export {};
+export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
+export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => JSX.Element)>;

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

@@ -29,27 +29,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../../utils");
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+const utils_1 = require("../../utils");
 const defaultElement = 'p';
-function Text(props) {
-    const { align, className, color, column, decoration, dropcap, italic, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
-    const alignClassName = React.useMemo(() => (typeof align === 'string'
-        ? `uk-text-${align}`
-        : (0, utils_1.getBreakpointsConfigClasses)('uk', 'align', align)), [align]);
-    const columnClassName = React.useMemo(() => (typeof column === 'number'
-        ? `uk-column-1-${column}`
-        : (0, utils_1.getBreakpointsConfigClasses)('uk', 'column-1', column)), [column]);
+exports.Text = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
+    const alignClassName = React.useMemo(() => typeof align === 'string'
+        ? `${rootCls}-${align}`
+        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'align', align), [align, config.prefixCls, prefixCls, rootCls]);
+    const columnClassName = React.useMemo(() => typeof column === 'number'
+        ? `${prefixCls || config.prefixCls}-column-1-${column}`
+        : (0, utils_1.getBreakpointsConfigClasses)(prefixCls || config.prefixCls, 'column-1', column), [column, config.prefixCls, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(columnClassName, alignClassName, {
-            'uk-dropcap': dropcap,
-            [`uk-text-${color}`]: color !== undefined,
-            [`uk-text-${size}`]: size !== undefined,
-            [`uk-text-${transform}`]: transform !== undefined,
-            [`uk-text-${verticalAlign}`]: verticalAlign !== undefined,
-            [`uk-text-${weight}`]: weight !== undefined,
-            [`uk-text-${wrap}`]: wrap !== undefined,
-            'uk-text-decoration-none': decoration === 'none',
-            'uk-text-italic': italic,
+            [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${transform}`]: transform !== undefined,
+            [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,
+            [`${rootCls}-${weight}`]: weight !== undefined,
+            [`${rootCls}-${wrap}`]: wrap !== undefined,
+            [`${rootCls}-decoration-none`]: decoration === 'none',
+            [`${rootCls}-italic`]: italic,
         }, className), component: defaultElement, ...restProps }));
-}
-exports.Text = Text;
+});

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type TileOwnProps = {
+export type TileOwnProps = {
+    prefixCls?: string;
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
     type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
 };
-export declare type TileProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, TileOwnProps>;
-declare const defaultElement = "div";
-export declare function Tile<E extends React.ElementType = typeof defaultElement>(props: TileProps<E>): JSX.Element;
-export {};
+export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
+export declare const Tile: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: TileProps<E>) => JSX.Element)>;

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

@@ -30,14 +30,16 @@ exports.Tile = 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 Tile(props) {
-    const { className, preserveColor, size, type, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-tile', {
-            [`uk-tile-${size}`]: size !== undefined,
-            [`uk-tile-${type}`]: type !== undefined,
-            'uk-preserve-color': preserveColor,
+exports.Tile = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, preserveColor, size, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
+            [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
-}
-exports.Tile = Tile;
+});

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

@@ -30,8 +30,8 @@
 .uk-tile {
     box-sizing: border-box;
     display: flow-root;
-    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
     position: relative;
+    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
     @if mixin-exists(hook-tile) {
         @include hook-tile;
     }
@@ -40,8 +40,8 @@
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
     .uk-tile {
-        padding-left: var(--tile-padding-horizontal-s);
         padding-right: var(--tile-padding-horizontal-s);
+        padding-left: var(--tile-padding-horizontal-s);
     }
 }
 
@@ -69,8 +69,8 @@
  */
 
 .uk-tile-xsmall {
-    padding-bottom: var(--tile-xsmall-padding-vertical);
     padding-top: var(--tile-xsmall-padding-vertical);
+    padding-bottom: var(--tile-xsmall-padding-vertical);
 }
 
 /*
@@ -78,8 +78,8 @@
  */
 
 .uk-tile-small {
-    padding-bottom: var(--tile-small-padding-vertical);
     padding-top: var(--tile-small-padding-vertical);
+    padding-bottom: var(--tile-small-padding-vertical);
 }
 
 /*
@@ -87,15 +87,15 @@
  */
 
 .uk-tile-large {
-    padding-bottom: var(--tile-large-padding-vertical);
     padding-top: var(--tile-large-padding-vertical);
+    padding-bottom: var(--tile-large-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-large {
-        padding-bottom: var(--tile-large-padding-vertical-m);
         padding-top: var(--tile-large-padding-vertical-m);
+        padding-bottom: var(--tile-large-padding-vertical-m);
     }
 }
 
@@ -105,15 +105,15 @@
  */
 
 .uk-tile-xlarge {
-    padding-bottom: var(--tile-xlarge-padding-vertical);
     padding-top: var(--tile-xlarge-padding-vertical);
+    padding-bottom: var(--tile-xlarge-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-xlarge {
-        padding-bottom: var(--tile-xlarge-padding-vertical-m);
         padding-top: var(--tile-xlarge-padding-vertical-m);
+        padding-bottom: var(--tile-xlarge-padding-vertical-m);
     }
 }
 

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { WidthBreakpointsConfig, WidthSize } from './types';
+import { type PolymorphicProps } from '../Component';
+import { type WidthBreakpointsConfig, type WidthSize } from '../Width/types';
 export interface WidthOwnProps extends WidthBreakpointsConfig {
+    prefixCls?: string;
     size?: WidthSize;
 }
-export declare type WidthProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, WidthOwnProps>;
-declare const defaultElement = "div";
-export declare function Width<E extends React.ElementType = typeof defaultElement>(props: WidthProps<E>): JSX.Element;
-export {};
+export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
+export declare const Width: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: WidthProps<E>) => JSX.Element)>;

package/dist/cjs/components/Width/Width.js

@@ -30,10 +30,16 @@ exports.Width = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
-const utils_1 = require("./utils");
+const utils_1 = require("../Width/utils");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Width(props) {
-    const { className, size, s, m, l, xl, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getWidthClassname)(size, 'uk'), (0, utils_1.getWidthClassname)({ l, m, s, xl }, 'uk'), className), component: defaultElement, ...restProps }));
-}
-exports.Width = Width;
+exports.Width = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getWidthClassname)(size, prefixCls || config.prefixCls), (0, utils_1.getWidthClassname)({
+            l,
+            m,
+            s,
+            xl,
+        }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+});

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

@@ -1,4 +1,4 @@
 import './index.scss';
-export * from './Width';
-export * from './types';
-export * from './utils';
+export * from '../Width/Width';
+export * from '../Width/types';
+export * from '../Width/utils';

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

@@ -15,6 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./index.scss");
-__exportStar(require("./Width"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./utils"), exports);
+__exportStar(require("../Width/Width"), exports);
+__exportStar(require("../Width/types"), exports);
+__exportStar(require("../Width/utils"), exports);

package/dist/cjs/components/Width/types.d.ts

@@ -1,6 +1,6 @@
-import type { BreakpointsConfig } from '../../types';
-export declare type WidthSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | '1-1' | '1-2' | '1-3' | '1-4' | '1-5' | '1-6' | '2-3' | '2-5' | '3-4' | '3-5' | '4-5' | '5-6';
-export declare type BreakpointsWidthSize = Exclude<WidthSize, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
-export declare type WidthBreakpointsConfig = BreakpointsConfig<BreakpointsWidthSize>;
-export declare type ChildWidthSize = 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | 'expand';
-export declare type ChildWidthBreakpointsConfig = BreakpointsConfig<ChildWidthSize>;
+import { type BreakpointsConfig } from '../../types';
+export type WidthSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | '1-1' | '1-2' | '1-3' | '1-4' | '1-5' | '1-6' | '2-3' | '2-5' | '3-4' | '3-5' | '4-5' | '5-6';
+export type BreakpointsWidthSize = Exclude<WidthSize, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
+export type WidthBreakpointsConfig = BreakpointsConfig<BreakpointsWidthSize>;
+export type ChildWidthSize = 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | 'expand';
+export type ChildWidthBreakpointsConfig = BreakpointsConfig<ChildWidthSize>;

package/dist/cjs/components/Width/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ChildWidthBreakpointsConfig, ChildWidthSize, WidthBreakpointsConfig, WidthSize } from './types';
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../Width/types';
 export declare function getWidthClassname(value: WidthSize, prefixCls?: string): string;
 export declare function getWidthClassname(config: WidthBreakpointsConfig, prefixCl?: string): string;
 export declare function getChildWidthClassname(value: ChildWidthSize, prefixCls?: string): string;

package/dist/cjs/components/Width/utils.js

@@ -20,7 +20,9 @@ function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
         return `${prefixCls}-child-width-1-${valueOrConfig}`;
     }
     if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
-        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`);
+        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default'
+            ? `@${key}`
+            : ''}`);
     }
     return undefined;
 }

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

@@ -0,0 +1,3 @@
+export * from '../hooks/useContext';
+export * from '../hooks/useForceUpdate';
+export * from '../hooks/useMounted';

package/dist/cjs/{utils/hooks → hooks}/index.js

@@ -14,4 +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("./useForceUpdate"), exports);
+__exportStar(require("../hooks/useContext"), exports);
+__exportStar(require("../hooks/useForceUpdate"), exports);
+__exportStar(require("../hooks/useMounted"), exports);

package/dist/cjs/hooks/useContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useContext<T>(Context: React.Context<T>): NonNullable<T>;

package/dist/cjs/hooks/useContext.js

@@ -0,0 +1,35 @@
+"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.useContext = void 0;
+const React = __importStar(require("react"));
+function useContext(Context) {
+    const context = React.useContext(Context);
+    if (context == null) {
+        throw new Error(`use${Context.displayName || Context.constructor.name || 'Unknown'} must be used within a ${Context.displayName || Context.constructor.name || 'Unknown'}.Provider`);
+    }
+    return context;
+}
+exports.useContext = useContext;

package/dist/cjs/hooks/useMounted.d.ts

@@ -0,0 +1 @@
+export declare function useMounted(): boolean;

package/dist/cjs/hooks/useMounted.js

@@ -0,0 +1,38 @@
+"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.useMounted = void 0;
+const React = __importStar(require("react"));
+function useMounted() {
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return mounted.current;
+}
+exports.useMounted = useMounted;