@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/esm/components/Nav/hooks/useDirectionStyle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavContext } from '../../../components/Nav/context/NavContext';
+import { NavContext } from '../../../components/Nav/context';
 export function useDirectionStyle(level) {
     const { inlineIndent, mode, rtl } = React.useContext(NavContext);
     if (mode !== 'inline') {

package/dist/esm/components/Nav/hooks/useKeyRecords.d.ts

@@ -1,5 +1,5 @@
-export declare const OVERFLOW_KEY = "rc-menu-more";
-type KeyRecords = {
+export declare const OVERFLOW_KEY = "uk-nav-more";
+interface KeyRecords {
     getKeyPath: (eventKey: string, includeOverflow?: boolean | undefined) => string[];
     getKeys: () => string[];
     getSubPathKeys: (key: string) => Set<string>;
@@ -7,6 +7,6 @@ type KeyRecords = {
     refreshOverflowKeys: (keys: string[]) => void;
     registerPath: (key: string, keyPath: string[]) => void;
     unregisterPath: (key: string, keyPath: string[]) => void;
-};
+}
 export declare function useKeyRecords(): KeyRecords;
 export {};

package/dist/esm/components/Nav/hooks/useKeyRecords.js

@@ -1,6 +1,6 @@
-import warning from '@rc-component/util/lib/warning';
+import { warning } from '@rc-component/util';
 import * as React from 'react';
-import { nextSlice } from '../../../components/Nav/utils/timeUtil';
+import { nextSlice } from '../../../components/Nav/utils';
 import { useForceUpdate } from '../../../hooks';
 const PATH_SPLIT = '__RC_UTIL_PATH_SPLIT__';
 function getPathStr(keyPath) {
@@ -9,7 +9,7 @@ function getPathStr(keyPath) {
 function getPathKeys(keyPathStr) {
     return keyPathStr.split(PATH_SPLIT);
 }
-export const OVERFLOW_KEY = 'rc-menu-more';
+export const OVERFLOW_KEY = 'uk-nav-more';
 export function useKeyRecords() {
     const forceUpdate = useForceUpdate();
     const key2pathRef = React.useRef(new Map());

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

@@ -1,13 +1,17 @@
 import { type ActionType } from '@rc-component/trigger';
 import type * as React from 'react';
-export type NavRef = {
+import { type SubNavProps } from '../../components/Nav/Sub/InternalSubNav';
+export interface NavRef {
+    findItem: (params: {
+        key: string;
+    }) => HTMLElement | null;
     /**
      * 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;
-};
+    list?: HTMLUListElement | null;
+}
 interface ItemSharedProps {
     className?: string;
     style?: React.CSSProperties;
@@ -21,6 +25,7 @@ export interface SubNavType extends ItemSharedProps {
     label?: React.ReactNode;
     popupClassName?: string;
     popupOffset?: number[];
+    popupStyle?: React.CSSProperties;
     rootClassName?: string;
     onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
@@ -31,9 +36,11 @@ export interface SubNavType extends ItemSharedProps {
 }
 export interface NavItemType extends ItemSharedProps {
     disabled?: boolean;
+    extra?: React.ReactNode;
     itemIcon?: RenderIconType;
     key: React.Key;
     label?: React.ReactNode;
+    type?: 'item';
     onClick?: NavClickEventHandler;
     onMouseEnter?: NavHoverEventHandler;
     onMouseLeave?: NavHoverEventHandler;
@@ -78,4 +85,10 @@ export interface SelectInfo extends NavInfo {
 }
 export type SelectEventHandler = (info: SelectInfo) => void;
 export type NavClickEventHandler = (info: NavInfo) => void;
+export type NavComponentType = 'subnav' | 'item' | 'group' | 'divider';
+export type NavComponents = Partial<Record<NavComponentType, React.ComponentType<any>>>;
+export type NavPopupRender = (node: React.ReactElement, info: {
+    item: SubNavProps;
+    keys: string[];
+}) => React.ReactNode;
 export {};

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

@@ -1,3 +1,3 @@
-import { type AlignType, type BuildInPlacements } from '@rc-component/trigger/lib/interface';
+import { type AlignType, type BuildInPlacements } from '@rc-component/trigger/es/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/esm/components/Nav/utils/alignUtil.js

@@ -6,10 +6,7 @@ function isPointsEq(a1, a2, isAlignPoint) {
 }
 export function getAlignFromPlacement(builtinPlacements, placementStr, align) {
     const baseAlign = builtinPlacements[placementStr] || {};
-    return {
-        ...baseAlign,
-        ...align,
-    };
+    return { ...baseAlign, ...align };
 }
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
     const { points } = align;

package/dist/esm/components/Nav/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/utils/alignUtil';
+export * from '../../../components/Nav/utils/motionUtil';
+export * from '../../../components/Nav/utils/nodeUtil';
+export * from '../../../components/Nav/utils/timeUtil';
+export * from '../../../components/Nav/utils/warnUtil';

package/dist/esm/components/Nav/utils/index.js

@@ -0,0 +1,5 @@
+export * from '../../../components/Nav/utils/alignUtil';
+export * from '../../../components/Nav/utils/motionUtil';
+export * from '../../../components/Nav/utils/nodeUtil';
+export * from '../../../components/Nav/utils/timeUtil';
+export * from '../../../components/Nav/utils/warnUtil';

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

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

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

@@ -1,59 +1,66 @@
-import toArray from '@rc-component/util/lib/Children/toArray';
+import { toArray } from '@rc-component/util';
 import * as React from 'react';
 import { Divider } from '../../../components/Nav/Divider';
 import { Group } from '../../../components/Nav/Group';
 import { Item } from '../../../components/Nav/Item';
 import { Sub } from '../../../components/Nav/Sub';
-export function parseChildren(children, keyPath) {
-    return toArray(children).map((child, index) => {
-        if (React.isValidElement(child)) {
-            const { key } = child;
-            let eventKey = child.props?.eventKey ?? key;
-            const emptyKey = eventKey === null || eventKey === undefined;
-            if (emptyKey) {
-                eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
-            }
-            const cloneProps = {
-                eventKey,
-                key: eventKey,
-            };
-            if (process.env.NODE_ENV !== 'production' && emptyKey) {
-                cloneProps.warnKey = true;
-            }
-            return React.cloneElement(child, cloneProps);
-        }
-        return child;
-    });
-}
-function convertItemsToNodes(list) {
+function convertItemsToNodes(list, components, prefixCls) {
+    const { divider: MergedDivider, group: MergedNavGroup, item: MergedNavItem, subnav: MergedSubNav, } = components;
     return (list || [])
         .map((opt, index) => {
         if (opt && typeof opt === 'object') {
-            const { children, key, label, type, ...restProps } = opt;
+            const { children, extra, key, label, type, ...restProps } = opt;
             const mergedKey = key ?? `tmp-${index}`;
-            // MenuItemGroup & SubMenuItem
+            // NavItemGroup & SubNavItem
             if (children || type === 'group') {
                 if (type === 'group') {
                     // Group
-                    return (React.createElement(Group, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                    return (React.createElement(MergedNavGroup, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children, components, prefixCls)));
                 }
                 // Sub Menu
-                return (React.createElement(Sub, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                return (React.createElement(MergedSubNav, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children, components, prefixCls)));
             }
             // MenuItem & Divider
             if (type === 'divider') {
-                return React.createElement(Divider, { key: mergedKey, ...restProps });
+                return React.createElement(MergedDivider, { key: mergedKey, ...restProps });
             }
-            return (React.createElement(Item, { key: mergedKey, ...restProps }, label));
+            return (React.createElement(MergedNavItem, { key: mergedKey, ...restProps, extra: extra },
+                label,
+                (!!extra || extra === 0) && (React.createElement("span", { className: `${prefixCls}-item-extra` }, extra))));
         }
         return null;
     })
         .filter(opt => opt);
 }
-export function parseItems(children, items, keyPath) {
+export function parseChildren(children, keyPath) {
+    return toArray(children).map((child, index) => {
+        if (React.isValidElement(child)) {
+            const { key } = child;
+            let eventKey = child.props?.eventKey ?? key;
+            const emptyKey = eventKey === null || eventKey === undefined;
+            if (emptyKey) {
+                eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
+            }
+            const cloneProps = { eventKey, key: eventKey };
+            if (process.env.NODE_ENV !== 'production' && emptyKey) {
+                cloneProps.warnKey = true;
+            }
+            return React.cloneElement(child, cloneProps);
+        }
+        return child;
+    });
+}
+export function parseItems(children, items, keyPath, components, prefixCls) {
     let childNodes = children;
+    const mergedComponents = {
+        divider: Divider,
+        group: Group,
+        item: Item,
+        subnav: Sub,
+        ...components,
+    };
     if (items) {
-        childNodes = convertItemsToNodes(items);
+        childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
     }
     return parseChildren(childNodes, keyPath);
 }

package/dist/esm/components/Nav/utils/warnUtil.js

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

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

@@ -3,9 +3,9 @@ import { type PolymorphicProps } from '../../components/Component';
 export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarCenterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarCenterOwnProps>;
+export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = NavbarCenterOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarCenterOwnProps>;
 declare const defaultElement = "div";
-export declare function Center<E extends React.ElementType = typeof defaultElement>(props: NavbarCenterProps<E>): React.JSX.Element;
+export declare function Center<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarCenterProps<E>>): React.ReactElement;
 export declare namespace Center {
     var displayName: string;
 }

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

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Center(props) {
+export function Center({ className, component = defaultElement, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-center'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Center.displayName = 'Navbar.Center';

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

@@ -4,9 +4,9 @@ export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElemen
     prefixCls?: string;
     transparent?: boolean;
 }
-export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarContainerOwnProps>;
+export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = NavbarContainerOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarContainerOwnProps>;
 declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>(props: NavbarContainerProps<E>): React.JSX.Element;
+export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, transparent, ...props }: React.PropsWithChildren<NavbarContainerProps<E>>): React.ReactElement;
 export declare namespace Container {
     var displayName: string;
 }

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

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Container(props) {
+export function Container({ className, component = defaultElement, transparent, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(`${rootCls}-container`, {
             [`${rootCls}-transparent`]: transparent,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Container.displayName = 'Navbar.Container';

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

@@ -4,9 +4,9 @@ export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
     align?: 'left' | 'right' | 'center';
     prefixCls?: string;
 }
-export type NavbarItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarItemOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarItemOwnProps>;
+export type NavbarItemProps<E extends React.ElementType = React.ElementType> = NavbarItemOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarItemOwnProps>;
 declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>(props: NavbarItemProps<E>): React.JSX.Element;
+export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarItemProps<E>>): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

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

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Item(props) {
+export function Item({ className, component = defaultElement, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-item'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Navbar.Item';

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

@@ -3,9 +3,9 @@ import { type PolymorphicProps } from '../../components/Component';
 export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarLeftOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarLeftOwnProps>;
+export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = NavbarLeftOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarLeftOwnProps>;
 declare const defaultElement = "div";
-export declare function Left<E extends React.ElementType = typeof defaultElement>(props: NavbarLeftProps<E>): React.JSX.Element;
+export declare function Left<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarLeftProps<E>>): React.ReactElement;
 export declare namespace Left {
     var displayName: string;
 }

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

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Left(props) {
+export function Left({ className, component = defaultElement, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-left'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component, { className: classNames(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Left.displayName = 'Navbar.Left';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type NavProps } from '../../components/Nav';
-export declare function Nav(props: NavProps): React.JSX.Element;
+export declare function Nav({ className, ...props }: NavProps): React.JSX.Element;
 export declare namespace Nav {
     var displayName: string;
 }

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

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Nav as BaseNav } from '../../components/Nav';
-export function Nav(props) {
+export function Nav({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement(BaseNav, { className: classNames(`${rootCls}-nav`, className), mode: "horizontal", popupPrefixCls: `${rootCls}-dropdown`, ...restProps }));
 }

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

@@ -4,4 +4,4 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
     transparent?: boolean;
 }
-export declare function Navbar(props: NavbarProps): React.JSX.Element;
+export declare function Navbar({ asContainer, className, transparent, ...props }: NavbarProps): React.ReactElement;

package/dist/esm/components/Navbar/Navbar.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Navbar(props) {
+export function Navbar({ asContainer, className, transparent, ...props }) {
     const config = useConfig();
-    const { asContainer, className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement("nav", { className: classNames(rootCls, {
             [`${rootCls}-container`]: asContainer,

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

@@ -3,9 +3,9 @@ import { type PolymorphicProps } from '../../components/Component';
 export interface NavbarRightOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export type NavbarRightProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarRightOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarRightOwnProps>;
+export type NavbarRightProps<E extends React.ElementType = React.ElementType> = NavbarRightOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarRightOwnProps>;
 declare const defaultElement = "div";
-export declare function Right<E extends React.ElementType = typeof defaultElement>(props: NavbarRightProps<E>): React.JSX.Element;
+export declare function Right<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarRightProps<E>>): React.ReactElement;
 export declare namespace Right {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Right.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Right(props) {
+export function Right({ className, component = defaultElement, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
-    return React.createElement(Component, { className: classNames(`${rootCls}-right`, className), component: defaultElement, ...restProps });
+    return (React.createElement(Component, { className: classNames(`${rootCls}-right`, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Right.displayName = 'Navbar.Right';

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

@@ -4,9 +4,9 @@ export type NavbarToggleOwnProps = {
     icon?: boolean;
     prefixCls?: string;
 };
-export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarToggleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarToggleOwnProps>;
+export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = NavbarToggleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarToggleOwnProps>;
 declare const defaultElement = "div";
-export declare function Toggle<E extends React.ElementType = typeof defaultElement>(props: NavbarToggleProps<E>): React.JSX.Element;
+export declare function Toggle<E extends React.ElementType = typeof defaultElement>({ className, component, icon, ...props }: React.PropsWithChildren<NavbarToggleProps<E>>): React.ReactElement;
 export declare namespace Toggle {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Toggle.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Toggle(props) {
+export function Toggle({ className, component = defaultElement, icon, ...props }) {
     const config = useConfig();
-    const { className, icon, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-toggle'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-icon`]: icon,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Toggle.displayName = 'Navbar.Toggle';

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

@@ -8,5 +8,5 @@ export interface OverlayOwnProps {
 }
 export type OverlayProps<E extends React.ElementType = React.ElementType> = OverlayOwnProps & PolymorphicProps<E> & PolymorphicProps<E, OverlayOwnProps>;
 declare const defaultElement = "div";
-export declare function Overlay<E extends React.ElementType = typeof defaultElement>(props: React.PropsWithChildren<OverlayProps<E>>): React.JSX.Element;
+export declare function Overlay<E extends React.ElementType = typeof defaultElement>({ className, component, icon, position, type, ...props }: React.PropsWithChildren<OverlayProps<E>>): React.ReactElement;
 export {};

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

@@ -15,14 +15,14 @@ const positions = [
     'center',
     'cover',
 ];
-export function Overlay(props) {
+export function Overlay({ className, component = defaultElement, icon, position = 'bottom', type = 'default', ...props }) {
     const config = useConfig();
-    const { className, icon, position = 'bottom', prefixCls = config.prefixCls, type = 'default', ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'overlay'), [config, prefixCls]);
     const positionRootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'position'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${positionRootCls}-${position}`]: position && positions.includes(position),
             [`${rootCls}-${type}`]: type && ['default', 'primary'].includes(type),
             [`${rootCls}-icon`]: icon,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }
-export declare function Progress(props: ProgressProps): React.JSX.Element;
+export declare function Progress({ className, ...props }: ProgressProps): React.ReactElement;

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

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Progress(props) {
+export function Progress({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'progress'), [config, prefixCls]);
     return React.createElement("progress", { className: classNames(rootCls, className), ...restProps });
 }

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

@@ -5,7 +5,7 @@ export interface SectionOwnProps {
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
 }
-export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
+export type SectionProps<E extends React.ElementType = React.ElementType> = SectionOwnProps & PolymorphicProps<E> & PolymorphicProps<E, SectionOwnProps>;
 declare const defaultElement = "section";
-export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): React.JSX.Element;
+export declare function Section<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<SectionProps<E>>): React.ReactElement;
 export {};

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

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'section';
-export function Section(props) {
+export function Section({ className, component = defaultElement, kind, preserveColor, size, ...props }) {
     const config = useConfig();
-    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
             [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

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

@@ -16,4 +16,4 @@ export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RcSeg
     size?: SizeType;
     vertical?: boolean;
 }
-export declare function Segmented<ValueType = RcSegmentedValue>(props: SegmentedProps<ValueType>): React.JSX.Element;
+export declare function Segmented<ValueType = RcSegmentedValue>({ className, options, size, vertical, ...props }: SegmentedProps<ValueType>): React.ReactElement;

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

@@ -5,9 +5,9 @@ import { useConfig } from '../../components/ConfigProvider';
 function isSegmentedLabeledOptionWithIcon(option) {
     return typeof option === 'object' && !!option?.icon;
 }
-export function Segmented(props) {
+export function Segmented({ className, options = [], size, vertical, ...props }) {
     const config = useConfig();
-    const { className, options = [], prefixCls = config.prefixCls, size, vertical, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'segmented'), [config, prefixCls]);
     const mergedOptions = React.useMemo(() => options.map(option => {
         // @ts-ignore bla bla ts

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

@@ -0,0 +1,3 @@
+import { type SliderProps, type SliderRef } from '@rc-component/slider';
+import * as React from 'react';
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;

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

@@ -0,0 +1,10 @@
+import RcSlider from '@rc-component/slider';
+import classNames from 'classnames';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
+export const Slider = React.forwardRef(({ className, ...props }, ref) => {
+    const config = useConfig();
+    const { prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'slider'), [config, prefixCls]);
+    return (React.createElement(RcSlider, { ref: ref, className: classNames(rootCls, {}, className), prefixCls: rootCls, ...restProps }));
+});

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

@@ -3,4 +3,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner(props: SpinnerProps): React.JSX.Element;
+export declare function Spinner({ className, ratio, ...props }: SpinnerProps): React.ReactElement;

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

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { defaultSvgProps, getSize } from '../../components/Icon';
-export function Spinner(props) {
+export function Spinner({ className, ratio, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     return (React.createElement("div", { className: classNames([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), role: "status", ...restProps },
         React.createElement("svg", { ...defaultSvgProps, ...getSize(20, 20, ratio), viewBox: "0 0 30 30" },
             React.createElement("circle", { cx: 15, cy: 15, fill: "none", r: 13, stroke: "currentColor", style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));

package/dist/esm/components/Subnav/Item.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 type Props = React.LiHTMLAttributes<HTMLLIElement>;
-export declare function Item(props: Props): React.JSX.Element;
+export declare function Item(props: Props): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }