@broxus/react-uikit 0.1.3 → 0.2.0

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

@@ -1,18 +1,65 @@
 import type * as React from 'react';
-export declare type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
-export declare type NavModifier = 'default' | 'primary' | 'center' | 'divider';
-export declare type BuiltinPlacements = Record<string, any>;
-export declare type TriggerSubMenuAction = 'click' | 'hover';
+export type NavRef = {
+    /**
+     * Focus active child if any, or the first child which is not disabled will be focused.
+     * @param {FocusOptions} [options]
+     */
+    focus: (options?: FocusOptions) => void;
+    list: HTMLUListElement | null;
+};
+interface ItemSharedProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SubNavType extends ItemSharedProps {
+    label?: React.ReactNode;
+    children: ItemType[];
+    disabled?: boolean;
+    key: string;
+    rootClassName?: string;
+    itemIcon?: RenderIconType;
+    expandIcon?: RenderIconType;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+    popupClassName?: string;
+    popupOffset?: number[];
+    onClick?: NavClickEventHandler;
+    onTitleClick?: (info: NavTitleInfo) => void;
+    onTitleMouseEnter?: NavHoverEventHandler;
+    onTitleMouseLeave?: NavHoverEventHandler;
+}
+export interface NavItemType extends ItemSharedProps {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    itemIcon?: RenderIconType;
+    key: React.Key;
+    onMouseEnter?: NavHoverEventHandler;
+    onMouseLeave?: NavHoverEventHandler;
+    onClick?: NavClickEventHandler;
+}
+export interface NavItemGroupType extends ItemSharedProps {
+    type: 'group';
+    label?: React.ReactNode;
+    children?: ItemType[];
+}
+export interface NavDividerType extends ItemSharedProps {
+    type: 'divider';
+}
+export type ItemType = SubNavType | NavItemType | NavItemGroupType | NavDividerType | null;
+export type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
+export type NavModifier = 'default' | 'primary' | 'center' | 'divider';
+export type BuiltinPlacements = Record<string, any>;
+export type TriggerSubNavAction = 'click' | 'hover';
 export interface RenderIconInfo {
     disabled?: boolean;
     isOpen?: boolean;
     isSelected?: boolean;
-    isSubMenu?: boolean;
+    isSubNav?: boolean;
 }
-export declare type RenderIconType = React.ReactNode | ((props: RenderIconInfo) => React.ReactNode);
+export type RenderIconType = React.ReactNode | ((props: RenderIconInfo) => React.ReactNode);
 export interface NavInfo {
     domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-    /** @deprecated This will not support in future. You should avoid to use this */
+    /** @deprecated This will not support in the future. You should avoid to use this */
     item: React.ReactInstance;
     key: string;
     keyPath: string[];
@@ -21,12 +68,13 @@ export interface NavTitleInfo {
     domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     key: string;
 }
-export declare type NavHoverEventHandler = (info: {
+export type NavHoverEventHandler = (info: {
     domEvent: React.MouseEvent<HTMLElement>;
     key: string;
 }) => void;
 export interface SelectInfo extends NavInfo {
     selectedKeys: string[];
 }
-export declare type SelectEventHandler = (info: SelectInfo) => void;
-export declare type NavClickEventHandler = (info: NavInfo) => void;
+export type SelectEventHandler = (info: SelectInfo) => void;
+export type NavClickEventHandler = (info: NavInfo) => void;
+export {};

package/dist/cjs/components/Nav/utils/alignUtil.d.ts

@@ -1,3 +1,3 @@
-import type { AlignType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import { type AlignType, type BuildInPlacements } from 'rc-trigger/lib/interface';
 export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;

package/dist/cjs/components/Nav/utils/motionUtil.d.ts

@@ -1,2 +1,2 @@
-import type { CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from 'rc-motion';
 export declare function getMotion(mode: string, motion?: CSSMotionProps, defaultMotions?: Record<string, CSSMotionProps>): CSSMotionProps | undefined;

package/dist/cjs/components/Nav/utils/nodeUtil.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare function parseChildren(children: React.ReactNode, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+import { type ItemType } from '../../Nav/types';
+export declare function parseChildren(children: React.ReactNode | undefined, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[]): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/dist/cjs/components/Nav/utils/nodeUtil.js

@@ -26,9 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseChildren = void 0;
+exports.parseItems = exports.parseChildren = void 0;
 const React = __importStar(require("react"));
 const toArray_1 = __importDefault(require("rc-util/lib/Children/toArray"));
+const Divider_1 = require("../../Nav/Divider");
+const Group_1 = require("../../Nav/Group");
+const Item_1 = require("../../Nav/Item");
+const Sub_1 = require("../../Nav/Sub");
 function parseChildren(children, keyPath) {
     return (0, toArray_1.default)(children).map((child, index) => {
         if (React.isValidElement(child)) {
@@ -51,3 +55,36 @@ function parseChildren(children, keyPath) {
     });
 }
 exports.parseChildren = parseChildren;
+function convertItemsToNodes(list) {
+    return (list || [])
+        .map((opt, index) => {
+        if (opt && typeof opt === 'object') {
+            const { label, children, key, type, ...restProps } = opt;
+            const mergedKey = key ?? `tmp-${index}`;
+            // MenuItemGroup & SubMenuItem
+            if (children || type === 'group') {
+                if (type === 'group') {
+                    // Group
+                    return (React.createElement(Group_1.Group, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                }
+                // Sub Menu
+                return (React.createElement(Sub_1.Sub, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+            }
+            // MenuItem & Divider
+            if (type === 'divider') {
+                return React.createElement(Divider_1.Divider, { key: mergedKey, ...restProps });
+            }
+            return (React.createElement(Item_1.Item, { key: mergedKey, ...restProps }, label));
+        }
+        return null;
+    })
+        .filter(opt => opt);
+}
+function parseItems(children, items, keyPath) {
+    let childNodes = children;
+    if (items) {
+        childNodes = convertItemsToNodes(items);
+    }
+    return parseChildren(childNodes, keyPath);
+}
+exports.parseItems = parseItems;

package/dist/cjs/components/Nav/utils/warnUtil.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * `onClick` event return `info.item` which point to react node directly.
  * We should warning this since it will not work on FC.

package/dist/cjs/components/Navbar/Center.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarCenterProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
-export declare function Center<E extends React.ElementType = typeof defaultElement>(props: NavbarCenterProps<E>): JSX.Element;
-export declare namespace Center {
-    var displayName: string;
+import { type PolymorphicProps } from '../Component';
+export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
 }
-export {};
+export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarCenterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarCenterOwnProps>;
+export declare const Center: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarCenterProps<E>) => JSX.Element)>;

package/dist/cjs/components/Navbar/Center.js

@@ -30,12 +30,14 @@ exports.Center = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Center(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-center', className), component: defaultElement, ...restProps }));
-}
-exports.Center = Center;
+exports.Center = 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, 'navbar-center'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Center.displayName = 'Navbar.Center';
+    exports.Center.displayName = 'Navbar.Center';
 }

package/dist/cjs/components/Navbar/Container.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
     transparent?: boolean;
 }
-export declare type NavbarContainerProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, NavbarContainerOwnProps>;
-declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>(props: NavbarContainerProps<E>): JSX.Element;
-export declare namespace Container {
-    var displayName: string;
-}
-export {};
+export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarContainerOwnProps>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarContainerProps<E>) => JSX.Element)>;

package/dist/cjs/components/Navbar/Container.js

@@ -30,14 +30,16 @@ exports.Container = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Container(props) {
-    const { className, transparent, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-container', {
-            'uk-navbar-transparent': transparent,
+exports.Container = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${rootCls}-container`, {
+            [`${rootCls}-transparent`]: transparent,
         }, className), component: defaultElement, ...restProps }));
-}
-exports.Container = Container;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Container.displayName = 'Navbar.Container';
+    exports.Container.displayName = 'Navbar.Container';
 }

package/dist/cjs/components/Navbar/Item.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarItemProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, {
+import { type PolymorphicProps } from '../Component';
+export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
     align?: 'left' | 'right' | 'center';
-}>;
-declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>(props: NavbarItemProps<E>): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
+    prefixCls?: string;
 }
-export {};
+export type NavbarItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarItemOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarItemOwnProps>;
+export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarItemProps<E>) => JSX.Element)>;

package/dist/cjs/components/Navbar/Item.js

@@ -30,12 +30,14 @@ exports.Item = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Item(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-item', className), component: defaultElement, ...restProps }));
-}
-exports.Item = Item;
+exports.Item = 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, 'navbar-item'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'Navbar.Item';
+    exports.Item.displayName = 'Navbar.Item';
 }

package/dist/cjs/components/Navbar/Left.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarLeftProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
-export declare function Left<E extends React.ElementType = typeof defaultElement>(props: NavbarLeftProps<E>): JSX.Element;
-export declare namespace Left {
-    var displayName: string;
+import { type PolymorphicProps } from '../Component';
+export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
 }
-export {};
+export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarLeftOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarLeftOwnProps>;
+export declare const Left: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarLeftProps<E>) => JSX.Element)>;

package/dist/cjs/components/Navbar/Left.js

@@ -30,12 +30,14 @@ exports.Left = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Component_1 = require("../Component");
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const defaultElement = 'div';
-function Left(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-left', className), component: defaultElement, ...restProps }));
-}
-exports.Left = Left;
+exports.Left = 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, 'navbar'), [config, prefixCls]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${rootCls}-left`, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
-    Left.displayName = 'Navbar.Left';
+    exports.Left.displayName = 'Navbar.Left';
 }

package/dist/cjs/components/Navbar/Nav.d.ts

@@ -1,4 +1,5 @@
-import type { NavProps } from '../Nav';
+/// <reference types="react" />
+import { type NavProps } from '../Nav';
 export declare function Nav(props: NavProps): JSX.Element;
 export declare namespace Nav {
     var displayName: string;

package/dist/cjs/components/Navbar/Nav.js

@@ -29,10 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const Nav_1 = require("../Nav");
 function Nav(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)('uk-navbar-nav', className), popupPrefixCls: "uk-navbar-dropdown", ...restProps, mode: "horizontal" }));
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
+    return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)(`${rootCls}-nav`, className), popupPrefixCls: `${rootCls}-dropdown`, ...restProps, mode: "horizontal" }));
 }
 exports.Nav = Nav;
 if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/components/Navbar/Right.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarRightProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
+import { type PolymorphicProps } from '../Component';
+export type NavbarRightProps<E extends React.ElementType = React.ElementType> = PolymorphicProps<E, unknown>;
+declare const defaultElement: React.ElementType;
 export declare function Right<E extends React.ElementType = typeof defaultElement>(props: NavbarRightProps<E>): JSX.Element;
 export declare namespace Right {
     var displayName: string;

package/dist/cjs/components/Navbar/Toggle.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarToggleProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, {
+import { type PolymorphicProps } from '../Component';
+export type NavbarToggleOwnProps = {
     icon?: boolean;
-}>;
-declare const defaultElement = "div";
+};
+export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarToggleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarToggleOwnProps>;
+declare const defaultElement: React.ElementType;
 export declare function Toggle<E extends React.ElementType = typeof defaultElement>(props: NavbarToggleProps<E>): JSX.Element;
 export declare namespace Toggle {
     var displayName: string;

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { Center } from './Center';
-import { Container } from './Container';
-import { Item } from './Item';
-import { Left } from './Left';
-import { Nav } from './Nav';
-import { Right } from './Right';
-import { Toggle } from './Toggle';
-import type { NavbarProps } from './Navbar';
+import type * as React from 'react';
+import { Center } from '../Navbar/Center';
+import { Container } from '../Navbar/Container';
+import { type NavbarProps } from '../Navbar/Navbar';
+import { Item } from '../Navbar/Item';
+import { Left } from '../Navbar/Left';
+import { Nav } from '../Navbar/Nav';
+import { Right } from '../Navbar/Right';
+import { Toggle } from '../Navbar/Toggle';
 import './index.scss';
 export type { NavbarProps };
-export interface CompoundedNavbar extends React.FunctionComponent<NavbarProps> {
+export interface Navbar extends React.FunctionComponent<NavbarProps> {
     Center: typeof Center;
     Container: typeof Container;
     Item: typeof Item;
@@ -18,4 +18,4 @@ export interface CompoundedNavbar extends React.FunctionComponent<NavbarProps> {
     Right: typeof Right;
     Toggle: typeof Toggle;
 }
-export declare const Navbar: CompoundedNavbar;
+export declare const Navbar: Navbar;

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navbar = void 0;
-const Center_1 = require("./Center");
-const Container_1 = require("./Container");
-const Navbar_1 = require("./Navbar");
-const Item_1 = require("./Item");
-const Left_1 = require("./Left");
-const Nav_1 = require("./Nav");
-const Right_1 = require("./Right");
-const Toggle_1 = require("./Toggle");
+const Center_1 = require("../Navbar/Center");
+const Container_1 = require("../Navbar/Container");
+const Navbar_1 = require("../Navbar/Navbar");
+const Item_1 = require("../Navbar/Item");
+const Left_1 = require("../Navbar/Left");
+const Nav_1 = require("../Navbar/Nav");
+const Right_1 = require("../Navbar/Right");
+const Toggle_1 = require("../Navbar/Toggle");
 require("./index.scss");
 exports.Navbar = Navbar_1.Navbar;
 exports.Navbar.Center = Center_1.Center;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './index.scss';
+export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
+    prefixCls?: string;
+}
+export declare const Progress: React.MemoExoticComponent<(props: ProgressProps) => JSX.Element>;

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

@@ -0,0 +1,39 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+require("./index.scss");
+exports.Progress = 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, 'progress'), [config, prefixCls]);
+    return React.createElement("progress", { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+});

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

@@ -0,0 +1,129 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 2. Remove default style
+ * 3. Behave like a block element
+ * 4. Remove borders in Firefox and Edge
+ * 5. Set background color for progress container in Firefox, IE11 and Edge
+ * 6. Style
+ */
+
+.uk-progress {
+    /* 2 */
+    appearance: none;
+
+    /* 5 */
+    background-color: var(--progress-background);
+
+    /* 4 */
+    border: 0;
+
+    /* 3 */
+    display: block;
+    height: var(--progress-height);
+
+    /* 6 */
+    margin-bottom: var(--progress-margin-vertical);
+
+    /* 1 */
+    vertical-align: baseline;
+    width: 100%;
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress { margin-top: var(--progress-margin-vertical); }
+
+/*
+ * Remove animated circles for indeterminate state in IE11 and Edge
+ */
+
+.uk-progress:indeterminate { color: transparent; }
+
+/*
+ * Progress container
+ * 2. Remove progress bar for indeterminate state in Firefox
+ */
+
+.uk-progress::-webkit-progress-bar {
+    background-color: var(--progress-background);
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* 2 */
+.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
+
+/*
+ * Progress bar
+ * 1. Remove right border in IE11 and Edge
+ */
+
+.uk-progress::-webkit-progress-value {
+    background-color: var(--progress-bar-background);
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-moz-progress-bar {
+    background-color: var(--progress-bar-background);
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-ms-fill {
+    background-color: var(--progress-bar-background);
+
+    /* 1 */
+    border: 0;
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-progress-misc) {
+    @include hook-progress-misc;
+}
+
+// @mixin hook-progress() {}
+// @mixin hook-progress-bar() {}
+// @mixin hook-progress-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --progress-height: #{$progress-height};
+    --progress-margin-vertical: var(--global-margin);
+    --progress-background: var(--global-muted-background);
+    --progress-bar-background: var(--global-primary-background);
+}

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

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